feat: Keyboard shortcut for opening model selector. but only for macos

Veikkosuhonen · Veikkosuhonen · commit 3fdea2b35c08 · 2025-08-19T21:44:38.000+03:00
diff --git a/e2e/chat.spec.ts b/e2e/chat.spec.ts
@@ -9,7 +9,7 @@ test.describe('Chat v2 Conversation tests', () => {
   })
 
   test('Chat v2 mock response works', async ({ page }) => {
-    await page.locator('#model-selector').first().click()
+    await page.getByTestId('model-selector').first().click()
     await page.getByRole('option', { name: 'mock' }).click()
 
     const chatInput = page.locator('#chat-input').first()
@@ -24,7 +24,7 @@ test.describe('Chat v2 Conversation tests', () => {
   })
 
   test('Can empty conversation', async ({ page }) => {
-    await page.locator('#model-selector').first().click()
+    await page.getByTestId('model-selector').first().click()
     await page.getByRole('option', { name: 'mock' }).click()
 
     const chatInput = page.locator('#chat-input').first()
diff --git a/e2e/courseChatRag.spec.ts b/e2e/courseChatRag.spec.ts
@@ -9,7 +9,7 @@ test.describe('Course Chat v2', () => {
   })
 
   test('Course chat works', async ({ page }) => {
-    await page.locator('#model-selector').first().click()
+    await page.getByTestId('model-selector').first().click()
     await page.getByRole('option', { name: 'mock' }).click()
 
     const chatInput = page.locator('#chat-input').first()
diff --git a/src/client/components/ChatV2/ChatBox.tsx b/src/client/components/ChatV2/ChatBox.tsx
@@ -15,7 +15,7 @@ import { BlueButton, GrayButton, OutlineButtonBlack } from './general/Buttons'
 import { useIsEmbedded } from '../../contexts/EmbeddedContext'
 import useCurrentUser from '../../hooks/useCurrentUser'
 import { SendPreferenceConfiguratorModal, ShiftEnterForNewline, ShiftEnterToSend } from './SendPreferenceConfigurator'
-import { useKeyboardCommands } from './keyboardCommands'
+import { KeyCombinations, useKeyboardCommands } from './useKeyboardCommands'
 
 export const ChatBox = ({
   disabled,
@@ -70,15 +70,20 @@ export const ChatBox = ({
   const [fileTypeAlertOpen, setFileTypeAlertOpen] = useState<boolean>(false)
   const [sendPreferenceConfiguratorOpen, setSendPreferenceConfiguratorOpen] = useState<boolean>(false)
   const sendButtonRef = useRef<HTMLButtonElement>(null)
-
   const textFieldRef = useRef<HTMLInputElement>(null)
   const [message, setMessage] = useState<string>('')
 
   const acuallyDisabled = disabled || message.length === 0
 
   const { t } = useTranslation()
 
-  useKeyboardCommands({ resetChat: handleReset })
+  const [isModelSelectorOpen, setIsModelSelectorOpen] = useState<boolean>(false)
+  useKeyboardCommands({
+    resetChat: handleReset,
+    openModelSelector: () => {
+      setIsModelSelectorOpen(true)
+    },
+  }) // @todo what key combination to open model selector
 
   const isShiftEnterSend = user?.preferences?.sendShortcutMode === 'shift+enter'
 
@@ -173,7 +178,7 @@ export const ChatBox = ({
         onSubmit={onSubmit}
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
-            if (user?.preferences?.sendShortcutMode === 'enter') {
+            if (!isShiftEnterSend) {
               if (e.shiftKey) {
                 // Do nothing with this event, it will result in a newline being inserted
               } else {
@@ -232,14 +237,26 @@ export const ChatBox = ({
                   />
                 </IconButton>
               </Tooltip>
-              <Tooltip title={t('chat:emptyConversationTooltip')} arrow placement="top">
+              <Tooltip title={t('chat:emptyConversationTooltip', { hint: KeyCombinations.RESET_CHAT?.hint })} arrow placement="top">
                 <IconButton onClick={handleReset}>
                   <RestartAltIcon />
                 </IconButton>
               </Tooltip>
               {fileName && <Chip sx={{ borderRadius: 100 }} label={fileName} onDelete={handleDeleteFile} />}
               {!isEmbedded && (
-                <ModelSelector currentModel={currentModel} setModel={setModel} availableModels={availableModels} isTokenLimitExceeded={isTokenLimitExceeded} />
+                <ModelSelector
+                  currentModel={currentModel}
+                  setModel={setModel}
+                  availableModels={availableModels}
+                  isTokenLimitExceeded={isTokenLimitExceeded}
+                  isOpen={isModelSelectorOpen}
+                  setIsOpen={(open) => {
+                    setIsModelSelectorOpen(open)
+                    if (!open) {
+                      setTimeout(() => textFieldRef.current?.focus(), 0) // setTimeout required here...
+                    }
+                  }}
+                />
               )}
             </Box>
 
diff --git a/src/client/components/ChatV2/ModelSelector.tsx b/src/client/components/ChatV2/ModelSelector.tsx
@@ -1,20 +1,31 @@
 import { useTranslation } from 'react-i18next'
-import { MenuItem, FormControl, Select, SelectChangeEvent, Typography } from '@mui/material'
+import { MenuItem, FormControl, Select, SelectChangeEvent, Typography, Tooltip } from '@mui/material'
 import { FREE_MODEL } from '../../../config'
+import { KeyCombinations } from './useKeyboardCommands'
+import React from 'react'
 
 const ModelSelector = ({
   currentModel,
   setModel,
   availableModels,
   isTokenLimitExceeded,
+  isOpen,
+  setIsOpen,
 }: {
   currentModel: string
   setModel: (model: string) => void
   availableModels: string[]
   isTokenLimitExceeded: boolean
+  isOpen: boolean
+  setIsOpen: (isOpen: boolean) => void
 }) => {
   const { t } = useTranslation()
+  const selectRef = React.useRef<HTMLSelectElement>(null)
 
+  /**
+   * Extra tooltip logic because kb shortcut focusing would leave the tooltip annoyingly open without this.
+   */
+  const [tooltipOpen, setTooltipOpen] = React.useState(false)
   const validModel = availableModels.includes(currentModel) ? currentModel : ''
 
   return (
@@ -26,43 +37,76 @@ const ModelSelector = ({
       }}
       size="small"
     >
-      <Select
-        sx={{
-          '& .MuiOutlinedInput-notchedOutline': {
-            border: 'none',
-          },
-          '& .MuiSelect-select': {
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            paddingLeft: { xs: '4px !important', md: '10px !important' },
-            paddingRight: { xs: '20px !important', md: '30px !important' },
-            maxWidth: { xs: '50px', md: '240px' },
-          },
-        }}
-        id="model-selector"
-        value={validModel}
-        onChange={(event: SelectChangeEvent) => setModel(event.target.value)}
+      <Tooltip
+        title={t('chat:modelSelectorTooltip', { hint: KeyCombinations.OPEN_MODEL_SELECTOR?.hint })}
+        arrow
+        placement="top"
+        disableFocusListener
+        disableHoverListener
+        onPointerEnter={() => setTooltipOpen(true)}
+        onFocus={() => setTooltipOpen(true)}
+        onBlur={() => setTooltipOpen(false)}
+        onPointerLeave={() => setTooltipOpen(false)}
+        ref={selectRef}
+        open={tooltipOpen}
       >
-        {availableModels.map((model) => (
-          <MenuItem key={model} value={model} disabled={isTokenLimitExceeded && model !== FREE_MODEL}>
-            <Typography>
-              {model}
-              {model === FREE_MODEL && (
-                <Typography component="span" sx={{ fontStyle: 'italic', opacity: 0.8 }}>
-                  {' '}
-                  ({t('chat:freeModel')})
-                </Typography>
-              )}
-              {isTokenLimitExceeded && model !== FREE_MODEL && (
-                <Typography component="span" sx={{ fontStyle: 'italic', opacity: 0.8 }}>
-                  {' '}
-                  ({t('chat:modelDisabled')})
-                </Typography>
-              )}
-            </Typography>
-          </MenuItem>
-        ))}
-      </Select>
+        <Select
+          ref={selectRef}
+          open={isOpen}
+          onOpen={() => {
+            setIsOpen(true)
+            setTooltipOpen(true)
+          }}
+          onClose={(event) => {
+            event.stopPropagation()
+            setTooltipOpen(false)
+            selectRef.current?.blur()
+            setIsOpen(false)
+          }}
+          sx={{
+            '& .MuiOutlinedInput-notchedOutline': {
+              border: 'none',
+            },
+            '& .MuiSelect-select': {
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              paddingLeft: { xs: '4px !important', md: '10px !important' },
+              paddingRight: { xs: '20px !important', md: '30px !important' },
+              maxWidth: { xs: '50px', md: '240px' },
+              transition: 'background-color 0.3s ease',
+              '&:hover': {
+                backgroundColor: 'action.hover',
+              },
+              '&:focus': {
+                backgroundColor: 'action.focus',
+              },
+            },
+          }}
+          data-testid="model-selector"
+          value={validModel}
+          onChange={(event: SelectChangeEvent) => setModel(event.target.value)}
+        >
+          {availableModels.map((model) => (
+            <MenuItem key={model} value={model} disabled={isTokenLimitExceeded && model !== FREE_MODEL}>
+              <Typography>
+                {model}
+                {model === FREE_MODEL && (
+                  <Typography component="span" sx={{ fontStyle: 'italic', opacity: 0.8 }}>
+                    {' '}
+                    ({t('chat:freeModel')})
+                  </Typography>
+                )}
+                {isTokenLimitExceeded && model !== FREE_MODEL && (
+                  <Typography component="span" sx={{ fontStyle: 'italic', opacity: 0.8 }}>
+                    {' '}
+                    ({t('chat:modelDisabled')})
+                  </Typography>
+                )}
+              </Typography>
+            </MenuItem>
+          ))}
+        </Select>
+      </Tooltip>
     </FormControl>
   )
 }
diff --git a/src/client/components/ChatV2/keyboardCommands.ts b/src/client/components/ChatV2/keyboardCommands.ts
diff --git a/src/client/locales/en.json b/src/client/locales/en.json
@@ -84,12 +84,12 @@
     "denySave": "The conversation may not be saved.",
     "toBeSaved": "The discussion will be saved anonymously",
     "emptyConversation": "Clear conversation",
-    "emptyConversationTooltip": "Clear conversation (ctrl + W)",
+    "emptyConversationTooltip": "Clear conversation {{hint}}",
     "emptyConfirm": "Are you sure you want to empty this conversation?",
     "settings": "Chat settings",
     "shiftEnterSend": "Send (Shift + Enter)",
     "enterSend": "Send (Enter)",
-    "chooseModelTooltip": "Choose model (ctrl + M)",
+    "modelSelectorTooltip": "Choose model {{hint}}",
     "testUseInfo": "The new chat view is still in development and bugs are likely to occur",
     "searchTerms": "Searched for:",
     "readMore": "Read more",
diff --git a/src/client/locales/fi.json b/src/client/locales/fi.json
@@ -84,12 +84,12 @@
     "denySave": "Keskustelua ei saa tallentaa",
     "toBeSaved": "Keskustelu tallennetaan anonyymisti",
     "emptyConversation": "Tyhjennä keskustelu",
-    "emptyConversationTooltip": "Tyhjennä keskustelu (ctrl + W)",
+    "emptyConversationTooltip": "Tyhjennä keskustelu {{hint}}",
     "emptyConfirm": "Oletko varma että tahdot tyhjentää keskustelun?",
     "settings": "Keskustelun asetukset",
     "shiftEnterSend": "Lähetä (Shift + Enter)",
     "enterSend": "Lähetä (Enter)",
-    "chooseModelTooltip": "Valitse malli (ctrl + M)",
+    "modelSelectorTooltip": "Valitse malli {{hint}}",
     "testUseInfo": "Curren uusi chattinäkymä on vielä kehitysvaiheessa ja bugeja varmasti ilmenee",
     "searchTerms": "Hakusanat:",
     "readMore": "Lue lisää",
