feat(promts): skeleton UI for promts (#5726)

* wip

* WIP

* WIP

* add the prompt type

* add initial listing

* feat: temporary prompt

* final changes

* add aria role

app/schema.graphql

@@ -1376,6 +1376,32 @@ input ProjectSessionSort {
   dir: SortDir!
 }
 
+type Prompt implements Node {
+  """The Globally Unique ID of this object"""
+  id: GlobalID!
+  name: String!
+  description: String
+  createdAt: DateTime!
+}
+
+"""A connection to a list of items."""
+type PromptConnection {
+  """Pagination data for this connection"""
+  pageInfo: PageInfo!
+
+  """Contains the nodes in this connection"""
+  edges: [PromptEdge!]!
+}
+
+"""An edge in a connection."""
+type PromptEdge {
+  """A cursor for use in pagination"""
+  cursor: String!
+
+  """The item at the end of the edge"""
+  node: Prompt!
+}
+
 type PromptResponse {
   """The prompt submitted to the LLM"""
   prompt: String
@@ -1402,6 +1428,7 @@ type Query {
   model: Model!
   node(id: GlobalID!): Node!
   viewer: User
+  prompts(first: Int = 50, last: Int, after: String, before: String): PromptConnection!
   clusters(clusters: [ClusterInput!]!): [Cluster!]!
   hdbscanClustering(
     """Event ID of the coordinates"""

app/src/Routes.tsx

@@ -8,6 +8,7 @@ import { Layout } from "./pages/Layout";
 import { spanPlaygroundPageLoaderQuery$data } from "./pages/playground/__generated__/spanPlaygroundPageLoaderQuery.graphql";
 import { PlaygroundExamplePage } from "./pages/playground/PlaygroundExamplePage";
 import { projectLoaderQuery$data } from "./pages/project/__generated__/projectLoaderQuery.graphql";
+import { promptLoaderQuery$data } from "./pages/prompt/__generated__/promptLoaderQuery.graphql";
 import { sessionLoader } from "./pages/trace/sessionLoader";
 import { SessionPage } from "./pages/trace/SessionPage";
 import {
@@ -40,6 +41,10 @@ import {
   ProjectPage,
   ProjectsPage,
   ProjectsRoot,
+  promptLoader,
+  PromptPage,
+  promptsLoader,
+  PromptsPage,
   resetPasswordLoader,
   ResetPasswordPage,
   ResetPasswordWithTokenPage,
@@ -182,7 +187,7 @@ const router = createBrowserRouter(
               />
             </Route>
             <Route
-              path="spans/:spanId" // TODO: Make it possible to go back to the span
+              path="spans/:spanId"
               element={<SpanPlaygroundPage />}
               loader={spanPlaygroundPageLoader}
               handle={{
@@ -195,6 +200,27 @@ const router = createBrowserRouter(
               }}
             />
           </Route>
+          <Route
+            path="/prompts"
+            handle={{
+              crumb: () => "Prompts",
+            }}
+          >
+            <Route index element={<PromptsPage />} loader={promptsLoader} />
+            <Route
+              path=":promptId"
+              loader={promptLoader}
+              element={<PromptPage />}
+              handle={{
+                crumb: (data: promptLoaderQuery$data) => {
+                  if (data.prompt.__typename === "Prompt") {
+                    return data.prompt.name;
+                  }
+                  return "unknown";
+                },
+              }}
+            />
+          </Route>
           <Route
             path="/apis"
             element={<APIsPage />}

app/src/pages/Layout.tsx

@@ -128,6 +128,13 @@ function SideNav() {
               icon={<Icon svg={<Icons.PlayCircleOutline />} />}
             />
           </li>
+          <li>
+            <NavLink
+              to="/prompts"
+              text="Prompts"
+              icon={<Icon svg={<Icons.MessageSquareOutline />} />}
+            />
+          </li>
           <li>
             <NavLink
               to="/apis"

app/src/pages/index.tsx

@@ -20,6 +20,8 @@ export * from "./apis";
 export * from "./auth";
 export * from "./profile";
 export * from "./playground";
+export * from "./prompts";
+export * from "./prompt";
 export * from "./AuthenticatedRoot";
 export * from "./authenticatedRootLoader";
 export * from "./support";

app/src/pages/prompt/PromptPage.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { useLoaderData } from "react-router";
+
+import { Flex, Heading, View } from "@arizeai/components";
+
+import { promptLoaderQuery$data } from "./__generated__/promptLoaderQuery.graphql";
+
+export function PromptPage() {
+  const loaderData = useLoaderData() as promptLoaderQuery$data;
+  return (
+    <Flex direction="column" height="100%">
+      <View
+        padding="size-200"
+        borderBottomWidth="thin"
+        borderBottomColor="dark"
+        flex="none"
+      >
+        <Flex direction="row" justifyContent="space-between">
+          <Heading level={1}>{loaderData.prompt.name}</Heading>
+        </Flex>
+      </View>
+    </Flex>
+  );
+}

app/src/pages/prompt/index.tsx

@@ -0,0 +1,2 @@
+export * from "./promptLoader";
+export * from "./PromptPage";

app/src/pages/prompt/promptLoader.tsx

@@ -0,0 +1,30 @@
+import { fetchQuery, graphql } from "react-relay";
+import { LoaderFunctionArgs } from "react-router-dom";
+
+import RelayEnvironment from "@phoenix/RelayEnvironment";
+
+import { promptLoaderQuery } from "./__generated__/promptLoaderQuery.graphql";
+
+/**
+ * Loads in the necessary page data for the dataset page
+ */
+export async function promptLoader(args: LoaderFunctionArgs) {
+  const { promptId } = args.params;
+  return await fetchQuery<promptLoaderQuery>(
+    RelayEnvironment,
+    graphql`
+      query promptLoaderQuery($id: GlobalID!) {
+        prompt: node(id: $id) {
+          __typename
+          id
+          ... on Prompt {
+            name
+          }
+        }
+      }
+    `,
+    {
+      id: promptId as string,
+    }
+  ).toPromise();
+}

app/src/pages/prompts/PromptsPage.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useLoaderData } from "react-router";
+
+import { Button, Flex, Heading, Icon, Icons, View } from "@arizeai/components";
+
+import { promptsLoaderQuery$data } from "./__generated__/promptsLoaderQuery.graphql";
+import { PromptsTable } from "./PromptsTable";
+
+export function PromptsPage() {
+  const loaderData = useLoaderData() as promptsLoaderQuery$data;
+  return (
+    <Flex direction="column" height="100%">
+      <View
+        padding="size-200"
+        borderBottomWidth="thin"
+        borderBottomColor="dark"
+        flex="none"
+      >
+        <Flex direction="row" justifyContent="space-between">
+          <Heading level={1}>Prompts</Heading>
+          <Button
+            variant="default"
+            size="compact"
+            icon={<Icon svg={<Icons.PlusOutline />} />}
+          >
+            Prompt Template
+          </Button>
+        </Flex>
+      </View>
+      <PromptsTable query={loaderData} />
+    </Flex>
+  );
+}