From ad780e12476aca80b44059383920d97ed0a5bcf2 Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Wed, 16 Oct 2024 22:17:02 -0600
Subject: [PATCH 1/2] fix: make messages collapsible so they can be dragged

---
 app/src/pages/playground/PlaygroundChatTemplate.tsx | 1 +
 app/src/store/playground/playgroundStore.tsx        | 3 ++-
 app/src/store/playground/types.ts                   | 6 +++++-
 3 files changed, 8 insertions(+), 2 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/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 01d6357f82..6ed169844e 100644
--- a/app/src/store/playground/types.ts
+++ b/app/src/store/playground/types.ts
@@ -119,7 +119,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;

From 56f671b7275ebfa7d7a961da1d7359140fae5c4f Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Wed, 16 Oct 2024 22:19:34 -0600
Subject: [PATCH 2/2] fix tests

---
 app/src/pages/playground/__tests__/playgroundUtils.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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