fix: Sources menu not visible when opened

Veikkosuhonen · Veikkosuhonen · commit 075c30e84fe7 · 2025-08-23T16:05:29.000+03:00
diff --git a/src/client/components/ChatV2/ChatV2.tsx b/src/client/components/ChatV2/ChatV2.tsx
@@ -88,7 +88,6 @@ export const ChatV2 = () => {
   const [tokenUsageWarning, setTokenUsageWarning] = useState<string>('')
   const [tokenUsageAlertOpen, setTokenUsageAlertOpen] = useState<boolean>(false)
   const [allowedModels, setAllowedModels] = useState<string[]>([])
-  const [showToolResults, setShowToolResults] = useState<boolean>(false)
   const [chatLeftSidePanelOpen, setChatLeftSidePanelOpen] = useState<boolean>(false)
   // RAG states
   const [ragIndexId, setRagIndexId] = useState<number | undefined>()
@@ -230,7 +229,6 @@ export const ChatV2 = () => {
   const handleReset = () => {
     if (window.confirm(t('chat:emptyConfirm'))) {
       setMessages([])
-      setShowToolResults(false)
       setActiveToolResult(undefined)
       if (fileInputRef.current) {
         fileInputRef.current.value = ''
@@ -329,6 +327,8 @@ export const ChatV2 = () => {
   }
 
   const showRagSelector = (ragIndices?.length ?? 0) > 0
+  const rightMenuOpen = !!activeToolResult
+  const rightMenuWidth = rightMenuOpen ? '300px' : '0px'
 
   if (statusLoading) return null
 
@@ -405,7 +405,7 @@ export const ChatV2 = () => {
             paddingLeft: '1rem',
             paddingRight: '1rem',
             paddingTop: '1rem',
-            width: { sm: '100vw', md: 'calc(100vw - 300px)', lg: 'calc(100vw - 400px)' },
+            width: { sm: '100vw', md: `calc(100vw - 300px - ${rightMenuWidth})`, lg: `calc(100vw - 400px - ${rightMenuWidth})` },
           }}
           ref={scrollRef}
         >
@@ -437,7 +437,6 @@ export const ChatV2 = () => {
             isStreaming={isStreaming}
             toolCalls={toolCalls}
             setActiveToolResult={setActiveToolResult}
-            setShowToolResults={setShowToolResults}
           />
         </Box>
 
@@ -486,11 +485,11 @@ export const ChatV2 = () => {
 
       {/* FileSearchResults columns ----------------------------------------------------------------------------------------------------- */}
 
-      {isMobile && (
+      {isMobile ? (
         <Drawer
           anchor="right"
-          open={showToolResults}
-          onClose={() => setShowToolResults(false)}
+          open={!!activeToolResult}
+          onClose={() => setActiveToolResult(undefined)}
           sx={{
             '& .MuiDrawer-paper': {
               width: '100%',
@@ -510,27 +509,26 @@ export const ChatV2 = () => {
               overflow: 'auto',
             }}
           >
-            {activeToolResult && <FileSearchResults fileSearchResult={activeToolResult} setShowFileSearchResults={setShowToolResults} />}
+            {activeToolResult && <FileSearchResults fileSearchResult={activeToolResult} setActiveToolResult={setActiveToolResult} />}
           </Box>
         </Drawer>
-      )}
-
-      {!isMobile && showToolResults && activeToolResult && (
-        <Box
-          sx={{
-            width: { md: '40rem', lg: '40rem' },
-            height: '100vh',
-            display: 'flex',
-            flexDirection: 'column',
-            flex: 1,
-            position: 'sticky',
-            top: 0,
-            borderLeft: '1px solid rgba(0,0,0,0.12)',
-            paddingTop: !isEmbeddedMode ? '4rem' : 0,
-          }}
-        >
-          <FileSearchResults fileSearchResult={activeToolResult} setShowFileSearchResults={setShowToolResults} />
-        </Box>
+      ) : (
+        !!activeToolResult && (
+          <Box
+            sx={{
+              width: rightMenuWidth,
+              height: '100vh',
+              display: 'flex',
+              flexDirection: 'column',
+              position: 'sticky',
+              top: 0,
+              borderLeft: '1px solid rgba(0,0,0,0.12)',
+              paddingTop: !isEmbeddedMode ? '4rem' : 0,
+            }}
+          >
+            <FileSearchResults fileSearchResult={activeToolResult} setActiveToolResult={setActiveToolResult} />
+          </Box>
+        )
       )}
 
       {/* Modals --------------------------------------*/}
diff --git a/src/client/components/ChatV2/Conversation.tsx b/src/client/components/ChatV2/Conversation.tsx
@@ -59,7 +59,7 @@ const ToolResult = ({ toolResult, handleToolResult }: { toolResult: ToolCallResu
   const sources = useMemo(() => Array.from(new Set<string>(toolResult.result.files.map((file) => file.fileName)).values()).join(', '), [])
   return (
     <Box
-      data-testId="file-search-sources"
+      data-testid="file-search-sources"
       sx={{
         display: 'flex',
         alignItems: { xs: 'flex-start', sm: 'center' },
@@ -109,13 +109,11 @@ const AssistantMessage = ({
   error,
   toolResults,
   setActiveToolResult,
-  setShowToolResults,
 }: {
   content: string
   error?: string
   toolResults?: Record<string, ToolCallResultEvent>
   setActiveToolResult: (data: ToolCallResultEvent) => void
-  setShowToolResults: (show: boolean) => void
 }) => {
   const processedContent = preprocessMath(content)
   const katexOptions = {
@@ -161,7 +159,6 @@ const AssistantMessage = ({
   const handleToolResult = (toolResult: ToolCallResultEvent) => {
     console.log(toolResult)
     setActiveToolResult(toolResult)
-    setShowToolResults(true)
   }
 
   return (
@@ -270,15 +267,7 @@ const AssistantMessage = ({
   )
 }
 
-const MessageItem = ({
-  message,
-  setActiveToolResult,
-  setShowToolResults,
-}: {
-  message: Message
-  setActiveToolResult: (data: ToolCallResultEvent) => void
-  setShowToolResults: (show: boolean) => void
-}) => {
+const MessageItem = ({ message, setActiveToolResult }: { message: Message; setActiveToolResult: (data: ToolCallResultEvent) => void }) => {
   if (message.role === 'assistant') {
     return (
       <Box
@@ -287,13 +276,7 @@ const MessageItem = ({
           height: 'auto',
         }}
       >
-        <AssistantMessage
-          content={message.content}
-          error={message.error}
-          toolResults={message.toolCalls}
-          setActiveToolResult={setActiveToolResult}
-          setShowToolResults={setShowToolResults}
-        />
+        <AssistantMessage content={message.content} error={message.error} toolResults={message.toolCalls} setActiveToolResult={setActiveToolResult} />
       </Box>
     )
   } else {
@@ -314,7 +297,6 @@ export const Conversation = ({
   toolCalls,
   isStreaming,
   setActiveToolResult,
-  setShowToolResults,
 }: {
   courseName?: string
   courseDate?: ActivityPeriod
@@ -324,7 +306,6 @@ export const Conversation = ({
   toolCalls: { [callId: string]: ToolCallStatusEvent }
   isStreaming: boolean
   setActiveToolResult: (data: ToolCallResultEvent) => void
-  setShowToolResults: (show: boolean) => void
 }) => {
   const [reminderSeen, setReminderSeen] = useLocalStorageState<boolean>('reminderSeen', false)
 
@@ -344,17 +325,13 @@ export const Conversation = ({
       >
         {messages.length === 0 && <ConversationSplash courseName={courseName} courseDate={courseDate} />}
         {messages.map((message, idx) => {
-          return <MessageItem key={idx} message={message} setActiveToolResult={setActiveToolResult} setShowToolResults={setShowToolResults} />
+          return <MessageItem key={idx} message={message} setActiveToolResult={setActiveToolResult} />
         })}
 
         {isStreaming &&
           messages.length > 0 &&
           (completion.length > 0 ? (
-            <MessageItem
-              message={{ role: 'assistant', content: completion }}
-              setActiveToolResult={setActiveToolResult}
-              setShowToolResults={setShowToolResults}
-            />
+            <MessageItem message={{ role: 'assistant', content: completion }} setActiveToolResult={setActiveToolResult} />
           ) : (
             <LoadingMessage toolCalls={toolCalls} />
           ))}
diff --git a/src/client/components/ChatV2/FileSearchResults.tsx b/src/client/components/ChatV2/FileSearchResults.tsx
@@ -193,10 +193,10 @@ const Queries = ({ queries }: { queries: string[] }) => {
 
 const FileSearchResults = ({
   fileSearchResult,
-  setShowFileSearchResults,
+  setActiveToolResult,
 }: {
   fileSearchResult: ToolCallResultEvent
-  setShowFileSearchResults: (show: boolean) => void
+  setActiveToolResult: (result: ToolCallResultEvent | undefined) => void
 }) => {
   const { data: results, isSuccess: isResultsSuccess } = useToolResults(fileSearchResult.callId)
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
@@ -244,7 +244,7 @@ const FileSearchResults = ({
             opacity: 0.9,
             zIndex: 1,
           }}
-          onClick={() => setShowFileSearchResults(false)}
+          onClick={() => setActiveToolResult(undefined)}
         >
           <Close />
         </IconButton>
diff --git a/src/client/components/Courses/Course/Prompt.tsx b/src/client/components/Courses/Course/Prompt.tsx
@@ -95,7 +95,7 @@ const Prompt = ({ prompt, handleDelete, mandatoryPromptId }: { prompt: PromptTyp
             )}
           </Box>
           <Box>
-            <Button onClick={() => handleDelete(prompt.id)} color="error" data-testId={`delete-prompt-${prompt.name}`}>
+            <Button onClick={() => handleDelete(prompt.id)} color="error" data-testid={`delete-prompt-${prompt.name}`}>
               {t('common:delete')}
             </Button>
             <ExpandButton expand={expand} setExpand={setExpand} />
