feat: Rag creator UX improvements & localization

Author: Veikkosuhonen

src/client/components/Courses/Course/index.tsx

@@ -287,7 +287,7 @@ const Course = () => {
           <Tab label={t('course:stats')} to={`/courses/${id}`} component={Link} />
           <Tab label={t('course:discussions')} to={`/courses/${id}/discussions`} component={Link} />
           <Tab label={t('course:prompts')} to={`/courses/${id}/prompts`} component={Link} />
-          <Tab label={t('course:rag')} to={`/courses/${id}/rag`} component={Link} />
+          <Tab label={t('course:sourceMaterials')} to={`/courses/${id}/rag`} component={Link} />
         </RouterTabs>
       </Box>
 

src/client/components/Rag/Rag.tsx

@@ -17,60 +17,26 @@ import {
   MenuItem,
   InputLabel,
 } from '@mui/material'
-import { useNavigate, Link as RouterLink, useParams } from 'react-router-dom'
-import { useCourseRagIndices, useRagIndices } from '../../hooks/useRagIndices'
-import { useCreateRagIndexMutation } from './api'
+import { Link as RouterLink, useParams } from 'react-router-dom'
+import { useCourseRagIndices } from '../../hooks/useRagIndices'
 import useCourse from '../../hooks/useCourse'
+import { RagCreator } from './RagCreator'
+import { useTranslation } from 'react-i18next'
 
 const Rag: React.FC = () => {
+  const { t } = useTranslation()
   const { id: courseId } = useParams<{ id: string }>()
   const { data: chatInstance } = useCourse(courseId)
-  const navigate = useNavigate()
+
   const { ragIndices } = useCourseRagIndices(chatInstance?.id, true)
-  const createIndexMutation = useCreateRagIndexMutation()
-  const [indexName, setIndexName] = useState('')
-  const [language, setLanguage] = useState<'Finnish' | 'English'>('English')
 
   return (
     <Container sx={{ display: 'flex', gap: 2, mt: '4rem', mb: '10rem' }} maxWidth="xl">
       <Box>
         <Typography variant="h4" mb="1rem">
-          RAG Indices
+          {t('rag:sourceMaterials')}
         </Typography>
-        {chatInstance?.id && (
-          <Box sx={{ display: 'flex', gap: 2, marginBottom: 2 }}>
-            <TextField
-              label="Index Name"
-              helperText="Use a descriptive name. It is shown to users when RAG is used."
-              variant="outlined"
-              value={indexName}
-              onChange={(e) => setIndexName(e.target.value)}
-              fullWidth
-            />
-            <FormControl fullWidth>
-              <InputLabel id="language-label">Language</InputLabel>
-              <Select labelId="language-label" id="language-select" value={language} onChange={(e) => setLanguage(e.target.value as 'Finnish' | 'English')}>
-                <MenuItem value={'Finnish'}>Finnish</MenuItem>
-                <MenuItem value={'English'}>English</MenuItem>
-              </Select>
-            </FormControl>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={async () => {
-                const newIndex = await createIndexMutation.mutateAsync({
-                  chatInstanceId: chatInstance?.id,
-                  indexName,
-                  language,
-                })
-                setIndexName('')
-                navigate(`/rag/${newIndex.id}`)
-              }}
-            >
-              Create Index
-            </Button>
-          </Box>
-        )}
+        {chatInstance?.id && <RagCreator chatInstance={chatInstance} />}
         {ragIndices?.map((index) => (
           <Paper
             key={index.id}
@@ -82,10 +48,10 @@ const Rag: React.FC = () => {
             <Table sx={{ mb: 1 }}>
               <TableHead>
                 <TableRow>
-                  <TableCell>ID</TableCell>
-                  <TableCell>Name</TableCell>
-                  <TableCell>Language</TableCell>
-                  <TableCell>Number of files</TableCell>
+                  <TableCell>{t('rag:id')}</TableCell>
+                  <TableCell>{t('rag:name')}</TableCell>
+                  <TableCell>{t('rag:language')}</TableCell>
+                  <TableCell>{t('rag:numberOfFiles')}</TableCell>
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -99,7 +65,7 @@ const Rag: React.FC = () => {
             </Table>
             <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
               <Link to={`/rag/${index.id}`} component={RouterLink} sx={{ ml: 'auto' }}>
-                View details
+                {t('rag:viewDetails')}
               </Link>
             </Box>
           </Paper>

src/client/components/Rag/RagCreator.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react'
+import { useCreateRagIndexMutation } from './api'
+import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, InputLabel, MenuItem, Select, TextField } from '@mui/material'
+import { OutlineButtonBlack } from '../ChatV2/general/Buttons'
+import { useNavigate } from 'react-router-dom'
+import type { Course } from '../../types'
+import { useTranslation } from 'react-i18next'
+
+export const RagCreator = ({ chatInstance }: { chatInstance: Course }) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const createIndexMutation = useCreateRagIndexMutation()
+  const [indexName, setIndexName] = useState('')
+  const [language, setLanguage] = useState<'Finnish' | 'English'>('English')
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <OutlineButtonBlack onClick={() => setOpen(true)}>{t('rag:createNewIndex')}</OutlineButtonBlack>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        slotProps={{
+          paper: {
+            component: 'form',
+            onSubmit: async (event: React.FormEvent<HTMLFormElement>) => {
+              event.preventDefault()
+              const newIndex = await createIndexMutation.mutateAsync({
+                chatInstanceId: chatInstance?.id,
+                indexName,
+                language,
+              })
+              setIndexName('')
+              navigate(`/rag/${newIndex.id}`)
+              setOpen(false)
+            },
+          },
+        }}
+      >
+        <DialogTitle>{t('rag:createNewIndex')}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{t('rag:creatorGuide')}</DialogContentText>
+          <TextField
+            label={t('rag:nameLabel')}
+            helperText={t('rag:nameHelperText')}
+            variant="outlined"
+            value={indexName}
+            onChange={(e) => setIndexName(e.target.value)}
+            fullWidth
+            required
+            slotProps={{
+              htmlInput: { minLength: 5 },
+            }}
+            sx={{ my: '2rem' }}
+          />
+          <FormControl fullWidth sx={{ my: '2rem' }}>
+            <InputLabel id="language-label">{t('rag:language')}</InputLabel>
+            <Select labelId="language-label" id="language-select" value={language} onChange={(e) => setLanguage(e.target.value as 'Finnish' | 'English')}>
+              <MenuItem value={'Finnish'}>{t('rag:finnish')}</MenuItem>
+              <MenuItem value={'English'}>{t('rag:english')}</MenuItem>
+            </Select>
+          </FormControl>
+        </DialogContent>
+        <DialogActions>
+          <OutlineButtonBlack color="primary" type="submit">
+            {t('rag:createIndex')}
+          </OutlineButtonBlack>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

src/client/components/Rag/RagFile.tsx

@@ -7,13 +7,15 @@ import { RagFileInfo } from './RagFileDetails'
 import type { RagIndexAttributes } from '../../../server/db/models/ragIndex'
 import { Chunk } from './Chunk'
 import { useDeleteRagFileMutation } from './api'
+import { useTranslation } from 'react-i18next'
 
 type RagFile = RagFileAttributes & {
   fileContent: string
   ragIndex: RagIndexAttributes
 }
 
 export const RagFile: React.FC = () => {
+  const { t } = useTranslation()
   const { id, fileId } = useParams()
   const {
     data: ragFile,
@@ -41,9 +43,9 @@ export const RagFile: React.FC = () => {
   return (
     <Container sx={{ mt: '4rem', mb: '10rem' }} maxWidth="xl">
       <Link component={RouterLink} to={`/rag/${id}`}>
-        Back to RAG Index
+        {t('rag:backToCollection')}
       </Link>
-      <Typography variant="body1">RAG file</Typography>
+      <Typography variant="body1">{t('rag:file')}</Typography>
       <Typography variant="h3">
         {ragFile.ragIndex.metadata?.name} / {ragFile.filename}
       </Typography>
@@ -61,12 +63,12 @@ export const RagFile: React.FC = () => {
           }
         }}
       >
-        Delete File
+        {t('rag:deleteFile')}
       </Button>
       <RagFileInfo file={ragFile} />
-      <Typography variant="h4">Content</Typography>
+      <Typography variant="h4">{t('rag:content')}</Typography>
       {ragFile.fileContent.length === 0 ? (
-        <Typography variant="body1">No content</Typography>
+        <Typography variant="body1">{t('rag:noContent')}</Typography>
       ) : (
         <Chunk
           doc={{

src/client/components/Rag/RagIndex.tsx

@@ -6,6 +6,7 @@ import { orderBy } from 'lodash'
 import { RagFileInfo } from './RagFileDetails'
 import { useDeleteRagIndexMutation, useRagIndexDetails, useUploadMutation } from './api'
 import { Search } from './Search'
+import { useTranslation } from 'react-i18next'
 
 const VisuallyHiddenInput = styled('input')({
   clip: 'rect(0 0 0 0)',
@@ -20,6 +21,7 @@ const VisuallyHiddenInput = styled('input')({
 })
 
 export const RagIndex: React.FC = () => {
+  const { t } = useTranslation()
   const { id: strId } = useParams() as { id: string }
   const navigate = useNavigate()
   const id = parseInt(strId, 10)
@@ -33,12 +35,12 @@ export const RagIndex: React.FC = () => {
 
   return (
     <Container sx={{ mt: '4rem', mb: '10rem' }} maxWidth="xl">
-      <Typography variant="body1">RAG index</Typography>
+      <Typography variant="body1">{t('rag:collection')}</Typography>
       <Typography variant="h3">{ragDetails?.metadata?.name}</Typography>
       <Box py={2}>
         <Box sx={{ display: 'flex', gap: 2 }}>
           <Button component="label" variant="contained" tabIndex={-1} startIcon={<CloudUpload />} disabled={uploadMutation.isPending}>
-            {uploadMutation.isPending ? 'Uploading...' : 'Upload Files'}
+            {uploadMutation.isPending ? t('rag:uploading') : t('rag:uploadFiles')}
             <VisuallyHiddenInput
               type="file"
               onChange={async (event) => {
@@ -62,12 +64,12 @@ export const RagIndex: React.FC = () => {
               }
             }}
           >
-            Delete Index
+            {t('rag:deleteCollection')}
           </Button>
         </Box>
         <Search ragIndex={ragDetails} />
         <Box mt={2}>
-          <Typography variant="h6">Files:</Typography>
+          <Typography variant="h6">{t('rag:files')}</Typography>
           {orderBy(ragDetails?.ragFiles, [(f) => Date.parse(f.createdAt as unknown as string)], ['desc']).map((file) => (
             <RagFileInfo key={file.id} file={file} link />
           ))}

src/client/locales/en.json

@@ -291,7 +291,8 @@
     "rag": "RAG",
     "remove": "remove",
     "customResponsibility": "manually added",
-    "add": "add"
+    "add": "add",
+    "sourceMaterials": "Source materials"
   },
   "tooltip": {
     "copied": "Copied!"
@@ -323,5 +324,30 @@
     "toNewline": "to add a new line",
     "ok": "Ok",
     "openConfigurator": "Keyboard shortcut for sending a message"
+  },
+  "rag": {
+    "sourceMaterials": "Source materials",
+    "id": "ID",
+    "name": "Name",
+    "language": "Language",
+    "numberOfFiles": "Number of files",
+    "viewDetails": "View details",
+    "collection": "Source material collection",
+    "deleteCollection": "Delete collection",
+    "files": "Source material files",
+    "backToCollection": "Back to collection",
+    "file": "Source material file",
+    "deleteFile": "Delete file",
+    "content": "Content",
+    "noContent": "No content",
+    "creatorGuide": "A RAG index is a collection of documents that are indexed for semantic search and retrieval. Students may activate it in the course chat, which gives the LLM a tool to retrieve relevant information from the index based on a query which it will base its response on. The index name, description and language are especially important as the LLM will use them to decide when to search the index and how to formulate the search query.",
+    "uploading": "Uploading",
+    "uploadFiles": "Upload files",
+    "createNewIndex": "Create a new collection",
+    "finnish": "Finnish",
+    "english": "English",
+    "createIndex": "Create collection",
+    "nameLabel": "Collection name",
+    "nameHelperText": "Use a descriptive name (for example the full name of the course)"
   }
-}
+}

src/client/locales/fi.json

@@ -291,7 +291,8 @@
     "rag": "RAG",
     "remove": "poista",
     "customResponsibility": "manuaalisesti lisätty",
-    "add": "lisää"
+    "add": "lisää",
+    "sourceMaterials": "Lähdemateriaalit"
   },
   "tooltip": {
     "copied": "Kopioitu!"
@@ -323,5 +324,30 @@
     "toNewline": "lisää uuden rivin",
     "ok": "Ok",
     "openConfigurator": "Viestin lähetyksen näppäinyhdistelmä"
+  },
+  "rag": {
+    "sourceMaterials": "Lähdemateriaalit",
+    "id": "ID",
+    "name": "Name",
+    "language": "Kieli",
+    "numberOfFiles": "Tiedostojen lukumäärä",
+    "viewDetails": "Lisätiedot",
+    "collection": "Lähdemateriaalikokoelma",
+    "deleteCollection": "Poista kokoelma",
+    "files": "Lähdemateriaalin tiedostot",
+    "backToCollection": "Takaisin kokoelmaan",
+    "file": "Lähdemateriaalin tiedosto",
+    "deleteFile": "Poista tiedosto",
+    "content": "Sisältö",
+    "noContent": "Ei sisältöä",
+    "creatorGuide": "Lähdemateriaalikokoelma on joukko tiedostoja, joista kielimalli voi hakea tietoa tarpeen mukaan. Opiskelija voi aktivoida lähdemateriaalikokoelman kurssichatissa, jolloin se tulee hakutyökaluna kielimallille näkyväksi. Kuvaava kokoelman nimi, kuvaus ja kieli ovat tärkeitä, koska kielimalli käyttää niitä hakukyselyn muodostamiseen ja päättelee niistä, milloin sen kannattaa tehdä lähdemateriaalihaku vastatakseen opiskelijalle.",
+    "uploading": "Ladataan",
+    "uploadFiles": "Lisää tiedostoja",
+    "createNewIndex": "Luo uusi kokoelma",
+    "finnish": "Suomi",
+    "english": "Englanti",
+    "createIndex": "Luo kokoelma",
+    "nameLabel": "Kokoelman nimi",
+    "nameHelperText": "Käytä kuvaavaa nimeä (esim. kurssin koko nimi)"
   }
-}
+}