feat(prompts): Render model invocation params in prompt details view (#…

…5780)

* feat(prompts): Render model invocation params in propt details view

* Use fragment in PromptInvocationParameters

* temporarily use component styles for lists until we can migrate

* fix scrolling

---------

Co-authored-by: Mikyo King <mikyo@arize.com>

app/src/pages/prompt/PromptIndexPage.tsx

@@ -2,7 +2,13 @@ import React, { useState } from "react";
 import { Heading } from "react-aria-components";
 import { graphql, useFragment } from "react-relay";
 
-import { Card, Flex, View } from "@arizeai/components";
+import {
+  Accordion,
+  AccordionItem,
+  Card,
+  Flex,
+  View,
+} from "@arizeai/components";
 
 import {
   CodeLanguage,
@@ -13,6 +19,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 { PromptInvocationParameters } from "./PromptInvocationParameters";
 import { usePromptIdLoader } from "./usePromptIdLoader";
 
 export function PromptIndexPage() {
@@ -26,46 +33,72 @@ export function PromptIndexPageContent({
   prompt: PromptIndexPage__main$key;
 }) {
   const [language, setLanguage] = useState<CodeLanguage>("Python");
-  const data = useFragment(
+  const data = useFragment<PromptIndexPage__main$key>(
     graphql`
       fragment PromptIndexPage__main on Prompt {
+        promptVersions {
+          edges {
+            node {
+              ...PromptInvocationParameters__main
+            }
+          }
+        }
         ...PromptIndexPage__aside
       }
     `,
     prompt
   );
+
+  const latestVersion = data?.promptVersions?.edges?.[0]?.node;
+
   return (
     <Flex direction="row" height="100%">
-      <View flex="1 1 auto" padding="size-200">
-        <Flex
-          direction="column"
-          gap="size-200"
-          maxWidth={900}
-          marginStart="auto"
-          marginEnd="auto"
-        >
-          <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>
-          </Card>
-          <Card title="Model Configuration" variant="compact">
-            <View padding="lg">model configuration</View>
-          </Card>
-          <Card
-            title="Code"
-            variant="compact"
-            extra={
-              <CodeLanguageRadioGroup
-                language={language}
-                onChange={setLanguage}
-              />
-            }
+      <View height="100%" overflow="auto" data-testid="scroll-container">
+        <View padding="size-200">
+          <Flex
+            direction="column"
+            gap="size-200"
+            maxWidth={900}
+            marginStart="auto"
+            marginEnd="auto"
           >
-            <PythonBlock value="Hello world" />
-          </Card>
-        </Flex>
+            <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>
+            </Card>
+            <Card
+              title="Model Configuration"
+              variant="compact"
+              bodyStyle={{ padding: 0 }}
+            >
+              <Accordion size="M">
+                <AccordionItem
+                  title="Invocation Parameters"
+                  id="invocation-parameters"
+                >
+                  <PromptInvocationParameters promptVersion={latestVersion} />
+                </AccordionItem>
+                <AccordionItem title="Tools" id="model-tools">
+                  <View padding="size-200">No Tools Specified</View>
+                </AccordionItem>
+              </Accordion>
+            </Card>
+            <Card
+              title="Code"
+              variant="compact"
+              extra={
+                <CodeLanguageRadioGroup
+                  language={language}
+                  onChange={setLanguage}
+                />
+              }
+            >
+              <PythonBlock value="Hello world" />
+            </Card>
+          </Flex>
+        </View>
       </View>
       <PromptIndexPageAside prompt={data} />
     </Flex>

app/src/pages/prompt/PromptInvocationParameters.tsx

@@ -0,0 +1,71 @@
+import React, { useMemo } from "react";
+import { graphql, useFragment } from "react-relay";
+import isObject from "lodash/isObject";
+
+import { Flex, List, ListItem, Text, View } from "@arizeai/components";
+
+import { PromptInvocationParameters__main$key } from "./__generated__/PromptInvocationParameters__main.graphql";
+
+function PromptInvocationParameterItem({
+  keyName,
+  value,
+}: {
+  keyName: string;
+  value: unknown;
+}) {
+  return (
+    <View paddingStart="size-100" paddingEnd="size-100">
+      <Flex direction="row" justifyContent="space-between">
+        <Text weight="heavy">{keyName}</Text>
+        <Text>{String(value)}</Text>
+      </Flex>
+    </View>
+  );
+}
+
+type PromptInvocationParametersProps = {
+  promptVersion: PromptInvocationParameters__main$key;
+};
+
+export function PromptInvocationParameters({
+  promptVersion,
+}: PromptInvocationParametersProps) {
+  const { invocationParameters } =
+    useFragment<PromptInvocationParameters__main$key>(
+      graphql`
+        fragment PromptInvocationParameters__main on PromptVersion {
+          invocationParameters
+        }
+      `,
+      promptVersion
+    );
+  const parameters = useMemo(() => {
+    if (!isObject(invocationParameters)) {
+      return [];
+    }
+    return Object.entries(invocationParameters).map(([key, value]) => ({
+      key,
+      value,
+    }));
+  }, [invocationParameters]);
+
+  if (parameters.length === 0) {
+    return (
+      <View padding="size-200">
+        <Flex justifyContent="center" alignItems="center">
+          <Text>No parameters saved for this prompt</Text>
+        </Flex>
+      </View>
+    );
+  }
+
+  return (
+    <List listSize="small">
+      {parameters.map(({ key, value }) => (
+        <ListItem key="key">
+          <PromptInvocationParameterItem keyName={key} value={value} />
+        </ListItem>
+      ))}
+    </List>
+  );
+}

app/src/pages/prompt/PromptVersionDetailsPage.tsx

@@ -1,9 +1,16 @@
 import React from "react";
 import { useLoaderData } from "react-router";
 
-import { Flex, Text, View } from "@arizeai/components";
+import {
+  Accordion,
+  AccordionItem,
+  Card,
+  Flex,
+  View,
+} from "@arizeai/components";
 
 import { promptVersionLoaderQuery$data } from "./__generated__/promptVersionLoaderQuery.graphql";
+import { PromptInvocationParameters } from "./PromptInvocationParameters";
 
 export function PromptVersionDetailsPage() {
   const { promptVersion } = useLoaderData() as promptVersionLoaderQuery$data;
@@ -16,10 +23,28 @@ function PromptVersionDetailsPageContent({
   promptVersion: promptVersionLoaderQuery$data["promptVersion"];
 }) {
   return (
-    <View padding="size-200">
-      <Flex direction="column">
-        <Text weight="heavy">{promptVersion.id}</Text>
-        <Text>{promptVersion.description}</Text>
+    <View padding="size-200" width="100%">
+      <Flex
+        direction="column"
+        gap="size-200"
+        maxWidth={900}
+        marginStart="auto"
+        marginEnd="auto"
+      >
+        <Card
+          title="Model Configuration"
+          variant="compact"
+          bodyStyle={{ padding: 0 }}
+        >
+          <Accordion size="M">
+            <AccordionItem
+              title="Invocation Parameters"
+              id="invocation-parameters"
+            >
+              <PromptInvocationParameters promptVersion={promptVersion} />
+            </AccordionItem>
+          </Accordion>
+        </Card>
       </Flex>
     </View>
   );

app/src/pages/prompt/PromptVersionsList.tsx

@@ -58,6 +58,8 @@ type PromptVersionsListProps = {
   prompt: PromptVersionsList__main$key;
 };
 
+const PROMPT_VERSIONS_LIST_WIDTH = 300;
+
 /**
  * Full height, scrollable, list of prompt versions
  */
@@ -81,8 +83,13 @@ export const PromptVersionsList = ({ prompt }: PromptVersionsListProps) => {
     prompt
   );
   return (
-    <View height="100%" overflow="scroll">
-      <Flex direction="column" width={300}>
+    <View
+      height="100%"
+      overflow="scroll"
+      width={PROMPT_VERSIONS_LIST_WIDTH}
+      minWidth={PROMPT_VERSIONS_LIST_WIDTH}
+    >
+      <Flex direction="column">
         {promptVersions.edges.map(({ version }) => (
           <PromptVersionItem key={version.id} version={version} />
         ))}