🐛 When a user swipes and taps the chat box, the Dialog status should switch to "read". #1388

Author: YehongPan

frontend/app/[locale]/chat/internal/chatInterface.tsx

@@ -2,7 +2,7 @@
 
 import type React from "react";
 
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { v4 as uuidv4 } from "uuid";
 import { useTranslation } from "react-i18next";
@@ -208,6 +208,45 @@ export function ChatInterface() {
     setShowRightPanel(false);
   }, [conversationManagement.conversationId]);
 
+  // Helper function to clear completed conversation indicator
+  const clearCompletedIndicator = useCallback(() => {
+    if (
+      conversationManagement.conversationId &&
+      conversationManagement.conversationId !== -1
+    ) {
+      setCompletedConversations((prev) => {
+        // Use functional update to avoid dependency on completedConversations
+        if (prev.has(conversationManagement.conversationId)) {
+          const newSet = new Set(prev);
+          newSet.delete(conversationManagement.conversationId);
+          return newSet;
+        }
+        return prev;
+      });
+    }
+  }, [conversationManagement.conversationId]);
+
+  // Add useEffect to clear completed conversation indicator when user is viewing the current conversation
+  useEffect(() => {
+    // If current conversation is in completedConversations, clear it when user is viewing it
+    clearCompletedIndicator();
+  }, [conversationManagement.conversationId, clearCompletedIndicator]);
+
+  // Add click event listener to clear completed conversation indicator when user clicks anywhere on the page
+  useEffect(() => {
+    const handlePageClick = (e: MouseEvent) => {
+      // Clear completed indicator when user clicks anywhere on the page
+      clearCompletedIndicator();
+    };
+
+    // Add click event listener to the document
+    document.addEventListener('click', handlePageClick, true);
+
+    return () => {
+      document.removeEventListener('click', handlePageClick, true);
+    };
+  }, [clearCompletedIndicator]);
+
 
   // Clear all timers and requests when component unmounts
   useEffect(() => {
@@ -1635,6 +1674,8 @@ export function ChatInterface() {
                 shouldScrollToBottom={shouldScrollToBottom}
                 selectedAgentId={selectedAgentId}
                 onAgentSelect={setSelectedAgentId}
+                onCitationHover={clearCompletedIndicator}
+                onScroll={clearCompletedIndicator}
               />
             </div>
 

frontend/app/[locale]/chat/streaming/chatStreamFinalMessage.tsx

@@ -32,6 +32,7 @@ interface FinalMessageProps {
   hideButtons?: boolean;
   index?: number;
   currentConversationId?: number;
+  onCitationHover?: () => void;
 }
 
 // TTS playback status
@@ -48,6 +49,7 @@ export function ChatStreamFinalMessage({
   hideButtons = false,
   index,
   currentConversationId,
+  onCitationHover,
 }: FinalMessageProps) {
   const { t } = useTranslation("common");
 
@@ -269,6 +271,7 @@ export function ChatStreamFinalMessage({
               <MarkdownRenderer
                 content={message.finalAnswer || message.content || ""}
                 searchResults={message?.searchResults}
+                onCitationHover={onCitationHover}
               />
 
               {/* Button group - only show when hideButtons is false and message is complete */}
@@ -287,6 +290,11 @@ export function ChatStreamFinalMessage({
                             isSelected ? "bg-gray-100" : ""
                           }`}
                           onClick={handleMessageSelect}
+                          onMouseEnter={() => {
+                            if (onCitationHover) {
+                              onCitationHover();
+                            }
+                          }}
                         >
                           <span>
                             {searchResultsCount > 0 &&

frontend/app/[locale]/chat/streaming/chatStreamMain.tsx

@@ -37,6 +37,8 @@ export function ChatStreamMain({
   shouldScrollToBottom,
   selectedAgentId,
   onAgentSelect,
+  onCitationHover,
+  onScroll,
 }: ChatStreamMainProps) {
   const { t } = useTranslation();
   // Animation variants for ChatInput
@@ -325,6 +327,11 @@ export function ChatStreamMain({
           setAutoScroll(false);
         }
       }
+
+      // Clear completed conversation indicator when scrolling
+      if (onScroll) {
+        onScroll();
+      }
     };
 
     // Add scroll event listener
@@ -336,7 +343,7 @@ export function ChatStreamMain({
     return () => {
       scrollAreaElement.removeEventListener("scroll", handleScroll);
     };
-  }, [shouldScrollToBottom]);
+  }, [shouldScrollToBottom, onScroll]);
 
   // Scroll to bottom function
   const scrollToBottom = (smooth = false) => {
@@ -544,6 +551,7 @@ export function ChatStreamMain({
                     onOpinionChange={onOpinionChange}
                     index={index}
                     currentConversationId={currentConversationId}
+                    onCitationHover={onCitationHover}
                   />
                   {message.role === "user" &&
                     processedMessages.conversationGroups.has(message.id!) && (

frontend/components/ui/markdownRenderer.tsx

@@ -28,6 +28,7 @@ interface MarkdownRendererProps {
   className?: string;
   searchResults?: SearchResult[];
   showDiagramToggle?: boolean;
+  onCitationHover?: () => void;
 }
 
 // Get background color for different tool signs
@@ -87,9 +88,11 @@ const CitationBadge = ({
 const HoverableText = ({
   text,
   searchResults,
+  onCitationHover,
 }: {
   text: string;
   searchResults?: SearchResult[];
+  onCitationHover?: () => void;
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const containerRef = React.useRef<HTMLSpanElement>(null);
@@ -141,6 +144,11 @@ const HoverableText = ({
         clearTimeout(timeoutId);
       }
 
+      // Clear completed conversation indicator when hovering over citation
+      if (onCitationHover) {
+        onCitationHover();
+      }
+
       // Delay before showing tooltip to avoid quick hover triggers
       timeoutId = setTimeout(() => {
         setIsOpen(true);
@@ -226,7 +234,7 @@ const HoverableText = ({
       container.removeEventListener("mouseenter", handleMouseEnter);
       container.removeEventListener("mouseleave", handleMouseLeave);
     };
-  }, [isOpen]);
+  }, [isOpen, onCitationHover]);
 
   return (
     <TooltipProvider>
@@ -355,6 +363,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
   className,
   searchResults = [],
   showDiagramToggle = true,
+  onCitationHover,
 }) => {
   const { t } = useTranslation("common");
 
@@ -424,6 +433,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
                   key={index}
                   text={innerText}
                   searchResults={searchResults}
+                  onCitationHover={onCitationHover}
                 />
               );
             } else {

frontend/types/chat.ts

@@ -169,6 +169,8 @@ export interface ChatStreamMainProps {
   shouldScrollToBottom?: boolean;
   selectedAgentId?: number | null;
   onAgentSelect?: (agentId: number | null) => void;
+  onCitationHover?: () => void;
+  onScroll?: () => void;
 }
 
 // Card item type for task window