merge main

2026-05-04 17:38:04 +08:00 · 2025-05-22 16:45:13 +08:00
parent c2a7e0e986 7bf00ef25c
commit 327690e4a7
86 changed files with 2483 additions and 1427 deletions
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@ -47,6 +47,7 @@ const ChatWrapper = () => {
    clearChatList,
    setClearChatList,
    setIsResponding,
+    allInputsHidden,
  } = useChatWithHistoryContext()
  const appConfig = useMemo(() => {
    const config = appParams || {}
@ -81,6 +82,9 @@ const ChatWrapper = () => {
  )
  const inputsFormValue = currentConversationId ? currentConversationInputs : newConversationInputsRef?.current
  const inputDisabled = useMemo(() => {
+    if (allInputsHidden)
+      return false
+
    let hasEmptyInput = ''
    let fileIsUploading = false
    const requiredVars = inputsForms.filter(({ required }) => required)
@ -110,7 +114,7 @@ const ChatWrapper = () => {
    if (fileIsUploading)
      return true
    return false
-  }, [inputsFormValue, inputsForms])
+  }, [inputsFormValue, inputsForms, allInputsHidden])

  useEffect(() => {
    if (currentChatInstanceRef.current)
@ -161,7 +165,7 @@ const ChatWrapper = () => {
  const [collapsed, setCollapsed] = useState(!!currentConversationId)

  const chatNode = useMemo(() => {
-    if (!inputsForms.length)
+    if (allInputsHidden || !inputsForms.length)
      return null
    if (isMobile) {
      if (!currentConversationId)
@ -171,7 +175,7 @@ const ChatWrapper = () => {
    else {
      return <InputsForm collapsed={collapsed} setCollapsed={setCollapsed} />
    }
-  }, [inputsForms.length, isMobile, currentConversationId, collapsed])
+  }, [inputsForms.length, isMobile, currentConversationId, collapsed, allInputsHidden])

  const welcome = useMemo(() => {
    const welcomeMessage = chatList.find(item => item.isOpeningStatement)
@ -181,7 +185,7 @@ const ChatWrapper = () => {
      return null
    if (!welcomeMessage)
      return null
-    if (!collapsed && inputsForms.length > 0)
+    if (!collapsed && inputsForms.length > 0 && !allInputsHidden)
      return null
    if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) {
      return (
@ -218,7 +222,7 @@ const ChatWrapper = () => {
        </div>
      </div>
    )
-  }, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, currentConversationId, inputsForms.length, respondingState])
+  }, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, currentConversationId, inputsForms.length, respondingState, allInputsHidden])

  const answerIcon = (appData?.site && appData.site.use_icon_as_answer_icon)
    ? <AnswerIcon
--- a/web/app/components/base/chat/chat-with-history/context.tsx
+++ b/web/app/components/base/chat/chat-with-history/context.tsx
@ -60,6 +60,7 @@ export type ChatWithHistoryContextValue = {
  setIsResponding: (state: boolean) => void,
  currentConversationInputs: Record<string, any> | null,
  setCurrentConversationInputs: (v: Record<string, any>) => void,
+  allInputsHidden: boolean,
 }

 export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>({
@ -95,5 +96,6 @@ export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>
  setIsResponding: noop,
  currentConversationInputs: {},
  setCurrentConversationInputs: noop,
+  allInputsHidden: false,
 })
 export const useChatWithHistoryContext = () => useContext(ChatWithHistoryContext)
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@ -240,6 +240,11 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
      }
    })
  }, [appParams])
