annotations displaying improvement

Author: sutigit

src/client/components/ChatV2/Annotations.tsx

@@ -1,4 +1,5 @@
-import { Box, Typography, Chip } from '@mui/material'
+import { Box, Typography, Chip, IconButton } from '@mui/material'
+import { Close } from '@mui/icons-material'
 import { FileSearchCompletedData, FileSearchResultData } from '../../../shared/types'
 import { useTranslation } from 'react-i18next'
 import { useFileSearchResults } from './api'
@@ -83,17 +84,24 @@ const Queries = ({ queries }: { queries: string[] }) => {
     </Box>)
 }
 
-const Annotations = ({ fileSearchResult }: { fileSearchResult: FileSearchCompletedData }) => {
+const Annotations = ({ fileSearchResult, setShowAnnotations }: { fileSearchResult: FileSearchCompletedData; setShowAnnotations: (show: boolean) => void }) => {
     const { data: results, isSuccess: isResultsSuccess } = useFileSearchResults(fileSearchResult.id)
     const arrayResults = Array.isArray(results) ? results : []
     const { t } = useTranslation()
 
-
     return (
         <Box>
-            <Typography variant="h6" fontWeight={'bold'} sx={{ mb: 2.5 }}>
-                {t('chat:sources')}
-            </Typography>
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
+                <Typography variant="h6" fontWeight={'bold'}>
+                    {t('chat:sources')}
+                </Typography>
+                <IconButton
+                    id="close-annotations"
+                    onClick={() => setShowAnnotations(false)}
+                >
+                    <Close />
+                </IconButton>
+            </Box>
             <Queries queries={fileSearchResult.queries} />
             {isResultsSuccess ?
                 <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', minHeight: 400 }}>

src/client/components/ChatV2/ChatV2.tsx

@@ -61,7 +61,6 @@ export const ChatV2 = () => {
 
   const [messages, setMessages] = useLocalStorageState(`${localStoragePrefix}-chat-messages`, [] as Message[])
   const [prevResponse, setPrevResponse] = useLocalStorageState(`${localStoragePrefix}-prev-response`, { id: '' })
-  const [fileSearch, setFileSearch] = useLocalStorageState<FileSearchCompletedData>(`${localStoragePrefix}-last-file-search`)
 
   // App States
   const [settingsModalOpen, setSettingsModalOpen] = useState<boolean>(false)
@@ -70,6 +69,7 @@ export const ChatV2 = () => {
   const [tokenUsageAlertOpen, setTokenUsageAlertOpen] = useState<boolean>(false)
   const [allowedModels, setAllowedModels] = useState<string[]>([])
   const [saveConsent, setSaveConsent] = useState<boolean>(false)
+  const [showAnnotations, setShowAnnotations] = useState<boolean>(false)
 
   // RAG states
   const [ragIndexId, setRagIndexId] = useState<number | undefined>()
@@ -103,8 +103,8 @@ export const ChatV2 = () => {
       handleCompletionStreamError(error, fileName)
     },
     onFileSearchComplete: (fileSearch) => {
-      setFileSearch(fileSearch) // possibly deprecating this
       setActiveFileSearchResult(fileSearch)
+      setShowAnnotations(true)
     },
   })
 
@@ -133,7 +133,6 @@ export const ChatV2 = () => {
       fileInputRef.current.value = ''
     }
     setFileName('')
-    setFileSearch(undefined)
     setRetryTimeout(() => {
       if (streamController) {
         streamController.abort()
@@ -182,12 +181,12 @@ export const ChatV2 = () => {
   const handleReset = () => {
     if (window.confirm('Are you sure you want to empty this conversation?')) {
       setMessages([])
+      setShowAnnotations(false)
       setPrevResponse({ id: '' })
       if (fileInputRef.current) {
         fileInputRef.current.value = ''
       }
       setFileName('')
-      setFileSearch(undefined)
       setTokenUsageWarning('')
       setTokenUsageAlertOpen(false)
       setRetryTimeout(() => {
@@ -405,6 +404,7 @@ export const ChatV2 = () => {
             completion={completion}
             isCompletionDone={!isStreaming}
             setActiveFileSearchResult={setActiveFileSearchResult}
+            setShowAnnotations={setShowAnnotations}
           />
         </Box>
 
@@ -461,10 +461,21 @@ export const ChatV2 = () => {
           flex: 1,
           minWidth: 300,
           position: 'relative',
-          borderLeft: activeFileSearchResult ? '1px solid rgba(0, 0, 0, 0.12)' : 'none',
+          transition: 'border 300ms',
+          borderLeft: '1px solid',
+          borderColor: showAnnotations ? 'rgba(0,0,0,0.12)' : 'rgba(0,0,0,0)'
         }}
       >
-        <Box sx={{ position: 'sticky', top: 65, padding: '2rem' }}>{activeFileSearchResult && <Annotations fileSearchResult={activeFileSearchResult} />}</Box>
+        <Box
+          sx={{
+            position: 'sticky',
+            top: 65,
+            padding: '2rem',
+            transition: 'transform 250ms ease-in-out',
+            transform: showAnnotations ? 'translateX(0%)' : 'translate(100%)'
+          }}>
+          {activeFileSearchResult && <Annotations fileSearchResult={activeFileSearchResult} setShowAnnotations={setShowAnnotations} />}
+        </Box>
       </Box>
 
       {/* Modals --------------------------------------*/}

src/client/components/ChatV2/Conversation.tsx

@@ -75,14 +75,16 @@ const AssistantMessage = ({
   isLastAssistantNode,
   expandedNodeHeight,
   fileSearchResult,
-  setActiveFileSearchResult
+  setActiveFileSearchResult,
+  setShowAnnotations
 }: {
   content: string
   error?: string
   isLastAssistantNode: boolean
   expandedNodeHeight: number
   fileSearchResult?: FileSearchCompletedData
   setActiveFileSearchResult: (data: FileSearchCompletedData) => void
+  setShowAnnotations: (show: boolean) => void
 }) => {
   const processedContent = preprocessMath(content)
   const katexOptions = {
@@ -125,6 +127,11 @@ const AssistantMessage = ({
   }
   let codeCount = 0
 
+  const handleAnnotations = (fileSearchResult: FileSearchCompletedData) => {
+    setActiveFileSearchResult(fileSearchResult)
+    setShowAnnotations(true)
+  }
+
   return (
     <Box className={`message-role-assistant`} data-testid="assistant-message" sx={{ minHeight: isLastAssistantNode ? expandedNodeHeight : 'auto' }}>
       <Box
@@ -209,7 +216,7 @@ const AssistantMessage = ({
           </Box>
         )}
         {fileSearchResult?.status === "completed" &&
-          <OutlineButtonBlack sx={{ mt: 3 }} startIcon={<FormatQuoteIcon />} onClick={() => setActiveFileSearchResult(fileSearchResult)}>
+          <OutlineButtonBlack sx={{ mt: 3 }} startIcon={<FormatQuoteIcon />} onClick={() => handleAnnotations(fileSearchResult)}>
             <Typography variant='body2'>{`${t('chat:displaySources')}: `}<em>{fileSearchResult?.searchedFiles?.join(', ')}</em></Typography>
           </OutlineButtonBlack>
         }
@@ -222,12 +229,14 @@ const MessageItem = ({
   message,
   isLastAssistantNode,
   expandedNodeHeight,
-  setActiveFileSearchResult
+  setActiveFileSearchResult,
+  setShowAnnotations
 }: {
   message: Message
   isLastAssistantNode: boolean
   expandedNodeHeight: number
   setActiveFileSearchResult: (data: FileSearchCompletedData) => void
+  setShowAnnotations: (show: boolean) => void
 }) => {
 
   if (message.role === 'assistant') {
@@ -239,6 +248,7 @@ const MessageItem = ({
         expandedNodeHeight={expandedNodeHeight}
         fileSearchResult={message.fileSearchResult}
         setActiveFileSearchResult={setActiveFileSearchResult}
+        setShowAnnotations={setShowAnnotations}
       />
     )
   } else {
@@ -261,7 +271,8 @@ export const Conversation = ({
   messages,
   completion,
   isCompletionDone,
-  setActiveFileSearchResult
+  setActiveFileSearchResult,
+  setShowAnnotations
 }: {
   courseName?: string
   courseDate?: ActivityPeriod
@@ -271,6 +282,7 @@ export const Conversation = ({
   completion: string
   isCompletionDone: boolean
   setActiveFileSearchResult: (data: FileSearchCompletedData) => void
+  setShowAnnotations: (show: boolean) => void
 }) => (
   <Box
     style={{
@@ -293,6 +305,7 @@ export const Conversation = ({
           isLastAssistantNode={isLastAssistantNode}
           expandedNodeHeight={expandedNodeHeight}
           setActiveFileSearchResult={setActiveFileSearchResult}
+          setShowAnnotations={setShowAnnotations}
         />
       )
     })}
@@ -304,6 +317,7 @@ export const Conversation = ({
           isLastAssistantNode={true}
           expandedNodeHeight={expandedNodeHeight}
           setActiveFileSearchResult={setActiveFileSearchResult}
+          setShowAnnotations={setShowAnnotations}
         />
       ) : (
         <LoadingMessage expandedNodeHeight={expandedNodeHeight} />