Lint fix + imports

wandb · Dec 30, 2024 · b79d3c7 · b79d3c7
1 parent c2b0f22
commit b79d3c7
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 60 deletions.
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
@@ -1,14 +1,13 @@
-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, {useState, useEffect, useCallback} 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';
-import {ResizableDrawer} from '../common/ResizableDrawer';
-import {Icon} from '@wandb/weave/components/Icon';
 
 type ChoicesDrawerProps = {
   choices: Choice[];
@@ -28,7 +27,9 @@ export const ChoicesDrawer = ({
   setSelectedChoiceIndex,
 }: ChoicesDrawerProps) => {
   const [width, setWidth] = useState(784);
-  const [maxAllowedWidth, setMaxAllowedWidth] = useState(window.innerWidth - 73);
+  const [maxAllowedWidth, setMaxAllowedWidth] = useState(
+    window.innerWidth - 73
+  );
 
   useEffect(() => {
     const handleResize = () => {
@@ -55,8 +56,8 @@ export const ChoicesDrawer = ({
           position: 'sticky',
           top: 0,
           zIndex: 20,
-          pl: "16px",
-          pr: "8px",
+          pl: '16px',
+          pr: '8px',
           height: 44,
           width: '100%',
           borderBottom: `1px solid ${MOON_200}`,
@@ -82,7 +83,9 @@ export const ChoicesDrawer = ({
             variant="ghost"
             icon="full-screen-mode-expand"
             onClick={handleFullScreen}
-            tooltip={width === maxAllowedWidth ? "Exit full screen" : "Full screen"}
+            tooltip={
+              width === maxAllowedWidth ? 'Exit full screen' : 'Full screen'
+            }
           />
           <Button
             size="medium"
@@ -94,15 +97,22 @@ export const ChoicesDrawer = ({
         </Box>
       </Box>
       <Tailwind>
-        <div className="flex flex-col pt-[8px] pb-[16px] px-[16px] mb-[72px] gap-[16px]">
+        <div className="mb-[72px] flex flex-col gap-[16px] px-[16px] pb-[16px] pt-[8px]">
           {choices.map((c, index) => (
             <div key={index}>
-              <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>
+              <div className="sticky top-[44px] z-10 flex items-center bg-white py-[8px]">
+                <p className="mr-auto text-[14px] font-semibold">
+                  Trial {index + 1}
+                </p>
                 {index === selectedChoiceIndex ? (
                   <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>
+                    <Icon
+                      name="checkmark"
+                      className="ml-[4px] w-[16px] text-green-500"
+                    />
+                    <span className="text-sm font-semibold">
+                      Response selected
+                    </span>
                   </div>
                 ) : (
                   <Button

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/MessagePanel.tsx b/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 && !editorHeight && !isNested && !hasToolCalls,
-                'max-h-full': isShowingMore || editorHeight || isNested || hasToolCalls,
+                'max-h-[400px]':
+                  !isShowingMore && !editorHeight && !isNested && !hasToolCalls,
+                'max-h-full':
+                  isShowingMore || editorHeight || isNested || hasToolCalls,
               })}>
               {messageHeader}
               {isPlayground && editorHeight ? (

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ShowMoreButton.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ChatView/ShowMoreButton.tsx
@@ -14,15 +14,12 @@ export const ShowMoreButton = ({
 }: ShowMoreButtonProps) => {
   return (
     <div
-      className={classNames(
-        'flex w-full items-center justify-center',
-        {
-          'pt-[4px]': isShowingMore,
-          [`absolute mt-[-32px] pt-[16px] pb-[4px] from-70% z-[1] rounded-b-xl bg-gradient-to-t ${
-            isUser ? 'from-[#f4fbe8]' : 'from-white'
-          } 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
         variant="ghost"
         size="small"

diff --git a/...gePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/FunctionEditor.tsx b/...gePanelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/FunctionEditor.tsx
@@ -74,7 +74,13 @@ export const FunctionEditor: React.FC<FunctionEditorProps> = ({
         flexDirection: 'column',
         gap: '4px',
       }}>
-      <Box sx={{display: 'flex', gap: '4px', fontSize: '14px', 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">

diff --git a/...nelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/StopSequenceEditor.tsx b/...nelComponents/Home/Browse3/pages/PlaygroundPage/PlaygroundSettings/StopSequenceEditor.tsx
@@ -34,7 +34,7 @@ export const StopSequenceEditor: React.FC<StopSequenceEditorProps> = ({
         display: 'flex',
         flexDirection: 'column',
         gap: '4px',
-        width: '100%'
+        width: '100%',
       }}>
       <span style={{fontSize: '14px'}}>Stop sequences</span>
       <Box

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/common/ResizableDrawer.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/common/ResizableDrawer.tsx
@@ -1,5 +1,4 @@
 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'> {
@@ -22,12 +21,17 @@ export const ResizableDrawer: React.FC<ResizableDrawerProps> = ({
   const [internalWidth, setInternalWidth] = useState(defaultWidth);
   const [isResizing, setIsResizing] = useState(false);
   // 73px = 57px sidebar + 16px padding
-  const [maxAllowedWidth, setMaxAllowedWidth] = useState(window.innerWidth - 73);
+  const [maxAllowedWidth, setMaxAllowedWidth] = useState(
+    window.innerWidth - 73
+  );
 
-  const setWidthValue = useCallback((newWidth: number) => {
-    setInternalWidth(newWidth);
-    externalSetWidth?.(newWidth);
-  }, [externalSetWidth]);
+  const setWidthValue = useCallback(
+    (newWidth: number) => {
+      setInternalWidth(newWidth);
+      externalSetWidth?.(newWidth);
+    },
+    [externalSetWidth]
+  );
 
   useEffect(() => {
     if (externalSetWidth) {
@@ -59,7 +63,9 @@ export const ResizableDrawer: React.FC<ResizableDrawerProps> = ({
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
-      if (!isResizing) return;
+      if (!isResizing) {
+        return;
+      }
 
       const newWidth = window.innerWidth - e.clientX;
       if (newWidth >= 120 && newWidth <= maxAllowedWidth) {
@@ -83,33 +89,33 @@ export const ResizableDrawer: React.FC<ResizableDrawerProps> = ({
 
   return (
     <Drawer
-        {...drawerProps}
-        anchor="right"
-        onClose={onClose}
+      {...drawerProps}
+      anchor="right"
+      onClose={onClose}
+      sx={{
+        '& .MuiDrawer-paper': {
+          mt: '60px',
+          width: `${internalWidth}px`,
+          position: 'fixed',
+          maxWidth: `${maxAllowedWidth}px`,
+          minWidth: '120px',
+        },
+      }}>
+      <Box
         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}
+          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>
   );
 };