+
+  const allInputsHidden = useMemo(() => {
+    return inputsForms.length > 0 && inputsForms.every(item => item.hide === true)
+  }, [inputsForms])
+
  useEffect(() => {
    const conversationInputs: Record<string, any> = {}

@ -304,6 +309,9 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {

  const { notify } = useToastContext()
  const checkInputsRequired = useCallback((silent?: boolean) => {
+    if (allInputsHidden)
+      return true
+
    let hasEmptyInput = ''
    let fileIsUploading = false
    const requiredVars = inputsForms.filter(({ required }) => required)
@ -339,7 +347,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
    }

    return true
-  }, [inputsForms, notify, t])
+  }, [inputsForms, notify, t, allInputsHidden])
  const handleStartChat = useCallback((callback: any) => {
    if (checkInputsRequired()) {
      setShowNewConversationItemInList(true)
@ -507,5 +515,6 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
    setIsResponding,
    currentConversationInputs,
    setCurrentConversationInputs,
+    allInputsHidden,
  }
 }
--- a/web/app/components/base/chat/chat-with-history/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/index.tsx
@ -161,6 +161,7 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
    setIsResponding,
    currentConversationInputs,
    setCurrentConversationInputs,
+    allInputsHidden,
  } = useChatWithHistory(installedAppInfo)

  return (
@ -206,6 +207,7 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
      setIsResponding,
      currentConversationInputs,
      setCurrentConversationInputs,
+      allInputsHidden,
    }}>
      <ChatWithHistory className={className} />
    </ChatWithHistoryContext.Provider>
--- a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
@ -36,9 +36,11 @@ const InputsFormContent = ({ showTip }: Props) => {
    })
  }, [newConversationInputsRef, handleNewConversationInputsChange, currentConversationInputs, setCurrentConversationInputs])

