feat(chat-sdk/chatitem): 消息支持导出图表图片 (#1937)

2025-12-10 19:51:00 +00:00 · 2024-12-23 09:05:56 +08:00
parent 5de5b0a5e2
commit 642d6a02e1
9 changed files with 274 additions and 124 deletions
--- a/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/index.tsx
@@ -9,10 +9,10 @@ import {
  RangeValue,
  SimilarQuestionType,
 } from '../../common/type';
-import { useEffect, useState } from 'react';
+import { createContext, useEffect, useRef, useState } from 'react';
 import { chatExecute, chatParse, queryData, deleteQuery, switchEntity } from '../../service';
 import { PARSE_ERROR_TIP, PREFIX_CLS, SEARCH_EXCEPTION_TIP } from '../../common/constants';
-import { Spin } from 'antd';
+import { message, Spin } from 'antd';
 import IconFont from '../IconFont';
 import ExpandParseTip from './ExpandParseTip';
 import ParseTip from './ParseTip';
@@ -25,6 +25,7 @@ import SimilarQuestionItem from './SimilarQuestionItem';
 import { AgentType } from '../../Chat/type';
 import dayjs, { Dayjs } from 'dayjs';
 import { exportCsvFile } from '../../utils/utils';
+import { useMethodRegister } from '../../hooks';

 type Props = {
  msg: string;
@@ -51,6 +52,11 @@ type Props = {
  onSendMsg?: (msg: string) => void;
 };

+export const ChartItemContext = createContext({
+  register: (...args: any[]) => {},
+  call: (...args: any[]) => {},
+});
+
 const ChatItem: React.FC<Props> = ({
  msg,
  conversationId,
@@ -433,126 +439,135 @@ const ChatItem: React.FC<Props> = ({

  const { llmReq, llmResp } = parseInfo?.properties?.CONTEXT || {};

+  const { register, call } = useMethodRegister(() => message.error('该条消息暂不支持该操作'));
+
  return (
-    <div className={prefixCls}>
-      {!isMobile && <IconFont type="icon-zhinengsuanfa" className={`${prefixCls}-avatar`} />}
-      <div className={isMobile ? `${prefixCls}-mobile-msg-card` : ''}>
-        <div className={`${prefixCls}-time`}>
-          {parseTimeCost?.parseStartTime
-            ? dayjs(parseTimeCost.parseStartTime).format('M月D日 HH:mm')
-            : ''}
-        </div>
-        <div className={contentClass}>
-          <>
-            {currentAgent?.enableFeedback === 1 && !questionId && showExpandParseTip && (
-              <div style={{ marginBottom: 10 }}>
-                <ExpandParseTip
+    <ChartItemContext.Provider value={{ register, call }}>
+      <div className={prefixCls}>
+        {!isMobile && <IconFont type="icon-zhinengsuanfa" className={`${prefixCls}-avatar`} />}
+        <div className={isMobile ? `${prefixCls}-mobile-msg-card` : ''}>
+          <div className={`${prefixCls}-time`}>
+            {parseTimeCost?.parseStartTime
+              ? dayjs(parseTimeCost.parseStartTime).format('M月D日 HH:mm')
+              : ''}
+          </div>
+          <div className={contentClass}>
+            <>
+              {currentAgent?.enableFeedback === 1 && !questionId && showExpandParseTip && (
+                <div style={{ marginBottom: 10 }}>
+                  <ExpandParseTip
+                    isSimpleMode={isSimpleMode}
+                    parseInfoOptions={preParseInfoOptions}
+                    agentId={agentId}
+                    integrateSystem={integrateSystem}
+                    parseTimeCost={parseTimeCost?.parseTime}
+                    isDeveloper={isDeveloper}
+                    onSelectParseInfo={onExpandSelectParseInfo}
+                    onSwitchEntity={onSwitchEntity}
+                    onFiltersChange={onFiltersChange}
+                    onDateInfoChange={onDateInfoChange}
+                    onRefresh={onRefresh}
+                    handlePresetClick={handlePresetClick}
+                  />
+                </div>
+              )}
+
+              {!preParseMode && (
+                <ParseTip
                  isSimpleMode={isSimpleMode}
-                  parseInfoOptions={preParseInfoOptions}
+                  parseLoading={parseLoading}
+                  parseInfoOptions={parseInfoOptions}
+                  parseTip={parseTip}
+                  currentParseInfo={parseInfo}
                  agentId={agentId}
+                  dimensionFilters={dimensionFilters}
+                  dateInfo={dateInfo}
+                  entityInfo={entityInfo}
                  integrateSystem={integrateSystem}
                  parseTimeCost={parseTimeCost?.parseTime}
                  isDeveloper={isDeveloper}
-                  onSelectParseInfo={onExpandSelectParseInfo}
+                  onSelectParseInfo={onSelectParseInfo}
                  onSwitchEntity={onSwitchEntity}
                  onFiltersChange={onFiltersChange}
                  onDateInfoChange={onDateInfoChange}
-                  onRefresh={onRefresh}
+                  onRefresh={() => {
+                    onRefresh();
+                  }}
                  handlePresetClick={handlePresetClick}
                />
-              </div>
-            )}
+              )}
+            </>

-            {!preParseMode && (
-              <ParseTip
-                isSimpleMode={isSimpleMode}
-                parseLoading={parseLoading}
-                parseInfoOptions={parseInfoOptions}
-                parseTip={parseTip}
-                currentParseInfo={parseInfo}
-                agentId={agentId}
-                dimensionFilters={dimensionFilters}
-                dateInfo={dateInfo}
-                entityInfo={entityInfo}
-                integrateSystem={integrateSystem}
-                parseTimeCost={parseTimeCost?.parseTime}
-                isDeveloper={isDeveloper}
-                onSelectParseInfo={onSelectParseInfo}
-                onSwitchEntity={onSwitchEntity}
-                onFiltersChange={onFiltersChange}
-                onDateInfoChange={onDateInfoChange}
-                onRefresh={() => {
-                  onRefresh();
-                }}
-                handlePresetClick={handlePresetClick}
-              />
-            )}
-          </>
-
-          {executeMode && (
-            <Spin spinning={entitySwitchLoading}>
-              <div style={{ minHeight: 50 }}>
-                {!isMobile && parseInfo?.sqlInfo && isDeveloper && isDebugMode && !isSimpleMode && (
-                  <SqlItem
-                    agentId={agentId}
-                    queryId={parseInfo.queryId}
+            {executeMode && (
+              <Spin spinning={entitySwitchLoading}>
+                <div style={{ minHeight: 50 }}>
+                  {!isMobile &&
+                    parseInfo?.sqlInfo &&
+                    isDeveloper &&
+                    isDebugMode &&
+                    !isSimpleMode && (
+                      <SqlItem
+                        agentId={agentId}
+                        queryId={parseInfo.queryId}
+                        question={msg}
+                        llmReq={llmReq}
+                        llmResp={llmResp}
+                        integrateSystem={integrateSystem}
+                        queryMode={parseInfo.queryMode}
+                        sqlInfo={parseInfo.sqlInfo}
+                        sqlTimeCost={parseTimeCost?.sqlTime}
+                        executeErrorMsg={executeErrorMsg}
+                      />
+                    )}
+                  <ExecuteItem
+                    isSimpleMode={isSimpleMode}
+                    queryId={parseInfo?.queryId}
                    question={msg}
-                    llmReq={llmReq}
-                    llmResp={llmResp}
-                    integrateSystem={integrateSystem}
-                    queryMode={parseInfo.queryMode}
-                    sqlInfo={parseInfo.sqlInfo}
-                    sqlTimeCost={parseTimeCost?.sqlTime}
+                    queryMode={parseInfo?.queryMode}
+                    executeLoading={executeLoading}
+                    executeTip={executeTip}
                    executeErrorMsg={executeErrorMsg}
+                    chartIndex={0}
+                    data={data}
+                    triggerResize={triggerResize}
+                    executeItemNode={executeItemNode}
+                    isDeveloper={isDeveloper}
+                    renderCustomExecuteNode={renderCustomExecuteNode}
                  />
-                )}
-                <ExecuteItem
-                  isSimpleMode={isSimpleMode}
+                </div>
+              </Spin>
+            )}
+            {executeMode &&
+              !executeLoading &&
+              !isSimpleMode &&
+              parseInfo?.queryMode !== 'PLAIN_TEXT' && (
+                <SimilarQuestionItem
                  queryId={parseInfo?.queryId}
-                  question={msg}
-                  queryMode={parseInfo?.queryMode}
-                  executeLoading={executeLoading}
-                  executeTip={executeTip}
-                  executeErrorMsg={executeErrorMsg}
-                  chartIndex={0}
-                  data={data}
-                  triggerResize={triggerResize}
-                  executeItemNode={executeItemNode}
-                  isDeveloper={isDeveloper}
-                  renderCustomExecuteNode={renderCustomExecuteNode}
+                  defaultExpanded={parseTip !== '' || executeTip !== ''}
+                  similarQueries={data?.similarQueries}
+                  onSelectQuestion={onSelectQuestion}
                />
-              </div>
-            </Spin>
-          )}
-          {executeMode &&
-            !executeLoading &&
-            !isSimpleMode &&
+              )}
+          </div>
+          {(parseTip !== '' || (executeMode && !executeLoading)) &&
            parseInfo?.queryMode !== 'PLAIN_TEXT' && (
-              <SimilarQuestionItem
-                queryId={parseInfo?.queryId}
-                defaultExpanded={parseTip !== '' || executeTip !== ''}
-                similarQueries={data?.similarQueries}
-                onSelectQuestion={onSelectQuestion}
+              <Tools
+                isLastMessage={isLastMessage}
+                queryId={parseInfo?.queryId || 0}
+                scoreValue={score}
+                isParserError={isParserError}
+                onExportData={() => {
+                  onExportData();
+                }}
+                isSimpleMode={isSimpleMode}
+                onReExecute={queryId => {
+                  deleteQueryInfo(queryId);
+                }}
              />
            )}
        </div>
-        {(parseTip !== '' || (executeMode && !executeLoading)) &&
-          parseInfo?.queryMode !== 'PLAIN_TEXT' && (
-            <Tools
-              isLastMessage={isLastMessage}
-              queryId={parseInfo?.queryId || 0}
-              scoreValue={score}
-              isParserError={isParserError}
-              onExportData={() => {
-                onExportData();
-              }}
-              onReExecute={queryId => {
-                deleteQueryInfo(queryId);
-              }}
-            />
-          )}
      </div>
-    </div>
+    </ChartItemContext.Provider>
  );
 };

--- a/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx
@@ -7,10 +7,19 @@ import {
 } from '../../../utils/utils';
 import type { ECharts } from 'echarts';
 import * as echarts from 'echarts';
-import React, { useEffect, useRef, useState } from 'react';
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 import NoPermissionChart from '../NoPermissionChart';
 import { ColumnType } from '../../../common/type';
 import { Spin } from 'antd';
+import { ChartItemContext } from '../../ChatItem';
+import { useExportByEcharts } from '../../../hooks';

 type Props = {
  data: MsgDataType;
@@ -30,7 +39,7 @@ const BarChart: React.FC<Props> = ({
  onApplyAuth,
 }) => {
  const chartRef = useRef<any>();
-  const [instance, setInstance] = useState<ECharts>();
+  const instanceRef = useRef<ECharts>();

  const { queryColumns, queryResults, entityInfo } = data;

@@ -41,11 +50,11 @@ const BarChart: React.FC<Props> = ({

  const renderChart = () => {
    let instanceObj: any;
-    if (!instance) {
+    if (!instanceRef.current) {
      instanceObj = echarts.init(chartRef.current);
-      setInstance(instanceObj);
+      instanceRef.current = instanceObj;
    } else {
-      instanceObj = instance;
+      instanceObj = instanceRef.current;
    }
    const data = (queryResults || []).sort(
      (a: any, b: any) => b[metricColumnName] - a[metricColumnName]
@@ -163,8 +172,8 @@ const BarChart: React.FC<Props> = ({
  }, [queryResults]);

  useEffect(() => {
-    if (triggerResize && instance) {
-      instance.resize();
+    if (triggerResize && instanceRef.current) {
+      instanceRef.current.resize();
    }
  }, [triggerResize]);

@@ -180,6 +189,15 @@ const BarChart: React.FC<Props> = ({

  const prefixCls = `${PREFIX_CLS}-bar`;

+  const { downloadChartAsImage } = useExportByEcharts({
+    instanceRef,
+    question,
+  });
+
+  const { register } = useContext(ChartItemContext);
+
+  register('downloadChartAsImage', downloadChartAsImage);
+
  return (
    <div>
      <div className={`${prefixCls}-top-bar`}>
--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx
@@ -8,12 +8,14 @@ import {
 } from '../../../utils/utils';
 import type { ECharts } from 'echarts';
 import * as echarts from 'echarts';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import moment from 'moment';
 import { ColumnType } from '../../../common/type';
 import NoPermissionChart from '../NoPermissionChart';
 import classNames from 'classnames';
 import { isArray } from 'lodash';
+import { useExportByEcharts } from '../../../hooks';
+import { ChartItemContext } from '../../ChatItem';

 type Props = {
  model?: string;
@@ -37,15 +39,15 @@ const MetricTrendChart: React.FC<Props> = ({
  chartType,
 }) => {
  const chartRef = useRef<any>();
-  const [instance, setInstance] = useState<ECharts>();
+  const instanceRef = useRef<ECharts>();

  const renderChart = () => {
    let instanceObj: any;
-    if (!instance) {
+    if (!instanceRef.current) {
      instanceObj = echarts.init(chartRef.current);
-      setInstance(instanceObj);
+      instanceRef.current = instanceObj;
    } else {
-      instanceObj = instance;
+      instanceObj = instanceRef.current;
      instanceObj.clear();
    }

@@ -195,6 +197,15 @@ const MetricTrendChart: React.FC<Props> = ({
    instanceObj.resize();
  };

+  const { downloadChartAsImage } = useExportByEcharts({
+    instanceRef,
+    question: metricField.name,
+  });
+
+  const { register } = useContext(ChartItemContext);
+
+  register('downloadChartAsImage', downloadChartAsImage);
+
  useEffect(() => {
    if (metricField.authorized) {
      renderChart();
@@ -202,8 +213,8 @@ const MetricTrendChart: React.FC<Props> = ({
  }, [resultList, metricField, chartType]);

  useEffect(() => {
-    if (triggerResize && instance) {
-      instance.resize();
+    if (triggerResize && instanceRef.current) {
+      instanceRef.current.resize();
    }
  }, [triggerResize]);

--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MultiMetricsTrendChart.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/MultiMetricsTrendChart.tsx
@@ -2,10 +2,12 @@ import { CHART_SECONDARY_COLOR, CLS_PREFIX, THEME_COLOR_LIST } from '../../../co
 import { getFormattedValue } from '../../../utils/utils';
 import type { ECharts } from 'echarts';
 import * as echarts from 'echarts';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import moment from 'moment';
 import { ColumnType } from '../../../common/type';
 import { isArray } from 'lodash';
+import { ChartItemContext } from '../../ChatItem';
+import { useExportByEcharts } from '../../../hooks';

 type Props = {
  dateColumnName: string;
@@ -13,6 +15,7 @@ type Props = {
  resultList: any[];
  triggerResize?: boolean;
  chartType?: string;
+  question: string;
 };

 const MultiMetricsTrendChart: React.FC<Props> = ({
@@ -21,17 +24,17 @@ const MultiMetricsTrendChart: React.FC<Props> = ({
  resultList,
  triggerResize,
  chartType,
+  question,
 }) => {
  const chartRef = useRef<any>();
-  const [instance, setInstance] = useState<ECharts>();
-
+  const instanceRef = useRef<ECharts>();
  const renderChart = () => {
    let instanceObj: any;
-    if (!instance) {
+    if (!instanceRef.current) {
      instanceObj = echarts.init(chartRef.current);
-      setInstance(instanceObj);
+      instanceRef.current = instanceObj;
    } else {
-      instanceObj = instance;
+      instanceObj = instanceRef.current;
      instanceObj.clear();
    }

@@ -132,13 +135,22 @@ const MultiMetricsTrendChart: React.FC<Props> = ({
    instanceObj.resize();
  };

+  const { downloadChartAsImage } = useExportByEcharts({
+    instanceRef,
+    question,
+  });
+
+  const { register } = useContext(ChartItemContext);
+
+  register('downloadChartAsImage', downloadChartAsImage);
+
  useEffect(() => {
    renderChart();
  }, [resultList, chartType]);

  useEffect(() => {
-    if (triggerResize && instance) {
-      instance.resize();
+    if (triggerResize && instanceRef.current) {
+      instanceRef.current.resize();
    }
  }, [triggerResize]);

--- a/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatMsg/MetricTrend/index.tsx
@@ -100,6 +100,7 @@ const MetricTrend: React.FC<Props> = ({
              <MultiMetricsTrendChart
                dateColumnName={dateColumnName}
                metricFields={metricFields}
+                question={question}
                resultList={queryResults}
                triggerResize={triggerResize}
                chartType={chartType}
--- a/webapp/packages/chat-sdk/src/components/Tools/index.tsx
+++ b/webapp/packages/chat-sdk/src/components/Tools/index.tsx
@@ -1,16 +1,25 @@
 import { isMobile } from '../../utils/utils';
-import { DislikeOutlined, LikeOutlined, DownloadOutlined, RedoOutlined } from '@ant-design/icons';
+import {
+  DislikeOutlined,
+  LikeOutlined,
+  DownloadOutlined,
+  RedoOutlined,
+  FileJpgOutlined,
+} from '@ant-design/icons';
 import { Button } from 'antd';
 import { CLS_PREFIX } from '../../common/constants';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import classNames from 'classnames';
 import { updateQAFeedback } from '../../service';
+import { useMethodRegister } from '../../hooks';
+import { ChartItemContext } from '../ChatItem';

 type Props = {
  queryId: number;
  scoreValue?: number;
  isLastMessage?: boolean;
  isParserError?: boolean;
+  isSimpleMode?: boolean;
  onExportData?: () => void;
  onReExecute?: (queryId: number) => void;
 };
@@ -20,6 +29,7 @@ const Tools: React.FC<Props> = ({
  scoreValue,
  isLastMessage,
  isParserError = false,
+  isSimpleMode = false,
  onExportData,
  onReExecute,
 }) => {
@@ -44,6 +54,8 @@ const Tools: React.FC<Props> = ({
    [`${prefixCls}-feedback-active`]: score === 1,
  });

+  const { call } = useContext(ChartItemContext);
+
  return (
    <div className={prefixCls}>
      {!isMobile && (
@@ -68,6 +80,18 @@ const Tools: React.FC<Props> = ({
                  <DownloadOutlined />
                  <span className={`${prefixCls}-font-style`}>导出数据</span>
                </Button>
+                {!isSimpleMode && (
+                  <Button
+                    size="small"
+                    onClick={() => {
+                      call('downloadChartAsImage');
+                    }}
+                    type="text"
+                  >
+                    <FileJpgOutlined />
+                    <span className={`${prefixCls}-font-style`}>导出图片</span>
+                  </Button>
+                )}
                {isLastMessage && (
                  <Button
                    size="small"
--- a/webapp/packages/chat-sdk/src/hooks/index.ts
+++ b/webapp/packages/chat-sdk/src/hooks/index.ts
@@ -0,0 +1,3 @@
+export * from './useMethodRegister';
+export * from './useComposing';
+export * from './useExportByEcharts';
--- a/webapp/packages/chat-sdk/src/hooks/useExportByEcharts.ts
+++ b/webapp/packages/chat-sdk/src/hooks/useExportByEcharts.ts
@@ -0,0 +1,41 @@
+import { message } from 'antd';
+import { ECharts } from 'echarts';
+
+export interface ExportByEchartsProps {
+  instanceRef: React.MutableRefObject<ECharts | undefined>;
+  question: string;
+  options?: Parameters<ECharts['getConnectedDataURL']>[0];
+}
+
+export const useExportByEcharts = ({ instanceRef, question, options }: ExportByEchartsProps) => {
+  const handleSaveAsImage = () => {
+    if (instanceRef.current) {
+      return instanceRef.current.getConnectedDataURL({
+        type: 'png',
+        pixelRatio: 2,
+        backgroundColor: '#fff',
+        excludeComponents: ['toolbox'],
+        ...options,
+      });
+    }
+  };
+
+  const downloadImage = (url: string) => {
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${question}.png`;
+    a.click();
+  };
+
+  const downloadChartAsImage = () => {
+    const url = handleSaveAsImage();
+    if (url) {
+      downloadImage(url);
+      message.success('导出图片成功');
+    } else {
+      message.error('该条消息暂不支持导出图片');
+    }
+  };
+
+  return { downloadChartAsImage };
+};
--- a/webapp/packages/chat-sdk/src/hooks/useMethodRegister.ts
+++ b/webapp/packages/chat-sdk/src/hooks/useMethodRegister.ts
@@ -0,0 +1,25 @@
+import { useCallback, useRef } from 'react';
+
+export const useMethodRegister = (fallback?: (...args: any[]) => any) => {
+  const methodStore = useRef<Map<string, (...args: any[]) => any>>(new Map());
+
+  const register = useCallback<(key: string, method: (...args: any[]) => any) => any>(
+    (key, method) => {
+      methodStore.current.set(key, method);
+    },
+    [methodStore]
+  );
+
+  const call = useCallback<(key: string, ...args: any[]) => any>(
+    (key, ...args) => {
+      const method = methodStore.current.get(key);
+      if (method) {
+        return method(...args);
+      }
+      return fallback?.(...args);
+    },
+    [methodStore]
+  );
+
+  return { register, call };
+};