From 7d325bd41c96a55f10a4faa6b226872877f91d98 Mon Sep 17 00:00:00 2001
From: xuzijie1995 <18852951350@163.com>
Date: Sat, 24 May 2025 10:08:09 +0800
Subject: [PATCH 1/2] fix(echarts): Resolve chart flickering and animation loop
 in Markdown

Addresses the ECharts flickering issue observed during streaming output.
This is achieved by:
1. Memoizing  props (, , ) to prevent re-renders from new object references.
2. Refining the  hook for resize handling to use  dependencies, ensuring it only runs when necessary.
3. Applying type assertions to  to resolve TypeScript errors (e.g.,  and  properties).
---
 web/app/components/base/markdown.tsx | 50 ++++++++++++++--------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx
index b28bf2bc8f..45003deff1 100644
--- a/web/app/components/base/markdown.tsx
+++ b/web/app/components/base/markdown.tsx
@@ -134,6 +134,25 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
   const languageShowName = getCorrectCapitalizationLanguageName(language || '')
   const isDarkMode = theme === Theme.dark
 
+  const echartsStyle = useMemo(() => ({
+    height: '350px',
+    width: '100%',
+  }), []);
+
+  const echartsOpts = useMemo(() => ({
+    renderer: 'canvas',
+    width: 'auto',
+  }) as any, []);
+
+  const echartsOnEvents = useMemo(() => ({
+    finished: () => {
+      const instance = echartsRef.current?.getEchartsInstance?.();
+      if (instance) {
+        instance.resize();
+      }
+    },
+  }), [echartsRef]); // echartsRef is stable, so this effectively runs once.
+
   // Handle container resize for echarts
   useEffect(() => {
     if (language !== 'echarts' || !echartsRef.current) return
@@ -329,24 +348,11 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
                 <ReactEcharts
                   ref={echartsRef}
                   option={finalChartOption}
-                  style={{
-                    height: '350px',
-                    width: '100%',
-                  }}
+                  style={echartsStyle}
                   theme={isDarkMode ? 'dark' : undefined}
-                  opts={{
-                    renderer: 'canvas',
-                    width: 'auto',
-                  }}
+                  opts={echartsOpts}
                   notMerge={true}
-                  onEvents={{
-                    // Force resize when chart is finished rendering
-                    finished: () => {
-                      const instance = echartsRef.current?.getEchartsInstance?.()
-                      if (instance)
-                        instance.resize()
-                    },
-                  }}
+                  onEvents={echartsOnEvents}
                 />
               </ErrorBoundary>
             </div>
@@ -374,15 +380,9 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
               <ReactEcharts
                 ref={echartsRef}
                 option={errorOption}
-                style={{
-                  height: '350px',
-                  width: '100%',
-                }}
+                style={echartsStyle}
                 theme={isDarkMode ? 'dark' : undefined}
-                opts={{
-                  renderer: 'canvas',
-                  width: 'auto',
-                }}
+                opts={echartsOpts}
                 notMerge={true}
               />
             </ErrorBoundary>
@@ -423,7 +423,7 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
           </SyntaxHighlighter>
         )
     }
-  }, [children, language, isSVG, finalChartOption, props, theme, match])
+  }, [children, language, isSVG, finalChartOption, props, theme, match, chartState, isDarkMode, echartsStyle, echartsOpts, echartsOnEvents]);
 
   if (inline || !match)
     return <code {...props} className={className}>{children}</code>

From 04da941bf031cba33cbef1b86311996b704a34e4 Mon Sep 17 00:00:00 2001
From: xuzijie1995 <18852951350@163.com>
Date: Sun, 25 May 2025 17:24:46 +0800
Subject: [PATCH 2/2] fix(web): resolve linting errors in Markdown component

---
 web/app/components/base/markdown.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx
index 45003deff1..a47d93268c 100644
--- a/web/app/components/base/markdown.tsx
+++ b/web/app/components/base/markdown.tsx
@@ -137,21 +137,20 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
   const echartsStyle = useMemo(() => ({
     height: '350px',
     width: '100%',
-  }), []);
+  }), [])
 
   const echartsOpts = useMemo(() => ({
     renderer: 'canvas',
     width: 'auto',
-  }) as any, []);
+  }) as any, [])
 
   const echartsOnEvents = useMemo(() => ({
     finished: () => {
-      const instance = echartsRef.current?.getEchartsInstance?.();
-      if (instance) {
-        instance.resize();
-      }
+      const instance = echartsRef.current?.getEchartsInstance?.()
+      if (instance)
+        instance.resize()
     },
-  }), [echartsRef]); // echartsRef is stable, so this effectively runs once.
+  }), [echartsRef]) // echartsRef is stable, so this effectively runs once.
 
   // Handle container resize for echarts
   useEffect(() => {
@@ -423,7 +422,7 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
           </SyntaxHighlighter>
         )
     }
-  }, [children, language, isSVG, finalChartOption, props, theme, match, chartState, isDarkMode, echartsStyle, echartsOpts, echartsOnEvents]);
+  }, [children, language, isSVG, finalChartOption, props, theme, match, chartState, isDarkMode, echartsStyle, echartsOpts, echartsOnEvents])
 
   if (inline || !match)
     return <code {...props} className={className}>{children}</code>