From 30d95b48fdc829ab23b12bd72fcd5a10da9889ff Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Thu, 17 Oct 2024 12:32:25 -0600
Subject: [PATCH] fix(playground): make messages collapsible so they can be
 dragged (#5062)

* fix: make messages collapsible so they can be dragged

* fix tests
---
 app/src/pages/playground/PlaygroundChatTemplate.tsx        | 1 +
 app/src/pages/playground/__tests__/playgroundUtils.test.ts | 2 +-
 app/src/store/playground/playgroundStore.tsx               | 3 ++-
 app/src/store/playground/types.ts                          | 6 +++++-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/src/pages/playground/PlaygroundChatTemplate.tsx b/app/src/pages/playground/PlaygroundChatTemplate.tsx
index bea1b63f1d..6674ef728a 100644
--- 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
index 2f505c0a19..1d71fa48d8 100644
--- 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
index 88a437a2c6..fdf2113634 100644
--- 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
index 67d47e8aab..730a1d5be2 100644
--- 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;