Integrate Chat and Copilot into chat-sdk, and add SQL parse display (#166)

2025-12-12 12:37:55 +00:00 · 2023-10-02 18:05:12 +08:00
parent 741ed4191b
commit 71cb20eb4f
68 changed files with 1353 additions and 882 deletions
--- a/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
+++ b/webapp/packages/chat-sdk/src/components/ChatItem/SqlItem.tsx
@@ -0,0 +1,116 @@
+import React, { useState } 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 { message } from 'antd';
+import { PREFIX_CLS } from '../../common/constants';
+import { CheckCircleFilled, UpOutlined } from '@ant-design/icons';
+import { SqlInfoType } from '../../common/type';
+
+type Props = {
+  integrateSystem?: string;
+  sqlInfo: SqlInfoType;
+};
+
+const SqlItem: React.FC<Props> = ({ integrateSystem, sqlInfo }) => {
+  const [sqlType, setSqlType] = useState('');
+
+  const tipPrefixCls = `${PREFIX_CLS}-item`;
+  const prefixCls = `${PREFIX_CLS}-sql-item`;
+
+  const handleCopy = (text, result) => {
+    result ? message.success('复制SQL成功', 1) : message.error('复制SQL失败', 1);
+  };
+
+  const onCollapse = () => {
+    setSqlType('');
+  };
+
+  if (!sqlInfo.llmParseSql && !sqlInfo.logicSql && !sqlInfo.querySql) {
+    return null;
+  }
+
+  return (
+    <div className={`${tipPrefixCls}-parse-tip`}>
+      <div className={`${tipPrefixCls}-title-bar`}>
+        <CheckCircleFilled className={`${tipPrefixCls}-step-icon`} />
+        <div className={`${tipPrefixCls}-step-title`}>
+          SQL生成
+          {sqlType && (
+            <span className={`${prefixCls}-toggle-expand-btn`} onClick={onCollapse}>
+              <UpOutlined />
+            </span>
+          )}
+        </div>
+        <div className={`${prefixCls}-sql-options`}>
+          {sqlInfo.llmParseSql && (
+            <div
+              className={`${prefixCls}-sql-option ${
+                sqlType === 'llmParseSql' ? `${prefixCls}-sql-option-active` : ''
+              }`}
+              onClick={() => {
+                setSqlType(sqlType === 'llmParseSql' ? '' : 'llmParseSql');
+              }}
+            >
+              LLM解析SQL
+            </div>
+          )}
+          {sqlInfo.logicSql && (
+            <div
+              className={`${prefixCls}-sql-option ${
+                sqlType === 'logicSql' ? `${prefixCls}-sql-option-active` : ''
+              }`}
+              onClick={() => {
+                setSqlType(sqlType === 'logicSql' ? '' : 'logicSql');
+              }}
+            >
+              逻辑SQL
+            </div>
+          )}
+          {sqlInfo.querySql && (
+            <div
+              className={`${prefixCls}-sql-option ${
+                sqlType === 'querySql' ? `${prefixCls}-sql-option-active` : ''
+              }`}
+              onClick={() => {
+                setSqlType(sqlType === 'querySql' ? '' : 'querySql');
+              }}
+            >
+              物理SQL
+            </div>
+          )}
+        </div>
+      </div>
+      <div
+        className={`${prefixCls} ${
+          !window.location.pathname.includes('/chat') &&
+          integrateSystem &&
+          integrateSystem !== 'wiki'
+            ? `${prefixCls}-copilot`
+            : ''
+        }`}
+      >
+        {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;