fix(weave): Unbreak editing and deleting choices (#3287)

* unbreak deleting choices * fix bug * fix carousel view breaking when choice is deleted * fix editing * fix reerendering
wandb · Dec 18, 2024 · 7d1d212 · 7d1d212
1 parent 8ce826d
commit 7d1d212
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 18 deletions.
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoiceView.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoiceView.tsx
@@ -21,7 +21,7 @@ export const ChoiceView = ({
   const {message} = choice;
   return (
     <MessagePanel
-      index={choice.index}
+      index={choiceIndex || choice.index}
       message={message}
       isStructuredOutput={isStructuredOutput}
       isNested={isNested}

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesDrawer.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesDrawer.tsx
@@ -70,7 +70,7 @@ export const ChoicesDrawer = ({
       <Tailwind>
         <div className="flex flex-col p-12">
           {choices.map((c, index) => (
-            <div key={c.index}>
+            <div key={index}>
               <div className="flex items-center gap-4 font-semibold">
                 <Tag color="moon" label={`Response ${index + 1}`} />
                 {index === selectedChoiceIndex ? (

diff --git a/...js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesViewCarousel.tsx b/...js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesViewCarousel.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 
 import {Button} from '../../../../../Button';
 import {ChoiceView} from './ChoiceView';
@@ -28,11 +28,22 @@ export const ChoicesViewCarousel = ({
     setSelectedChoiceIndex(newStep);
   };
 
+  useEffect(() => {
+    if (selectedChoiceIndex >= choices.length) {
+      setSelectedChoiceIndex(choices.length - 1);
+    }
+  }, [selectedChoiceIndex, choices, setSelectedChoiceIndex]);
+
+  const choiceIndex =
+    selectedChoiceIndex >= choices.length
+      ? choices.length - 1
+      : selectedChoiceIndex;
+
   return (
     <ChoiceView
-      choice={choices[selectedChoiceIndex]}
+      choice={choices[choiceIndex]}
       isStructuredOutput={isStructuredOutput}
-      choiceIndex={selectedChoiceIndex}
+      choiceIndex={choiceIndex}
       messageHeader={
         <div className="mb-8 flex items-center gap-4">
           <div className="flex items-center gap-12">

diff --git a/...ponents/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelButtons.tsx b/...ponents/PagePanelComponents/Home/Browse3/pages/ChatView/PlaygroundMessagePanelButtons.tsx
@@ -67,12 +67,7 @@ export const PlaygroundMessagePanelButtons: React.FC<
         size="small"
         startIcon="pencil-edit"
         onClick={() => {
-          setEditorHeight(
-            contentRef?.current?.clientHeight
-              ? // Accounts for padding and save buttons
-                contentRef.current.clientHeight - 56
-              : null
-          );
+          setEditorHeight(contentRef?.current?.clientHeight ?? null);
         }}
         tooltip={
           !hasContent ? 'We currently do not support editing functions' : 'Edit'

diff --git a/...s/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/PlaygroundChat.tsx b/...s/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/PlaygroundChat.tsx
@@ -155,7 +155,7 @@ export const PlaygroundChat = ({
                             deleteMessage(idx, messageIndex, responseIndexes),
                           editMessage: (messageIndex, newMessage) =>
                             editMessage(idx, messageIndex, newMessage),
-                          deleteChoice: choiceIndex =>
+                          deleteChoice: (messageIndex, choiceIndex) =>
                             deleteChoice(idx, choiceIndex),
                           addMessage: newMessage => addMessage(idx, newMessage),
                           editChoice: (choiceIndex, newChoice) =>

diff --git a/...omponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/useChatCompletionFunctions.tsx b/...omponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/useChatCompletionFunctions.tsx
@@ -218,7 +218,9 @@ const appendChoiceToMessages = (
       updatedState.traceCall.inputs.messages.push(
         updatedState.traceCall.output.choices[choiceIndex].message
       );
-    } else {
+    } else if (
+      updatedState.traceCall.output.choices[updatedState.selectedChoiceIndex]
+    ) {
       updatedState.traceCall.inputs.messages.push(
         updatedState.traceCall.output.choices[updatedState.selectedChoiceIndex]
           .message

diff --git a/...s/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundPage.tsx b/...s/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundPage.tsx
@@ -108,11 +108,9 @@ export const PlaygroundPageInner = (props: PlaygroundPageProps) => {
         setPlaygroundStateFromTraceCall(callWithCosts.result.traceCall);
       }
     }
-  }, [
-    callWithCosts.loading,
-    setPlaygroundStateFromTraceCall,
-    callWithCosts.result,
-  ]);
+    // Only set the call the first time the page loads, and we get the call
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [callWithCosts.loading]);
 
   useEffect(() => {
     setPlaygroundStates(prev => {