+  const visibleInputsForms = inputsForms.filter(form => form.hide !== true)
+
  return (
    <div className='space-y-4'>
-      {inputsForms.map(form => (
+      {visibleInputsForms.map(form => (
        <div key={form.variable} className='space-y-1'>
          <div className='flex h-6 items-center gap-1'>
            <div className='system-md-semibold text-text-secondary'>{form.label}</div>
--- a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
@ -21,9 +21,14 @@ const InputsFormNode = ({
    isMobile,
    currentConversationId,
    handleStartChat,
+    allInputsHidden,
    themeBuilder,
+    inputsForms,
  } = useChatWithHistoryContext()

+  if (allInputsHidden || inputsForms.length === 0)
+    return null
+
  return (
    <div className={cn('flex flex-col items-center px-4 pt-6', isMobile && 'pt-4')}>
      <div className={cn(
--- a/web/app/components/base/chat/chat/type.ts
+++ b/web/app/components/base/chat/chat/type.ts
@ -143,5 +143,6 @@ export type InputForm = {
  label: string
  variable: any
  required: boolean
+  hide: boolean
  [key: string]: any
 }
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@ -48,6 +48,7 @@ const ChatWrapper = () => {
    clearChatList,
    setClearChatList,
    setIsResponding,
+    allInputsHidden,
  } = useEmbeddedChatbotContext()
  const appConfig = useMemo(() => {
    const config = appParams || {}
@ -82,6 +83,9 @@ const ChatWrapper = () => {
  )
  const inputsFormValue = currentConversationId ? currentConversationInputs : newConversationInputsRef?.current
  const inputDisabled = useMemo(() => {
+    if (allInputsHidden)
+      return false
+
    let hasEmptyInput = ''
    let fileIsUploading = false
    const requiredVars = inputsForms.filter(({ required }) => required)
@ -111,7 +115,7 @@ const ChatWrapper = () => {
    if (fileIsUploading)
      return true
    return false
-  }, [inputsFormValue, inputsForms])
+  }, [inputsFormValue, inputsForms, allInputsHidden])

  useEffect(() => {
    if (currentChatInstanceRef.current)
@ -160,7 +164,7 @@ const ChatWrapper = () => {
  const [collapsed, setCollapsed] = useState(!!currentConversationId)

  const chatNode = useMemo(() => {
-    if (!inputsForms.length)
+    if (allInputsHidden || !inputsForms.length)
      return null
    if (isMobile) {
      if (!currentConversationId)
@ -170,7 +174,7 @@ const ChatWrapper = () => {
    else {
      return <InputsForm collapsed={collapsed} setCollapsed={setCollapsed} />
    }
-  }, [inputsForms.length, isMobile, currentConversationId, collapsed])
+  }, [inputsForms.length, isMobile, currentConversationId, collapsed, allInputsHidden])

  const welcome = useMemo(() => {
    const welcomeMessage = chatList.find(item => item.isOpeningStatement)
@ -180,7 +184,7 @@ const ChatWrapper = () => {
      return null
    if (!welcomeMessage)
      return null
-    if (!collapsed && inputsForms.length > 0)
+    if (!collapsed && inputsForms.length > 0 && !allInputsHidden)
      return null
    if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) {
      return (
@ -215,7 +219,7 @@ const ChatWrapper = () => {
        </div>
      </div>
    )
-  }, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, currentConversationId, inputsForms.length, respondingState])
+  }, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, currentConversationId, inputsForms.length, respondingState, allInputsHidden])

  const answerIcon = isDify()
    ? <LogoAvatar className='relative shrink-0' />
--- a/web/app/components/base/chat/embedded-chatbot/context.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/context.tsx
@ -53,6 +53,7 @@ export type EmbeddedChatbotContextValue = {
  setIsResponding: (state: boolean) => void,
  currentConversationInputs: Record<string, any> | null,
  setCurrentConversationInputs: (v: Record<string, any>) => void,
+  allInputsHidden: boolean
 }

 export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>({
@ -82,5 +83,6 @@ export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>
  setIsResponding: noop,
  currentConversationInputs: {},
  setCurrentConversationInputs: noop,
+  allInputsHidden: false,
 })
 export const useEmbeddedChatbotContext = () => useContext(EmbeddedChatbotContext)
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@ -235,6 +235,10 @@ export const useEmbeddedChatbot = () => {
    })
  }, [initInputs, appParams])

+  const allInputsHidden = useMemo(() => {
+    return inputsForms.length > 0 && inputsForms.every(item => item.hide === true)
+  }, [inputsForms])
+
  useEffect(() => {
    // init inputs from url params
    (async () => {
@ -306,6 +310,9 @@ export const useEmbeddedChatbot = () => {

  const { notify } = useToastContext()
  const checkInputsRequired = useCallback((silent?: boolean) => {
+    if (allInputsHidden)
+      return true
+
    let hasEmptyInput = ''
    let fileIsUploading = false
    const requiredVars = inputsForms.filter(({ required }) => required)
@ -341,7 +348,7 @@ export const useEmbeddedChatbot = () => {
    }

    return true
-  }, [inputsForms, notify, t])
+  }, [inputsForms, notify, t, allInputsHidden])
  const handleStartChat = useCallback((callback?: any) => {
    if (checkInputsRequired()) {
      setShowNewConversationItemInList(true)
@ -417,5 +424,6 @@ export const useEmbeddedChatbot = () => {
    setIsResponding,
    currentConversationInputs,
    setCurrentConversationInputs,
+    allInputsHidden,
  }
 }
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@ -168,6 +168,7 @@ const EmbeddedChatbotWrapper = () => {
    setIsResponding,
    currentConversationInputs,
    setCurrentConversationInputs,
+    allInputsHidden,
  } = useEmbeddedChatbot()

  return <EmbeddedChatbotContext.Provider value={{
@ -206,6 +207,7 @@ const EmbeddedChatbotWrapper = () => {
    setIsResponding,
    currentConversationInputs,
    setCurrentConversationInputs,
+    allInputsHidden,
  }}>
    <Chatbot />
  </EmbeddedChatbotContext.Provider>
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
@ -36,9 +36,11 @@ const InputsFormContent = ({ showTip }: Props) => {
    })
  }, [newConversationInputsRef, handleNewConversationInputsChange, currentConversationInputs, setCurrentConversationInputs])

+  const visibleInputsForms = inputsForms.filter(form => form.hide !== true)
+
  return (
    <div className='space-y-4'>
-      {inputsForms.map(form => (
+      {visibleInputsForms.map(form => (
        <div key={form.variable} className='space-y-1'>
          <div className='flex h-6 items-center gap-1'>
            <div className='system-md-semibold text-text-secondary'>{form.label}</div>
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
@ -22,8 +22,13 @@ const InputsFormNode = ({
    currentConversationId,
    themeBuilder,
    handleStartChat,
+    allInputsHidden,
+    inputsForms,
  } = useEmbeddedChatbotContext()

+  if (allInputsHidden || inputsForms.length === 0)
+    return null
+
  return (
    <div className={cn('mb-6 flex flex-col items-center px-4 pt-6', isMobile && 'mb-4 pt-4')}>
      <div className={cn(
--- a/web/app/components/base/logo/dify-logo.tsx
+++ b/web/app/components/base/logo/dify-logo.tsx
@ -33,16 +33,17 @@ const DifyLogo: FC<DifyLogoProps> = ({
  const { theme } = useTheme()
  const themedStyle = (theme === 'dark' && style === 'default') ? 'monochromeWhite' : style
  const { systemFeatures } = useGlobalPublicStore()
+  const hasBrandingLogo = Boolean(systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo)

  let src = `${basePath}${logoPathMap[themedStyle]}`
-  if (systemFeatures.branding.enabled)
+  if (hasBrandingLogo)
    src = systemFeatures.branding.workspace_logo

  return (
    <img
      src={src}
-      className={classNames('block object-contain', logoSizeMap[size], className)}
-      alt='Dify logo'
+      className={classNames('block object-contain', logoSizeMap[size], hasBrandingLogo && 'w-auto', className)}
+      alt={hasBrandingLogo ? 'Logo' : 'Dify logo'}
    />
  )
 }
--- a/web/app/components/base/markdown.tsx
+++ b/web/app/components/base/markdown.tsx
@ -11,7 +11,7 @@ import {
  atelierHeathDark,
  atelierHeathLight,
 } from 'react-syntax-highlighter/dist/esm/styles/hljs'
-import { Component, memo, useMemo, useRef, useState } from 'react'
+import { Component, memo, useEffect, useMemo, useRef, useState } from 'react'
 import { flow } from 'lodash-es'
 import ActionButton from '@/app/components/base/action-button'
 import CopyIcon from '@/app/components/base/copy-icon'
@ -74,7 +74,7 @@ const preprocessLaTeX = (content: string) => {

  processedContent = flow([
    (str: string) => str.replace(/\\\[(.*?)\\\]/g, (_, equation) => `$$${equation}$$`),
-    (str: string) => str.replace(/\\\[(.*?)\\\]/gs, (_, equation) => `$$${equation}$$`),
+    (str: string) => str.replace(/\\\[([\s\S]*?)\\\]/g, (_, equation) => `$$${equation}$$`),
    (str: string) => str.replace(/\\\((.*?)\\\)/g, (_, equation) => `$$${equation}$$`),
    (str: string) => str.replace(/(^|[^\\])\$(.+?)\$/g, (_, prefix, equation) => `${prefix}$${equation}$`),
  ])(processedContent)
@ -124,23 +124,143 @@ export function PreCode(props: { children: any }) {
 const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any) => {
  const { theme } = useTheme()
  const [isSVG, setIsSVG] = useState(true)
+  const [chartState, setChartState] = useState<'loading' | 'success' | 'error'>('loading')
+  const [finalChartOption, setFinalChartOption] = useState<any>(null)
+  const echartsRef = useRef<any>(null)
+  const contentRef = useRef<string>('')
+  const processedRef = useRef<boolean>(false) // Track if content was successfully processed
  const match = /language-(\w+)/.exec(className || '')
  const language = match?.[1]
  const languageShowName = getCorrectCapitalizationLanguageName(language || '')
-  const chartData = useMemo(() => {
-    const str = String(children).replace(/\n$/, '')
-    if (language === 'echarts') {
-      try {
-        return JSON.parse(str)
-      }
-      catch { }
-      try {
-        // eslint-disable-next-line no-new-func, sonarjs/code-eval
-        return new Function(`return ${str}`)()
-      }
-      catch { }
+  const isDarkMode = theme === Theme.dark
+
+  // Handle container resize for echarts
+  useEffect(() => {
+    if (language !== 'echarts' || !echartsRef.current) return
+
+    const handleResize = () => {
+      // This gets the echarts instance from the component
+      const instance = echartsRef.current?.getEchartsInstance?.()
+      if (instance)
+        instance.resize()
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    // Also manually trigger resize after a short delay to ensure proper sizing
+    const resizeTimer = setTimeout(handleResize, 200)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      clearTimeout(resizeTimer)
+    }
+  }, [language, echartsRef.current])
+
+  // Process chart data when content changes
+  useEffect(() => {
+    // Only process echarts content
+    if (language !== 'echarts') return
+
+    // Reset state when new content is detected
+    if (!contentRef.current) {
+      setChartState('loading')
+      processedRef.current = false
+    }
+
+    const newContent = String(children).replace(/\n$/, '')
+
+    // Skip if content hasn't changed
+    if (contentRef.current === newContent) return
+    contentRef.current = newContent
+
+    const trimmedContent = newContent.trim()
+    if (!trimmedContent) return
+
+    // Detect if this is historical data (already complete)
+    // Historical data typically comes as a complete code block with complete JSON
+    const isCompleteJson
+      = (trimmedContent.startsWith('{') && trimmedContent.endsWith('}')
+        && trimmedContent.split('{').length === trimmedContent.split('}').length)
+      || (trimmedContent.startsWith('[') && trimmedContent.endsWith(']')
+        && trimmedContent.split('[').length === trimmedContent.split(']').length)
+
+    // If the JSON structure looks complete, try to parse it right away
+    if (isCompleteJson && !processedRef.current) {
+      try {
+        const parsed = JSON.parse(trimmedContent)
+        if (typeof parsed === 'object' && parsed !== null) {
+          setFinalChartOption(parsed)
+          setChartState('success')
+          processedRef.current = true
+          return
+        }
+      }
+      catch {
+        try {
+          // eslint-disable-next-line no-new-func, sonarjs/code-eval
+          const result = new Function(`return ${trimmedContent}`)()
+          if (typeof result === 'object' && result !== null) {
+            setFinalChartOption(result)
+            setChartState('success')
+            processedRef.current = true
+            return
+          }
+        }
+        catch {
+          // If we have a complete JSON structure but it doesn't parse,
+          // it's likely an error rather than incomplete data
+          setChartState('error')
+          processedRef.current = true
+          return
+        }
+      }
+    }
+
+    // If we get here, either the JSON isn't complete yet, or we failed to parse it
+    // Check more conditions for streaming data
+    const isIncomplete
+      = trimmedContent.length < 5
+      || (trimmedContent.startsWith('{')
+        && (!trimmedContent.endsWith('}')
+          || trimmedContent.split('{').length !== trimmedContent.split('}').length))
+      || (trimmedContent.startsWith('[')
+        && (!trimmedContent.endsWith(']')
+          || trimmedContent.split('[').length !== trimmedContent.split('}').length))
+      || (trimmedContent.split('"').length % 2 !== 1)
+      || (trimmedContent.includes('{"') && !trimmedContent.includes('"}'))
+
+    // Only try to parse streaming data if it looks complete and hasn't been processed
+    if (!isIncomplete && !processedRef.current) {
+      let isValidOption = false
+
+      try {
+        const parsed = JSON.parse(trimmedContent)
+        if (typeof parsed === 'object' && parsed !== null) {
+          setFinalChartOption(parsed)
+          isValidOption = true
+        }
+      }
+      catch {
+        try {
+          // eslint-disable-next-line no-new-func, sonarjs/code-eval
+          const result = new Function(`return ${trimmedContent}`)()
+          if (typeof result === 'object' && result !== null) {
+            setFinalChartOption(result)
+            isValidOption = true
+          }
+        }
+        catch {
+          // Both parsing methods failed, but content looks complete
+          setChartState('error')
+          processedRef.current = true
+        }
+      }
+
+      if (isValidOption) {
+        setChartState('success')
+        processedRef.current = true
+      }
    }
-    return JSON.parse('{"title":{"text":"ECharts error - Wrong option."}}')
  }, [language, children])

  const renderCodeContent = useMemo(() => {
@ -150,14 +270,125 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
        if (isSVG)
          return <Flowchart PrimitiveCode={content} />
        break
-      case 'echarts':
+      case 'echarts': {
+        // Loading state: show loading indicator
+        if (chartState === 'loading') {
+          return (
+            <div style={{
+              minHeight: '350px',
+              width: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderBottomLeftRadius: '10px',
+              borderBottomRightRadius: '10px',
+              backgroundColor: isDarkMode ? 'var(--color-components-input-bg-normal)' : 'transparent',
+              color: 'var(--color-text-secondary)',
+            }}>
+              <div style={{
+                marginBottom: '12px',
+                width: '24px',
+                height: '24px',
+              }}>
+                {/* Rotating spinner that works in both light and dark modes */}
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ animation: 'spin 1.5s linear infinite' }}>
+                  <style>
+                    {`
+                      @keyframes spin {
+                        0% { transform: rotate(0deg); }
+                        100% { transform: rotate(360deg); }
+                      }
+                    `}
+                  </style>
+                  <circle opacity="0.2" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
+                  <path d="M12 2C6.47715 2 2 6.47715 2 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+                </svg>
+              </div>
+              <div style={{
+                fontFamily: 'var(--font-family)',
+                fontSize: '14px',
+              }}>Chart loading...</div>
+            </div>
+          )
+        }
+
+        // Success state: show the chart
+        if (chartState === 'success' && finalChartOption) {
+          return (
+            <div style={{
+              minWidth: '300px',
+              minHeight: '350px',
+              width: '100%',
+              overflowX: 'auto',
+              borderBottomLeftRadius: '10px',
+              borderBottomRightRadius: '10px',
+              transition: 'background-color 0.3s ease',
+            }}>
+              <ErrorBoundary>
+                <ReactEcharts
+                  ref={echartsRef}
+                  option={finalChartOption}
+                  style={{
+                    height: '350px',
+                    width: '100%',
+                  }}
+                  theme={isDarkMode ? 'dark' : undefined}
+                  opts={{
+                    renderer: 'canvas',
+                    width: 'auto',
+                  }}
+                  notMerge={true}
+                  onEvents={{
+                    // Force resize when chart is finished rendering
+                    finished: () => {
+                      const instance = echartsRef.current?.getEchartsInstance?.()
+                      if (instance)
+                        instance.resize()
+                    },
+                  }}
+                />
+              </ErrorBoundary>
+            </div>
+          )
+        }
+
+        // Error state: show error message
+        const errorOption = {
+          title: {
+            text: 'ECharts error - Wrong option.',
+          },
+        }
+
        return (
-          <div style={{ minHeight: '350px', minWidth: '100%', overflowX: 'scroll' }}>
+          <div style={{
+            minWidth: '300px',
+            minHeight: '350px',
+            width: '100%',
+            overflowX: 'auto',
+            borderBottomLeftRadius: '10px',
+            borderBottomRightRadius: '10px',
+            transition: 'background-color 0.3s ease',
+          }}>
            <ErrorBoundary>
-              <ReactEcharts option={chartData} style={{ minWidth: '700px' }} />
+              <ReactEcharts
+                ref={echartsRef}
+                option={errorOption}
+                style={{
+                  height: '350px',
+                  width: '100%',
+                }}
+                theme={isDarkMode ? 'dark' : undefined}
+                opts={{
+                  renderer: 'canvas',
+                  width: 'auto',
+                }}
+                notMerge={true}
+              />
            </ErrorBoundary>
          </div>
        )
+      }
      case 'svg':
        if (isSVG) {
          return (
@ -192,7 +423,7 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
          </SyntaxHighlighter>
        )
    }
-  }, [children, language, isSVG, chartData, props, theme, match])
+  }, [children, language, isSVG, finalChartOption, props, theme, match])

  if (inline || !match)
    return <code {...props} className={className}>{children}</code>