big rag frontend update to v3

Author: Veikkosuhonen

src/client/components/ChatV2/ChatV2.tsx

@@ -5,7 +5,6 @@ import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { DEFAULT_ASSISTANT_INSTRUCTIONS, DEFAULT_MODEL, DEFAULT_MODEL_TEMPERATURE, FREE_MODEL, inProduction, validModels } from '../../../config'
-import type { FileSearchCompletedData } from '../../../shared/types'
 import { getLanguageValue } from '../../../shared/utils'
 import useCourse from '../../hooks/useCourse'
 import useInfoTexts from '../../hooks/useInfoTexts'
@@ -34,6 +33,7 @@ import { ArrowDownward, MenuBookTwoTone, Tune } from '@mui/icons-material'
 import { useChatScroll } from '../../hooks/useChatScroll'
 import { TestUseInfoV2 } from './TestUseInfo'
 import Footer from '../Footer'
+import { ToolCallResultEvent } from '../../../shared/chat'
 
 function useLocalStorageStateWithURLDefault(key: string, defaultValue: string, urlKey: string) {
   const [value, setValue] = useLocalStorageState(key, defaultValue)
@@ -91,11 +91,11 @@ export const ChatV2 = () => {
   const [tokenUsageWarning, setTokenUsageWarning] = useState<string>('')
   const [tokenUsageAlertOpen, setTokenUsageAlertOpen] = useState<boolean>(false)
   const [allowedModels, setAllowedModels] = useState<string[]>([])
-  const [showFileSearchResults, setShowFileSearchResults] = useState<boolean>(false)
+  const [showToolResults, setShowToolResults] = useState<boolean>(false)
   const [chatLeftSidePanelOpen, setChatLeftSidePanelOpen] = useState<boolean>(false)
   // RAG states
   const [ragIndexId, setRagIndexId] = useState<number | undefined>()
-  const [activeFileSearchResult, setActiveFileSearchResult] = useState<FileSearchCompletedData | undefined>()
+  const [activeToolResult, setActiveToolResult] = useState<ToolCallResultEvent | undefined>()
   const ragIndex = ragIndices?.find((index) => index.id === ragIndexId)
 
   // Analytics
@@ -137,6 +137,7 @@ export const ChatV2 = () => {
         refetchStatus()
       }
       chatScroll.autoScroll()
+      console.log(message)
     },
     onText: () => {
       chatScroll.autoScroll()
@@ -145,14 +146,14 @@ export const ChatV2 = () => {
       handleCompletionStreamError(error, fileName)
       enqueueSnackbar(t('chat:errorInstructions'), { variant: 'error' })
     },
-    onFileSearchComplete: (fileSearch) => {
-      setActiveFileSearchResult(fileSearch)
+    /* @todo fix this: onFileSearchComplete: (fileSearch) => {
+      setActiveToolResult(fileSearch)
       // Only auto-open FileSearchResults on desktop, not on mobile
       if (!isMobile) {
-        setShowFileSearchResults(true)
+        setShowToolResults(true)
       }
       dispatchAnalytics({ type: 'INCREMENT_FILE_SEARCHES' })
-    },
+    }, */
   })
 
   const handleSubmit = async (message: string, ignoreTokenUsageWarning: boolean) => {
@@ -237,8 +238,8 @@ export const ChatV2 = () => {
   const handleReset = () => {
     if (window.confirm(t('chat:emptyConfirm'))) {
       setMessages([])
-      setShowFileSearchResults(false)
-      setActiveFileSearchResult(undefined)
+      setShowToolResults(false)
+      setActiveToolResult(undefined)
       setPrevResponse('')
       if (fileInputRef.current) {
         fileInputRef.current.value = ''
@@ -461,8 +462,8 @@ export const ChatV2 = () => {
             completion={completion}
             isStreaming={isStreaming}
             toolCalls={toolCalls}
-            setActiveFileSearchResult={setActiveFileSearchResult}
-            setShowFileSearchResults={setShowFileSearchResults}
+            setActiveToolResult={setActiveToolResult}
+            setShowToolResults={setShowToolResults}
           />
         </Box>
 
@@ -528,8 +529,8 @@ export const ChatV2 = () => {
       {isMobile && (
         <Drawer
           anchor="right"
-          open={showFileSearchResults}
-          onClose={() => setShowFileSearchResults(false)}
+          open={showToolResults}
+          onClose={() => setShowToolResults(false)}
           sx={{
             '& .MuiDrawer-paper': {
               width: '100%',
@@ -549,12 +550,12 @@ export const ChatV2 = () => {
               overflow: 'auto',
             }}
           >
-            {activeFileSearchResult && <FileSearchResults fileSearchResult={activeFileSearchResult} setShowFileSearchResults={setShowFileSearchResults} />}
+            {activeToolResult && <FileSearchResults fileSearchResult={activeToolResult} setShowFileSearchResults={setShowToolResults} />}
           </Box>
         </Drawer>
       )}
 
-      {!isMobile && showFileSearchResults && activeFileSearchResult && (
+      {!isMobile && showToolResults && activeToolResult && (
         <Box
           sx={{
             width: { md: 300, lg: 400 },
@@ -568,7 +569,7 @@ export const ChatV2 = () => {
             paddingTop: !isEmbeddedMode ? '4rem' : 0,
           }}
         >
-          <FileSearchResults fileSearchResult={activeFileSearchResult} setShowFileSearchResults={setShowFileSearchResults} />
+          <FileSearchResults fileSearchResult={activeToolResult} setShowFileSearchResults={setShowToolResults} />
         </Box>
       )}
 

src/client/components/ChatV2/Conversation.tsx

@@ -6,7 +6,6 @@ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
-import type { FileSearchCompletedData } from '../../../shared/types'
 import type { ActivityPeriod, Message } from '../../types'
 import { ConversationSplash } from './general/ConversationSplash'
 import { LoadingMessage } from './general/LoadingMessage'
@@ -18,7 +17,9 @@ import { t } from 'i18next'
 import FormatQuoteIcon from '@mui/icons-material/FormatQuote'
 import useLocalStorageState from '../../hooks/useLocalStorageState'
 import { BlueButton } from './general/Buttons'
-import { ToolCallStatusEvent } from '../../../shared/chat'
+import type { ToolCallResultEvent, ToolCallStatusEvent } from '../../../shared/chat'
+import { ChatToolResult } from '../../../shared/tools'
+import { useMemo } from 'react'
 
 const UserMessage = ({ content, attachements }: { content: string; attachements?: string }) => (
   <Box
@@ -55,18 +56,67 @@ const UserMessage = ({ content, attachements }: { content: string; attachements?
   </Box>
 )
 
+const ToolResult = ({ toolResult, handleToolResult }: { toolResult: ToolCallResultEvent; handleToolResult: (toolResult: ToolCallResultEvent) => void }) => {
+  const sources = useMemo(() => Array.from(new Set<string>(toolResult.result.files.map((file) => file.fileName)).values()).join(', '), [])
+  return (
+    <Box
+      data-testId="file-search-sources"
+      sx={{
+        display: 'flex',
+        alignItems: { xs: 'flex-start', sm: 'center' },
+        gap: 2,
+        fontStyle: 'italic',
+        maxWidth: 'fit-content',
+        opacity: '0.85',
+        mt: 3,
+        cursor: 'pointer',
+        padding: '0.6rem',
+        borderRadius: '0.6rem',
+      }}
+      onClick={() => {
+        handleToolResult(toolResult)
+      }}
+    >
+      <FormatQuoteIcon sx={{ fontSize: '2rem' }} />
+      <Box sx={{ minWidth: 0, mt: { xs: 0.5, md: 0 } }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Typography
+            variant="body2"
+            sx={{
+              mr: 2,
+              wordBreak: 'break-all',
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {`${t('chat:displaySources')}: `}
+
+            <em>{sources}</em>
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
 const AssistantMessage = ({
   content,
   error,
-  fileSearchResult,
-  setActiveFileSearchResult,
-  setShowFileSearchResults,
+  toolResults,
+  setActiveToolResult,
+  setShowToolResults,
 }: {
   content: string
   error?: string
-  fileSearchResult?: FileSearchCompletedData
-  setActiveFileSearchResult: (data: FileSearchCompletedData) => void
-  setShowFileSearchResults: (show: boolean) => void
+  toolResults?: Record<string, ToolCallResultEvent>
+  setActiveToolResult: (data: ToolCallResultEvent) => void
+  setShowToolResults: (show: boolean) => void
 }) => {
   const processedContent = preprocessMath(content)
   const katexOptions = {
@@ -109,9 +159,10 @@ const AssistantMessage = ({
   }
   let codeCount = 0
 
-  const handleFileSearchResult = (fileSearchResult: FileSearchCompletedData) => {
-    setActiveFileSearchResult(fileSearchResult)
-    setShowFileSearchResults(true)
+  const handleToolResult = (toolResult: ToolCallResultEvent) => {
+    console.log(toolResult)
+    setActiveToolResult(toolResult)
+    setShowToolResults(true)
   }
 
   return (
@@ -215,53 +266,9 @@ const AssistantMessage = ({
           <Typography variant="body1" fontStyle="italic" color="#cc0000">{`\n\n ${error}`}</Typography>
         </Box>
       )}
-      {fileSearchResult?.status === 'completed' && (
-        <>
-          <Box
-            data-testId="file-search-sources"
-            sx={{
-              display: 'flex',
-              alignItems: { xs: 'flex-start', sm: 'center' },
-              gap: 2,
-              fontStyle: 'italic',
-              maxWidth: 'fit-content',
-              opacity: '0.85',
-              mt: 3,
-              cursor: 'pointer',
-              padding: '0.6rem',
-              borderRadius: '0.6rem',
-            }}
-            onClick={() => {
-              handleFileSearchResult(fileSearchResult)
-            }}
-          >
-            <FormatQuoteIcon sx={{ fontSize: '2rem' }} />
-            <Box sx={{ minWidth: 0, mt: { xs: 0.5, md: 0 } }}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                }}
-              >
-                <Typography
-                  variant="body2"
-                  sx={{
-                    mr: 2,
-                    wordBreak: 'break-all',
-                    textOverflow: 'ellipsis',
-                    overflow: 'hidden',
-                    whiteSpace: 'nowrap',
-                  }}
-                >
-                  {`${t('chat:displaySources')}: `}
-
-                  <em>{fileSearchResult?.searchedFileNames.join('\r\n')}</em>
-                </Typography>
-              </Box>
-            </Box>
-          </Box>
-        </>
-      )}
+      {Object.values(toolResults ?? {}).map((toolResult) => (
+        <ToolResult key={toolResult.callId} toolResult={toolResult} handleToolResult={handleToolResult} />
+      ))}
     </Box>
   )
 }
@@ -270,14 +277,14 @@ const MessageItem = ({
   message,
   isLastAssistantNode,
   expandedNodeHeight,
-  setActiveFileSearchResult,
-  setShowFileSearchResults,
+  setActiveToolResult,
+  setShowToolResults,
 }: {
   message: Message
   isLastAssistantNode: boolean
   expandedNodeHeight: number
-  setActiveFileSearchResult: (data: FileSearchCompletedData) => void
-  setShowFileSearchResults: (show: boolean) => void
+  setActiveToolResult: (data: ToolCallResultEvent) => void
+  setShowToolResults: (show: boolean) => void
 }) => {
   if (message.role === 'assistant') {
     return (
@@ -292,9 +299,9 @@ const MessageItem = ({
         <AssistantMessage
           content={message.content}
           error={message.error}
-          fileSearchResult={message.fileSearchResult}
-          setActiveFileSearchResult={setActiveFileSearchResult}
-          setShowFileSearchResults={setShowFileSearchResults}
+          toolResults={message.toolCalls}
+          setActiveToolResult={setActiveToolResult}
+          setShowToolResults={setShowToolResults}
         />
       </Box>
     )
@@ -316,8 +323,8 @@ export const Conversation = ({
   completion,
   toolCalls,
   isStreaming,
-  setActiveFileSearchResult,
-  setShowFileSearchResults,
+  setActiveToolResult,
+  setShowToolResults,
 }: {
   courseName?: string
   courseDate?: ActivityPeriod
@@ -327,8 +334,8 @@ export const Conversation = ({
   completion: string
   toolCalls: { [callId: string]: ToolCallStatusEvent }
   isStreaming: boolean
-  setActiveFileSearchResult: (data: FileSearchCompletedData) => void
-  setShowFileSearchResults: (show: boolean) => void
+  setActiveToolResult: (data: ToolCallResultEvent) => void
+  setShowToolResults: (show: boolean) => void
 }) => {
   const [reminderSeen, setReminderSeen] = useLocalStorageState<boolean>('reminderSeen', false)
 
@@ -355,8 +362,8 @@ export const Conversation = ({
               message={message}
               isLastAssistantNode={isLastAssistantNode}
               expandedNodeHeight={expandedNodeHeight}
-              setActiveFileSearchResult={setActiveFileSearchResult}
-              setShowFileSearchResults={setShowFileSearchResults}
+              setActiveToolResult={setActiveToolResult}
+              setShowToolResults={setShowToolResults}
             />
           )
         })}
@@ -368,11 +375,11 @@ export const Conversation = ({
               message={{ role: 'assistant', content: completion }}
               isLastAssistantNode={true}
               expandedNodeHeight={expandedNodeHeight}
-              setActiveFileSearchResult={setActiveFileSearchResult}
-              setShowFileSearchResults={setShowFileSearchResults}
+              setActiveToolResult={setActiveToolResult}
+              setShowToolResults={setShowToolResults}
             />
           ) : (
-            <LoadingMessage expandedNodeHeight={expandedNodeHeight} isFileSearching={Object.values(toolCalls).some((call) => !!call.result)} />
+            <LoadingMessage expandedNodeHeight={expandedNodeHeight} toolCalls={toolCalls} />
           ))}
       </Box>
       {!reminderSeen && !isStreaming && messages.length > 15 && (