tags in Markdown. + * Extracted from the main markdown renderer for modularity. + * Handles special rendering for paragraphs that directly contain an image. + */ +import React from 'react'; +import ImageGallery from '@/app/components/base/image-gallery'; + +const Paragraph = (paragraph: any) => { + const { node }: any = paragraph + const children_node = node.children + if (children_node && children_node[0] && 'tagName' in children_node[0] && children_node[0].tagName === 'img') { + return ( +
{paragraph.children}
+} + +export default Paragraph; diff --git a/web/app/components/base/markdown-blocks/pre-code.tsx b/web/app/components/base/markdown-blocks/pre-code.tsx new file mode 100644 index 0000000000..c63efa657d --- /dev/null +++ b/web/app/components/base/markdown-blocks/pre-code.tsx @@ -0,0 +1,21 @@ +/** + * @fileoverview PreCode component for rendering tags in Markdown.
+ * Extracted from the main markdown renderer for modularity.
+ * This is a simple wrapper around the HTML element.
+ */
+import React, { useRef } from 'react';
+
+function PreCode(props: { children: any }) {
+ const ref = useRef(null)
+
+ return (
+
+
+ {props.children}
+
+ )
+}
+
+export default PreCode;
diff --git a/web/app/components/base/markdown-blocks/script-block.tsx b/web/app/components/base/markdown-blocks/script-block.tsx
new file mode 100644
index 0000000000..f0961d050d
--- /dev/null
+++ b/web/app/components/base/markdown-blocks/script-block.tsx
@@ -0,0 +1,15 @@
+/**
+ * @fileoverview ScriptBlock component for handling `
+})
+ScriptBlock.displayName = 'ScriptBlock'
+
+export default ScriptBlock;
diff --git a/web/app/components/base/markdown-blocks/video-block.tsx b/web/app/components/base/markdown-blocks/video-block.tsx
new file mode 100644
index 0000000000..ee7aa1ecc3
--- /dev/null
+++ b/web/app/components/base/markdown-blocks/video-block.tsx
@@ -0,0 +1,21 @@
+/**
+ * @fileoverview VideoBlock component for rendering video elements in Markdown.
+ * Extracted from the main markdown renderer for modularity.
+ * Uses the VideoGallery component to display videos.
+ */
+import React, { memo } from 'react';
+import VideoGallery from '@/app/components/base/video-gallery';
+
+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) {
+ const src = node.properties?.src
+ if (src)
+ return = {
- 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)
-}
-
-const preprocessLaTeX = (content: string) => {
- if (typeof content !== 'string')
- return content
-
- const codeBlockRegex = /```[\s\S]*?```/g
- const codeBlocks = content.match(codeBlockRegex) || []
- let processedContent = content.replace(codeBlockRegex, 'CODE_BLOCK_PLACEHOLDER')
-
- processedContent = flow([
- (str: string) => str.replace(/\\\[(.*?)\\\]/g, (_, 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)
-
- codeBlocks.forEach((block) => {
- processedContent = processedContent.replace('CODE_BLOCK_PLACEHOLDER', block)
- })
-
- return processedContent
-}
-
-const preprocessThinkTag = (content: string) => {
- const thinkOpenTagRegex = /\n/g
- const thinkCloseTagRegex = /\n<\/think>/g
- return flow([
- (str: string) => str.replace(thinkOpenTagRegex, '\n'),
- (str: string) => str.replace(thinkCloseTagRegex, '\n[ENDTHINKFLAG]'),
- ])(content)
-}
-
-export function PreCode(props: { children: any }) {
- const ref = useRef(null)
-
- return (
-
-
- {props.children}
-
- )
-}
-
-// **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
- {
- 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) {
- const src = node.properties?.src
- if (src)
- return {paragraph.children}
-}
-
-const Img = ({ src }: any) => {
- return {
- return (tree) => {
- const iterate = (node: any) => {
- if (node.type === 'element' && node.properties?.ref)
- delete node.properties.ref
-
- if (node.type === 'element' && !/^[a-z][a-z0-9]*$/i.test(node.tagName)) {
- node.type = 'text'
- node.value = `<${node.tagName}`
- }
-
- if (node.children)
- node.children.forEach(iterate)
- }
- tree.children.forEach(iterate)
- }
- },
- ]}
- disallowedElements={['iframe', 'head', 'html', 'meta', 'link', 'style', 'body', ...(props.customDisallowedElements || [])]}
- components={{
- code: CodeBlock,
- img: Img,
- video: VideoBlock,
- audio: AudioBlock,
- a: Link,
- p: Paragraph,
- button: MarkdownButton,
- form: MarkdownForm,
- script: ScriptBlock as any,
- details: ThinkBlock,
- }}
- >
- {/* Markdown detect has problem. */}
- {latexContent}
-
-
- )
-}
-
-// **Add an ECharts runtime error handler
-// Avoid error #7832 (Crash when ECharts accesses undefined objects)
-// This can happen when a component attempts to access an undefined object that references an unregistered map, causing the program to crash.
-
-export default class ErrorBoundary extends Component {
- constructor(props: any) {
- super(props)
- this.state = { hasError: false }
- }
-
- componentDidCatch(error: any, errorInfo: any) {
- this.setState({ hasError: true })
- console.error(error, errorInfo)
- }
-
- render() {
- // eslint-disable-next-line ts/ban-ts-comment
- // @ts-expect-error
- if (this.state.hasError)
- return Oops! An error occurred. This could be due to an ECharts runtime error or invalid SVG content.
(see the browser console for more information)
- // eslint-disable-next-line ts/ban-ts-comment
- // @ts-expect-error
- return this.props.children
- }
-}
diff --git a/web/app/components/base/markdown/error-boundary.tsx b/web/app/components/base/markdown/error-boundary.tsx
new file mode 100644
index 0000000000..29c325c156
--- /dev/null
+++ b/web/app/components/base/markdown/error-boundary.tsx
@@ -0,0 +1,33 @@
+/**
+ * @fileoverview ErrorBoundary component for React.
+ * This component was extracted from the main markdown renderer.
+ * It catches JavaScript errors anywhere in its child component tree,
+ * logs those errors, and displays a fallback UI instead of the crashed component tree.
+ * Primarily used around complex rendering logic like ECharts or SVG within Markdown.
+ */
+import React, { Component } from 'react';
+// **Add an ECharts runtime error handler
+// Avoid error #7832 (Crash when ECharts accesses undefined objects)
+// This can happen when a component attempts to access an undefined object that references an unregistered map, causing the program to crash.
+
+export default class ErrorBoundary extends Component {
+ constructor(props: any) {
+ super(props)
+ this.state = { hasError: false }
+ }
+
+ componentDidCatch(error: any, errorInfo: any) {
+ this.setState({ hasError: true })
+ console.error(error, errorInfo)
+ }
+
+ render() {
+ // eslint-disable-next-line ts/ban-ts-comment
+ // @ts-expect-error
+ if (this.state.hasError)
+ return Oops! An error occurred. This could be due to an ECharts runtime error or invalid SVG content.
(see the browser console for more information)
+ // eslint-disable-next-line ts/ban-ts-comment
+ // @ts-expect-error
+ return this.props.children
+ }
+}
diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx
index d29512919b..3c3d9e713d 100644
--- a/web/app/components/base/markdown/index.tsx
+++ b/web/app/components/base/markdown/index.tsx
@@ -5,126 +5,29 @@ import RemarkBreaks from 'remark-breaks'
import RehypeKatex from 'rehype-katex'
import RemarkGfm from 'remark-gfm'
import RehypeRaw from 'rehype-raw'
-import { Component, memo, useRef } from 'react'
import { flow } from 'lodash-es'
-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 ThinkBlock from '@/app/components/base/markdown-blocks/think-block'
import cn from '@/utils/classnames'
-import CodeBlock from '@/app/components/base/markdown-blocks/code-block'
-
-const preprocessLaTeX = (content: string) => {
- if (typeof content !== 'string')
- return content
-
- const codeBlockRegex = /```[\s\S]*?```/g
- const codeBlocks = content.match(codeBlockRegex) || []
- let processedContent = content.replace(codeBlockRegex, 'CODE_BLOCK_PLACEHOLDER')
-
- processedContent = flow([
- (str: string) => str.replace(/\\\[(.*?)\\\]/g, (_, 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)
-
- codeBlocks.forEach((block) => {
- processedContent = processedContent.replace('CODE_BLOCK_PLACEHOLDER', block)
- })
-
- return processedContent
-}
-
-const preprocessThinkTag = (content: string) => {
- const thinkOpenTagRegex = /\n/g
- const thinkCloseTagRegex = /\n<\/think>/g
- return flow([
- (str: string) => str.replace(thinkOpenTagRegex, '\n'),
- (str: string) => str.replace(thinkCloseTagRegex, '\n[ENDTHINKFLAG]'),
- ])(content)
-}
-
-export function PreCode(props: { children: any }) {
- const ref = useRef(null)
-
- return (
-
-
- {props.children}
-
- )
-}
-
-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) {
- const src = node.properties?.src
- if (src)
- return {paragraph.children}
-}
-
-const Img = ({ src }: any) => {
- return
(see the browser console for more information)
- // eslint-disable-next-line ts/ban-ts-comment
- // @ts-expect-error
- return this.props.children
- }
-}
diff --git a/web/app/components/base/markdown/markdown-utils.ts b/web/app/components/base/markdown/markdown-utils.ts
new file mode 100644
index 0000000000..8a6eee31ac
--- /dev/null
+++ b/web/app/components/base/markdown/markdown-utils.ts
@@ -0,0 +1,37 @@
+/**
+ * @fileoverview Utility functions for preprocessing Markdown content.
+ * These functions were extracted from the main markdown renderer for better separation of concerns.
+ * Includes preprocessing for LaTeX and custom "think" tags.
+ */
+import { flow } from 'lodash-es';
+
+export const preprocessLaTeX = (content: string) => {
+ if (typeof content !== 'string')
+ return content
+
+ const codeBlockRegex = /```[\s\S]*?```/g
+ const codeBlocks = content.match(codeBlockRegex) || []
+ let processedContent = content.replace(codeBlockRegex, 'CODE_BLOCK_PLACEHOLDER')
+
+ processedContent = flow([
+ (str: string) => str.replace(/\\\[(.*?)\\\]/g, (_, 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)
+
+ codeBlocks.forEach((block) => {
+ processedContent = processedContent.replace('CODE_BLOCK_PLACEHOLDER', block)
+ })
+
+ return processedContent
+}
+
+export const preprocessThinkTag = (content: string) => {
+ const thinkOpenTagRegex = /\n/g
+ const thinkCloseTagRegex = /\n<\/think>/g
+ return flow([
+ (str: string) => str.replace(thinkOpenTagRegex, '\n'),
+ (str: string) => str.replace(thinkCloseTagRegex, '\n[ENDTHINKFLAG]'),
+ ])(content)
+}