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

Resolve json code block freezing issue in WebUI

lightrag/api/__init__.py

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

lightrag/api/webui/assets/index-CvkPVz55.js

@@ -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
  *

lightrag/api/webui/index.html

@@ -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">

lightrag_webui/src/components/retrieval/ChatMessage.tsx

@@ -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}