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

@@ -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={{
+                  style={echartsStyle}
-                    height: '350px',
-                    width: '100%',
-                  }}
                   theme={isDarkMode ? 'dark' : undefined}
-                  opts={{
+                  opts={echartsOpts}
-                    renderer: 'canvas',
-                    width: 'auto',
-                  }}
                   notMerge={true}
-                  onEvents={{
+                  onEvents={echartsOnEvents}
-                    // Force resize when chart is finished rendering
-                    finished: () => {
-                      const instance = echartsRef.current?.getEchartsInstance?.()
-                      if (instance)
-                        instance.resize()
-                    },
-                  }}
                 />
               </ErrorBoundary>
             </div>
@@ -374,15 +380,9 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
               <ReactEcharts
                 ref={echartsRef}
                 option={errorOption}
-                style={{
+                style={echartsStyle}
-                  height: '350px',
-                  width: '100%',
-                }}
                 theme={isDarkMode ? 'dark' : undefined}
-                opts={{
+                opts={echartsOpts}
-                  renderer: 'canvas',
-                  width: 'auto',
-                }}
                 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>