✨： Chat messages support ECharts

Author: XiNGRZartis

package-lock.json

@@ -271,5 +271,6 @@
   "Upgrade.Install": "Install",
   "Upgrade.QuitAndInstall": "Quit and install new version.",
   "Folder.Settings.Description": "Folder settings are automatically applied to all conversations inside. Changes to folder settings will overwrite individual conversation settings.",
-  "Common.NumberOfContextMessages": "Number of Context Messages"
+  "Common.NumberOfContextMessages": "Number of Context Messages",
+  "Message.Error.EChartsRenderFailed": "The echats render failed."
 }

public/locales/en/translation.json

@@ -264,5 +264,6 @@
   "Upgrade.Install": "安装",
   "Upgrade.QuitAndInstall": "退出并安装新版本",
   "Folder.Settings.Description": "对话默认继承文件夹设置。修改文件夹设置将覆盖其内部对话的相关配置。",
-  "Common.NumberOfContextMessages": "上下文消息数量"
+  "Common.NumberOfContextMessages": "上下文消息数量",
+  "Message.Error.EChartsRenderFailed": "Echats 图片渲染失败"
 }

public/locales/zh/translation.json

@@ -3,73 +3,67 @@ import useAppearanceStore from 'stores/useAppearanceStore';
 import * as echarts from 'echarts';
 import { IChatMessage } from 'intellichat/types';
 import { useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
-export default function useECharts({ message }: { message: IChatMessage }) {
-    const theme = useAppearanceStore((state) => state.theme);
-    const messageId = useMemo(() => message.id, [message]);
-    const containersRef = useRef([]);
-
-    const disposeECharts = () => {
-        const chartInstances = containersRef.current;
-        if (chartInstances.length < 1) return;
-        chartInstances.forEach(({ cleanup }: { cleanup: Function }) => {
-            cleanup();
-        });
-        chartInstances.length = 0;
-    };
-
-    const initECharts = () => {
-
-        // 清理已有实例
-        disposeECharts();
-        const chartInstances = containersRef.current;
-
-        // 查找所有图表容器
-        const containers = document.querySelectorAll(`#${messageId} .echarts-container`);
-
-        containers.forEach(container => {
-            const chartId = container.id;
-            const encodedConfig = container.getAttribute('data-echarts-config');
+const parseOption = (optStr: string) => {
+  try {
+    const match = optStr.match(/\{(.+)\}/s);
+    if (!match) return {};
+    return new Function(`return {${match[1]}}`)();
+  } catch (error) {
+    throw new Error('Invalid ECharts option format');
+  }
+};
 
-            if (!encodedConfig) return;
-
-            try {
-                // 解码并解析配置
-                const config = decodeURIComponent(encodedConfig);
-                const option = new Function(`return ${config}`)();
-
-                // 初始化图表
-                // 使用类型断言将 container 转换为 HTMLDivElement 类型，以解决类型不匹配问题
-                console.debug("echart container:",container);
-                const chart = echarts.init(container as HTMLDivElement, theme);
-                chart.setOption(option);
-
-                // 响应式调整
-                const resizeHandler = () => chart.resize();
-                window.addEventListener('resize', resizeHandler);
+export default function useECharts({ message }: { message: IChatMessage }) {
+  const { t } = useTranslation();
+  const theme = useAppearanceStore((state) => state.theme);
+  const messageId = useMemo(() => message.id, [message]);
+  const containersRef = useRef<{ [key: string]: echarts.EChartsType }>({});
 
-                // 保存实例
-                chartInstances.push({
-                    chartId,
-                    instance: chart,
-                    cleanup: () => {
-                        window.removeEventListener('resize', resizeHandler);
-                        chart.dispose();
-                    }
-                });
-            } catch (error: any) {
-                console.error('ECharts初始化错误:', error);
-                container.innerHTML = `
-      <div style="color:red;padding:20px;">
-        图表渲染错误: ${error.message}
-      </div>
-    `;
-            }
-        });
-    };
+  const disposeECharts = () => {
+    const chartInstances = Object.values(containersRef.current);
+    chartInstances.forEach(({ cleanup }: { cleanup: Function }) => {
+      cleanup();
+    });
+    containersRef.current = {};
+  };
 
-    return {
-        disposeECharts,
-        initECharts,
+  const initECharts = (prefix: string, chartId: string) => {
+    if (containersRef.current[`${prefix}-${chartId}`]) return; // already initialized
+    const chartInstances = containersRef.current;
+    const container = document.querySelector(
+      `#${messageId} .echarts-container#${chartId}`,
+    ) as HTMLDivElement;
+    if (!container) return;
+    const encodedConfig = container.getAttribute('data-echarts-config');
+    if (!encodedConfig) return;
+    try {
+      let config = decodeURIComponent(encodedConfig);
+      const option = parseOption(config);
+      const chart = echarts.init(container, theme);
+      chart.setOption(option);
+      const resizeHandler = () => chart.resize();
+      window.addEventListener('resize', resizeHandler);
+      chartInstances[`${prefix}-${chartId}`] = {
+        chartId,
+        instance: chart,
+        cleanup: () => {
+          window.removeEventListener('resize', resizeHandler);
+          chart.dispose();
+        },
+      };
+    } catch (error: any) {
+      container.innerHTML = `
+        <div class="text-gray-400">
+          ${t('Message.Error.EChartsRenderFailed')}
+        </div>
+      `;
     }
-}
+  };
+
+  return {
+    disposeECharts,
+    initECharts,
+  };
+}

src/hooks/useECharts.ts

@@ -5,40 +5,54 @@ import MarkdownIt from 'markdown-it';
 //@ts-ignore
 import Token from 'markdown-it/lib/token.mjs';
 
-
-
 export default function markdownItEChartsPlugin(md: MarkdownIt) {
-    window.echarts = echarts; // 将 echarts 暴露到全局作用域中，以便在其他地方使用
-
-    // 默认渲染函数
-    const defaultFence = md.renderer.rules.fence || function (tokens: Token[], idx: number, options: MarkdownIt.Options, env: any, self: MarkdownIt.Renderer) {
-        return self.renderToken(tokens, idx, options);
-    };
-
-    // 覆盖fence渲染规则
-    md.renderer.rules.fence = (tokens, idx, options, env, self) => {
-        const token = tokens[idx];
-        const info = token.info.trim();
-
-        // 只处理echarts代码块
-        if (info !== 'echarts') {
-            return defaultFence(tokens, idx, options, env, self);
-        }
-
-        // 生成唯一ID
-        const chartId = 'echart-' + Math.random().toString(36).slice(2, 11);
-        const code = token.content.trim();
-
-        // 返回带有数据属性的容器
-        return `
-      <div class="echarts-container" 
-           id="${chartId}" 
-           data-echarts-config="${encodeURIComponent(code)}" 
-           style="width: 400px;height:400px;">
-          
-      </div>
-    `;
+  window.echarts = echarts; // 将 echarts 暴露到全局作用域中，以便在其他地方使用
+
+  //
+  const defaultFence =
+    md.renderer.rules.fence ||
+    function (
+      tokens: Token[],
+      idx: number,
+      options: MarkdownIt.Options,
+      env: any,
+      self: MarkdownIt.Renderer,
+    ) {
+      return self.renderToken(tokens, idx, options);
     };
 
-    
-}
+  // 覆盖fence渲染规则
+  interface EChartsToken extends Token {
+    info: string;
+    content: string;
+  }
+
+  md.renderer.rules.fence = (
+    tokens: Token[],
+    idx: number,
+    options: MarkdownIt.Options,
+    env: any,
+    self: MarkdownIt.Renderer,
+  ): string => {
+    const token = tokens[idx] as EChartsToken;
+    const info = token.info.trim();
+
+    //  only process code blocks with info 'echarts'
+    if (info !== 'echarts') {
+      return defaultFence(tokens, idx, options, env, self);
+    }
+
+    // generate a unique id for the chart container
+    const chartId: string = 'echart-' + idx;
+    const code: string = token.content.trim();
+
+    return `
+        <div class="echarts-container"
+           id="${chartId}"
+           data-echarts-config="${encodeURIComponent(code)}"
+           style="width:100%;height:400px;">
+           <pre><code>${code}</code></pre>
+        </div>
+      `;
+  };
+}