chore(ui): Playground settings / show more / trials area

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

@@ -1,10 +1,11 @@
-import {Box, Drawer} from '@mui/material';
+import {Box} from '@mui/material';
 import {MOON_200} from '@wandb/weave/common/css/color.styles';
-import {Tag} from '@wandb/weave/components/Tag';
+import {Icon} from '@wandb/weave/components/Icon';
 import {Tailwind} from '@wandb/weave/components/Tailwind';
-import React from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 
 import {Button} from '../../../../../Button';
+import {ResizableDrawer} from '../common/ResizableDrawer';
 import {ChoiceView} from './ChoiceView';
 import {Choice} from './types';
 
@@ -25,21 +26,38 @@ 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,50 +75,64 @@ 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="mb-[72px] flex flex-col gap-[16px] px-[16px] pb-[16px] pt-[8px]">
           {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] z-10 flex items-center bg-white py-[8px]">
+                <p className="mr-[8px] text-[14px] font-semibold">
+                  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="text-sm font-semibold">
+                      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>
               <ChoiceView
                 choice={c}
                 isStructuredOutput={isStructuredOutput}
                 choiceIndex={index}
-                isNested
               />
             </div>
           ))}
         </div>
       </Tailwind>
-    </Drawer>
+    </ResizableDrawer>
   );
 };

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

