Merge pull request #1539 from danielaskdd/json-code-block-freezing

Resolve json code block freezing issue in WebUI
This commit is contained in:
Daniel.y
2025-05-07 04:45:42 +08:00
committed by GitHub
5 changed files with 34 additions and 15 deletions

View File

@@ -1 +1 @@
__api_version__ = "0167"
__api_version__ = "0168"

View File

@@ -1,4 +1,4 @@
import{j as o,Y as td,O as fg,k as dg,u as ad,Z as mg,c as hg,l as gg,g as pg,S as yg,T as vg,n as bg,m as nd,o as Sg,p as Tg,$ as ud,a0 as id,a1 as cd,a2 as xg}from"./ui-vendor-CeCm8EER.js";import{d as Ag,h as Dg,r as E,u as sd,H as Ng,i as Eg,j as kf}from"./react-vendor-DEwriMA6.js";import{w as Xe,c as Ve,a5 as od,u as ql,v as Gt,a6 as rd,a7 as fd,I as us,B as Cn,D as Mg,i as zg,j as Cg,k as Og,l as jg,a8 as Rg,a9 as Ug,aa as _g,ab as Hg,ac as Ll,ad as dd,ae as ss,af as is,P as Lg,Q as qg,V as Bg,W as Gg,ag as Yg,ah as wg,ai as md,aj as Xg,ak as Vg,al as hd,am as Qg,an as gd,C as Kg,z as Zg,G as kg,d as En,ao as Jg,ap as Fg,aq as $g}from"./feature-graph-n9v7_77L.js";import{S as Jf,a as Ff,b as $f,c as Wf,d as ot,R as Wg}from"./feature-retrieval-C3RSdrRs.js";import{D as Pg}from"./feature-documents-wtbEF8SC.js";import{i as cs}from"./utils-vendor-BysuhMZA.js";import"./graph-vendor-B-X5JegA.js";import"./mermaid-vendor-DJG80fdk.js";import"./markdown-vendor-BBaHfVvE.js";(function(){const b=document.createElement("link").relList;if(b&&b.supports&&b.supports("modulepreload"))return;for(const N of document.querySelectorAll('link[rel="modulepreload"]'))d(N);new MutationObserver(N=>{for(const j of N)if(j.type==="childList")for(const H of j.addedNodes)H.tagName==="LINK"&&H.rel==="modulepreload"&&d(H)}).observe(document,{childList:!0,subtree:!0});function x(N){const j={};return N.integrity&&(j.integrity=N.integrity),N.referrerPolicy&&(j.referrerPolicy=N.referrerPolicy),N.crossOrigin==="use-credentials"?j.credentials="include":N.crossOrigin==="anonymous"?j.credentials="omit":j.credentials="same-origin",j}function d(N){if(N.ep)return;N.ep=!0;const j=x(N);fetch(N.href,j)}})();var ts={exports:{}},Mn={},as={exports:{}},ns={};/**
import{j as o,Y as td,O as fg,k as dg,u as ad,Z as mg,c as hg,l as gg,g as pg,S as yg,T as vg,n as bg,m as nd,o as Sg,p as Tg,$ as ud,a0 as id,a1 as cd,a2 as xg}from"./ui-vendor-CeCm8EER.js";import{d as Ag,h as Dg,r as E,u as sd,H as Ng,i as Eg,j as kf}from"./react-vendor-DEwriMA6.js";import{w as Xe,c as Ve,a5 as od,u as ql,v as Gt,a6 as rd,a7 as fd,I as us,B as Cn,D as Mg,i as zg,j as Cg,k as Og,l as jg,a8 as Rg,a9 as Ug,aa as _g,ab as Hg,ac as Ll,ad as dd,ae as ss,af as is,P as Lg,Q as qg,V as Bg,W as Gg,ag as Yg,ah as wg,ai as md,aj as Xg,ak as Vg,al as hd,am as Qg,an as gd,C as Kg,z as Zg,G as kg,d as En,ao as Jg,ap as Fg,aq as $g}from"./feature-graph-n9v7_77L.js";import{S as Jf,a as Ff,b as $f,c as Wf,d as ot,R as Wg}from"./feature-retrieval-BWPImNx0.js";import{D as Pg}from"./feature-documents-wtbEF8SC.js";import{i as cs}from"./utils-vendor-BysuhMZA.js";import"./graph-vendor-B-X5JegA.js";import"./mermaid-vendor-DJG80fdk.js";import"./markdown-vendor-BBaHfVvE.js";(function(){const b=document.createElement("link").relList;if(b&&b.supports&&b.supports("modulepreload"))return;for(const N of document.querySelectorAll('link[rel="modulepreload"]'))d(N);new MutationObserver(N=>{for(const j of N)if(j.type==="childList")for(const H of j.addedNodes)H.tagName==="LINK"&&H.rel==="modulepreload"&&d(H)}).observe(document,{childList:!0,subtree:!0});function x(N){const j={};return N.integrity&&(j.integrity=N.integrity),N.referrerPolicy&&(j.referrerPolicy=N.referrerPolicy),N.crossOrigin==="use-credentials"?j.credentials="include":N.crossOrigin==="anonymous"?j.credentials="omit":j.credentials="same-origin",j}function d(N){if(N.ep)return;N.ep=!0;const j=x(N);fetch(N.href,j)}})();var ts={exports:{}},Mn={},as={exports:{}},ns={};/**
* @license React
* scheduler.production.js
*

View File

@@ -8,7 +8,7 @@
<link rel="icon" type="image/svg+xml" href="logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lightrag</title>
<script type="module" crossorigin src="/webui/assets/index-DPk-nJzB.js"></script>
<script type="module" crossorigin src="/webui/assets/index-CvkPVz55.js"></script>
<link rel="modulepreload" crossorigin href="/webui/assets/react-vendor-DEwriMA6.js">
<link rel="modulepreload" crossorigin href="/webui/assets/ui-vendor-CeCm8EER.js">
<link rel="modulepreload" crossorigin href="/webui/assets/graph-vendor-B-X5JegA.js">
@@ -16,7 +16,7 @@
<link rel="modulepreload" crossorigin href="/webui/assets/feature-graph-n9v7_77L.js">
<link rel="modulepreload" crossorigin href="/webui/assets/mermaid-vendor-DJG80fdk.js">
<link rel="modulepreload" crossorigin href="/webui/assets/markdown-vendor-BBaHfVvE.js">
<link rel="modulepreload" crossorigin href="/webui/assets/feature-retrieval-C3RSdrRs.js">
<link rel="modulepreload" crossorigin href="/webui/assets/feature-retrieval-BWPImNx0.js">
<link rel="modulepreload" crossorigin href="/webui/assets/feature-documents-wtbEF8SC.js">
<link rel="stylesheet" crossorigin href="/webui/assets/feature-graph-BipNuM18.css">
<link rel="stylesheet" crossorigin href="/webui/assets/index-CM0YrL-d.css">

View File

@@ -116,6 +116,12 @@ const isInlineCode = (node?: Element): boolean => {
};
// Check if it is a large JSON
const isLargeJson = (language: string | undefined, content: string | undefined): boolean => {
if (!content || language !== 'json') return false;
return content.length > 5000; // JSON larger than 5KB is considered large JSON
};
// Memoize the CodeHighlight component
const CodeHighlight = memo(({ className, children, node, renderAsDiagram = false, ...props }: CodeHighlightProps) => {
const { theme } = useTheme();
@@ -126,6 +132,10 @@ const CodeHighlight = memo(({ className, children, node, renderAsDiagram = false
const mermaidRef = useRef<HTMLDivElement>(null);
const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null); // Use ReturnType for better typing
// Get the content string, check if it is a large JSON
const contentStr = String(children || '').replace(/\n$/, '');
const isLargeJsonBlock = isLargeJson(language, contentStr);
// Handle Mermaid rendering with debounce
useEffect(() => {
// Effect should run when renderAsDiagram becomes true or hasRendered changes.
@@ -247,11 +257,19 @@ const CodeHighlight = memo(({ className, children, node, renderAsDiagram = false
}
};
// Dependencies: renderAsDiagram ensures effect runs when diagram should be shown.
// children, language, theme trigger re-render if code/context changes.
// 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 (
<pre className="whitespace-pre-wrap break-words bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
{contentStr}
</pre>
);
}
// 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) {
@@ -262,7 +280,7 @@ const CodeHighlight = memo(({ className, children, node, renderAsDiagram = false
language="text" // Use text as language to avoid syntax highlighting errors
{...props}
>
{String(children).replace(/\n$/, '')}
{contentStr}
</SyntaxHighlighter>
);
}
@@ -273,6 +291,7 @@ const CodeHighlight = memo(({ className, children, node, renderAsDiagram = false
return <div className="mermaid-diagram-container my-4 overflow-x-auto" ref={mermaidRef}></div>;
}
// Handle non-Mermaid code blocks
return !inline ? (
<SyntaxHighlighter
@@ -281,12 +300,12 @@ const CodeHighlight = memo(({ className, children, node, renderAsDiagram = false
language={language}
{...props}
>
{String(children).replace(/\n$/, '')}
{contentStr}
</SyntaxHighlighter>
) : (
// Handle inline code
<code
className={cn(className, 'mx-1 rounded-sm bg-muted px-1 py-0.5 font-mono text-sm')} // 添加 font-mono 确保使用等宽字体
className={cn(className, 'mx-1 rounded-sm bg-muted px-1 py-0.5 font-mono text-sm')} // Add font-mono to ensure monospaced font is used
{...props}
>
{children}