fix(playground): make messages collapsible so they can be dragged (#5062

) * fix: make messages collapsible so they can be dragged * fix tests
Arize-ai · Oct 17, 2024 · 30d95b4 · 30d95b4
1 parent 4df3f8a
commit 30d95b4
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/app/src/pages/playground/PlaygroundChatTemplate.tsx b/app/src/pages/playground/PlaygroundChatTemplate.tsx
@@ -219,6 +219,7 @@ function SortableMessageItem({
   return (
     <li ref={setNodeRef} style={dragAndDropLiStyles}>
       <Card
+        collapsible
         variant="compact"
         bodyStyle={{ padding: 0 }}
         {...messageCardStyles}

diff --git a/app/src/pages/playground/__tests__/playgroundUtils.test.ts b/app/src/pages/playground/__tests__/playgroundUtils.test.ts
@@ -33,7 +33,7 @@ const expectedPlaygroundInstanceWithIO: PlaygroundInstance = {
   },
   input: { variableKeys: [], variablesValueCache: {} },
   tools: [],
-  toolChoice: undefined,
+  toolChoice: "auto",
   template: {
     __type: "chat",
     // These id's are not 0, 1, 2, because we create a playground instance (including messages) at the top of the transformSpanAttributesToPlaygroundInstance function

diff --git a/app/src/store/playground/playgroundStore.tsx b/app/src/store/playground/playgroundStore.tsx
@@ -97,7 +97,8 @@ export function createPlaygroundInstance(): PlaygroundInstance {
     template: generateChatCompletionTemplate(),
     model: { provider: DEFAULT_MODEL_PROVIDER, modelName: "gpt-4o" },
     tools: [],
-    toolChoice: undefined,
+    // Default to auto tool choice as you are probably testing the LLM for it's ability to pick
+    toolChoice: "auto",
     // TODO(apowell) - use datasetId if in dataset mode
     input: { variablesValueCache: {}, variableKeys: [] },
     output: undefined,

diff --git a/app/src/store/playground/types.ts b/app/src/store/playground/types.ts
@@ -121,7 +121,11 @@ export interface PlaygroundInstance {
   id: number;
   template: PlaygroundTemplate;
   tools: Tool[];
-  toolChoice: ToolChoice | undefined;
+  /**
+   * How the LLM should choose the tool to use
+   * @default "auto"
+   */
+  toolChoice: ToolChoice;
   input: PlaygroundInput;
   model: ModelConfig;
   output: ChatMessage[] | undefined | string;