style(weave): restyle carousel view

weave-js/src/components/Icon/Icon.tsx

@@ -256,6 +256,7 @@ import {ReactComponent as ImportVersionsLayers} from '../../assets/icons/icon-ve
 import {ReactComponent as ImportVertexGCP} from '../../assets/icons/icon-vertex-gcp.svg';
 import {ReactComponent as ImportVideoPlay} from '../../assets/icons/icon-video-play.svg';
 import {ReactComponent as ImportViewGlasses} from '../../assets/icons/icon-view-glasses.svg';
+import {ReactComponent as ImportVisible} from '../../assets/icons/icon-visible.svg';
 import {ReactComponent as ImportWandb} from '../../assets/icons/icon-wandb.svg';
 import {ReactComponent as ImportWarning} from '../../assets/icons/icon-warning.svg';
 import {ReactComponent as ImportWarningAlt} from '../../assets/icons/icon-warning-alt.svg';
@@ -1048,6 +1049,9 @@ export const IconVideoPlay = (props: SVGIconProps) => (
 export const IconViewGlasses = (props: SVGIconProps) => (
   <ImportViewGlasses {...updateIconProps(props)} />
 );
+export const IconVisible = (props: SVGIconProps) => (
+  <ImportVisible {...updateIconProps(props)} />
+);
 export const IconWandb = (props: SVGIconProps) => (
   <ImportWandb {...updateIconProps(props)} />
 );
@@ -1336,6 +1340,7 @@ const ICON_NAME_TO_ICON: Record<IconName, ElementType> = {
   'vertex-gcp': IconVertexGCP,
   'video-play': IconVideoPlay,
   'view-glasses': IconViewGlasses,
+  visible: IconVisible,
   wandb: IconWandb,
   warning: IconWarning,
   'warning-alt': IconWarningAlt,

weave-js/src/components/Icon/index.ts

@@ -256,6 +256,7 @@ export {
   IconVertexGCP,
   IconVideoPlay,
   IconViewGlasses,
+  IconVisible,
   IconWandb,
   IconWarning,
   IconWarningAlt,

weave-js/src/components/Icon/types.ts

@@ -255,6 +255,7 @@ export const IconNames = {
   VertexGCP: 'vertex-gcp',
   VideoPlay: 'video-play',
   ViewGlasses: 'view-glasses',
+  Visible: 'visible',
   Wandb: 'wandb',
   Warning: 'warning',
   WarningAlt: 'warning-alt',

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoiceView.tsx

@@ -8,13 +8,15 @@ type ChoiceViewProps = {
   isStructuredOutput?: boolean;
   isNested?: boolean;
   choiceIndex?: number;
+  messageHeader?: React.ReactNode;
 };
 
 export const ChoiceView = ({
   choice,
   isStructuredOutput,
   isNested,
   choiceIndex,
+  messageHeader,
 }: ChoiceViewProps) => {
   const {message} = choice;
   return (
@@ -24,6 +26,7 @@ export const ChoiceView = ({
       isStructuredOutput={isStructuredOutput}
       isNested={isNested}
       choiceIndex={choiceIndex}
+      messageHeader={messageHeader}
     />
   );
 };

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesViewCarousel.tsx

@@ -29,38 +29,39 @@ export const ChoicesViewCarousel = ({
   };
 
   return (
-    <>
-      <ChoiceView
-        choice={choices[selectedChoiceIndex]}
-        isStructuredOutput={isStructuredOutput}
-        choiceIndex={selectedChoiceIndex}
-      />
-      <div className="flex items-center">
-        <div className="flex-auto">
+    <ChoiceView
+      choice={choices[selectedChoiceIndex]}
+      isStructuredOutput={isStructuredOutput}
+      choiceIndex={selectedChoiceIndex}
+      messageHeader={
+        <div className="mb-8 flex items-center gap-4">
+          <div className="flex items-center gap-12">
+            <Button
+              variant="ghost"
+              icon="chevron-back"
+              size="small"
+              onClick={onBack}
+            />
+            <span className="text-sm text-moon-500">
+              {selectedChoiceIndex + 1} of {choices.length}
+            </span>
+            <Button
+              variant="ghost"
+              icon="chevron-next"
+              size="small"
+              onClick={onNext}
+            />
+          </div>
           <Button
             size="small"
             variant="quiet"
-            icon="expand-uncollapse"
+            icon="visible"
             onClick={() => setIsDrawerOpen(true)}
-            tooltip="Switch to linear view"
-          />
+            tooltip="Switch to linear view">
+            Review
+          </Button>
         </div>
-        <div className="flex items-center gap-12">
-          <Button
-            variant="ghost"
-            icon="chevron-back"
-            size="small"
-            onClick={onBack}
-          />
-          {selectedChoiceIndex + 1} of {choices.length}
-          <Button
-            variant="ghost"
-            icon="chevron-next"
-            size="small"
-            onClick={onNext}
-          />
-        </div>
-      </div>
-    </>
+      }
+    />
   );
 };

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx

@@ -18,6 +18,7 @@ type MessagePanelProps = {
   choiceIndex?: number;
   isNested?: boolean;
   pendingToolResponseId?: string;
+  messageHeader?: React.ReactNode;
 };
 
 export const MessagePanel = ({
@@ -30,6 +31,7 @@ export const MessagePanel = ({
   // If the tool call response is pending, the editor will be shown automatically
   // and on save the tool call response will be updated and sent to the LLM
   pendingToolResponseId,
+  messageHeader,
 }: MessagePanelProps) => {
   const [isShowingMore, setIsShowingMore] = useState(false);
   const [isOverflowing, setIsOverflowing] = useState(false);
@@ -116,6 +118,7 @@ export const MessagePanel = ({
                 'max-h-[400px]': !isShowingMore,
                 'max-h-full': isShowingMore,
               })}>
+              {messageHeader}
               {isPlayground && editorHeight ? (
                 <PlaygroundMessagePanelEditor
                   message={message}

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/PlaygroundChat.tsx

@@ -35,6 +35,7 @@ export const PlaygroundChat = ({
   setSettingsTab,
   settingsTab,
 }: PlaygroundChatProps) => {
+  console.log('playgroundStates', playgroundStates);
   const [chatText, setChatText] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundChat/useChatFunctions.tsx

@@ -43,6 +43,8 @@ export const useChatFunctions = (
     messageIndex: number,
     newMessage: Message
   ) => {
+    console.log('editMessage', callIndex, messageIndex, newMessage);
+
     setPlaygroundStateField(callIndex, 'traceCall', prevTraceCall => {
       const newTraceCall = clearTraceCall(
         cloneDeep(prevTraceCall as OptionalTraceCallSchema)
@@ -106,6 +108,7 @@ export const useChatFunctions = (
     choiceIndex: number,
     newChoice: Message
   ) => {
+    console.log('editChoice', callIndex, choiceIndex, newChoice);
     setPlaygroundStateField(callIndex, 'traceCall', prevTraceCall => {
       const newTraceCall = clearTraceCall(
         cloneDeep(prevTraceCall as OptionalTraceCallSchema)