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

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