add choices drawer

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

@@ -6,15 +6,21 @@ import {Choice} from './types';
 type ChoiceViewProps = {
   choice: Choice;
   isStructuredOutput?: boolean;
+  isNested?: boolean;
 };
 
-export const ChoiceView = ({choice, isStructuredOutput}: ChoiceViewProps) => {
+export const ChoiceView = ({
+  choice,
+  isStructuredOutput,
+  isNested,
+}: ChoiceViewProps) => {
   const {message} = choice;
   return (
     <MessagePanel
       index={choice.index}
       message={message}
       isStructuredOutput={isStructuredOutput}
+      isNested={isNested}
       isChoice
     />
   );

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

@@ -0,0 +1,104 @@
+import {Box, Drawer} from '@mui/material';
+import {MOON_200} from '@wandb/weave/common/css/color.styles';
+import {Tag} from '@wandb/weave/components/Tag';
+import {Tailwind} from '@wandb/weave/components/Tailwind';
+import React from 'react';
+
+import {Button} from '../../../../../Button';
+import {ChoiceView} from './ChoiceView';
+import {Choice} from './types';
+
+type ChoicesDrawerProps = {
+  choices: Choice[];
+  isStructuredOutput?: boolean;
+  isDrawerOpen: boolean;
+  setIsDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedChoiceIndex: number;
+  setSelectedChoiceIndex: (choiceIndex: number) => void;
+};
+
+export const ChoicesDrawer = ({
+  choices,
+  isStructuredOutput,
+  isDrawerOpen,
+  setIsDrawerOpen,
+  selectedChoiceIndex,
+  setSelectedChoiceIndex,
+}: ChoicesDrawerProps) => {
+  return (
+    <Drawer
+      open={isDrawerOpen}
+      onClose={() => setIsDrawerOpen(false)}
+      title="Choices"
+      anchor="right"
+      sx={{
+        '& .MuiDrawer-paper': {mt: '60px', width: '400px'},
+      }}>
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 1,
+          px: 2,
+          height: 44,
+          width: '100%',
+          borderBottom: `1px solid ${MOON_200}`,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}>
+        <Box
+          sx={{
+            height: 44,
+            display: 'flex',
+            alignItems: 'center',
+            fontWeight: 600,
+            fontSize: '1.25rem',
+          }}>
+          Responses
+        </Box>
+        <Button
+          size="medium"
+          variant="ghost"
+          icon="close"
+          onClick={() => setIsDrawerOpen(false)}
+          tooltip="Close"
+        />
+      </Box>
+      <Tailwind>
+        <div className="flex flex-col p-12">
+          {choices.map((c, index) => (
+            <div key={c.index}>
+              <div className="flex items-center gap-4 font-semibold">
+                <Tag color="moon" label={`Response ${index + 1}`} />
+                {index === selectedChoiceIndex ? (
+                  <Button
+                    className="text-green-500"
+                    size="small"
+                    variant="ghost"
+                    icon="checkmark">
+                    <span className="text-moon-500">Response selected</span>
+                  </Button>
+                ) : (
+                  <Button
+                    size="small"
+                    variant="ghost"
+                    icon="boolean"
+                    onClick={() => setSelectedChoiceIndex(index)}>
+                    <span className="text-moon-500">Select response</span>
+                  </Button>
+                )}
+              </div>
+              <ChoiceView
+                choice={c}
+                isStructuredOutput={isStructuredOutput}
+                isNested
+              />
+            </div>
+          ))}
+        </div>
+      </Tailwind>
+    </Drawer>
+  );
+};

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

@@ -1,9 +1,9 @@
 import React, {useState} from 'react';
 
+import {ChoicesDrawer} from './ChoicesDrawer';
 import {ChoicesViewCarousel} from './ChoicesViewCarousel';
-import {ChoicesViewLinear} from './ChoicesViewLinear';
 import {ChoiceView} from './ChoiceView';
-import {Choice, ChoicesMode} from './types';
+import {Choice} from './types';
 
 type ChoicesViewProps = {
   choices: Choice[];
@@ -14,7 +14,12 @@ export const ChoicesView = ({
   choices,
   isStructuredOutput,
 }: ChoicesViewProps) => {
-  const [mode, setMode] = useState<ChoicesMode>('linear');
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [localSelectedChoiceIndex, setLocalSelectedChoiceIndex] = useState(0);
+
+  const handleSetSelectedChoiceIndex = (choiceIndex: number) => {
+    setLocalSelectedChoiceIndex(choiceIndex);
+  };
 
   if (choices.length === 0) {
     return null;
@@ -26,20 +31,20 @@ export const ChoicesView = ({
   }
   return (
     <>
-      {mode === 'linear' && (
-        <ChoicesViewLinear
-          choices={choices}
-          isStructuredOutput={isStructuredOutput}
-          setMode={setMode}
-        />
-      )}
-      {mode === 'carousel' && (
-        <ChoicesViewCarousel
-          choices={choices}
-          isStructuredOutput={isStructuredOutput}
-          setMode={setMode}
-        />
-      )}
+      <ChoicesViewCarousel
+        choices={choices}
+        isStructuredOutput={isStructuredOutput}
+        selectedChoiceIndex={localSelectedChoiceIndex}
+        setSelectedChoiceIndex={handleSetSelectedChoiceIndex}
+        setIsDrawerOpen={setIsDrawerOpen}
+      />
+      <ChoicesDrawer
+        choices={choices}
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+        selectedChoiceIndex={localSelectedChoiceIndex}
+        setSelectedChoiceIndex={handleSetSelectedChoiceIndex}
+      />
     </>
   );
 };

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

@@ -1,34 +1,37 @@
-import React, {useState} from 'react';
+import React from 'react';
 
 import {Button} from '../../../../../Button';
 import {ChoiceView} from './ChoiceView';
-import {Choice, ChoicesMode} from './types';
+import {Choice} from './types';
 
 type ChoicesViewCarouselProps = {
   choices: Choice[];
   isStructuredOutput?: boolean;
-  setMode: React.Dispatch<React.SetStateAction<ChoicesMode>>;
+  setIsDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedChoiceIndex: number;
+  setSelectedChoiceIndex: (choiceIndex: number) => void;
 };
 
 export const ChoicesViewCarousel = ({
   choices,
   isStructuredOutput,
-  setMode,
+  setIsDrawerOpen,
+  selectedChoiceIndex,
+  setSelectedChoiceIndex,
 }: ChoicesViewCarouselProps) => {
-  const [step, setStep] = useState(0);
-
   const onNext = () => {
-    setStep((step + 1) % choices.length);
+    setSelectedChoiceIndex((selectedChoiceIndex + 1) % choices.length);
   };
   const onBack = () => {
-    const newStep = step === 0 ? choices.length - 1 : step - 1;
-    setStep(newStep);
+    const newStep =
+      selectedChoiceIndex === 0 ? choices.length - 1 : selectedChoiceIndex - 1;
+    setSelectedChoiceIndex(newStep);
   };
 
   return (
     <>
       <ChoiceView
-        choice={choices[step]}
+        choice={choices[selectedChoiceIndex]}
         isStructuredOutput={isStructuredOutput}
       />
       <div className="flex items-center">
@@ -37,7 +40,7 @@ export const ChoicesViewCarousel = ({
             size="small"
             variant="quiet"
             icon="expand-uncollapse"
-            onClick={() => setMode('linear')}
+            onClick={() => setIsDrawerOpen(true)}
             tooltip="Switch to linear view"
           />
         </div>
@@ -48,7 +51,7 @@ export const ChoicesViewCarousel = ({
             size="small"
             onClick={onBack}
           />
-          {step + 1} of {choices.length}
+          {selectedChoiceIndex + 1} of {choices.length}
           <Button
             variant="ghost"
             icon="chevron-next"

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/types.ts

@@ -113,5 +113,3 @@ export type Chat = {
   request: ChatRequest | null;
   result: ChatCompletion | null;
 };
-
-export type ChoicesMode = 'linear' | 'carousel';