prepare system instruction setting

Author: sutigit

src/client/components/ChatV2/ChatV2.tsx

@@ -49,7 +49,7 @@ export const ChatV2 = () => {
   const [prevResponse, setPrevResponse] = useLocalStorageState<{ id: string }>(`${localStoragePrefix}-prev-response`, { id: '' })
 
   // States
-  const [settingsModalOpen, setSettingsModalOpen] = useState(false)
+  const [settingsModalOpen, setSettingsModalOpen] = useState(true)
   const [activePromptId, setActivePromptId] = useState('')
   const [fileName, setFileName] = useState<string>('')
   const [completion, setCompletion] = useState<string>('')
@@ -212,8 +212,7 @@ export const ChatV2 = () => {
 
   useEffect(() => {
     // Fethces data from local storage according to chat
-    console.log("course changed")
-
+    console.log('course changed')
   }, [course])
 
   useEffect(() => {

src/client/components/ChatV2/SettingsModal.tsx

@@ -1,5 +1,5 @@
 import { Close } from '@mui/icons-material'
-import { Box, IconButton, Modal, Typography } from '@mui/material'
+import { Box, IconButton, Modal, TextField, Typography } from '@mui/material'
 import ModelSelector from './ModelSelector'
 import { validModels } from '../../../config'
 import React from 'react'
@@ -25,21 +25,33 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ open, setOpen, mod
           top: '50%',
           left: '50%',
           transform: 'translate(-50%, -50%)',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1.2rem',
+          minWidth: 600,
           width: '85vw',
+          maxWidth: 1000,
           minHeight: '70vh',
           bgcolor: 'background.paper',
           boxShadow: 24,
-          p: 4,
+          p: '2.5rem',
+          borderRadius: '0.3rem',
         }}
       >
         <IconButton onClick={() => setOpen(false)} sx={{ position: 'absolute', top: 8, right: 8, color: 'grey.500' }}>
           <Close />
         </IconButton>
-        <Typography id="modal-title" variant="h6" component="h2">
-          Settings
+        <Typography variant="h6" fontWeight={600}>
+          Alustus
         </Typography>
-        <ModelSelector currentModel={model} setModel={setModel} models={validModels.map((m) => m.name)} />
-        <RagSelector currentRagIndex={currentRagIndex} setRagIndex={setRagIndex} ragIndices={ragIndices} />
+        <Typography variant="body1">
+          Alustuksella tarkoitetaan yleistason ohjeistusta keskustelulle. Kielimallia voi esimerkiksi pyytää käyttämään akateemista kieltä tai esittämään puutarhuria jota
+          haastatellaan kaktusten hoidosta.
+        </Typography>
+        {/* <ModelSelector currentModel={model} setModel={setModel} models={validModels.map((m) => m.name)} /> */}
+        {/* Disabled for now due to RAG not functioning cirreclty */}
+        {/* <RagSelector currentRagIndex={currentRagIndex} setRagIndex={setRagIndex} ragIndices={ragIndices} /> */}
+        <TextField multiline minRows={6} maxRows={10} label="Alustuksen sisältö" defaultValue="Olet avulias avustaja" />
       </Box>
     </Modal>
   )