Improve Shortcuts

enricoros · Nov 8, 2023 · 73d0f43 · 73d0f43 · vercel · Nov 8, 2023
1 parent fc81265
commit 73d0f43
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/apps/chat/components/applayout/useLLMDropdown.tsx b/src/apps/chat/components/applayout/useLLMDropdown.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { ListItemButton, ListItemDecorator, Tooltip } from '@mui/joy';
+import { Box, ListItemButton, ListItemDecorator } from '@mui/joy';
 import BuildCircleIcon from '@mui/icons-material/BuildCircle';
 import SettingsIcon from '@mui/icons-material/Settings';
 
 import { DLLM, DLLMId, DModelSourceId, useModelsStore } from '~/modules/llms/store-llms';
 
 import { AppBarDropdown, DropdownItems } from '~/common/layout/AppBarDropdown';
 import { KeyStroke } from '~/common/components/KeyStroke';
+import { hideOnMobile } from '~/common/theme';
 import { openLayoutLLMOptions, openLayoutModelsSetup } from '~/common/layout/store-applayout';
 
 
@@ -52,12 +53,13 @@ function AppBarLLMDropdown(props: {
           </ListItemButton>
         )}
 
-        <Tooltip title={<KeyStroke combo='Ctrl + Shift + M' />}>
-          <ListItemButton key='menu-llms' onClick={openLayoutModelsSetup}>
-            <ListItemDecorator><BuildCircleIcon color='success' /></ListItemDecorator>
+        <ListItemButton key='menu-llms' onClick={openLayoutModelsSetup}>
+          <ListItemDecorator><BuildCircleIcon color='success' /></ListItemDecorator>
+          <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
             Models
-          </ListItemButton>
-        </Tooltip>
+            <KeyStroke light combo='Ctrl + Shift + M' sx={hideOnMobile} />
+          </Box>
+        </ListItemButton>
 
       </>}
     />

diff --git a/src/apps/chat/components/composer/Composer.tsx b/src/apps/chat/components/composer/Composer.tsx
@@ -90,11 +90,16 @@ const pasteClipboardLegend =
   <Box sx={{ p: 1, lineHeight: 2 }}>
     <b>Paste as 📚 Markdown attachment</b><br />
     Also converts Code and Tables<br />
-    <KeyStroke combo='Ctrl + Shift + V' />
+    <KeyStroke light combo='Ctrl + Shift + V' />
   </Box>;
 
 const MicButton = (props: { variant: VariantProp, color: ColorPaletteProp, onClick: () => void, sx?: SxProps }) =>
-  <Tooltip title={<KeyStroke combo='Ctrl + M' />} placement='top'>
+  <Tooltip placement='top' title={
+    <Box sx={{ p: 1, lineHeight: 2, gap: 1 }}>
+      Voice input<br />
+      <KeyStroke light combo='Ctrl + M' />
+    </Box>
+  }>
     <IconButton variant={props.variant} color={props.color} onClick={props.onClick} sx={props.sx}>
       <MicIcon />
     </IconButton>