Merge branch 'main' into langchain-rag

Author: Veikkosuhonen

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()

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()

src/client/App.tsx

@@ -1,15 +1,14 @@
-import { Box, Button, CssBaseline, Snackbar } from '@mui/material'
+import { Box, Button, CircularProgress, CssBaseline, Snackbar } from '@mui/material'
 import { ThemeProvider } from '@mui/material/styles'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { fi } from 'date-fns/locale'
 import { SnackbarProvider } from 'notistack'
 import React, { useEffect, useRef } from 'react'
-import { Outlet, useLocation, useParams } from 'react-router-dom'
+import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom'
 import { initShibbolethPinger } from 'unfuck-spa-shibboleth-session'
 import { PUBLIC_URL } from '../config'
 import { Feedback } from './components/Feedback'
-import Footer from './components/Footer'
 import NavBar from './components/NavBar'
 import { AppContext } from './contexts/AppContext'
 import { EmbeddedProvider, useIsEmbedded } from './contexts/EmbeddedContext'
@@ -75,23 +74,10 @@ const AdminLoggedInAsBanner = () => {
 const App = () => {
   useUpdateUrlLang()
   const theme = useTheme()
-  const { courseId } = useParams()
-  const location = useLocation()
-  const { user, isLoading } = useCurrentUser()
 
   useEffect(() => {
     initShibbolethPinger()
   }, [])
-  const onNoAccessPage = location.pathname.includes('/noaccess')
-
-  if (isLoading && !onNoAccessPage) return null
-
-  if (!onNoAccessPage && !hasAccess(user, courseId)) {
-    window.location.href = PUBLIC_URL + getRedirect(user)
-    return null
-  }
-
-  if (!user && !onNoAccessPage) return null
 
   return (
     <ThemeProvider theme={theme}>
@@ -127,7 +113,7 @@ const Layout = () => {
       >
         {!isEmbedded && <NavBar />}
         <Box sx={{ flex: 1 }}>
-          <Outlet />
+          <Content />
         </Box>
         <Feedback />
       </Box>
@@ -136,4 +122,26 @@ const Layout = () => {
   )
 }
 
+const Content = () => {
+  const { courseId } = useParams()
+  const location = useLocation()
+  const { user, isLoading } = useCurrentUser()
+
+  const onNoAccessPage = location.pathname.includes('/noaccess')
+
+  if (isLoading && !onNoAccessPage) return <CircularProgress sx={{ margin: 'auto' }} />
+
+  if (!onNoAccessPage && !hasAccess(user, courseId)) {
+    return <Navigate to={PUBLIC_URL + getRedirect(user)} />
+  }
+
+  if (!user && !onNoAccessPage) return null
+
+  return (
+    <Box sx={{ flex: 1 }}>
+      <Outlet />
+    </Box>
+  )
+}
+
 export default App

src/client/components/ChatV2/ChatBox.tsx

@@ -15,6 +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 { KeyCombinations, useKeyboardCommands } from './useKeyboardCommands'
 
 export const ChatBox = ({
   disabled,
@@ -36,6 +37,7 @@ export const ChatBox = ({
   handleContinue,
   handleSubmit,
   handleReset,
+  isMobile,
 }: {
   disabled: boolean
   currentModel: string
@@ -56,6 +58,7 @@ export const ChatBox = ({
   handleContinue: (message: string) => void
   handleSubmit: (message: string) => void
   handleReset: () => void
+  isMobile: boolean
 }) => {
   const { courseId } = useParams()
   const isEmbedded = useIsEmbedded()
@@ -67,14 +70,23 @@ 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()
 
+  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' || !user?.preferences?.sendShortcutMode
+
   const handleDeleteFile = () => {
     if (fileInputRef.current) {
       fileInputRef.current.value = ''
@@ -166,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 {
@@ -225,18 +237,30 @@ export const ChatBox = ({
                   />
                 </IconButton>
               </Tooltip>
-              <Tooltip title={t('chat:emptyConversation')} 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>
 
-            <Tooltip title={disabled ? t('chat:cancelResponse') : t('chat:shiftEnter')} arrow placement="top">
+            <Tooltip title={disabled ? t('chat:cancelResponse') : isShiftEnterSend ? t('chat:shiftEnterSend') : t('chat:enterSend')} arrow placement="top">
               <IconButton type={disabled ? 'button' : 'submit'} ref={sendButtonRef}>
                 {disabled ? <StopIcon /> : <Send />}
               </IconButton>
@@ -271,19 +295,21 @@ export const ChatBox = ({
             </Tooltip>
           </Box>
 
-          <Typography
-            sx={{
-              display: { sm: 'none', md: 'block' },
-              ml: 'auto',
-              opacity: acuallyDisabled ? 0 : 1,
-              transition: 'opacity 0.2s ease-in-out',
-              fontSize: '14px',
-            }}
-            variant="body1"
-            color="textSecondary"
-          >
-            {user?.preferences?.sendShortcutMode === 'enter' ? <ShiftEnterForNewline t={t} /> : <ShiftEnterToSend t={t} />}
-          </Typography>
+          {!isMobile && (
+            <Typography
+              sx={{
+                display: { sm: 'none', md: 'block' },
+                ml: 'auto',
+                opacity: acuallyDisabled ? 0 : 1,
+                transition: 'opacity 0.2s ease-in-out',
+                fontSize: '14px',
+              }}
+              variant="body1"
+              color="textSecondary"
+            >
+              {isShiftEnterSend ? <ShiftEnterToSend t={t} /> : <ShiftEnterForNewline t={t} />}
+            </Typography>
+          )}
 
           {!isEmbedded && (
             <Tooltip

src/client/components/ChatV2/ChatV2.tsx

@@ -512,6 +512,7 @@ export const ChatV2 = () => {
               handleSubmit(newMessage, false)
             }}
             handleReset={handleReset}
+            isMobile={isMobile}
           />
         </Box>
       </Box>

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>
   )
 }