feat(prompts): Render prompt messages on prompt detail view

app/src/Routes.tsx

@@ -14,6 +14,7 @@ import { PromptLayout } from "./pages/prompt/PromptLayout";
 import { PromptPlaygroundPage } from "./pages/prompt/PromptPlaygroundPage";
 import { PromptVersionDetailsPage } from "./pages/prompt/PromptVersionDetailsPage";
 import { promptVersionLoader } from "./pages/prompt/promptVersionLoader";
+import { promptVersionsLoader } from "./pages/prompt/promptVersionsLoader";
 import { PromptVersionsPage } from "./pages/prompt/PromptVersionsPage";
 import { sessionLoader } from "./pages/trace/sessionLoader";
 import { SessionPage } from "./pages/trace/SessionPage";
@@ -224,7 +225,11 @@ const router = createBrowserRouter(
             >
               <Route element={<PromptLayout />}>
                 <Route index element={<PromptIndexPage />} />
-                <Route path="versions" element={<PromptVersionsPage />}>
+                <Route
+                  path="versions"
+                  loader={promptVersionsLoader}
+                  element={<PromptVersionsPage />}
+                >
                   <Route
                     path=":versionId"
                     loader={promptVersionLoader}

app/src/components/CopyToClipboardButton.tsx

@@ -21,7 +21,6 @@ export function CopyToClipboardButton({
   disabled = false,
 }: {
   text: string;
-
   size?: ButtonProps["size"];
   disabled?: boolean;
 }) {

app/src/components/templateEditor/TemplateEditor.tsx

@@ -6,6 +6,7 @@ import CodeMirror, {
   EditorView,
   ReactCodeMirrorProps,
 } from "@uiw/react-codemirror";
+import { css } from "@emotion/react";
 
 import { useTheme } from "@phoenix/contexts";
 import { assertUnreachable } from "@phoenix/typeUtils";
@@ -59,3 +60,30 @@ export const TemplateEditor = ({
     />
   );
 };
+
+export const TemplateEditorWrap = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return (
+    <div
+      css={css`
+        & .cm-content {
+          padding: var(--ac-global-dimension-size-100)
+            var(--ac-global-dimension-size-250);
+        }
+        & .cm-gutter,
+        & .cm-content {
+          min-height: 75px;
+        }
+        & .cm-line {
+          padding-left: 0;
+          padding-right: 0;
+        }
+      `}
+    >
+      {children}
+    </div>
+  );
+};

app/src/pages/playground/PlaygroundChatTemplate.tsx

@@ -30,7 +30,10 @@ import {
 import { CopyToClipboardButton } from "@phoenix/components";
 import { CodeWrap, JSONEditor } from "@phoenix/components/code";
 import { DragHandle } from "@phoenix/components/dnd/DragHandle";
-import { TemplateEditor } from "@phoenix/components/templateEditor";
+import {
+  TemplateEditor,
+  TemplateEditorWrap,
+} from "@phoenix/components/templateEditor";
 import { TemplateLanguage } from "@phoenix/components/templateEditor/types";
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 import { useChatMessageStyles } from "@phoenix/hooks/useChatMessageStyles";
@@ -262,22 +265,7 @@ function MessageEditor({
     );
   }
   return (
-    <div
-      css={css`
-        & .cm-content {
-          padding: var(--ac-global-dimension-size-100)
-            var(--ac-global-dimension-size-250);
-        }
-        & .cm-gutter,
-        & .cm-content {
-          min-height: 75px;
-        }
-        & .cm-line {
-          padding-left: 0;
-          padding-right: 0;
-        }
-      `}
-    >
+    <TemplateEditorWrap>
       <TemplateEditor
         height="100%"
         value={
@@ -296,7 +284,7 @@ function MessageEditor({
               : "What is the weather in San Francisco?"
         }
       />
-    </div>
+    </TemplateEditorWrap>
   );
 }
 

app/src/pages/prompt/ChatTemplateMessage.tsx

@@ -1,35 +1,44 @@
 import React from "react";
 
-import { Button, Card, Icon, Icons } from "@arizeai/components";
+import { Card } from "@arizeai/components";
 
+import { CopyToClipboardButton } from "@phoenix/components";
+import {
+  TemplateEditor,
+  TemplateEditorWrap,
+} from "@phoenix/components/templateEditor";
+import { TemplateLanguage } from "@phoenix/components/templateEditor/types";
 import { useChatMessageStyles } from "@phoenix/hooks/useChatMessageStyles";
 
 export type ChatTemplateMessageProps = {
   role: string;
   content: string;
+  templateFormat: TemplateLanguage;
 };
 
 /**
  * A Read-Only CodeMirror component for the chat template message
  * E.x. a system or user message template part
  */
 export function ChatTemplateMessage(props: ChatTemplateMessageProps) {
-  const { role, content } = props;
+  const { role, content, templateFormat } = props;
   const styles = useChatMessageStyles(role);
   return (
     <Card
       title={role}
       variant="compact"
       {...styles}
-      extra={
-        <Button
-          variant="default"
-          size="compact"
-          icon={<Icon svg={<Icons.ClipboardCopy />} />}
-        />
-      }
+      bodyStyle={{ padding: 0 }}
+      extra={<CopyToClipboardButton text={content} />}
     >
-      {content}
+      <TemplateEditorWrap>
+        <TemplateEditor
+          readOnly
+          height="100%"
+          value={content}
+          templateLanguage={templateFormat}
+        />
+      </TemplateEditorWrap>
     </Card>
   );
 }

app/src/pages/prompt/PromptChatMessages.tsx

@@ -0,0 +1,81 @@
+import React, { useMemo } from "react";
+import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
+
+import { Flex, Text } from "@arizeai/components";
+
+import { TemplateLanguages } from "@phoenix/components/templateEditor/constants";
+import { TemplateLanguage } from "@phoenix/components/templateEditor/types";
+
+import {
+  PromptChatMessages__main$key,
+  PromptTemplateFormat,
+} from "./__generated__/PromptChatMessages__main.graphql";
+import { ChatTemplateMessage } from "./ChatTemplateMessage";
+import { PromptChatTemplate, PromptChatTemplateSchema } from "./schemas";
+
+const convertTemplateFormat = (
+  templateFormat: PromptTemplateFormat
+): TemplateLanguage => {
+  if (templateFormat === "FSTRING") {
+    return TemplateLanguages.FString;
+  } else if (templateFormat === "MUSTACHE") {
+    return TemplateLanguages.Mustache;
+  }
+  return TemplateLanguages.NONE;
+};
+
+export function PromptChatMessages({
+  promptVersion,
+}: {
+  promptVersion: PromptChatMessages__main$key;
+}) {
+  const { template, templateType, templateFormat } = useFragment(
+    graphql`
+      fragment PromptChatMessages__main on PromptVersion {
+        template
+        templateType
+        templateFormat
+      }
+    `,
+    promptVersion
+  );
+
+  if (templateType === "STRING") {
+    return <Text>{template}</Text>;
+  }
+
+  return (
+    <ChatMessages
+      template={template}
+      templateFormat={convertTemplateFormat(templateFormat)}
+    />
+  );
+}
+
+function ChatMessages({
+  template,
+  templateFormat,
+}: {
+  template: PromptChatTemplate | unknown;
+  templateFormat: TemplateLanguage;
+}) {
+  const messages = useMemo(() => {
+    const parsedTemplate = PromptChatTemplateSchema.safeParse(template);
+    if (!parsedTemplate.success) {
+      return [];
+    }
+    return parsedTemplate.data.messages;
+  }, [template]);
+  return (
+    <Flex direction="column" gap="size-200">
+      {messages.map((message, i) => (
+        <ChatTemplateMessage
+          key={i}
+          {...message}
+          templateFormat={templateFormat}
+        />
+      ))}
+    </Flex>
+  );
+}

app/src/pages/prompt/PromptIndexPage.tsx

@@ -18,7 +18,7 @@ import {
 
 import { PromptIndexPage__aside$key } from "./__generated__/PromptIndexPage__aside.graphql";
 import { PromptIndexPage__main$key } from "./__generated__/PromptIndexPage__main.graphql";
-import { ChatTemplateMessage } from "./ChatTemplateMessage";
+import { PromptChatMessages } from "./PromptChatMessages";
 import { PromptInvocationParameters } from "./PromptInvocationParameters";
 import { usePromptIdLoader } from "./usePromptIdLoader";
 
@@ -40,6 +40,7 @@ export function PromptIndexPageContent({
           edges {
             node {
               ...PromptInvocationParameters__main
+              ...PromptChatMessages__main
             }
           }
         }
@@ -53,20 +54,22 @@ export function PromptIndexPageContent({
 
   return (
     <Flex direction="row" height="100%">
-      <View height="100%" overflow="auto" data-testid="scroll-container">
+      <View
+        height="100%"
+        overflow="auto"
+        width="100%"
+        data-testid="scroll-container"
+      >
         <View padding="size-200">
           <Flex
             direction="column"
             gap="size-200"
-            maxWidth={900}
             marginStart="auto"
             marginEnd="auto"
+            maxWidth={900}
           >
             <Card title="Prompt Template" variant="compact">
-              <Flex direction="column" gap="size-100">
-                <ChatTemplateMessage role="system" content="System message" />
-                <ChatTemplateMessage role="user" content="User message" />
-              </Flex>
+              <PromptChatMessages promptVersion={latestVersion} />
             </Card>
             <Card
               title="Model Configuration"
@@ -125,7 +128,7 @@ function PromptIndexPageAside({
   return (
     <View
       flex="none"
-      width="400px"
+      width={400}
       borderStartColor="dark"
       borderStartWidth="thin"
     >

app/src/pages/prompt/PromptInvocationParameters.tsx

@@ -61,8 +61,8 @@ export function PromptInvocationParameters({
 
   return (
     <List listSize="small">
-      {parameters.map(({ key, value }) => (
-        <ListItem key="key">
+      {parameters.map(({ key, value }, i) => (
+        <ListItem key={`${key}-${i}`}>
           <PromptInvocationParameterItem keyName={key} value={value} />
         </ListItem>
       ))}

app/src/pages/prompt/PromptVersionDetailsPage.tsx

@@ -10,6 +10,7 @@ import {
 } from "@arizeai/components";
 
 import { promptVersionLoaderQuery$data } from "./__generated__/promptVersionLoaderQuery.graphql";
+import { PromptChatMessages } from "./PromptChatMessages";
 import { PromptInvocationParameters } from "./PromptInvocationParameters";
 
 export function PromptVersionDetailsPage() {
@@ -31,6 +32,9 @@ function PromptVersionDetailsPageContent({
         marginStart="auto"
         marginEnd="auto"
       >
+        <Card title="Prompt">
+          <PromptChatMessages promptVersion={promptVersion} />
+        </Card>
         <Card
           title="Model Configuration"
           variant="compact"

app/src/pages/prompt/PromptVersionsList.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useFragment } from "react-relay";
 import { graphql } from "react-relay";
-import { useNavigate } from "react-router";
+import { useNavigate, useParams } from "react-router";
 import { css } from "@emotion/react";
 
 import { Button, Flex, Text, View } from "@arizeai/components";
@@ -26,6 +26,8 @@ const promptVersionItemCSS = css`
     width: 100%;
     justify-content: flex-start;
     padding: 0;
+    border-radius: 0;
+    border: none;
   }
 `;
 
@@ -35,10 +37,15 @@ const promptVersionItemCSS = css`
  * add /:versionId to the current path
  */
 export const PromptVersionItem = ({ version }: PromptVersionItemProps) => {
+  const { versionId } = useParams();
   const navigate = useNavigate();
+  const active = versionId === version.id;
   return (
     <div css={promptVersionItemCSS}>
-      <Button onClick={() => navigate(`${version.id}`)} variant="quiet">
+      <Button
+        onClick={() => navigate(`${version.id}`)}
+        variant={active ? "default" : "quiet"}
+      >
         <Flex width="100%" height={96} direction="row">
           <View padding="size-200">
             <Flex direction="column">
@@ -85,9 +92,11 @@ export const PromptVersionsList = ({ prompt }: PromptVersionsListProps) => {
   return (
     <View
       height="100%"
-      overflow="scroll"
+      overflow="auto"
       width={PROMPT_VERSIONS_LIST_WIDTH}
       minWidth={PROMPT_VERSIONS_LIST_WIDTH}
+      borderRightWidth="thin"
+      borderColor="grey-300"
     >
       <Flex direction="column">
         {promptVersions.edges.map(({ version }) => (