Initializing...
+Waiting for complete diagram...
'; + return; + } + + const processedContent = rawContent + .split('\n') + .map(line => { + const trimmedLine = line.trim(); + if (trimmedLine.startsWith('subgraph')) { + const parts = trimmedLine.split(' '); + if (parts.length > 1) { + const title = parts.slice(1).join(' ').replace(/["']/g, ''); + return `subgraph "${title}"`; + } + } + return trimmedLine; + }) + .filter(line => !line.trim().startsWith('linkStyle')) + .join('\n'); + + const mermaidId = `mermaid-${Date.now()}`; + mermaid.render(mermaidId, processedContent) + .then(({ svg, bindFunctions }) => { + // Check ref and hasRendered state again inside async callback + if (mermaidRef.current === container && !hasRendered) { + container.innerHTML = svg; + setHasRendered(true); // Mark as rendered successfully + if (bindFunctions) { + try { + bindFunctions(container); + } catch (bindError) { + console.error('Mermaid bindFunctions error:', bindError); + container.innerHTML += 'Diagram interactions might be limited.
'; + } + } + } else if (mermaidRef.current !== container) { + console.log('Mermaid container changed before rendering completed.'); + } + }) + .catch(error => { + console.error('Mermaid rendering promise error (debounced):', error); + console.error('Failed content (debounced):', processedContent); + if (mermaidRef.current === container) { + const errorMessage = error instanceof Error ? error.message : String(error); + const errorPre = document.createElement('pre'); + errorPre.className = 'text-red-500 text-xs whitespace-pre-wrap break-words'; + errorPre.textContent = `Mermaid diagram error: ${errorMessage}\n\nContent:\n${processedContent}`; + container.innerHTML = ''; + container.appendChild(errorPre); + } + }); + + } catch (error) { + console.error('Mermaid synchronous error (debounced):', error); + console.error('Failed content (debounced):', String(children)); + if (mermaidRef.current === container) { + const errorMessage = error instanceof Error ? error.message : String(error); + const errorPre = document.createElement('pre'); + errorPre.className = 'text-red-500 text-xs whitespace-pre-wrap break-words'; + errorPre.textContent = `Mermaid diagram setup error: ${errorMessage}`; + container.innerHTML = ''; + container.appendChild(errorPre); + } + } + }, 300); // Debounce delay + } + + // Cleanup function to clear the timer on unmount or before re-running effect + return () => { + if (debounceTimerRef.current) { + clearTimeout(debounceTimerRef.current); + } + }; + // Dependencies: renderAsDiagram ensures effect runs when diagram should be shown. + // Dependencies include all values used inside the effect to satisfy exhaustive-deps. + // The !hasRendered check prevents re-execution of render logic after success. + }, [renderAsDiagram, hasRendered, language, children, theme]); // Add children and theme back + + // For large JSON, skip syntax highlighting completely and use a simple pre tag + if (isLargeJsonBlock) { + return ( +
+ {contentStr}
+
+ );
+ }
+
+ // Render based on language type
+ // If it's a mermaid language block and rendering as diagram is not requested (e.g., incomplete stream), display as plain text
+ if (language === 'mermaid' && !renderAsDiagram) {
+ return (
+
+ {children}
+
+ );
+});
+
+// Assign display name for React DevTools
+CodeHighlight.displayName = 'CodeHighlight';
diff --git a/lightrag_webui/src/components/retrieval/QuerySettings.tsx b/lightrag_webui/src/components/retrieval/QuerySettings.tsx
index 0b0096c0a8..7850c27ab1 100644
--- a/lightrag_webui/src/components/retrieval/QuerySettings.tsx
+++ b/lightrag_webui/src/components/retrieval/QuerySettings.tsx
@@ -213,15 +213,23 @@ export default function QuerySettings() {
value={querySettings.chunk_top_k ?? ''}
onChange={(e) => {
const value = e.target.value
- handleChange('chunk_top_k', value === '' ? '' : parseInt(value) || 0)
+ const numValue = value === '' ? '' : parseInt(value) || 0
+ handleChange('chunk_top_k', numValue)
+
+ // Auto-enable KG-only mode when chunk_top_k is 0
+ if (numValue === 0) {
+ handleChange('only_kg_context', true)
+ } else {
+ handleChange('only_kg_context', false)
+ }
}}
onBlur={(e) => {
const value = e.target.value
if (value === '' || isNaN(parseInt(value))) {
- handleChange('chunk_top_k', 20)
+ handleChange('chunk_top_k', 0)
}
}}
- min={1}
+ min={0}
placeholder={t('retrievePanel.querySettings.chunkTopKPlaceholder')}
className="h-9 flex-1 pr-2 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]"
/>
diff --git a/lightrag_webui/src/components/retrieval/QuerySettings_original.tsx b/lightrag_webui/src/components/retrieval/QuerySettings_original.tsx
new file mode 100644
index 0000000000..0b0096c0a8
--- /dev/null
+++ b/lightrag_webui/src/components/retrieval/QuerySettings_original.tsx
@@ -0,0 +1,457 @@
+import { useCallback, useMemo } from 'react'
+import { QueryMode, QueryRequest } from '@/api/lightrag'
+// Removed unused import for Text component
+import Checkbox from '@/components/ui/Checkbox'
+import Input from '@/components/ui/Input'
+import UserPromptInputWithHistory from '@/components/ui/UserPromptInputWithHistory'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectTrigger,
+ SelectValue
+} from '@/components/ui/Select'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/Tooltip'
+import { useSettingsStore } from '@/stores/settings'
+import { useTranslation } from 'react-i18next'
+import { RotateCcw } from 'lucide-react'
+
+export default function QuerySettings() {
+ const { t } = useTranslation()
+ const querySettings = useSettingsStore((state) => state.querySettings)
+ const userPromptHistory = useSettingsStore((state) => state.userPromptHistory)
+
+ const handleChange = useCallback((key: keyof QueryRequest, value: any) => {
+ useSettingsStore.getState().updateQuerySettings({ [key]: value })
+ }, [])
+
+ const handleSelectFromHistory = useCallback((prompt: string) => {
+ handleChange('user_prompt', prompt)
+ }, [handleChange])
+
+ const handleDeleteFromHistory = useCallback((index: number) => {
+ const newHistory = [...userPromptHistory]
+ newHistory.splice(index, 1)
+ useSettingsStore.getState().setUserPromptHistory(newHistory)
+ }, [userPromptHistory])
+
+ // Default values for reset functionality
+ const defaultValues = useMemo(() => ({
+ mode: 'mix' as QueryMode,
+ top_k: 40,
+ chunk_top_k: 20,
+ max_entity_tokens: 6000,
+ max_relation_tokens: 8000,
+ max_total_tokens: 30000
+ }), [])
+
+ const handleReset = useCallback((key: keyof typeof defaultValues) => {
+ handleChange(key, defaultValues[key])
+ }, [handleChange, defaultValues])
+
+ // Reset button component
+ const ResetButton = ({ onClick, title }: { onClick: () => void; title: string }) => (
+ {title}
+{t('retrievePanel.querySettings.userPromptTooltip')}
+{t('retrievePanel.querySettings.queryModeTooltip')}
+{t('retrievePanel.querySettings.topKTooltip')}
+{t('retrievePanel.querySettings.chunkTopKTooltip')}
+{t('retrievePanel.querySettings.maxEntityTokensTooltip')}
+{t('retrievePanel.querySettings.maxRelationTokensTooltip')}
+{t('retrievePanel.querySettings.maxTotalTokensTooltip')}
+{t('retrievePanel.querySettings.enableRerankTooltip')}
+{t('retrievePanel.querySettings.onlyNeedContextTooltip')}
+{t('retrievePanel.querySettings.onlyNeedPromptTooltip')}
+{t('retrievePanel.querySettings.streamResponseTooltip')}
++ {part.trim() || "No description found."} +
+ )) || "No description found."} ++ {id.trim() || ""} +
+ )) || ""} ++ {path.trim() || ""} +
+ )) || "No file path"} ++ {part.trim()} +
+ )) || "No description found."} ++ {part.trim() || "No relation description provided."} +
+ )) || "No relation description provided."} +Saving changes... Please wait.
+