model selector

Author: Veikkosuhonen

src/client/components/ChatV2/ChatV2.tsx

@@ -20,6 +20,7 @@ import { AppContext } from '../../util/context'
 import { Close, Settings } from '@mui/icons-material'
 import { SettingsModal } from './SettingsModal'
 import { Link } from 'react-router-dom'
+import { useScrollToBottom } from './useScrollToBottom'
 
 export const ChatV2 = () => {
   const { courseId } = useParams()
@@ -36,11 +37,11 @@ export const ChatV2 = () => {
   const [prevResponse, setPrevResponse] = useLocalStorageState<{
     id: string
   }>('general-prev-response', { id: '' })
-  
+
   const appContainerRef = useContext(AppContext)
   const chatContainerRef = useRef<HTMLDivElement>(null)
   const inputFileRef = useRef<HTMLInputElement>(null)
-  
+
   const [settingsModalOpen, setSettingsModalOpen] = useState(false)
   const [activePromptId, setActivePromptId] = useState('')
   const [fileName, setFileName] = useState<string>('')
@@ -52,7 +53,7 @@ export const ChatV2 = () => {
   const [tokenWarningVisible, setTokenWarningVisible] = useState(false)
   const [modelTemperature, setModelTemperature] = useState(0.5)
   const [saveConsent, setSaveConsent] = useState(true)
-  
+
   const [setRetryTimeout, clearRetryTimeout] = useRetryTimeout()
 
   const { t, i18n } = useTranslation()
@@ -169,27 +170,7 @@ export const ChatV2 = () => {
     clearRetryTimeout()
   }
 
-  useEffect(() => {
-    const chatContainer = chatContainerRef.current
-    const appContainer = appContainerRef.current
-
-    if (!chatContainer || !appContainer || !messages.length) return
-
-    const scrollToBottom = () => {
-      appContainer.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
-      })
-    }
-
-    const resizeObserver = new ResizeObserver(() => {
-      scrollToBottom()
-    })
-
-    resizeObserver.observe(chatContainer)
-
-    return () => resizeObserver.disconnect()
-  }, [])
+  useScrollToBottom(chatContainerRef, appContainerRef, messages)
 
   return (
     <Box
@@ -199,20 +180,17 @@ export const ChatV2 = () => {
         flexDirection: 'column',
       }}
     >
-      <SettingsModal open={settingsModalOpen} setOpen={setSettingsModalOpen}></SettingsModal>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
-
-      <Box sx={{ display: 'flex', gap: '1rem' }}>
-        {disclaimerInfo && <Disclaimer disclaimer={disclaimerInfo} />}
-        <SystemPrompt content={system.content} setContent={(content) => setSystem({ content })} />
-        <Button onClick={handleReset}>Reset</Button>
-        <IconButton onClick={() => setSettingsModalOpen(true)} title="Settings">
-          <Settings></Settings>
-        </IconButton>
-      </Box>
-        {
-          courseId ? <Link to={'/v2'}>CurreChat</Link> : <Link to={'/v2/sandbox'}>Ohtu Sandbox</Link>
-        }
+      <SettingsModal open={settingsModalOpen} setOpen={setSettingsModalOpen} model={model.name} setModel={(name) => setModel({ name })}></SettingsModal>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Box sx={{ display: 'flex', gap: '1rem' }}>
+          {disclaimerInfo && <Disclaimer disclaimer={disclaimerInfo} />}
+          <SystemPrompt content={system.content} setContent={(content) => setSystem({ content })} />
+          <Button onClick={handleReset}>Reset</Button>
+          <IconButton onClick={() => setSettingsModalOpen(true)} title="Settings">
+            <Settings></Settings>
+          </IconButton>
+        </Box>
+        {courseId ? <Link to={'/v2'}>CurreChat</Link> : <Link to={'/v2/sandbox'}>Ohtu Sandbox</Link>}
       </Box>
       <Box ref={chatContainerRef}>
         <Conversation messages={messages} completion={completion} />

src/client/components/ChatV2/ModelSelector.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next'
+import { Box, Typography, MenuItem, FormControl, Select, SelectChangeEvent, InputLabel } from '@mui/material'
+import { FREE_MODEL } from '../../../config'
+
+const ModelSelector = ({ currentModel, setModel, models }: { currentModel: string; setModel: (model: string) => void; models: string[] }) => {
+  const { t } = useTranslation()
+
+  if (models.length === 1) {
+    return (
+      <Box style={{ marginBottom: 5 }}>
+        <Typography variant="body1">
+          {t('status:modelInUse')} <code>{models[0]}</code>
+        </Typography>
+      </Box>
+    )
+  }
+
+  return (
+    <Box mb={2}>
+      <FormControl sx={{ width: '200px' }}>
+        <InputLabel>{t('status:modelInUse')}</InputLabel>
+        <Select label={t('status:modelInUse')} value={currentModel} onChange={(event: SelectChangeEvent) => setModel(event.target.value)}>
+          {models.map((model) => (
+            <MenuItem key={model} value={model}>
+              {model}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </Box>
+  )
+}
+
+export default ModelSelector

src/client/components/ChatV2/SettingsModal.tsx

@@ -1,7 +1,17 @@
 import { Close } from '@mui/icons-material'
 import { Box, IconButton, Modal, Typography } from '@mui/material'
+import ModelSelector from './ModelSelector'
+import { validModels } from '../../../config'
+import React from 'react'
 
-export const SettingsModal = ({ open, setOpen }) => {
+interface SettingsModalProps {
+  open: boolean
+  setOpen: (open: boolean) => void
+  model: string
+  setModel: (model: string) => void
+}
+
+export const SettingsModal: React.FC<SettingsModalProps> = ({ open, setOpen, model, setModel }) => {
   return (
     <Modal open={open} onClose={() => setOpen(false)}>
       <Box
@@ -18,11 +28,12 @@ export const SettingsModal = ({ open, setOpen }) => {
         }}
       >
         <IconButton onClick={() => setOpen(false)} sx={{ position: 'absolute', top: 8, right: 8, color: 'grey.500' }}>
-          <Close></Close>
+          <Close />
         </IconButton>
         <Typography id="modal-title" variant="h6" component="h2">
           Settings
         </Typography>
+        <ModelSelector currentModel={model} setModel={setModel} models={validModels.map(m => m.name)} />
       </Box>
     </Modal>
   )

src/client/components/ChatV2/useScrollToBottom.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+
+export const useScrollToBottom = (chatContainerRef: React.RefObject<HTMLElement>, appContainerRef: React.RefObject<HTMLElement>, messages: any[]) => {
+  useEffect(() => {
+    const chatContainer = chatContainerRef.current
+    const appContainer = appContainerRef.current
+
+    if (!chatContainer || !appContainer || !messages.length) return
+
+    const scrollToBottom = () => {
+      appContainer.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      })
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      scrollToBottom()
+    })
+
+    resizeObserver.observe(chatContainer)
+
+    return () => resizeObserver.disconnect()
+  }, [chatContainerRef, appContainerRef, messages.length])
+}