Resizeable drawer / update trial selection header

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

@@ -2,11 +2,13 @@ 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 React, {useState, useEffect, useCallback} from 'react';
 
 import {Button} from '../../../../../Button';
 import {ChoiceView} from './ChoiceView';
 import {Choice} from './types';
+import {ResizableDrawer} from '../common/ResizableDrawer';
+import {Icon} from '@wandb/weave/components/Icon';
 
 type ChoicesDrawerProps = {
   choices: Choice[];
@@ -25,21 +27,36 @@ export const ChoicesDrawer = ({
   selectedChoiceIndex,
   setSelectedChoiceIndex,
 }: ChoicesDrawerProps) => {
+  const [width, setWidth] = useState(784);
+  const [maxAllowedWidth, setMaxAllowedWidth] = useState(window.innerWidth - 73);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const newMaxWidth = window.innerWidth - 73;
+      setMaxAllowedWidth(newMaxWidth);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const handleFullScreen = useCallback(() => {
+    const newWidth = width === maxAllowedWidth ? 784 : maxAllowedWidth;
+    setWidth(newWidth);
+  }, [width, maxAllowedWidth]);
+
   return (
-    <Drawer
+    <ResizableDrawer
       open={isDrawerOpen}
       onClose={() => setIsDrawerOpen(false)}
-      title="Choices"
-      anchor="right"
-      sx={{
-        '& .MuiDrawer-paper': {mt: '60px', width: '400px'},
-      }}>
+      defaultWidth={width}
+      setWidth={setWidth}>
       <Box
         sx={{
           position: 'sticky',
           top: 0,
-          zIndex: 1,
-          px: 2,
+          zIndex: 20,
+          pl: "16px",
+          pr: "8px",
           height: 44,
           width: '100%',
           borderBottom: `1px solid ${MOON_200}`,
@@ -57,37 +74,43 @@ export const ChoicesDrawer = ({
             fontWeight: 600,
             fontSize: '1.25rem',
           }}>
-          Responses
+          Trials
+        </Box>
+        <Box sx={{display: 'flex', gap: 1}}>
+          <Button
+            size="medium"
+            variant="ghost"
+            icon="full-screen-mode-expand"
+            onClick={handleFullScreen}
+            tooltip={width === maxAllowedWidth ? "Exit full screen" : "Full screen"}
+          />
+          <Button
+            size="medium"
+            variant="ghost"
+            icon="close"
+            onClick={() => setIsDrawerOpen(false)}
+            tooltip="Close"
+          />
         </Box>
-        <Button
-          size="medium"
-          variant="ghost"
-          icon="close"
-          onClick={() => setIsDrawerOpen(false)}
-          tooltip="Close"
-        />
       </Box>
       <Tailwind>
-        <div className="flex flex-col p-12">
+        <div className="flex flex-col p-12 mb-[72px] gap-[16px]">
           {choices.map((c, index) => (
             <div key={index}>
-              <div className="flex items-center gap-4 font-semibold">
-                <Tag color="moon" label={`Response ${index + 1}`} />
+              <div className="sticky top-[44px] flex items-center bg-white py-[8px] z-10">
+                <p className="text-[14px] font-semibold mr-auto">Trial {index + 1}</p>
                 {index === selectedChoiceIndex ? (
-                  <Button
-                    className="text-green-500"
-                    size="small"
-                    variant="ghost"
-                    icon="checkmark">
-                    <span className="text-moon-500">Response selected</span>
-                  </Button>
+                  <div className="flex items-center gap-[2px]">
+                    <Icon name="checkmark" className="ml-[4px] w-[16px] text-green-500" />
+                    <span className="font-semibold text-sm">Response selected</span>
+                  </div>
                 ) : (
                   <Button
                     size="small"
-                    variant="ghost"
-                    icon="boolean"
+                    variant="secondary"
+                    icon="checkmark"
                     onClick={() => setSelectedChoiceIndex(index)}>
-                    <span className="text-moon-500">Select response</span>
+                    Select response
                   </Button>
                 )}
               </div>
@@ -101,6 +124,6 @@ export const ChoicesDrawer = ({
           ))}
         </div>
       </Tailwind>
-    </Drawer>
+    </ResizableDrawer>
   );
 };

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/common/ResizableDrawer.tsx

@@ -0,0 +1,115 @@
+import {Box, Drawer, DrawerProps} from '@mui/material';
+import {MOON_200} from '@wandb/weave/common/css/color.styles';
+import React, {useCallback, useEffect, useState} from 'react';
+
+interface ResizableDrawerProps extends Omit<DrawerProps, 'onClose' | 'anchor'> {
+  onClose: () => void;
+  defaultWidth?: number;
+  title?: React.ReactNode;
+  headerContent?: React.ReactNode;
+  setWidth?: (width: number) => void;
+}
+
+export const ResizableDrawer: React.FC<ResizableDrawerProps> = ({
+  children,
+  defaultWidth = 400,
+  title,
+  headerContent,
+  onClose,
+  setWidth: externalSetWidth,
+  ...drawerProps
+}) => {
+  const [internalWidth, setInternalWidth] = useState(defaultWidth);
+  const [isResizing, setIsResizing] = useState(false);
+  // 73px = 57px sidebar + 16px padding
+  const [maxAllowedWidth, setMaxAllowedWidth] = useState(window.innerWidth - 73);
+
+  const setWidthValue = useCallback((newWidth: number) => {
+    setInternalWidth(newWidth);
+    externalSetWidth?.(newWidth);
+  }, [externalSetWidth]);
+
+  useEffect(() => {
+    if (externalSetWidth) {
+      setInternalWidth(defaultWidth);
+    }
+  }, [defaultWidth, externalSetWidth]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const newMaxWidth = window.innerWidth - 73;
+      setMaxAllowedWidth(newMaxWidth);
+      if (internalWidth > newMaxWidth) {
+        setWidthValue(newMaxWidth);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [internalWidth, setWidthValue]);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    setIsResizing(true);
+    e.preventDefault();
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isResizing) return;
+
+      const newWidth = window.innerWidth - e.clientX;
+      if (newWidth >= 120 && newWidth <= maxAllowedWidth) {
+        setWidthValue(newWidth);
+      }
+    },
+    [isResizing, maxAllowedWidth, setWidthValue]
+  );
+
+  useEffect(() => {
+    if (isResizing) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isResizing, handleMouseMove, handleMouseUp]);
+
+  return (
+    <Drawer
+        {...drawerProps}
+        anchor="right"
+        onClose={onClose}
+        sx={{
+            '& .MuiDrawer-paper': {
+            mt: '60px',
+            width: `${internalWidth}px`,
+            position: 'fixed',
+            maxWidth: `${maxAllowedWidth}px`,
+            minWidth: '120px'
+            },
+        }}>
+        <Box
+            sx={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: -4,
+            width: 8,
+            cursor: 'ew-resize',
+            '&:hover': {
+                backgroundColor: 'rgba(0, 0, 0, 0.1)',
+            },
+            }}
+            onMouseDown={handleMouseDown}
+        />
+            {children}
+    </Drawer>
+  );
+};