feat(prompts): preview of last 5 versions (#5837)

* feat(prompts): preview of last 5 versions

* feat(prompts): preview of last 5 versions

* rename

app/src/components/icon/Icons.tsx

@@ -469,6 +469,24 @@ export const Column = () => (
   </svg>
 );
 
+export const Commit = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-git-commit"
+  >
+    <circle cx="12" cy="12" r="4" fill="none"></circle>
+    <line x1="1.05" y1="12" x2="7" y2="12"></line>
+    <line x1="17.01" y1="12" x2="22.96" y2="12"></line>
+  </svg>
+);
+
 export const Code = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <g data-name="Layer 2">

app/src/pages/prompt/PromptIndexPage.tsx

@@ -15,6 +15,7 @@ import { PromptIndexPage__aside$key } from "./__generated__/PromptIndexPage__asi
 import { PromptIndexPage__main$key } from "./__generated__/PromptIndexPage__main.graphql";
 import { PromptChatMessages } from "./PromptChatMessages";
 import { PromptInvocationParameters } from "./PromptInvocationParameters";
+import { PromptLatestVersionsList } from "./PromptLatestVersionsList";
 import { usePromptIdLoader } from "./usePromptIdLoader";
 
 export function PromptIndexPage() {
@@ -116,6 +117,7 @@ function PromptIndexPageAside({
     graphql`
       fragment PromptIndexPage__aside on Prompt {
         description
+        ...PromptLatestVersionsListFragment
       }
     `,
     prompt
@@ -131,7 +133,10 @@ function PromptIndexPageAside({
         <Heading level={3}>Description</Heading>
         {/* TODO: Add a markdown view here */}
         <p>{data.description || "No description"}</p>
-        {/* TODO: Add a history view here */}
+        <section>
+          <Heading level={3}>Latest Versions</Heading>
+          <PromptLatestVersionsList prompt={data} />
+        </section>
       </View>
     </View>
   );

app/src/pages/prompt/PromptLatestVersionsList.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo } from "react";
+import { graphql, useFragment } from "react-relay";
+import { css } from "@emotion/react";
+
+import { Text } from "@arizeai/components";
+
+import { Flex, Icon, Icons } from "@phoenix/components";
+
+import { PromptLatestVersionsListFragment$key } from "./__generated__/PromptLatestVersionsListFragment.graphql";
+
+const versionListItemCSS = css`
+  padding-bottom: var(--ac-global-dimension-size-300);
+  position: relative;
+`;
+export function PromptLatestVersionsList(props: {
+  prompt: PromptLatestVersionsListFragment$key;
+}) {
+  const { prompt } = props;
+  const data = useFragment<PromptLatestVersionsListFragment$key>(
+    graphql`
+      fragment PromptLatestVersionsListFragment on Prompt {
+        latestVersions: promptVersions(first: 5) {
+          edges {
+            version: node {
+              id
+              ... on PromptVersion {
+                description
+              }
+            }
+          }
+        }
+      }
+    `,
+    prompt
+  );
+  const versions = useMemo(() => {
+    return data?.latestVersions?.edges?.map((edge) => edge.version);
+  }, [data]);
+
+  if (!versions) {
+    throw new Error("Expected prompt versions to be defined");
+  }
+
+  return (
+    <ul>
+      {versions.map((version) => {
+        return (
+          <li key={version.id} css={versionListItemCSS}>
+            <Flex direction="row" gap="size-200" alignItems="start">
+              <Icon svg={<Icons.Commit />} />
+              <Flex direction="column">
+                <span>{version.id}</span>
+                <Text color="text-700">{version.description}</Text>
+              </Flex>
+            </Flex>
+            {/* TODO(prompts): show that there are more */}
+            <VersionsConnector />
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+const versionsConnectorCSS = css`
+  position: absolute;
+  top: 24px;
+  left: 9px;
+  height: calc(100% - 28px);
+  border-right: 2px dashed var(--ac-global-color-grey-500);
+`;
+function VersionsConnector() {
+  return <div css={versionsConnectorCSS} />;
+}