From 7404f76d8c76a02c357ba4e7111e4ce99d94a796 Mon Sep 17 00:00:00 2001
From: yangdx <gzdaniel@me.com>
Date: Fri, 17 Oct 2025 21:17:01 +0800
Subject: [PATCH] Optimize chat performance by reducing animations in inactive
 tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Add isTabActive prop to ChatMessage
• Disable spinner in inactive tabs
• Reduce opacity for inactive content
• Hide loading indicator when inactive
• Pass tab state from RetrievalTesting

(cherry picked from commit dab1c358346e43ab4bd4e8c0a0dae1b43782dece)
---
 .../src/components/retrieval/ChatMessage.tsx  | 23 +++++++++++---
 .../src/features/RetrievalTesting.tsx         | 31 +++----------------
 2 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/lightrag_webui/src/components/retrieval/ChatMessage.tsx b/lightrag_webui/src/components/retrieval/ChatMessage.tsx
index 42dd9faf..c9b67a87 100644
--- a/lightrag_webui/src/components/retrieval/ChatMessage.tsx
+++ b/lightrag_webui/src/components/retrieval/ChatMessage.tsx
@@ -45,7 +45,13 @@ export type MessageWithError = Message & {
 }
 
 // Restore original component definition and export
-export const ChatMessage = ({ message }: { message: MessageWithError }) => { // Remove isComplete prop
+export const ChatMessage = ({
+  message,
+  isTabActive = true
+}: {
+  message: MessageWithError
+  isTabActive?: boolean
+}) => {
   const { t } = useTranslation()
   const { theme } = useTheme()
   const [katexPlugin, setKatexPlugin] = useState<((options?: KaTeXOptions) => any) | null>(null)
@@ -152,8 +158,13 @@ export const ChatMessage = ({ message }: { message: MessageWithError }) => { //
       } rounded-lg px-4 py-2`}
     >
       {/* Thinking process display - only for assistant messages */}
+      {/* Always render to prevent layout shift when switching tabs */}
       {message.role === 'assistant' && (isThinking || thinkingTime !== null) && (
-        <div className="mb-2">
+        <div className={cn(
+          'mb-2',
+          // Reduce visual priority in inactive tabs while maintaining layout
+          !isTabActive && 'opacity-50'
+        )}>
           <div
             className="flex items-center text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 text-sm cursor-pointer select-none"
             onClick={() => {
@@ -165,7 +176,8 @@ export const ChatMessage = ({ message }: { message: MessageWithError }) => { //
           >
             {isThinking ? (
               <>
-                <LoaderIcon className="mr-2 size-4 animate-spin" />
+                {/* Only show spinner animation in active tab to save resources */}
+                {isTabActive && <LoaderIcon className="mr-2 size-4 animate-spin" />}
                 <span>{t('retrievePanel.chatMessage.thinking')}</span>
               </>
             ) : (
@@ -251,11 +263,12 @@ export const ChatMessage = ({ message }: { message: MessageWithError }) => { //
           </ReactMarkdown>
         </div>
       )}
-      {(() => {
+      {/* Loading indicator - only show in active tab */}
+      {isTabActive && (() => {
         // More comprehensive loading state check
         const hasVisibleContent = finalDisplayContent && finalDisplayContent.trim() !== '';
         const isLoadingState = !hasVisibleContent && !isThinking && !thinkingTime;
-        return isLoadingState && <LoaderIcon className="animate-spin duration-2000" />;
+        return isLoadingState && <LoaderIcon className="animate-spin duration-2000" />
       })()}
     </div>
   )
diff --git a/lightrag_webui/src/features/RetrievalTesting.tsx b/lightrag_webui/src/features/RetrievalTesting.tsx
index a376be44..3fe8ec13 100644
--- a/lightrag_webui/src/features/RetrievalTesting.tsx
+++ b/lightrag_webui/src/features/RetrievalTesting.tsx
@@ -6,7 +6,6 @@ import { throttle } from '@/lib/utils'
 import { queryText, queryTextStream } from '@/api/lightrag'
 import { errorMessage } from '@/lib/utils'
 import { useSettingsStore } from '@/stores/settings'
-import { useTenantState } from '@/stores/tenant'
 import { useDebounce } from '@/hooks/useDebounce'
 import QuerySettings from '@/components/retrieval/QuerySettings'
 import { ChatMessage, MessageWithError } from '@/components/retrieval/ChatMessage'
@@ -104,8 +103,10 @@ const parseCOTContent = (content: string) => {
 
 export default function RetrievalTesting() {
   const { t } = useTranslation()
-  const selectedTenant = useTenantState.use.selectedTenant()
-  const selectedKB = useTenantState.use.selectedKB()
+  // Get current tab to determine if this tab is active (for performance optimization)
+  const currentTab = useSettingsStore.use.currentTab()
+  const isRetrievalTabActive = currentTab === 'retrieval'
+
   const [messages, setMessages] = useState<MessageWithError[]>(() => {
     try {
       const history = useSettingsStore.getState().retrievalHistory || []
@@ -614,17 +615,6 @@ export default function RetrievalTesting() {
     }
   }, [debouncedMessages, scrollToBottom])
 
-  // Clear retrieval history when tenant or KB changes to prevent showing stale data
-  useEffect(() => {
-    // Clear messages and retrieval history to ensure we don't show results from other tenants/KBs
-    setMessages([])
-    useSettingsStore.getState().setRetrievalHistory([])
-    console.log('[RetrievalTesting] Cleared retrieval history due to tenant/KB change:', {
-      tenant_id: selectedTenant?.tenant_id,
-      kb_id: selectedKB?.kb_id
-    })
-  }, [selectedTenant?.tenant_id, selectedKB?.kb_id])
-
 
   const clearMessages = useCallback(() => {
     setMessages([])
@@ -693,17 +683,6 @@ export default function RetrievalTesting() {
     }
   }, [t])
 
-  if (!selectedKB) {
-    return (
-      <div className="flex size-full items-center justify-center">
-        <div className="text-center text-muted-foreground">
-          <p className="text-lg font-medium">Please select a Knowledge Base to start chatting</p>
-          <p className="text-sm mt-2">Use the selector in the top header</p>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <div className="flex size-full gap-2 px-2 pb-12 overflow-hidden">
       <div className="flex grow flex-col gap-4">
@@ -741,7 +720,7 @@ export default function RetrievalTesting() {
                           <CopyIcon className="size-4" />
                         </Button>
                       )}
-                      <ChatMessage message={message} />
+                      <ChatMessage message={message} isTabActive={isRetrievalTabActive} />
                       {message.role === 'assistant' && (
                         <Button
                           onClick={() => handleCopyMessage(message)}