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

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,7 +439,10 @@ const ChatItem: React.FC<Props> = ({
 
   const { llmReq, llmResp } = parseInfo?.properties?.CONTEXT || {};
 
+  const { register, call } = useMethodRegister(() => message.error('该条消息暂不支持该操作'));
+
   return (
+    <ChartItemContext.Provider value={{ register, call }}>
       <div className={prefixCls}>
         {!isMobile && <IconFont type="icon-zhinengsuanfa" className={`${prefixCls}-avatar`} />}
         <div className={isMobile ? `${prefixCls}-mobile-msg-card` : ''}>
@@ -492,7 +501,11 @@ const ChatItem: React.FC<Props> = ({
             {executeMode && (
               <Spin spinning={entitySwitchLoading}>
                 <div style={{ minHeight: 50 }}>
-                {!isMobile && parseInfo?.sqlInfo && isDeveloper && isDebugMode && !isSimpleMode && (
+                  {!isMobile &&
+                    parseInfo?.sqlInfo &&
+                    isDeveloper &&
+                    isDebugMode &&
+                    !isSimpleMode && (
                       <SqlItem
                         agentId={agentId}
                         queryId={parseInfo.queryId}
@@ -546,6 +559,7 @@ const ChatItem: React.FC<Props> = ({
                 onExportData={() => {
                   onExportData();
                 }}
+                isSimpleMode={isSimpleMode}
                 onReExecute={queryId => {
                   deleteQueryInfo(queryId);
                 }}
@@ -553,6 +567,7 @@ const ChatItem: React.FC<Props> = ({
             )}
         </div>
       </div>
+    </ChartItemContext.Provider>
   );
 };
 

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) {
+    if (triggerResize && instanceRef.current) {
-      instance.resize();
+      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`}>

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) {
+    if (triggerResize && instanceRef.current) {
-      instance.resize();
+      instanceRef.current.resize();
     }
   }, [triggerResize]);
 

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) {
+    if (triggerResize && instanceRef.current) {
-      instance.resize();
+      instanceRef.current.resize();
     }
   }, [triggerResize]);
 

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}

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"

webapp/packages/chat-sdk/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useMethodRegister';
+export * from './useComposing';
+export * from './useExportByEcharts';

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 };
+};

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 };
+};