feat(web): AI对话框增加图表显示

支持Mermaid、EChart、Chart.js

service-web/client/src/util/Markdown.tsx

@@ -0,0 +1,50 @@
+import 'chart.js/auto'
+import {trim} from 'licia'
+import {MermaidDiagram} from '@lightenna/react-mermaid-diagram'
+import {Chart} from 'react-chartjs-2'
+import EChartsReact from 'echarts-for-react'
+import Markdown from 'react-markdown'
+
+type MarkdownOptions = {
+  content: string
+}
+
+function MarkdownRender(options: MarkdownOptions) {
+  return (
+    <Markdown
+      children={options.content}
+      components={{
+        code: ({children, className, node, ...rest}) => {
+          switch (trim(className || '')) {
+            case 'language-mermaid':
+              return (
+                <MermaidDiagram
+                  children={children as string}
+                />
+              )
+            case 'language-chartjs':
+              let chartjsData = eval(`(${children as string})`)
+              return (
+                <Chart
+                  {...chartjsData}
+                />
+              )
+            case 'language-echart':
+              let echartData = eval(`(${children as string})`)
+              return (
+                <EChartsReact option={echartData}/>
+              )
+            default:
+              return (
+                <code {...rest} className={className}>
+                  {children}
+                </code>
+              )
+          }
+        }
+      }}
+    />
+  )
+}
+
+export default MarkdownRender