test-chat-sdk 0.0.0

package/src/components/ChatItem/SqlItem.tsx

@@ -0,0 +1,410 @@
+import React, { useState, useEffect } from 'react';
+import { format } from 'sql-formatter';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Button, message } from 'antd';
+import { PREFIX_CLS } from '../../common/constants';
+import { CheckCircleFilled, DownloadOutlined, UpOutlined } from '@ant-design/icons';
+import { SqlInfoType } from '../../common/type';
+import { exportTextFile } from '../../utils/utils';
+
+type Props = {
+  agentId?: number;
+  queryId?: number;
+  question: string;
+  llmReq?: any;
+  llmResp?: any;
+  integrateSystem?: string;
+  queryMode?: string;
+  sqlInfo: SqlInfoType;
+  sqlTimeCost?: number;
+  executeErrorMsg: string;
+  dataSetIds?: number[]; // 添加dataSetIds属性
+};
+
+const SqlItem: React.FC<Props> = ({
+  agentId,
+  queryId,
+  question,
+  llmReq,
+  llmResp,
+  integrateSystem,
+  queryMode,
+  sqlInfo,
+  sqlTimeCost,
+  executeErrorMsg,
+  dataSetIds, // 接收dataSetIds
+}) => {
+  const [sqlType, setSqlType] = useState('');
+
+  // 监听sqlInfo变化，确保在数据集切换后更新显示
+  useEffect(() => {
+    // 当sqlInfo发生变化时，重置sqlType以确保显示最新的SQL信息
+    setSqlType(prevSqlType => {
+      // 如果当前显示的SQL类型在新的sqlInfo中不存在，则重置为默认显示
+      if (prevSqlType && !sqlInfo[prevSqlType]) {
+        // 按优先级选择要显示的SQL类型
+        if (sqlInfo.querySQL) return 'querySQL';
+        if (sqlInfo.correctedQuerySQL) return 'correctedQuerySQL';
+        if (sqlInfo.correctedS2SQL) return 'correctedS2SQL';
+        if (sqlInfo.parsedS2SQL) return 'parsedS2SQL';
+        return '';
+      }
+      
+      // 如果当前没有选择任何SQL类型，但sqlInfo中有可用的SQL，则默认显示querySQL
+      if (!prevSqlType && sqlInfo.querySQL) {
+        return 'querySQL';
+      }
+      
+      return prevSqlType;
+    });
+  }, [sqlInfo]);
+
+  // 监听数据集切换，当数据集切换时强制重置SQL显示状态
+  useEffect(() => {
+    // 当数据集切换时，重置sqlType状态以确保显示最新的SQL信息
+    setSqlType('');
+    
+    // 延迟设置默认显示的SQL类型，确保UI能够正确更新
+    // 这里不需要使用currentSqlInfo，因为当新的sqlInfo到达时，第一个useEffect会处理显示逻辑
+    setTimeout(() => {
+      if (sqlInfo.querySQL) {
+        setSqlType('querySQL');
+      } else if (sqlInfo.correctedQuerySQL) {
+        setSqlType('correctedQuerySQL');
+      } else if (sqlInfo.correctedS2SQL) {
+        setSqlType('correctedS2SQL');
+      } else if (sqlInfo.parsedS2SQL) {
+        setSqlType('parsedS2SQL');
+      }
+    }, 100);
+  }, [dataSetIds]); // 只监听dataSetIds的变化
+
+  const tipPrefixCls = `${PREFIX_CLS}-item`;
+  const prefixCls = `${PREFIX_CLS}-sql-item`;
+
+  const handleCopy = (_: string, result: any) => {
+    result ? message.success('复制SQL成功', 1) : message.error('复制SQL失败', 1);
+  };
+
+  const onCollapse = () => {
+    setSqlType('');
+  };
+
+  if (!llmReq && !sqlInfo.parsedS2SQL && !sqlInfo.correctedS2SQL && !sqlInfo.querySQL) {
+    return null;
+  }
+
+  const { schema, terms, priorExts } = llmReq || {};
+
+  const fewShots = (Object.values(llmResp?.sqlRespMap || {})[0] as any)?.fewShots || [];
+
+  const getSchemaMapText = () => {
+    return `
+Schema映射
+${schema?.fieldNameList?.length > 0 ? `名称：${schema.fieldNameList.join('、')}` : ''}${schema?.values?.length > 0
+        ? `
+取值：${schema.values
+          .map((item: any) => {
+            return `${item.fieldName}: ${item.fieldValue}`;
+          })
+          .join('、')}`
+        : ''
+      }${priorExts
+        ? `
+附加：${priorExts}`
+        : ''
+      }${terms?.length > 0
+        ? `
+术语：${terms
+          .map((item: any) => {
+            return `${item.name}${item.alias?.length > 0 ? `(${item.alias.join(',')})` : ''}: ${item.description
+              }`;
+          })
+          .join('、')}`
+        : ''
+      }
+
+`;
+  };
+
+  const getFewShotText = () => {
+    return `
+Few-shot示例${fewShots
+        .map((item: any, index: number) => {
+          return `
+
+示例${index + 1}：
+问题：${item.question}
+SQL：
+${format(item.sql)}
+`;
+        })
+        .join('')}
+`;
+  };
+
+  const getParsedS2SQLText = () => {
+    return `
+${queryMode === 'LLM_S2SQL' || queryMode === 'PLAIN_TEXT' ? 'LLM' : 'Rule'}解析S2SQL
+
+${format(sqlInfo.parsedS2SQL)}
+`;
+  };
+
+  const getCorrectedS2SQLText = () => {
+    return `
+修正S2SQL
+
+${format(sqlInfo.correctedS2SQL)}
+`;
+  };
+
+  const getCorrectedQuerySQLText = () => {
+    return `
+物理SQL修正
+
+${format(sqlInfo.correctedQuerySQL || '')}
+`;
+  };
+
+  const getQuerySQLText = () => {
+    return `
+最终执行SQL
+
+${format(sqlInfo.querySQL)}
+`;
+  };
+
+  const getErrorMsgText = () => {
+    return `
+异常日志
+
+${executeErrorMsg}
+`;
+  };
+
+  const onExportLog = () => {
+    let text = '';
+    if (question) {
+      text += `
+问题：${question}
+`;
+    }
+    if (llmReq) {
+      text += getSchemaMapText();
+    }
+    if (fewShots.length > 0) {
+      text += getFewShotText();
+    }
+    if (sqlInfo.parsedS2SQL) {
+      text += getParsedS2SQLText();
+    }
+    if (sqlInfo.correctedS2SQL) {
+      text += getCorrectedS2SQLText();
+    }
+    if (sqlInfo.correctedQuerySQL) {
+      text += getCorrectedQuerySQLText();
+    }
+    if (sqlInfo.querySQL) {
+      text += getQuerySQLText();
+    }
+    if (!!executeErrorMsg) {
+      text += getErrorMsgText();
+    }
+    exportTextFile(text, `supersonic-debug-${agentId}-${queryId}.log`);
+  };
+
+  return (
+    <div className={`${tipPrefixCls}-parse-tip`}>
+      <div className={`${tipPrefixCls}-title-bar`}>
+        <CheckCircleFilled className={`${tipPrefixCls}-step-icon`} />
+        <div className={`${tipPrefixCls}-step-title`}>
+          SQL生成
+          {!!sqlTimeCost && (
+            <span className={`${tipPrefixCls}-title-tip`}>(耗时: {sqlTimeCost}ms)</span>
+          )}
+          ：
+          {sqlType && (
+            <span className={`${prefixCls}-toggle-expand-btn`} onClick={onCollapse}>
+              <UpOutlined />
+            </span>
+          )}
+        </div>
+        <div className={`${tipPrefixCls}-content-options`}>
+          {llmReq && (
+            <div
+              className={`${tipPrefixCls}-content-option ${sqlType === 'schemaMap' ? `${tipPrefixCls}-content-option-active` : ''
+                }`}
+              onClick={() => {
+                setSqlType(sqlType === 'schemaMap' ? '' : 'schemaMap');
+              }}
+            >
+              Schema映射
+            </div>
+          )}
+          {fewShots.length > 0 && (
+            <div
+              className={`${tipPrefixCls}-content-option ${sqlType === 'fewShots' ? `${tipPrefixCls}-content-option-active` : ''
+                }`}
+              onClick={() => {
+                setSqlType(sqlType === 'fewShots' ? '' : 'fewShots');
+              }}
+            >
+              Few-shot示例
+            </div>
+          )}
+          {sqlInfo.parsedS2SQL && (
+            <div
+              className={`${tipPrefixCls}-content-option ${sqlType === 'parsedS2SQL' ? `${tipPrefixCls}-content-option-active` : ''
+                }`}
+              onClick={() => {
+                setSqlType(sqlType === 'parsedS2SQL' ? '' : 'parsedS2SQL');
+              }}
+            >
+              {queryMode === 'LLM_S2SQL' || queryMode === 'PLAIN_TEXT' ? 'LLM' : 'Rule'}解析S2SQL
+            </div>
+          )}
+          {sqlInfo.correctedS2SQL && (
+            <div
+              className={`${tipPrefixCls}-content-option ${sqlType === 'correctedS2SQL' ? `${tipPrefixCls}-content-option-active` : ''
+                }`}
+              onClick={() => {
+                setSqlType(sqlType === 'correctedS2SQL' ? '' : 'correctedS2SQL');
+              }}
+            >
+              修正S2SQL
+            </div>
+          )}
+          {sqlInfo.correctedQuerySQL && (
+            <div
+              className={`${tipPrefixCls}-content-option ${sqlType === 'correctedQuerySQL' ? `${tipPrefixCls}-content-option-active` : ''
+                }`}
+              onClick={() => {
+                setSqlType(sqlType === 'correctedQuerySQL' ? '' : 'correctedQuerySQL');
+              }}
+            >
+              物理SQL修正
+            </div>
+          )}
+          {sqlInfo.querySQL && (
+            <div
+              className={`${tipPrefixCls}-content-option ${sqlType === 'querySQL' ? `${tipPrefixCls}-content-option-active` : ''
+                }`}
+              onClick={() => {
+                setSqlType(sqlType === 'querySQL' ? '' : 'querySQL');
+              }}
+            >
+              {sqlInfo.correctedQuerySQL ? '最终执行SQL' : '最终执行SQL'}
+            </div>
+          )}
+          <Button className={`${prefixCls}-export-log`} size="small" onClick={onExportLog}>
+            <DownloadOutlined />
+            导出日志
+          </Button>
+        </div>
+      </div>
+      <div
+        className={`${prefixCls} ${!window.location.pathname.includes('/chat') &&
+          integrateSystem &&
+          integrateSystem !== 'wiki'
+          ? `${prefixCls}-copilot`
+          : ''
+          }`}
+      >
+        {sqlType === 'schemaMap' && (
+          <div className={`${prefixCls}-code`}>
+            {schema?.fieldNameList?.length > 0 && (
+              <div className={`${prefixCls}-schema-row`}>
+                <div className={`${prefixCls}-schema-title`}>名称：</div>
+                <div className={`${prefixCls}-schema-content`}>
+                  {schema.fieldNameList.join('、')}
+                </div>
+              </div>
+            )}
+            {schema?.values?.length > 0 && (
+              <div className={`${prefixCls}-schema-row`}>
+                <div className={`${prefixCls}-schema-title`}>取值：</div>
+                <div className={`${prefixCls}-schema-content`}>
+                  {schema.values
+                    .map((item: any) => {
+                      return `${item.fieldName}: ${item.fieldValue}`;
+                    })
+                    .join('、')}
+                </div>
+              </div>
+            )}
+            {priorExts && (
+              <div className={`${prefixCls}-schema-row`}>
+                <div className={`${prefixCls}-schema-title`}>附加：</div>
+                <div className={`${prefixCls}-schema-content`}>{priorExts}</div>
+              </div>
+            )}
+            {terms?.length > 0 && (
+              <div className={`${prefixCls}-schema-row`}>
+                <div className={`${prefixCls}-schema-title`}>术语：</div>
+                <div className={`${prefixCls}-schema-content`}>
+                  {terms
+                    .map((item: any) => {
+                      return `${item.name}${item.alias?.length > 0 ? `(${item.alias.join(',')})` : ''
+                        }: ${item.description}`;
+                    })
+                    .join('、')}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        {sqlType === 'fewShots' && (
+          <div className={`${prefixCls}-code`}>
+            {fewShots.map((item: any, index: number) => {
+              return (
+                <div key={index} className={`${prefixCls}-few-shot-item`}>
+                  <div className={`${prefixCls}-few-shot-title`}>示例{index + 1}：</div>
+                  <div className={`${prefixCls}-few-shot-content`}>
+                    <div className={`${prefixCls}-few-shot-content-item`}>
+                      <div className={`${prefixCls}-few-shot-content-title`}>问题：</div>
+                      <div className={`${prefixCls}-few-shot-content-text`}>{item.question}</div>
+                    </div>
+                    <div className={`${prefixCls}-few-shot-content-item`}>
+                      <div className={`${prefixCls}-few-shot-content-title`}>SQL：</div>
+                      <div className={`${prefixCls}-few-shot-content-text`}>
+                        <SyntaxHighlighter
+                          className={`${prefixCls}-few-shot-code`}
+                          language="sql"
+                          style={solarizedlight}
+                        >
+                          {item.sql}
+                        </SyntaxHighlighter>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {sqlType && sqlInfo[sqlType] && (
+          <>
+            <SyntaxHighlighter
+              className={`${prefixCls}-code`}
+              language="sql"
+              style={solarizedlight}
+            >
+              {format(sqlInfo[sqlType])}
+            </SyntaxHighlighter>
+            <CopyToClipboard
+              text={format(sqlInfo[sqlType])}
+              onCopy={(text, result) => handleCopy(text, result)}
+            >
+              <button className={`${prefixCls}-copy-btn`}>复制代码</button>
+            </CopyToClipboard>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SqlItem;

package/src/components/ChatItem/SwitchEntity.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { ChatContextType } from '../../common/type';
+import { Popover } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import RecommendOptions from '../RecommendOptions';
+import { PREFIX_CLS } from '../../common/constants';
+
+type Props = {
+  entityName: string;
+  chatContext: ChatContextType;
+  onSwitchEntity: (entityId: string) => void;
+};
+
+const SwicthEntity: React.FC<Props> = ({ entityName, chatContext, onSwitchEntity }) => {
+  const [recommendOptionsOpen, setRecommendOptionsOpen] = useState(false);
+  const { modelId, modelName, dimensionFilters } = chatContext || {};
+
+  const prefixCls = `${PREFIX_CLS}-item`;
+
+  const switchEntity = (option: string) => {
+    setRecommendOptionsOpen(false);
+    onSwitchEntity(option);
+  };
+
+  const entityId = dimensionFilters?.find(
+    filter => filter?.bizName === 'zyqk_song_id' || filter?.bizName === 'singer_id'
+  )?.value;
+
+  return (
+    <Popover
+      content={
+        <RecommendOptions
+          entityId={entityId!}
+          modelId={modelId}
+          modelName={modelName}
+          onSelect={switchEntity}
+        />
+      }
+      placement="bottomLeft"
+      trigger="click"
+      open={recommendOptionsOpen}
+      onOpenChange={open => setRecommendOptionsOpen(open)}
+    >
+      <div className={`${prefixCls}-tip-item-value ${prefixCls}-switch-entity`}>
+        {entityName}
+        <DownOutlined className={`${prefixCls}-down-icon`} />
+      </div>
+    </Popover>
+  );
+};
+
+export default SwicthEntity;

package/src/components/ChatItem/Text.tsx

@@ -0,0 +1,17 @@
+import Message from '../ChatMsg/Message';
+import { PREFIX_CLS } from '../../common/constants';
+
+type Props = {
+  data: any;
+};
+
+const Text: React.FC<Props> = ({ data }) => {
+  const prefixCls = `${PREFIX_CLS}-item`;
+  return (
+    <Message position="left" bubbleClassName={`${prefixCls}-text-bubble`}>
+      <div className={`${prefixCls}-text`}>{data}</div>
+    </Message>
+  );
+};
+
+export default Text;

package/src/components/ChatItem/Typing.tsx

@@ -0,0 +1,19 @@
+import { CHAT_BLUE, PREFIX_CLS } from '../../common/constants';
+import { Spin } from 'antd';
+import BeatLoader from 'react-spinners/BeatLoader';
+import Message from '../ChatMsg/Message';
+
+const Typing = () => {
+  const prefixCls = `${PREFIX_CLS}-item`;
+  return (
+    <Message position="left" bubbleClassName={`${prefixCls}-typing-bubble`}>
+      <Spin
+        spinning={true}
+        indicator={<BeatLoader color={CHAT_BLUE} size={10} />}
+        className={`${prefixCls}-typing`}
+      />
+    </Message>
+  );
+};
+
+export default Typing;