fix(code-block): improve debounce handling and cleanup in CodeBlock component

- Updated the resize timer and chart ready timer to use clearer cleanup functions.
- Refactored the debounced resize and chart ready handling to enhance performance and prevent memory leaks.
- Added console error and warning spies in tests for better error handling during component testing.

web/app/components/base/markdown-blocks/__tests__/code-block.spec.tsx

@@ -21,6 +21,8 @@ let clientWidthSpy: { mockRestore: () => void } | null = null
 let clientHeightSpy: { mockRestore: () => void } | null = null
 let offsetWidthSpy: { mockRestore: () => void } | null = null
 let offsetHeightSpy: { mockRestore: () => void } | null = null
+let consoleErrorSpy: ReturnType<typeof vi.spyOn> | null = null
+let consoleWarnSpy: ReturnType<typeof vi.spyOn> | null = null
 
 type AudioContextCtor = new () => unknown
 type WindowWithLegacyAudio = Window & {
@@ -83,6 +85,8 @@ describe('CodeBlock', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockUseTheme.mockReturnValue({ theme: Theme.light })
+    consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
     clientWidthSpy = vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(900)
     clientHeightSpy = vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(400)
     offsetWidthSpy = vi.spyOn(HTMLElement.prototype, 'offsetWidth', 'get').mockReturnValue(900)
@@ -98,6 +102,10 @@ describe('CodeBlock', () => {
 
   afterEach(() => {
     vi.useRealTimers()
+    consoleErrorSpy?.mockRestore()
+    consoleWarnSpy?.mockRestore()
+    consoleErrorSpy = null
+    consoleWarnSpy = null
     clientWidthSpy?.mockRestore()
     clientHeightSpy?.mockRestore()
     offsetWidthSpy?.mockRestore()

web/app/components/base/markdown-blocks/code-block.tsx

@@ -85,13 +85,30 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
   const processedRef = useRef<boolean>(false) // Track if content was successfully processed
   const isInitialRenderRef = useRef<boolean>(true) // Track if this is initial render
   const chartInstanceRef = useRef<any>(null) // Direct reference to ECharts instance
-  const resizeTimerRef = useRef<NodeJS.Timeout | null>(null) // For debounce handling
+  const resizeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) // For debounce handling
+  const chartReadyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const finishedEventCountRef = useRef<number>(0) // Track finished event trigger count
   const match = /language-(\w+)/.exec(className || '')
   const language = match?.[1]
   const languageShowName = getCorrectCapitalizationLanguageName(language || '')
   const isDarkMode = theme === Theme.dark
 
+  const clearResizeTimer = useCallback(() => {
+    if (!resizeTimerRef.current)
+      return
+
+    clearTimeout(resizeTimerRef.current)
+    resizeTimerRef.current = null
+  }, [])
+
+  const clearChartReadyTimer = useCallback(() => {
+    if (!chartReadyTimerRef.current)
+      return
+
+    clearTimeout(chartReadyTimerRef.current)
+    chartReadyTimerRef.current = null
+  }, [])
+
   const echartsStyle = useMemo(() => ({
     height: '350px',
     width: '100%',
@@ -104,26 +121,27 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
 
   // Debounce resize operations
   const debouncedResize = useCallback(() => {
-    if (resizeTimerRef.current)
-      clearTimeout(resizeTimerRef.current)
+    clearResizeTimer()
 
     resizeTimerRef.current = setTimeout(() => {
       if (chartInstanceRef.current)
         chartInstanceRef.current.resize()
       resizeTimerRef.current = null
     }, 200)
-  }, [])
+  }, [clearResizeTimer])
 
   // Handle ECharts instance initialization
   const handleChartReady = useCallback((instance: any) => {
     chartInstanceRef.current = instance
 
     // Force resize to ensure timeline displays correctly
-    setTimeout(() => {
+    clearChartReadyTimer()
+    chartReadyTimerRef.current = setTimeout(() => {
       if (chartInstanceRef.current)
         chartInstanceRef.current.resize()
+      chartReadyTimerRef.current = null
     }, 200)
-  }, [])
+  }, [clearChartReadyTimer])
 
   // Store event handlers in useMemo to avoid recreating them
   const echartsEvents = useMemo(() => ({
@@ -157,10 +175,20 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
 
     return () => {
       window.removeEventListener('resize', handleResize)
-      if (resizeTimerRef.current)
-        clearTimeout(resizeTimerRef.current)
+      clearResizeTimer()
+      clearChartReadyTimer()
+      chartInstanceRef.current = null
     }
-  }, [language, debouncedResize])
+  }, [language, debouncedResize, clearResizeTimer, clearChartReadyTimer])
+
+  useEffect(() => {
+    return () => {
+      clearResizeTimer()
+      clearChartReadyTimer()
+      chartInstanceRef.current = null
+      echartsRef.current = null
+    }
+  }, [clearResizeTimer, clearChartReadyTimer])
   // Process chart data when content changes
   useEffect(() => {
     // Only process echarts content