add instance ids

WIP

WIP

app/package.json

@@ -10,6 +10,7 @@
     "@arizeai/openinference-semantic-conventions": "^0.10.0",
     "@arizeai/point-cloud": "^3.0.6",
     "@codemirror/autocomplete": "6.12.0",
+    "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-python": "6.1.3",

app/src/components/code/index.tsx

@@ -1,6 +1,7 @@
 export * from "./JSONEditor";
 export * from "./JSONBlock";
 export * from "./PythonBlock";
+export * from "./HandlebarsEditor";
 export * from "./PythonBlockWithCopy";
 export * from "./CodeWrap";
 export * from "./TypeScriptBlock";

app/src/pages/playground/Playground.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 import { Button, Flex, Heading, View } from "@arizeai/components";
@@ -36,19 +36,15 @@ export function Playground() {
 }
 
 function PlaygroundInstances() {
-  const numInstances = usePlaygroundContext((state) => state.instances.length);
-  const indices = useMemo(
-    () => Array.from({ length: numInstances }, (_, i) => i),
-    [numInstances]
-  );
+  const instances = usePlaygroundContext((state) => state.instances);
   return (
     <Flex direction="row" alignItems="stretch" height="100%">
       <PanelGroup direction="horizontal">
-        {indices.map((i) => (
+        {instances.map((instance, i) => (
           <>
             {i !== 0 && <PanelResizeHandle css={resizeHandleCSS} />}
             <Panel defaultSize={50}>
-              <PlaygroundInstance key={i} playgroundInstanceIndex={i} />
+              <PlaygroundInstance key={i} playgroundInstanceId={instance.id} />
             </Panel>
           </>
         ))}

app/src/pages/playground/PlaygroundTemplate.tsx

@@ -4,34 +4,45 @@ import { Button, Card, Icon, Icons } from "@arizeai/components";
 
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 
+import { NUM_MAX_PLAYGROUND_INSTANCES } from "./constants";
+import { PlaygroundChatTemplate } from "./PlaygroundChatTemplate";
 import { PlaygroundInstanceProps } from "./types";
 
 interface PlaygroundTemplateProps extends PlaygroundInstanceProps {}
 
 export function PlaygroundTemplate(props: PlaygroundTemplateProps) {
-  const index = props.playgroundInstanceIndex;
+  const id = props.playgroundInstanceId;
   // TODO: remove the hard coding of the first instance
-  const playgrounds = usePlaygroundContext((state) => state.instances);
-  const playground = playgrounds[index];
+  const instances = usePlaygroundContext((state) => state.instances);
+  const playground = instances.find((instance) => instance.id === id);
   if (!playground) {
-    throw new Error(`Playground instance ${index} not found`);
+    throw new Error(`Playground instance ${id} not found`);
   }
+  const { template } = playground;
+
   return (
     <Card
       title="Template"
       collapsible
       variant="compact"
-      extra={<CompareOrDeleteButton />}
+      extra={
+        instances.length >= NUM_MAX_PLAYGROUND_INSTANCES ? (
+          <DeleteButton {...props} />
+        ) : (
+          <CompareButton />
+        )
+      }
     >
-      {JSON.stringify(playground.template)}
+      {template.__type === "chat" ? (
+        <PlaygroundChatTemplate {...props} />
+      ) : (
+        "Completion Template"
+      )}
     </Card>
   );
 }
 
-/**
- * A Button that either lets you compare or delete the playground instance.
- */
-function CompareOrDeleteButton() {
+function CompareButton() {
   const addInstance = usePlaygroundContext((state) => state.addInstance);
   return (
     <Button
@@ -44,3 +55,17 @@ function CompareOrDeleteButton() {
     />
   );
 }
+
+function DeleteButton(props: PlaygroundInstanceProps) {
+  const deleteInstance = usePlaygroundContext((state) => state.deleteInstance);
+  return (
+    <Button
+      variant="default"
+      size="compact"
+      icon={<Icon svg={<Icons.TrashOutline />} />}
+      onClick={() => {
+        deleteInstance(props.playgroundInstanceId);
+      }}
+    />
+  );
+}

app/src/pages/playground/constants.tsx

@@ -0,0 +1 @@
+export const NUM_MAX_PLAYGROUND_INSTANCES = 2;

app/src/pages/playground/types.ts

@@ -1,7 +1,7 @@
 export interface PlaygroundInstanceProps {
   /**
    * Multiple playground instances are supported.
-   * The index is used to identify the instance.
+   * The id is used to identify the instance.
    */
-  playgroundInstanceIndex: number;
+  playgroundInstanceId: number;
 }

app/src/store/playgroundStore.tsx

@@ -3,6 +3,8 @@ import { devtools } from "zustand/middleware";
 
 export type GenAIOperationType = "chat" | "text_completion";
 
+let playgroundInstanceIdIndex = 0;
+
 /**
  * The input mode for the playground
  * @example "manual" or "dataset"
@@ -31,10 +33,12 @@ export type ChatMessage = {
  * @see https://platform.openai.com/docs/guides/chat-completions
  */
 export type PlaygroundChatTemplate = {
+  __type: "chat";
   messages: ChatMessage[];
 };
 
 export type PlaygroundTextCompletionTemplate = {
+  __type: "text_completion";
   prompt: string;
 };
 
@@ -55,7 +59,7 @@ export interface PlaygroundProps {
    * The current playground instances(s)
    * Defaults to a single instance until a second instance is added
    */
-  instances: Array<PlaygroundInstance | undefined>;
+  instances: Array<PlaygroundInstance>;
 }
 
 /**
@@ -66,12 +70,24 @@ export interface PlaygroundProps {
  * - output (experiment or spans)
  */
 export interface PlaygroundInstance {
+  /**
+   * An ID to uniquely identify the instance
+   */
+  id: number;
   template: PlaygroundTemplate;
   tools: unknown;
   input: unknown;
   output: unknown;
 }
 
+/**
+ * All actions for a playground instance must contain the index of the playground
+ */
+interface PlaygroundInstanceActionParams {
+  index: number;
+}
+interface AddMessageParams extends PlaygroundInstanceActionParams {}
+
 export interface PlaygroundState extends PlaygroundProps {
   /**
    * Setter for the invocation mode
@@ -86,23 +102,34 @@ export interface PlaygroundState extends PlaygroundProps {
    * Add a comparison instance to the playground
    */
   addInstance: () => void;
+  /**
+   * Delete a specific instance of the playground
+   * @param instanceId the instance to delete
+   */
+  deleteInstance: (instanceId: number) => void;
+  /**
+   * Add a message to a playground instance
+   */
+  addMessage: (params: AddMessageParams) => void;
 }
 
 const DEFAULT_CHAT_COMPLETION_TEMPLATE: PlaygroundChatTemplate = {
+  __type: "chat",
   messages: [
     {
       role: "system",
       content: "You are a chatbot",
     },
     {
       role: "user",
-      content: "{question}",
+      content: "{{question}}",
     },
   ],
 };
 
 const DEFAULT_TEXT_COMPLETION_TEMPLATE: PlaygroundTextCompletionTemplate = {
-  prompt: "What is the meaning of life?",
+  __type: "text_completion",
+  prompt: "{{question}}",
 };
 
 export const createPlaygroundStore = (
@@ -114,6 +141,7 @@ export const createPlaygroundStore = (
     setInputMode: (inputMode: PlaygroundInputMode) => set({ inputMode }),
     instances: [
       {
+        id: playgroundInstanceIdIndex++,
         template: DEFAULT_CHAT_COMPLETION_TEMPLATE,
         tools: {},
         input: {},
@@ -126,6 +154,7 @@ export const createPlaygroundStore = (
         set({
           instances: [
             {
+              id: playgroundInstanceIdIndex++,
               template: DEFAULT_CHAT_COMPLETION_TEMPLATE,
               tools: {},
               input: {},
@@ -137,6 +166,7 @@ export const createPlaygroundStore = (
         set({
           instances: [
             {
+              id: playgroundInstanceIdIndex++,
               template: DEFAULT_TEXT_COMPLETION_TEMPLATE,
               tools: {},
               input: {},
@@ -158,10 +188,43 @@ export const createPlaygroundStore = (
           instance,
           {
             ...instance,
+            id: playgroundInstanceIdIndex++,
           },
         ],
       });
     },
+    deleteInstance: (instanceId: number) => {
+      const instances = get().instances;
+      set({
+        instances: instances.filter((instance) => instance.id !== instanceId),
+      });
+    },
+    addMessage: ({ index }) => {
+      const instances = get().instances;
+      const mainInstance = instances[index];
+      if (!mainInstance) {
+        return;
+      }
+      // Update the given instance
+      set({
+        instances: instances.map((instance, i) => {
+          if (
+            index === i &&
+            instance?.template &&
+            instance?.template.__type === "chat"
+          ) {
+            return {
+              ...instance,
+              messages: [
+                ...instance.template.messages,
+                { role: "user", content: "{question}" },
+              ],
+            };
+          }
+          return instance;
+        }),
+      });
+    },
     ...initialProps,
   });
   return create(devtools(playgroundStore));

cspell.json

@@ -18,6 +18,7 @@
         "dunder",
         "Evals",
         "fastapi",
+        "genai",
         "gitbook",
         "graphiql",
         "HDBSCAN",