@@ -69,7 +69,7 @@ export const ChoicesViewCarousel = ({
             icon="visible"
             onClick={() => setIsDrawerOpen(true)}
             tooltip="View all choices">
-            Review
+            View trials
           </Button>
         </div>
       }

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

@@ -122,8 +122,10 @@ export const MessagePanel = ({
             <div
               ref={contentRef}
               className={classNames('w-full overflow-y-hidden', {
-                'max-h-[400px]': !isShowingMore,
-                'max-h-full': isShowingMore,
+                'max-h-[400px]':
+                  !isShowingMore && !editorHeight && !isNested && !hasToolCalls,
+                'max-h-full':
+                  isShowingMore || editorHeight || isNested || hasToolCalls,
               })}>
               {messageHeader}
               {isPlayground && editorHeight ? (
@@ -167,7 +169,7 @@ export const MessagePanel = ({
               )}
             </div>
 
-            {isOverflowing && !editorHeight && (
+            {isOverflowing && !hasToolCalls && !editorHeight && (
               <ShowMoreButton
                 isUser={isUser}
                 isShowingMore={isShowingMore}

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

@@ -14,17 +14,15 @@ export const ShowMoreButton = ({
 }: ShowMoreButtonProps) => {
   return (
     <div
-      className={classNames(
-        'mb-[-8px] flex w-full items-center justify-center pb-8',
-        {
-          [`from-34% rounded-b-xl bg-gradient-to-t ${
-            isUser ? 'from-cactus-300/[0.32]' : 'from-moon-150'
-          } to-transparent`]: !isShowingMore,
-        }
-      )}>
+      className={classNames('flex w-full items-center justify-center', {
+        'pt-[4px]': isShowingMore,
+        [`absolute z-[1] mt-[-32px] rounded-b-xl bg-gradient-to-t from-70% pb-[4px] pt-[16px] ${
+          isUser ? 'from-[#f4fbe8]' : 'from-white'
+        } to-transparent`]: !isShowingMore,
+      })}>
       <Button
-        className="z-10"
         variant="ghost"
+        size="small"
         endIcon={isShowingMore ? 'chevron-up' : 'chevron-down'}
         onClick={() => setIsShowingMore(!isShowingMore)}>
         {isShowingMore ? 'Show less' : 'Show more'}

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

@@ -72,10 +72,15 @@ export const FunctionEditor: React.FC<FunctionEditorProps> = ({
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        gap: '8px',
-        pb: '4px',
+        gap: '4px',
       }}>
-      <Box sx={{display: 'flex', gap: '8px', alignItems: 'center'}}>
+      <Box
+        sx={{
+          display: 'flex',
+          gap: '4px',
+          fontSize: '14px',
+          alignItems: 'center',
+        }}>
         Functions
         {!LLM_MAX_TOKENS[playgroundState.model]?.supports_function_calling && (
           <Tooltip title="This model does not support functions">

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

@@ -59,7 +59,7 @@ export const PlaygroundSettings: React.FC<PlaygroundSettingsProps> = ({
               sx={{
                 display: 'flex',
                 flexDirection: 'column',
-                gap: '4px',
+                gap: '16px',
                 mt: 2,
               }}>
               <ResponseFormatEditor
@@ -158,13 +158,7 @@ export const PlaygroundSettings: React.FC<PlaygroundSettingsProps> = ({
                   width: '100%',
                   display: 'flex',
                   alignItems: 'center',
-                  justifyContent: 'space-between',
                 }}>
-                <label
-                  className="cursor-pointer"
-                  htmlFor="trackWithWeaveSwitch">
-                  Track this LLM call with Weave
-                </label>
                 <Switch.Root
                   id="trackWithWeaveSwitch"
                   size="small"
@@ -181,6 +175,11 @@ export const PlaygroundSettings: React.FC<PlaygroundSettingsProps> = ({
                     checked={playgroundStates[idx].trackLLMCall}
                   />
                 </Switch.Root>
+                <label
+                  className="ml-[8px] cursor-pointer text-[14px]"
+                  htmlFor="trackWithWeaveSwitch">
+                  Track this LLM call with Weave
+                </label>
               </Box>
             </Box>
           </Tabs.Content>

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

@@ -3,6 +3,7 @@ import {TextField} from '@mui/material';
 import Slider from '@mui/material/Slider';
 import {styled} from '@mui/material/styles';
 import {
+  MOON_200,
   MOON_250,
   MOON_350,
   TEAL_500,
@@ -93,13 +94,14 @@ export const PlaygroundSlider = ({
   }, [props.value, props.min, props.max, setValue]);
 
   return (
-    <Box sx={{lineHeight: '20px'}}>
+    <Box sx={{lineHeight: '14px'}}>
       <Box
         sx={{
           display: 'flex',
+          alignItems: 'center',
           justifyContent: 'space-between',
         }}>
-        <span>{props.label}</span>
+        <span style={{fontSize: '14px'}}>{props.label}</span>
         <TextField
           value={
             editing !== null
@@ -120,9 +122,13 @@ export const PlaygroundSlider = ({
             width: 50,
             '& input': {
               fontFamily: 'Source Sans Pro',
-              fontSize: '16px',
-              padding: 0,
+              fontSize: '14px',
+              padding: '0 2px',
               textAlign: 'right',
+              borderRadius: '4px',
+              '&:hover': {
+                backgroundColor: MOON_200,
+              },
             },
           }}
         />

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

@@ -27,10 +27,9 @@ export const ResponseFormatEditor: React.FC<ResponseFormatEditorProps> = ({
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        gap: '8px',
-        pb: '4px',
+        gap: '4px',
       }}>
-      <span>Response format</span>
+      <span style={{fontSize: '14px'}}>Response format</span>
       <Select
         value={options.find(opt => opt.value === responseFormat)}
         onChange={option => {

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

@@ -33,11 +33,10 @@ export const StopSequenceEditor: React.FC<StopSequenceEditorProps> = ({
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        gap: '8px',
+        gap: '4px',
         width: '100%',
-        pb: '4px',
       }}>
-      <span>Stop sequences</span>
+      <span style={{fontSize: '14px'}}>Stop sequences</span>
       <Box
         sx={{
           display: 'flex',
@@ -74,7 +73,6 @@ export const StopSequenceEditor: React.FC<StopSequenceEditorProps> = ({
           }}
           sx={{
             fontFamily: 'Source Sans Pro',
-            fontSize: '16px',
             '& .MuiInputBase-root': {
               border: 'none',
               '&:before, &:after': {
@@ -87,7 +85,6 @@ export const StopSequenceEditor: React.FC<StopSequenceEditorProps> = ({
             '& .MuiInputBase-input': {
               padding: '8px',
               fontFamily: 'Source Sans Pro',
-              fontSize: '16px',
             },
           }}
         />