chore(console): simple onboarding flow (#152)

* chore(simple onboarding): remove overview from nav * chore(simple onboarding): basic consume instructions * chore(simple onboarding): api key in instructions * feat(console): correct docs link, render variables * chore(console): rename "Consume" to "How to Consume" --------- Co-authored-by: Ariel Weinberger <[email protected]>
pezzolabs · Aug 1, 2023 · a85e306 · a85e306
1 parent 79cacdf
commit a85e306
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 54 deletions.
diff --git a/apps/console/src/app/app.tsx b/apps/console/src/app/app.tsx
@@ -178,7 +178,7 @@ export function App() {
                     <Route
                       index
                       path={paths["/projects/:projectId/"]}
-                      element={<ProjectPage />}
+                      element={<PromptsPage />}
                     />
                     <Route
                       path={"/projects/:projectId/overview"}

diff --git a/...console/src/app/components/getting-started-wizard/TypeScriptOpenAIIntegrationTutorial.tsx b/...console/src/app/components/getting-started-wizard/TypeScriptOpenAIIntegrationTutorial.tsx
@@ -1,22 +1,34 @@
-import { Typography } from "antd";
+import { Alert, Typography } from "antd";
 import { HighlightCode } from "./HighlightCode";
 import { useCurrentProject } from "../../lib/hooks/useCurrentProject";
 import styled from "@emotion/styled";
-import {
-  Usage,
-  useGettingStartedWizard,
-} from "../../lib/providers/GettingStartedWizardProvider";
+import { useCurrentPrompt } from "../../lib/providers/CurrentPromptContext";
+import { usePromptVersionEditorContext } from "../../lib/providers/PromptVersionEditorContext";
+import { usePezzoApiKeys } from "../../graphql/hooks/queries";
 
 const StyledPre = styled.pre`
   background: #000;
   border-radius: 8px;
   padding: 14px;
 `;
 
+const getVariablesString = (variables: string[]) => {
+  if (!variables.length) return "";
+  const varStrings = variables.map((v) => `    "${v}": "value"`).join(",\n");
+  return `, {
+  variables: {
+${varStrings}
+  }
+}`;
+};
+
 export const TypeScriptOpenAIIntegrationTutorial = () => {
-  const { project } = useCurrentProject();
-  const { usage } = useGettingStartedWizard();
+  const { variables } = usePromptVersionEditorContext();
+  const { prompt } = useCurrentPrompt();
+  const { data: pezzoApiKeysData } = usePezzoApiKeys();
+  const API_KEY = pezzoApiKeysData?.apiKeys[0].id;
 
+  const { project } = useCurrentProject();
   const codeSetupClients = `import { Pezzo, PezzoOpenAIApi } from "@pezzo/client";
 import { Configuration } from "openai";
 
@@ -27,7 +39,7 @@ const configuration = new Configuration({
 
 // Initialize the Pezzo client
 export const pezzo = new Pezzo({
-  apiKey: "<YOUR_PEZZO_API_KEY>", // Can be found in your organization page
+  apiKey: "${API_KEY}",
   projectId: "${project.id}",
   environment: "Production", // Your desired environment
 });
@@ -36,69 +48,72 @@ export const pezzo = new Pezzo({
 const openai = new PezzoOpenAIApi(pezzo, configuration);
 `;
 
+  const variablesString = getVariablesString(variables);
+
   const codeWithPromptManagement = `${codeSetupClients}
 // Fetch the prompt payload from Pezzo
-const prompt = await pezzo.getOpenAIPrompt("<PROMPT_NAME>", {
-  variables: { ... }, // If your prompt has variables, you can pass them here
-});
-
-// Retrieve the settings for the chat completion
-const settings = prompt.getChatCompletionSettings();
+const prompt = await pezzo.getPrompt("${prompt.name}");
 
 // Use the OpenAI API as you normally would
-const response = await openai.createChatCompletion(settings);
+const result = await openai.createChatCompletion(prompt${variablesString});
 `;
 
-  const codeObservabilityOnly = `${codeSetupClients}
-// Use the OpenAI API as you normally would
-const response = await openai.createChatCompletion({ ... });
-  `;
-
-  const code =
-    usage === Usage.ObservabilityAndPromptManagement
-      ? codeWithPromptManagement
-      : codeObservabilityOnly;
-
   return (
     <>
-      {usage === Usage.ObservabilityAndPromptManagement && (
-        <>
-          <Typography.Title level={3}>
-            Create and publish a prompt
-          </Typography.Title>
-          <Typography.Paragraph>
-            Create your first prompt and publish it to your desired environment.
-            <br />
-            Not sure how to start? Follow the{" "}
+      <Typography.Title level={3}>Want to know more?</Typography.Title>
+
+      <Alert
+        showIcon
+        type="info"
+        message="Need some more help?"
+        description={
+          <Typography.Paragraph style={{ marginBottom: 0 }}>
+            Check out the{" "}
             <a
-              href="https://docs.pezzo.ai/docs/tutorial/prompt-engineering"
+              href="https://docs.pezzo.ai/client/integrations/openai"
               target="_blank"
               rel="noreferrer"
             >
-              tutorial on our documentation site
-            </a>
-            .
+              Using OpenAI With Pezzo
+            </a>{" "}
+            page on our documentation to learn more.
           </Typography.Paragraph>
-        </>
-      )}
+        }
+        style={{ marginBottom: 12 }}
+      />
 
       <Typography.Title level={3}>Installation</Typography.Title>
       <Typography.Paragraph>
         Pezzo provides a fully-typed NPM package for integration with TypeScript
-        projects. server.
+        projects.
       </Typography.Paragraph>
       <StyledPre>
-        <code>{`npm install openai @pezzo/client`}</code>
+        <code>{"npm install @pezzo/client openai"}</code>
       </StyledPre>
       <Typography.Title level={3} style={{ marginTop: 24 }}>
         Usage
       </Typography.Title>
       <Typography.Paragraph>
-        {usage === Usage.Observability
-          ? "Initialize the OpenAI client as shown below, and consume the OpenAI API as you normally would. As soon as you interact with OpenAI, your requests will be available in the Requests view."
-          : "Managing your prompts with Pezzo is easy. You will fetch the prompt payload from Pezzo, and then pass it to the OpenAI client as an argument. As soon as you interact with OpenAI, your requests will be available in the Requests view."}
+        Managing your prompts with Pezzo is easy. You will fetch the prompt
+        payload from Pezzo, and then pass it to the OpenAI client as an
+        argument. As soon as you interact with OpenAI, your requests will be
+        available in the Requests view.
+      </Typography.Paragraph>
+      <HighlightCode code={codeWithPromptManagement} />
+
+      <Typography.Paragraph>
+        In addition to vriables, you can also provide{" "}
+        <strong>custom properties</strong> when executing prompts. These
+        properties will be available in the Requests view.{" "}
+        <a
+          href="https://docs.pezzo.ai/client/integrations/openai#custom-properties"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Read more about Properties in the Pezzo Documentation
+        </a>
+        .
       </Typography.Paragraph>
-      <HighlightCode code={code} />
     </>
   );
 };
diff --git a/apps/console/src/app/components/layout/SideNavigation.tsx b/apps/console/src/app/components/layout/SideNavigation.tsx
@@ -13,11 +13,6 @@ import { colors } from "../../lib/theme/colors";
 import { useCurrentProject } from "../../lib/hooks/useCurrentProject";
 
 const topMenuItems = [
-  {
-    key: "overview",
-    label: "Overview",
-    icon: <ChartBarIcon height={18} />,
-  },
   {
     key: "prompts",
     label: "Prompts",
@@ -78,8 +73,8 @@ export const SideNavigation = () => {
     <SidebarContainer>
       <TopMenu
         onClick={handleTopMenuClick}
-        defaultSelectedKeys={["overview"]}
-        selectedKeys={selectedKeys.length ? selectedKeys : ["overview"]}
+        defaultSelectedKeys={["prompts"]}
+        selectedKeys={selectedKeys.length ? selectedKeys : ["prompts"]}
         items={topMenuItems}
       />
     </SidebarContainer>

diff --git a/apps/console/src/app/components/prompts/ConsumePromptModal.tsx b/apps/console/src/app/components/prompts/ConsumePromptModal.tsx
@@ -0,0 +1,15 @@
+import { Modal } from "antd";
+import { TypeScriptOpenAIIntegrationTutorial } from "../getting-started-wizard";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const ConsumePromptModal = ({ open, onClose }: Props) => {
+  return (
+    <Modal width={800} open={open} onCancel={onClose} footer={false}>
+      <TypeScriptOpenAIIntegrationTutorial />
+    </Modal>
+  );
+};
diff --git a/apps/console/src/app/components/prompts/views/PromptEditView.tsx b/apps/console/src/app/components/prompts/views/PromptEditView.tsx
@@ -13,6 +13,7 @@ import { CommitPromptModal } from "../CommitPromptModal";
 import { PublishPromptModal } from "../PublishPromptModal";
 import { useState } from "react";
 import {
+  CodeOutlined,
   InfoCircleFilled,
   InfoCircleOutlined,
   PlayCircleOutlined,
@@ -28,6 +29,7 @@ import { ProviderSettingsCard } from "../editor/ProviderSettingsCard";
 import { FunctionsFormModal } from "../FormModal";
 import { InlineCodeSnippet } from "../../common/InlineCodeSnippet";
 import { colors } from "../../../lib/theme/colors";
+import { ConsumePromptModal } from "../ConsumePromptModal";
 
 const FUNCTIONS_FEATURE_FLAG = true;
 
@@ -37,6 +39,8 @@ export const PromptEditView = () => {
     usePromptVersionEditorContext();
 
   const [isCommitModalOpen, setIsCommitModalOpen] = useState(false);
+  const [isConsumePromptModalOpen, setIsConsumePromptModalOpen] =
+    useState(false);
   const [isPublishModalOpen, setIsPublishModalOpen] = useState(false);
   const [isFunctionsModalOpen, setIsFunctionsModalOpen] = useState(false);
 
@@ -51,6 +55,14 @@ export const PromptEditView = () => {
               style={{ display: "flex", justifyContent: "flex-end" }}
             >
               <Space>
+                {isPublishEnabled && (
+                  <Button
+                    onClick={() => setIsConsumePromptModalOpen(true)}
+                    icon={<CodeOutlined />}
+                  >
+                    How to Consume
+                  </Button>
+                )}
                 {isPublishEnabled && (
                   <Button
                     onClick={() => setIsPublishModalOpen(true)}
@@ -108,6 +120,11 @@ export const PromptEditView = () => {
           </Col>
         </Row>
 
+        <ConsumePromptModal
+          open={isConsumePromptModalOpen}
+          onClose={() => setIsConsumePromptModalOpen(false)}
+        />
+
         <CommitPromptModal
           open={isCommitModalOpen}
           onClose={() => setIsCommitModalOpen(false)}