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) && (
-
+
{
@@ -165,7 +176,8 @@ export const ChatMessage = ({ message }: { message: MessageWithError }) => { //
>
{isThinking ? (
<>
-
+ {/* Only show spinner animation in active tab to save resources */}
+ {isTabActive && }
{t('retrievePanel.chatMessage.thinking')}
>
) : (
@@ -251,11 +263,12 @@ export const ChatMessage = ({ message }: { message: MessageWithError }) => { //
)}
- {(() => {
+ {/* 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 &&
;
+ return isLoadingState &&
})()}
)
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
(() => {
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 (
-
-
-
Please select a Knowledge Base to start chatting
-
Use the selector in the top header
-
-
- )
- }
-
return (
@@ -741,7 +720,7 @@ export default function RetrievalTesting() {
)}
-
+
{message.role === 'assistant' && (