feat(prompts): Implement prompts as code examples beneath prompt (#5843)

* feat(prompts): Implement prompts as code examples beneath prompt

- python prompts as code
- typescript prompts as code

* Implement typescript language formatter for prompts

* Align emitted code with openai documentation sample code

* Minor UX tweaks wrt code blocks and version details page

* Reduce tab size, update prompt mock data

* Make code card collapsible

* Make prompt code snippets conform to new schemas

* Tweak comment

* Refactor templates into lodash templates

app/src/components/code/PythonBlock.tsx

@@ -24,7 +24,7 @@ export function PythonBlock(props: PythonBlockProps) {
       {...props}
       basicSetup={{
         lineNumbers: false,
-        foldGutter: false,
+        foldGutter: true,
         bracketMatching: true,
         syntaxHighlighting: true,
         highlightActiveLine: false,

app/src/pages/prompt/PromptCodeExportCard.tsx

@@ -0,0 +1,89 @@
+import React, { useMemo, useState } from "react";
+import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
+
+import { Accordion, AccordionItem, Card } from "@arizeai/components";
+
+import { CopyToClipboardButton, Flex, View } from "@phoenix/components";
+import {
+  CodeLanguage,
+  CodeLanguageRadioGroup,
+  PythonBlock,
+  TypeScriptBlock,
+} from "@phoenix/components/code";
+
+import { PromptCodeExportCard__main$key } from "./__generated__/PromptCodeExportCard__main.graphql";
+import { mapPromptToSnippet } from "./promptCodeSnippets";
+
+export function PromptCodeExportCard({
+  promptVersion,
+}: {
+  promptVersion: PromptCodeExportCard__main$key;
+}) {
+  const [language, setLanguage] = useState<CodeLanguage>("Python");
+  const data = useFragment<PromptCodeExportCard__main$key>(
+    graphql`
+      fragment PromptCodeExportCard__main on PromptVersion {
+        invocationParameters
+        modelName
+        modelProvider
+        outputSchema {
+          schema
+        }
+        tools {
+          definition
+        }
+        template {
+          __typename
+          ... on PromptChatTemplate {
+            messages {
+              ... on JSONPromptMessage {
+                role
+                jsonContent: content
+              }
+              ... on TextPromptMessage {
+                role
+                content
+              }
+            }
+          }
+          ... on PromptStringTemplate {
+            template
+          }
+        }
+        templateFormat
+        templateType
+      }
+    `,
+    promptVersion
+  );
+  const snippet = useMemo(
+    () => mapPromptToSnippet({ promptVersion: data, language }),
+    [data, language]
+  );
+  return (
+    <Card
+      title="Code"
+      variant="compact"
+      bodyStyle={{ padding: 0 }}
+      extra={
+        <Flex gap="size-100">
+          <CodeLanguageRadioGroup language={language} onChange={setLanguage} />
+          <CopyToClipboardButton text={snippet} />
+        </Flex>
+      }
+    >
+      <Accordion>
+        <AccordionItem title="Snippet" id="snippet">
+          <View padding="size-100">
+            {language === "Python" ? (
+              <PythonBlock value={snippet} />
+            ) : language === "TypeScript" ? (
+              <TypeScriptBlock value={snippet} />
+            ) : null}
+          </View>
+        </AccordionItem>
+      </Accordion>
+    </Card>
+  );
+}

app/src/pages/prompt/PromptIndexPage.tsx

@@ -1,19 +1,15 @@
-import React, { useState } from "react";
+import React from "react";
 import { Heading } from "react-aria-components";
 import { graphql, useFragment } from "react-relay";
 
 import { Accordion, AccordionItem, Card } from "@arizeai/components";
 
 import { Flex, View } from "@phoenix/components";
-import {
-  CodeLanguage,
-  CodeLanguageRadioGroup,
-  PythonBlock,
-} from "@phoenix/components/code";
 
 import { PromptIndexPage__aside$key } from "./__generated__/PromptIndexPage__aside.graphql";
 import { PromptIndexPage__main$key } from "./__generated__/PromptIndexPage__main.graphql";
 import { PromptChatMessages } from "./PromptChatMessages";
+import { PromptCodeExportCard } from "./PromptCodeExportCard";
 import { PromptInvocationParameters } from "./PromptInvocationParameters";
 import { PromptLatestVersionsList } from "./PromptLatestVersionsList";
 import { usePromptIdLoader } from "./usePromptIdLoader";
@@ -28,7 +24,6 @@ export function PromptIndexPageContent({
 }: {
   prompt: PromptIndexPage__main$key;
 }) {
-  const [language, setLanguage] = useState<CodeLanguage>("Python");
   const data = useFragment<PromptIndexPage__main$key>(
     graphql`
       fragment PromptIndexPage__main on Prompt {
@@ -37,6 +32,7 @@ export function PromptIndexPageContent({
             node {
               ...PromptInvocationParameters__main
               ...PromptChatMessages__main
+              ...PromptCodeExportCard__main
             }
           }
         }
@@ -84,18 +80,7 @@ export function PromptIndexPageContent({
                 </AccordionItem>
               </Accordion>
             </Card>
-            <Card
-              title="Code"
-              variant="compact"
-              extra={
-                <CodeLanguageRadioGroup
-                  language={language}
-                  onChange={setLanguage}
-                />
-              }
-            >
-              <PythonBlock value="Hello world" />
-            </Card>
+            <PromptCodeExportCard promptVersion={latestVersion} />
           </Flex>
         </View>
       </View>

app/src/pages/prompt/PromptVersionDetailsPage.tsx

@@ -7,6 +7,7 @@ import { Flex, View } from "@phoenix/components";
 
 import { promptVersionLoaderQuery$data } from "./__generated__/promptVersionLoaderQuery.graphql";
 import { PromptChatMessages } from "./PromptChatMessages";
+import { PromptCodeExportCard } from "./PromptCodeExportCard";
 import { PromptInvocationParameters } from "./PromptInvocationParameters";
 
 export function PromptVersionDetailsPage() {
@@ -20,7 +21,7 @@ function PromptVersionDetailsPageContent({
   promptVersion: promptVersionLoaderQuery$data["promptVersion"];
 }) {
   return (
-    <View padding="size-200" width="100%">
+    <View padding="size-200" width="100%" overflow="auto">
       <Flex
         direction="column"
         gap="size-200"
@@ -45,6 +46,7 @@ function PromptVersionDetailsPageContent({
             </AccordionItem>
           </Accordion>
         </Card>
+        <PromptCodeExportCard promptVersion={promptVersion} />
       </Flex>
     </View>
   );