From 1100020e500c0b1f8dee37a269c27b3cc042b501 Mon Sep 17 00:00:00 2001
From: jwlee64 <josiah.lee@wandb.com>
Date: Tue, 10 Dec 2024 22:35:43 -0800
Subject: [PATCH] add choices drawer

---
 .../Browse3/pages/ChatView/ChoiceView.tsx     |   8 +-
 .../Browse3/pages/ChatView/ChoicesDrawer.tsx  | 104 ++++++++++++++++++
 .../Browse3/pages/ChatView/ChoicesView.tsx    |  39 ++++---
 .../pages/ChatView/ChoicesViewCarousel.tsx    |  27 +++--
 .../pages/ChatView/ChoicesViewLinear.tsx      |  73 ------------
 .../Home/Browse3/pages/ChatView/types.ts      |   2 -
 6 files changed, 148 insertions(+), 105 deletions(-)
 create mode 100644 weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesDrawer.tsx
 delete mode 100644 weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesViewLinear.tsx

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
index c8143f9549e..d1a2c59d5d0 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoiceView.tsx
+++ b/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
     />
   );
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
new file mode 100644
index 00000000000..16d6897c27b
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesView.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesView.tsx
index c22df7c63d7..5ddc7f12202 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesView.tsx
+++ b/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}
+      />
     </>
   );
 };
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesViewCarousel.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesViewCarousel.tsx
index f4a52fc6801..a34932dea17 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesViewCarousel.tsx
+++ b/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"
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesViewLinear.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesViewLinear.tsx
deleted file mode 100644
index 92668c6504e..00000000000
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ChoicesViewLinear.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-
-import {Button} from '../../../../../Button';
-import {ChoiceView} from './ChoiceView';
-import {Choice, ChoicesMode} from './types';
-
-type ChoicesViewLinearProps = {
-  choices: Choice[];
-  isStructuredOutput?: boolean;
-  setMode: React.Dispatch<React.SetStateAction<ChoicesMode>>;
-};
-
-export const ChoicesViewLinear = ({
-  choices,
-  isStructuredOutput,
-  setMode,
-}: ChoicesViewLinearProps) => {
-  return (
-    <div className="flex flex-col gap-36">
-      {choices.map(c => (
-        <div>
-          <div className="mt-8 flex items-center">
-            <div
-              id={`choice-${c.index}`}
-              className="flex flex-auto items-center gap-4 text-xs">
-              {c.index !== 0 && (
-                <Button
-                  size="small"
-                  variant="quiet"
-                  icon="chevron-back"
-                  onClick={() => {
-                    const prevChoice = document.getElementById(
-                      `choice-${c.index - 1}`
-                    );
-                    prevChoice?.scrollIntoView({behavior: 'smooth'});
-                  }}
-                />
-              )}
-              <span>
-                Choice {c.index + 1} of {choices.length}
-              </span>
-              {c.index !== choices.length - 1 && (
-                <Button
-                  size="small"
-                  variant="quiet"
-                  icon="chevron-next"
-                  onClick={() => {
-                    const nextChoice = document.getElementById(
-                      `choice-${c.index + 1}`
-                    );
-                    nextChoice?.scrollIntoView({behavior: 'smooth'});
-                  }}
-                />
-              )}
-            </div>
-            <Button
-              size="small"
-              variant="quiet"
-              icon="collapse"
-              onClick={() => setMode('carousel')}
-              tooltip="Switch to carousel view"
-            />
-          </div>
-          <ChoiceView
-            key={c.index}
-            choice={c}
-            isStructuredOutput={isStructuredOutput}
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/types.ts b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/types.ts
index b5696055712..3bbe65a5baf 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/types.ts
+++ b/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';