Merge branch 'main' of github.com:UniversityOfHelsinkiCS/gptwrapper

Author: MatiasSinisalo

src/client/components/ChatV2/ChatV2.tsx

@@ -81,6 +81,7 @@ export const ChatV2 = () => {
   // RAG states
   const [ragIndexId, setRagIndexId] = useState<number | undefined>()
   const [ragDisplay, setRagDisplay] = useState<boolean>(true)
+  const [activeFileSearchResult, setActiveFileSearchResult] = useState<FileSearchCompletedData | undefined>()
   const ragIndex = ragIndices?.find((index) => index.id === ragIndexId)
 
   // Refs
@@ -320,7 +321,6 @@ export const ChatV2 = () => {
     }
   }, [])
 
-  // @todo fix this shit when having long file search results
   useEffect(() => {
     // Scrolls to last assistant message on text generation
     if (!appContainerRef?.current || !conversationRef.current || messages.length === 0) return
@@ -411,7 +411,6 @@ export const ChatV2 = () => {
     }
   }
 
-  const showFileSearch = isFileSearching || messages.some((m) => m.fileSearchResult) || fileSearch
   const showRagSelector = (ragIndices?.length ?? 0) > 0
 
   return (
@@ -507,9 +506,7 @@ export const ChatV2 = () => {
             messages={messages}
             completion={completion}
             isCompletionDone={isCompletionDone}
-            fileSearchResult={fileSearch}
-            ragDisplay={ragDisplay}
-            toggleRagDisplay={handleRagDisplay}
+            setActiveFileSearchResult={setActiveFileSearchResult}
           />
         </Box>
 
@@ -549,6 +546,7 @@ export const ChatV2 = () => {
       {/* Annotations columns ----------------------------------------------------------------------------------------------------- */}
 
 
+      {/* LEGACY - keep here for legacy when new annotations flow is work in progres */}
       {/* {showFileSearch && (
           <FileSearchInfo
             isFileSearching={isFileSearching}
@@ -567,11 +565,11 @@ export const ChatV2 = () => {
           flex: 1,
           minWidth: 300,
           position: 'relative',
-          borderLeft: fileSearch ? '1px solid rgba(0, 0, 0, 0.12)' : 'none',
+          borderLeft: activeFileSearchResult ? '1px solid rgba(0, 0, 0, 0.12)' : 'none',
         }}
       >
         <Box sx={{ position: 'sticky', top: 65, padding: '2rem' }}>
-          {fileSearch && <Annotations fileSearchResult={fileSearch} />}
+          {activeFileSearchResult && <Annotations fileSearchResult={activeFileSearchResult} />}
         </Box>
       </Box>
 

src/client/components/ChatV2/Conversation.tsx

@@ -15,7 +15,8 @@ import 'katex/dist/katex.min.css'
 import 'katex/dist/contrib/mhchem'
 import CopyToClipboardButton from '../Chat/CopyToClipboardButton'
 import { t } from 'i18next'
-import { OutlineButtonBlue } from './generics/Buttons'
+import { OutlineButtonBlack, } from './generics/Buttons'
+import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
 
 const UserMessage = ({
   content,
@@ -73,17 +74,15 @@ const AssistantMessage = ({
   error,
   isLastAssistantNode,
   expandedNodeHeight,
-  fileSearchStatus,
-  ragDisplay,
-  toggleRagDisplay,
+  fileSearchResult,
+  setActiveFileSearchResult
 }: {
   content: string
   error?: string
   isLastAssistantNode: boolean
   expandedNodeHeight: number
-  fileSearchStatus: boolean
-  ragDisplay: boolean
-  toggleRagDisplay: () => void
+  fileSearchResult?: FileSearchCompletedData
+  setActiveFileSearchResult: (data: FileSearchCompletedData) => void
 }) => {
   const processedContent = preprocessMath(content)
   const katexOptions = {
@@ -209,11 +208,12 @@ const AssistantMessage = ({
             <Typography variant="body1" fontStyle="italic" color="#cc0000">{`\n\n ${error}`}</Typography>
           </Box>
         )}
-        {isLastAssistantNode && fileSearchStatus && (
-          <OutlineButtonBlue sx={{ padding: '0.4rem 0.8rem', fontSize: '14px' }} onClick={() => toggleRagDisplay()}>
-            {ragDisplay ? t('chat:hideSources') : t('chat:displaySources')}
-          </OutlineButtonBlue>
-        )}
+        {/* {ragDisplay ? t('chat:hideSources') : t('chat:displaySources')} */}
+        {fileSearchResult?.status === "completed" &&
+          <OutlineButtonBlack sx={{ mt: 3 }} startIcon={<FormatQuoteIcon />} onClick={() => setActiveFileSearchResult(fileSearchResult)}>
+            <Typography variant='body2'>Lähteet: <em>{fileSearchResult.id}</em></Typography>
+          </OutlineButtonBlack>
+        }
       </Box>
     </Box>
   )
@@ -223,14 +223,12 @@ const MessageItem = ({
   message,
   isLastAssistantNode,
   expandedNodeHeight,
-  ragDisplay,
-  toggleRagDisplay,
+  setActiveFileSearchResult
 }: {
   message: Message
   isLastAssistantNode: boolean
   expandedNodeHeight: number
-  ragDisplay: boolean
-  toggleRagDisplay: () => void
+  setActiveFileSearchResult: (data: FileSearchCompletedData) => void
 }) => {
 
   if (message.role === 'assistant') {
@@ -240,9 +238,8 @@ const MessageItem = ({
         error={message.error}
         isLastAssistantNode={isLastAssistantNode}
         expandedNodeHeight={expandedNodeHeight}
-        fileSearchStatus={message.fileSearchResult?.status == 'completed'}
-        ragDisplay={ragDisplay}
-        toggleRagDisplay={toggleRagDisplay}
+        fileSearchResult={message.fileSearchResult}
+        setActiveFileSearchResult={setActiveFileSearchResult}
       />
     )
   } else {
@@ -265,9 +262,7 @@ export const Conversation = ({
   messages,
   completion,
   isCompletionDone,
-  fileSearchResult,
-  ragDisplay,
-  toggleRagDisplay,
+  setActiveFileSearchResult
 }: {
   courseName?: string
   courseDate?: ActivityPeriod
@@ -276,9 +271,7 @@ export const Conversation = ({
   messages: Message[]
   completion: string
   isCompletionDone: boolean
-  fileSearchResult?: FileSearchCompletedData
-  ragDisplay: boolean
-  toggleRagDisplay: () => void
+  setActiveFileSearchResult: (data: FileSearchCompletedData) => void
 }) => (
   <Box
     style={{
@@ -300,20 +293,18 @@ export const Conversation = ({
           message={message}
           isLastAssistantNode={isLastAssistantNode}
           expandedNodeHeight={expandedNodeHeight}
-          ragDisplay={ragDisplay}
-          toggleRagDisplay={toggleRagDisplay}
+          setActiveFileSearchResult={setActiveFileSearchResult}
         />
       )
     })}
     {!isCompletionDone &&
       messages.length > 0 &&
       (completion.length > 0 ? (
         <MessageItem
-          message={{ role: 'assistant', content: completion, fileSearchResult }}
+          message={{ role: 'assistant', content: completion }}
           isLastAssistantNode={true}
           expandedNodeHeight={expandedNodeHeight}
-          ragDisplay={ragDisplay}
-          toggleRagDisplay={toggleRagDisplay}
+          setActiveFileSearchResult={setActiveFileSearchResult}
         />
       ) : (
         <LoadingMessage expandedNodeHeight={expandedNodeHeight} />