Can select rag when creating prompt

Author: Veikkosuhonen

src/client/components/ChatV2/ChatV2.tsx

@@ -32,14 +32,12 @@ import { handleCompletionStreamError } from './error'
 import ToolResult from './ToolResult'
 import { OutlineButtonBlack } from './general/Buttons'
 import { ChatInfo } from './general/ChatInfo'
-import RagSelector from './RagSelector'
+import RagSelector, { RagSelectorDescription } from './RagSelector'
 import { SettingsModal, useUrlPromptId } from './SettingsModal'
 import { useChatStream } from './useChatStream'
 import { getCompletionStreamV3 } from './util'
 import PromptSelector from './PromptSelector'
 import { useQuery } from '@tanstack/react-query'
-import { useMutation } from '@tanstack/react-query'
-import apiClient from '../../util/apiClient'
 import ModelSelector from './ModelSelector'
 
 function useLocalStorageStateWithURLDefault(key: string, defaultValue: string, urlKey: string) {
@@ -382,7 +380,6 @@ export const ChatV2 = () => {
               onClose={() => {
                 setChatLeftSidePanelOpen(false)
               }}
-              t={t}
               setSettingsModalOpen={setSettingsModalOpen}
               setDisclaimerStatus={setDisclaimerStatus}
               showRagSelector={showRagSelector}
@@ -406,7 +403,6 @@ export const ChatV2 = () => {
             }}
             course={course}
             handleReset={handleReset}
-            t={t}
             setSettingsModalOpen={setSettingsModalOpen}
             setDisclaimerStatus={setDisclaimerStatus}
             showRagSelector={showRagSelector}
@@ -599,7 +595,6 @@ const LeftMenu = ({
   course,
   handleReset,
   onClose,
-  t,
   setSettingsModalOpen,
   setDisclaimerStatus,
   showRagSelector,
@@ -612,13 +607,11 @@ const LeftMenu = ({
   currentModel,
   setModel,
   availableModels,
-
 }: {
   sx?: object
   course?: Course
   handleReset: () => void
   onClose?: () => void
-  t: TFunction
   setSettingsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
   setDisclaimerStatus: React.Dispatch<React.SetStateAction<boolean>>
   showRagSelector: boolean
@@ -628,11 +621,11 @@ const LeftMenu = ({
   messages: Message[]
   activePrompt: Prompt | undefined
   setActivePrompt: (prompt: Prompt | undefined) => void
-
   currentModel: string
   setModel: (model: string) => void
   availableModels: string[]
 }) => {
+  const { t } = useTranslation()
   const { courseId } = useParams()
   const { userStatus, isLoading: statusLoading } = useUserStatus(courseId)
   const [isTokenLimitExceeded, setIsTokenLimitExceeded] = useState<boolean>(false)
@@ -668,12 +661,7 @@ const LeftMenu = ({
           <OutlineButtonBlack startIcon={<RestartAltIcon />} onClick={handleReset} data-testid="empty-conversation-button">
             {t('chat:emptyConversation')}
           </OutlineButtonBlack>
-          <ModelSelector
-            currentModel={currentModel}
-            setModel={setModel}
-            availableModels={availableModels}
-            isTokenLimitExceeded={isTokenLimitExceeded}
-          />
+          <ModelSelector currentModel={currentModel} setModel={setModel} availableModels={availableModels} isTokenLimitExceeded={isTokenLimitExceeded} />
           <PromptSelector
             sx={{ width: '100%' }}
             coursePrompts={course?.prompts ?? []}
@@ -692,13 +680,7 @@ const LeftMenu = ({
           </OutlineButtonBlack>
           {course && showRagSelector && (
             <>
-              <Typography variant="h6" sx={{ mb: 1, display: 'flex', gap: 1, alignItems: 'center' }} fontWeight="bold">
-                <MenuBookTwoTone />
-                {t('chat:sources')}
-              </Typography>
-              <Typography variant="body2" sx={{ mb: 2 }}>
-                {t('settings:sourceDescription')}
-              </Typography>
+              <RagSelectorDescription />
               <RagSelector currentRagIndex={ragIndex} setRagIndex={setRagIndexId} ragIndices={ragIndices ?? []} />
             </>
           )}

src/client/components/ChatV2/RagSelector.tsx

@@ -1,10 +1,10 @@
 import { useTranslation } from 'react-i18next'
-import { Box, MenuItem, Menu } from '@mui/material'
+import { Box, MenuItem, Menu, Typography } from '@mui/material'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import { useState } from 'react'
 import { RagIndexAttributes } from '../../../shared/types'
 import { OutlineButtonBlack } from './general/Buttons'
-import { MenuBook } from '@mui/icons-material'
+import { MenuBook, MenuBookTwoTone } from '@mui/icons-material'
 
 const RagSelector = ({
   currentRagIndex,
@@ -72,4 +72,20 @@ const RagSelector = ({
   )
 }
 
+export const RagSelectorDescription = () => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <Typography variant="h6" sx={{ mb: 1, display: 'flex', gap: 1, alignItems: 'center' }} fontWeight="bold">
+        <MenuBookTwoTone />
+        {t('chat:sources')}
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 2 }}>
+        {t('settings:sourceDescription')}
+      </Typography>
+    </>
+  )
+}
+
 export default RagSelector

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

@@ -23,6 +23,8 @@ import Discussion from './Discussions'
 import { ApiErrorView } from '../../common/ApiErrorView'
 import apiClient from '../../../util/apiClient'
 import { ActionUserSearch } from '../../Admin/UserSearch'
+import { useCourseRagIndices } from '../../../hooks/useRagIndices'
+import RagSelector, { RagSelectorDescription } from '../../ChatV2/RagSelector'
 
 const Course = () => {
   const [showTeachers, setShowTeachers] = useState(false)
@@ -320,11 +322,13 @@ const AssignedResponsibilityManagement = ({ responsibility, handleRemove }) => {
 
 const Prompts = ({ courseId, chatInstanceId }: { courseId: string; chatInstanceId: string }) => {
   const { t } = useTranslation()
+  const { ragIndices } = useCourseRagIndices(courseId)
   const [name, setName] = useState('')
   const [system, setSystem] = useState('')
   const [messages, setMessages] = useState<MessageType[]>([])
   const [hidden, setHidden] = useState(false)
   const [mandatory, setMandatory] = useState(false)
+  const [ragIndexId, setRagIndexId] = useState<number | undefined>(undefined)
 
   const createMutation = useCreatePromptMutation()
   const deleteMutation = useDeletePromptMutation()
@@ -351,6 +355,7 @@ const Prompts = ({ courseId, chatInstanceId }: { courseId: string; chatInstanceI
         messages,
         hidden,
         mandatory,
+        ragIndexId,
       })
       enqueueSnackbar('Prompt created', { variant: 'success' })
       handleReset()
@@ -397,7 +402,7 @@ const Prompts = ({ courseId, chatInstanceId }: { courseId: string; chatInstanceI
 
         <Conversation messages={messages} completion="" />
 
-        <Box sx={{ paddingBottom: 2 }}>
+        <Box sx={{ py: 2, display: 'flex', alignItems: 'start' }}>
           {!mandatoryPromptId ? (
             <FormControlLabel
               control={<Checkbox checked={mandatory} onChange={() => setMandatory((prev) => !prev)} />}
@@ -411,6 +416,12 @@ const Prompts = ({ courseId, chatInstanceId }: { courseId: string; chatInstanceI
           )}
           <FormControlLabel control={<Checkbox value={hidden} onChange={() => setHidden((prev) => !prev)} />} label={t('hidePrompt')} />
         </Box>
+        {ragIndices && (
+          <div>
+            <RagSelectorDescription />
+            <RagSelector ragIndices={ragIndices} setRagIndex={setRagIndexId} currentRagIndex={ragIndices.find((rag) => rag.id === ragIndexId)} />
+          </div>
+        )}
         <Button variant="contained" onClick={handleSave} sx={{ mr: 2 }}>
           {t('common:save')}
         </Button>

src/client/hooks/usePromptMutation.ts

@@ -13,6 +13,7 @@ interface NewPromptData {
   messages: Message[]
   hidden: boolean
   mandatory: boolean
+  ragIndexId: number | undefined
 }
 
 export const useCreatePromptMutation = () => {