diff --git a/web/app/components/base/markdown-blocks/code-block.tsx b/web/app/components/base/markdown-blocks/code-block.tsx new file mode 100644 index 0000000000..d5cb087582 --- /dev/null +++ b/web/app/components/base/markdown-blocks/code-block.tsx @@ -0,0 +1,389 @@ +import { memo, useEffect, useMemo, useRef, useState } from 'react' +import ReactEcharts from 'echarts-for-react'; +import SyntaxHighlighter from 'react-syntax-highlighter'; +import { + atelierHeathDark, + atelierHeathLight, +} from 'react-syntax-highlighter/dist/esm/styles/hljs'; +import ActionButton from '@/app/components/base/action-button'; +import CopyIcon from '@/app/components/base/copy-icon'; +import SVGBtn from '@/app/components/base/svg'; +import Flowchart from '@/app/components/base/mermaid'; +import { Theme } from '@/types/app'; +import useTheme from '@/hooks/use-theme'; +import SVGRenderer from '../svg-gallery'; // Assumes svg-gallery.tsx is in /base directory +import MarkdownMusic from '@/app/components/base/markdown-blocks/music'; +import ErrorBoundary from '@/app/components/base/markdown'; + +// Available language https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD +const capitalizationLanguageNameMap: Record = { + sql: 'SQL', + javascript: 'JavaScript', + java: 'Java', + typescript: 'TypeScript', + vbscript: 'VBScript', + css: 'CSS', + html: 'HTML', + xml: 'XML', + php: 'PHP', + python: 'Python', + yaml: 'Yaml', + mermaid: 'Mermaid', + markdown: 'MarkDown', + makefile: 'MakeFile', + echarts: 'ECharts', + shell: 'Shell', + powershell: 'PowerShell', + json: 'JSON', + latex: 'Latex', + svg: 'SVG', + abc: 'ABC', +} +const getCorrectCapitalizationLanguageName = (language: string) => { + if (!language) + return 'Plain' + + if (language in capitalizationLanguageNameMap) + return capitalizationLanguageNameMap[language] + + return language.charAt(0).toUpperCase() + language.substring(1) +} + +// **Add code block +// Avoid error #185 (Maximum update depth exceeded. +// This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. +// React limits the number of nested updates to prevent infinite loops.) +// Reference A: https://reactjs.org/docs/error-decoder.html?invariant=185 +// Reference B1: https://react.dev/reference/react/memo +// Reference B2: https://react.dev/reference/react/useMemo +// **** +// The original error that occurred in the streaming response during the conversation: +// Error: Minified React error 185; +// visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message +// or use the non-minified dev environment for full errors and additional helpful warnings. + +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(null) + const echartsRef = useRef(null) + const contentRef = useRef('') + const processedRef = useRef(false) // Track if content was successfully processed + const match = /language-(\w+)/.exec(className || '') + const language = match?.[1] + const languageShowName = getCorrectCapitalizationLanguageName(language || '') + 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 + } + } + }, [language, children]) + + const renderCodeContent = useMemo(() => { + const content = String(children).replace(/\n$/, '') + switch (language) { + case 'mermaid': + if (isSVG) + return + break + case 'echarts': { + // Loading state: show loading indicator + if (chartState === 'loading') { + return ( +
+
+ {/* Rotating spinner that works in both light and dark modes */} + + + + + +
+
Chart loading...
+
+ ) + } + + // Success state: show the chart + if (chartState === 'success' && finalChartOption) { + return ( +
+ + { + const instance = echartsRef.current?.getEchartsInstance?.() + if (instance) + instance.resize() + }, + }} + /> + +
+ ) + } + + // Error state: show error message + const errorOption = { + title: { + text: 'ECharts error - Wrong option.', + }, + } + + return ( +
+ + + +
+ ) + } + case 'svg': + if (isSVG) { + return ( + + + + ) + } + break + case 'abc': + return ( + + + + ) + default: + return ( + + {content} + + ) + } + }, [children, language, isSVG, finalChartOption, props, theme, match]) + + if (inline || !match) + return {children} + + return ( +
+
+
{languageShowName}
+
+ {(['mermaid', 'svg']).includes(language!) && } + + + +
+
+ {renderCodeContent} +
+ ) +}) +CodeBlock.displayName = 'CodeBlock' + +export default CodeBlock; diff --git a/web/app/components/base/markdown/code-block.tsx b/web/app/components/base/markdown/code-block.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx index b28bf2bc8f..a450c94e8d 100644 --- a/web/app/components/base/markdown/index.tsx +++ b/web/app/components/base/markdown/index.tsx @@ -1,68 +1,21 @@ import ReactMarkdown from 'react-markdown' -import ReactEcharts from 'echarts-for-react' import 'katex/dist/katex.min.css' import RemarkMath from 'remark-math' import RemarkBreaks from 'remark-breaks' import RehypeKatex from 'rehype-katex' import RemarkGfm from 'remark-gfm' import RehypeRaw from 'rehype-raw' -import SyntaxHighlighter from 'react-syntax-highlighter' -import { - atelierHeathDark, - atelierHeathLight, -} from 'react-syntax-highlighter/dist/esm/styles/hljs' -import { Component, memo, useEffect, useMemo, useRef, useState } from 'react' +import { Component, memo, useRef } from 'react' import { flow } from 'lodash-es' -import ActionButton from '@/app/components/base/action-button' -import CopyIcon from '@/app/components/base/copy-icon' -import SVGBtn from '@/app/components/base/svg' -import Flowchart from '@/app/components/base/mermaid' import ImageGallery from '@/app/components/base/image-gallery' import { useChatContext } from '@/app/components/base/chat/chat/context' import VideoGallery from '@/app/components/base/video-gallery' import AudioGallery from '@/app/components/base/audio-gallery' import MarkdownButton from '@/app/components/base/markdown-blocks/button' import MarkdownForm from '@/app/components/base/markdown-blocks/form' -import MarkdownMusic from '@/app/components/base/markdown-blocks/music' import ThinkBlock from '@/app/components/base/markdown-blocks/think-block' -import { Theme } from '@/types/app' -import useTheme from '@/hooks/use-theme' import cn from '@/utils/classnames' -import SVGRenderer from './svg-gallery' - -// Available language https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD -const capitalizationLanguageNameMap: Record = { - sql: 'SQL', - javascript: 'JavaScript', - java: 'Java', - typescript: 'TypeScript', - vbscript: 'VBScript', - css: 'CSS', - html: 'HTML', - xml: 'XML', - php: 'PHP', - python: 'Python', - yaml: 'Yaml', - mermaid: 'Mermaid', - markdown: 'MarkDown', - makefile: 'MakeFile', - echarts: 'ECharts', - shell: 'Shell', - powershell: 'PowerShell', - json: 'JSON', - latex: 'Latex', - svg: 'SVG', - abc: 'ABC', -} -const getCorrectCapitalizationLanguageName = (language: string) => { - if (!language) - return 'Plain' - - if (language in capitalizationLanguageNameMap) - return capitalizationLanguageNameMap[language] - - return language.charAt(0).toUpperCase() + language.substring(1) -} +import BlockCode from '@/app/components/base/markdown-blocks/code-block' const preprocessLaTeX = (content: string) => { if (typeof content !== 'string') @@ -108,343 +61,6 @@ export function PreCode(props: { children: any }) { ) } -// **Add code block -// Avoid error #185 (Maximum update depth exceeded. -// This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. -// React limits the number of nested updates to prevent infinite loops.) -// Reference A: https://reactjs.org/docs/error-decoder.html?invariant=185 -// Reference B1: https://react.dev/reference/react/memo -// Reference B2: https://react.dev/reference/react/useMemo -// **** -// The original error that occurred in the streaming response during the conversation: -// Error: Minified React error 185; -// visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message -// or use the non-minified dev environment for full errors and additional helpful warnings. - -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(null) - const echartsRef = useRef(null) - const contentRef = useRef('') - const processedRef = useRef(false) // Track if content was successfully processed - const match = /language-(\w+)/.exec(className || '') - const language = match?.[1] - const languageShowName = getCorrectCapitalizationLanguageName(language || '') - 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 - } - } - }, [language, children]) - - const renderCodeContent = useMemo(() => { - const content = String(children).replace(/\n$/, '') - switch (language) { - case 'mermaid': - if (isSVG) - return - break - case 'echarts': { - // Loading state: show loading indicator - if (chartState === 'loading') { - return ( -
-
- {/* Rotating spinner that works in both light and dark modes */} - - - - - -
-
Chart loading...
-
- ) - } - - // Success state: show the chart - if (chartState === 'success' && finalChartOption) { - return ( -
- - { - const instance = echartsRef.current?.getEchartsInstance?.() - if (instance) - instance.resize() - }, - }} - /> - -
- ) - } - - // Error state: show error message - const errorOption = { - title: { - text: 'ECharts error - Wrong option.', - }, - } - - return ( -
- - - -
- ) - } - case 'svg': - if (isSVG) { - return ( - - - - ) - } - break - case 'abc': - return ( - - - - ) - default: - return ( - - {content} - - ) - } - }, [children, language, isSVG, finalChartOption, props, theme, match]) - - if (inline || !match) - return {children} - - return ( -
-
-
{languageShowName}
-
- {(['mermaid', 'svg']).includes(language!) && } - - - -
-
- {renderCodeContent} -
- ) -}) -CodeBlock.displayName = 'CodeBlock' - const VideoBlock: any = memo(({ node }: any) => { const srcs = node.children.filter((child: any) => 'properties' in child).map((child: any) => (child as any).properties.src) if (srcs.length === 0) {