Add ECharts feature ( #6385 ) (#6961)

web/app/components/base/markdown.tsx

@@ -1,4 +1,5 @@
 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'
@@ -30,6 +31,7 @@ const capitalizationLanguageNameMap: Record<string, string> = {
   mermaid: 'Mermaid',
   markdown: 'MarkDown',
   makefile: 'MakeFile',
+  echarts: 'ECharts',
 }
 const getCorrectCapitalizationLanguageName = (language: string) => {
   if (!language)
@@ -107,6 +109,14 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
   const match = /language-(\w+)/.exec(className || '')
   const language = match?.[1]
   const languageShowName = getCorrectCapitalizationLanguageName(language || '')
+  let chartData = JSON.parse(String('{"title":{"text":"Something went wrong."}}').replace(/\n$/, ''))
+  if (language === 'echarts') {
+    try {
+      chartData = JSON.parse(String(children).replace(/\n$/, ''))
+    }
+    catch (error) {
+    }
+  }
 
   // Use `useMemo` to ensure that `SyntaxHighlighter` only re-renders when necessary
   return useMemo(() => {
@@ -136,19 +146,25 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
           </div>
           {(language === 'mermaid' && isSVG)
             ? (<Flowchart PrimitiveCode={String(children).replace(/\n$/, '')} />)
-            : (<SyntaxHighlighter
-              {...props}
-              style={atelierHeathLight}
-              customStyle={{
-                paddingLeft: 12,
-                backgroundColor: '#fff',
-              }}
-              language={match[1]}
-              showLineNumbers
-              PreTag="div"
-            >
-              {String(children).replace(/\n$/, '')}
-            </SyntaxHighlighter>)}
+            : (
+              (language === 'echarts')
+                ? (<div style={{ minHeight: '250px', minWidth: '250px' }}><ReactEcharts
+                  option={chartData}
+                >
+                </ReactEcharts></div>)
+                : (<SyntaxHighlighter
+                  {...props}
+                  style={atelierHeathLight}
+                  customStyle={{
+                    paddingLeft: 12,
+                    backgroundColor: '#fff',
+                  }}
+                  language={match[1]}
+                  showLineNumbers
+                  PreTag="div"
+                >
+                  {String(children).replace(/\n$/, '')}
+                </SyntaxHighlighter>))}
         </div>
       )
       : (