Misc UX cleanups

enricoros · Jan 24, 2024 · e1802cb · e1802cb
1 parent afeab71
commit e1802cb
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 28 deletions.
diff --git a/src/apps/chat/commands/CommandsReact.tsx b/src/apps/chat/commands/CommandsReact.tsx
@@ -9,7 +9,7 @@ export const CommandsReact: ICommandsProvider = {
   getCommands: () => [{
     primary: '/react',
     arguments: ['prompt'],
-    description: 'Use the AI ReAct strategy to answer your query (as sidebar)',
+    description: 'Use the AI ReAct strategy to answer your query',
     Icon: PsychologyIcon,
   }],
 

diff --git a/src/apps/chat/components/composer/Composer.tsx b/src/apps/chat/components/composer/Composer.tsx
@@ -437,8 +437,8 @@ export function Composer(props: {
         : props.isDeveloperMode
           ? 'Chat with me · drop source files · attach code...'
           : props.capabilityHasT2I
-            ? 'Chat · /react · /draw · drop text files...'
-            : 'Chat · /react · drop text files...';
+            ? 'Chat · /react · /draw · drop files...'
+            : 'Chat · /react · drop files...';
 
 
   return (

diff --git a/src/apps/chat/components/composer/actile/ActilePopup.tsx b/src/apps/chat/components/composer/actile/ActilePopup.tsx
@@ -21,7 +21,7 @@ export function ActilePopup(props: {
   const hasAnyIcon = props.items.some(item => !!item.Icon);
 
   return (
-    <CloseableMenu open anchorEl={props.anchorEl} onClose={props.onClose} noTopPadding noBottomPadding sx={{ minWidth: 260 }}>
+    <CloseableMenu open anchorEl={props.anchorEl} onClose={props.onClose} noTopPadding noBottomPadding sx={{ minWidth: 320 }}>
 
       {!!props.title && (
         <Sheet variant='soft' sx={{ p: 1, borderBottom: '1px solid', borderBottomColor: 'neutral.softActiveBg' }}>
@@ -40,35 +40,39 @@ export function ActilePopup(props: {
       )}
 
       {props.items.map((item, idx) => {
+          const isActive = idx === props.activeItemIndex;
           const labelBold = item.label.slice(0, props.activePrefixLength);
           const labelNormal = item.label.slice(props.activePrefixLength);
           return (
-            <ListItemButton
+            <ListItem
               key={item.id}
-              variant={idx === props.activeItemIndex ? 'soft' : undefined}
+              variant={isActive ? 'soft' : undefined}
+              color={isActive ? 'primary' : undefined}
               onClick={() => props.onItemClick(item)}
             >
-              {hasAnyIcon && (
-                <ListItemDecorator>
-                  {item.Icon ? <item.Icon /> : null}
-                </ListItemDecorator>
-              )}
-              <Box>
+              <ListItemButton>
+                {hasAnyIcon && (
+                  <ListItemDecorator>
+                    {item.Icon ? <item.Icon /> : null}
+                  </ListItemDecorator>
+                )}
+                <Box>
 
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Typography level='title-md' color='primary'>
-                    <span style={{ fontWeight: 600, textDecoration: 'underline' }}>{labelBold}</span>{labelNormal}
-                  </Typography>
-                  {item.argument && <Typography level='body-sm'>
-                    {item.argument}
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Typography level='title-sm' color={isActive ? 'primary' : undefined}>
+                      <span style={{ fontWeight: 600, textDecoration: 'underline' }}>{labelBold}</span>{labelNormal}
+                    </Typography>
+                    {item.argument && <Typography level='body-sm'>
+                      {item.argument}
+                    </Typography>}
+                  </Box>
+
+                  {!!item.description && <Typography level='body-xs'>
+                    {item.description}
                   </Typography>}
                 </Box>
-
-                {!!item.description && <Typography level='body-xs'>
-                  {item.description}
-                </Typography>}
-              </Box>
-            </ListItemButton>
+              </ListItemButton>
+            </ListItem>
           );
         },
       )}

diff --git a/src/apps/chat/components/composer/buttons/ButtonAttachCamera.tsx b/src/apps/chat/components/composer/buttons/ButtonAttachCamera.tsx
@@ -21,7 +21,7 @@ function ButtonAttachCamera(props: { isMobile?: boolean, onOpenCamera: () => voi
       <AddAPhotoIcon />
     </IconButton>
   ) : (
-    <Tooltip variant='solid' placement='top-start' title={attachCameraLegend(!!props.isMobile)}>
+    <Tooltip disableInteractive variant='solid' placement='top-start' title={attachCameraLegend(!!props.isMobile)}>
       <Button fullWidth variant='plain' color='neutral' onClick={props.onOpenCamera} startDecorator={<AddAPhotoIcon />}
               sx={{ justifyContent: 'flex-start' }}>
         Camera

diff --git a/src/apps/chat/components/composer/buttons/ButtonAttachClipboard.tsx b/src/apps/chat/components/composer/buttons/ButtonAttachClipboard.tsx
@@ -22,7 +22,7 @@ function ButtonAttachClipboard(props: { isMobile?: boolean, onClick: () => void
       <ContentPasteGoIcon />
     </IconButton>
   ) : (
-    <Tooltip variant='solid' placement='top-start' title={pasteClipboardLegend}>
+    <Tooltip disableInteractive variant='solid' placement='top-start' title={pasteClipboardLegend}>
       <Button fullWidth variant='plain' color='neutral' startDecorator={<ContentPasteGoIcon />} onClick={props.onClick}
               sx={{ justifyContent: 'flex-start' }}>
         Paste

diff --git a/src/apps/chat/components/composer/buttons/ButtonAttachFile.tsx b/src/apps/chat/components/composer/buttons/ButtonAttachFile.tsx
@@ -19,7 +19,7 @@ function ButtonAttachFile(props: { isMobile?: boolean, onAttachFilePicker: () =>
       <AttachFileOutlinedIcon />
     </IconButton>
   ) : (
-    <Tooltip variant='solid' placement='top-start' title={attachFileLegend}>
+    <Tooltip disableInteractive variant='solid' placement='top-start' title={attachFileLegend}>
       <Button fullWidth variant='plain' color='neutral' onClick={props.onAttachFilePicker} startDecorator={<AttachFileOutlinedIcon />}
               sx={{ justifyContent: 'flex-start' }}>
         File

diff --git a/src/apps/chat/components/composer/buttons/ButtonCall.tsx b/src/apps/chat/components/composer/buttons/ButtonCall.tsx
@@ -16,7 +16,7 @@ export function ButtonCall(props: { isMobile?: boolean, disabled?: boolean, onCl
       <CallIcon />
     </IconButton>
   ) : (
-    <Tooltip variant='solid' arrow placement='right' title={callConversationLegend}>
+    <Tooltip disableInteractive variant='solid' arrow placement='right' title={callConversationLegend}>
       <Button variant='soft' color='primary' disabled={props.disabled} onClick={props.onClick} endDecorator={<CallIcon />} sx={props.sx}>
         Call
       </Button>

diff --git a/src/common/components/GoodTooltip.tsx b/src/common/components/GoodTooltip.tsx
@@ -17,6 +17,7 @@ export const GoodTooltip = (props: {
   <Tooltip
     title={props.title}
     placement={props.placement}
+    disableInteractive
     variant={(props.isError || props.isWarning) ? 'soft' : undefined}
     color={props.isError ? 'danger' : props.isWarning ? 'warning' : undefined}
     sx={{