Merge fixes and improvements (#1910)

Co-authored-by: tristanliu <tristanliu@tencent.com>

webapp/packages/chat-sdk/src/components/ChatItem/ExecuteItem.tsx

@@ -1,10 +1,12 @@
-import { Spin, Switch, Tooltip } from 'antd';
+import { Space, Spin, Switch, Tooltip, message } from 'antd';
 import { CheckCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
 import { PREFIX_CLS, MsgContentTypeEnum } from '../../common/constants';
 import { MsgDataType } from '../../common/type';
 import ChatMsg from '../ChatMsg';
 import WebPage from '../ChatMsg/WebPage';
 import Loading from './Loading';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import React, { ReactNode, useState } from 'react';
 
 type Props = {
@@ -43,10 +45,10 @@ const ExecuteItem: React.FC<Props> = ({
   const prefixCls = `${PREFIX_CLS}-item`;
   const [showMsgContentTable, setShowMsgContentTable] = useState<boolean>(false);
   const [msgContentType, setMsgContentType] = useState<MsgContentTypeEnum>();
-
+  const [showErrMsg, setShowErrMsg] = useState<boolean>(false);
   const titlePrefix = queryMode === 'PLAIN_TEXT' || queryMode === 'WEB_SERVICE' ? '问答' : '数据';
 
-  const getNodeTip = (title: ReactNode, tip?: string) => {
+  const getNodeTip = (title: ReactNode, tip?: string | ReactNode) => {
     return (
       <>
         <div className={`${prefixCls}-title-bar`}>
@@ -65,21 +67,38 @@ const ExecuteItem: React.FC<Props> = ({
     return getNodeTip(`${titlePrefix}查询中`);
   }
 
+  const handleCopy = (_: string, result: any) => {
+    result ? message.success('复制SQL成功', 1) : message.error('复制SQL失败', 1);
+  };
+
   if (executeTip) {
     return getNodeTip(
       <>
         <span>{titlePrefix}查询失败</span>
         {executeErrorMsg && (
-          <Tooltip title={executeErrorMsg}>
+          <Space>
             <InfoCircleOutlined style={{ marginLeft: 5, color: 'red' }} />
-          </Tooltip>
+            <a
+              onClick={() => {
+                setShowErrMsg(!showErrMsg);
+              }}
+            >
+              {!showErrMsg ? '查看' : '收起'}
+            </a>
+          </Space>
         )}
-
         {!!data?.queryTimeCost && isDeveloper && (
           <span className={`${prefixCls}-title-tip`}>(耗时: {data.queryTimeCost}ms)</span>
         )}
       </>,
-      executeTip
+
+      <>
+        {showErrMsg && (
+          <SyntaxHighlighter className={`${prefixCls}-code`} language="sql" style={solarizedlight}>
+            {executeErrorMsg}
+          </SyntaxHighlighter>
+        )}
+      </>
     );
   }
 

webapp/packages/chat-sdk/src/components/ChatItem/index.tsx

@@ -443,7 +443,6 @@ const ChatItem: React.FC<Props> = ({
             : ''}
         </div>
         <div className={contentClass}>
-          {/* {!isSimpleMode && ( */}
           <>
             {currentAgent?.enableFeedback === 1 && !questionId && showExpandParseTip && (
               <div style={{ marginBottom: 10 }}>
@@ -489,7 +488,6 @@ const ChatItem: React.FC<Props> = ({
               />
             )}
           </>
-          {/* )} */}
 
           {executeMode && (
             <Spin spinning={entitySwitchLoading}>

webapp/packages/chat-sdk/src/components/ChatItem/style.less

@@ -207,6 +207,15 @@
     color: var(--text-color);
   }
 
+  &-code {
+    margin-top: 10px !important;
+    padding: 6px 14px 8px !important;
+    border: 1px solid var(--border-color-base) !important;
+    border-radius: 4px !important;
+    background: #f5f8fb !important;
+    max-width: calc(100vw - 410px);
+  }
+
   &-execute-title-bar {
     display: flex;
     align-items: center;

webapp/packages/chat-sdk/src/components/ChatMsg/Table/index.tsx

@@ -13,11 +13,12 @@ import moment from 'moment';
 type Props = {
   data: MsgDataType;
   size?: SizeType;
+  question: string;
   loading?: boolean;
   onApplyAuth?: (model: string) => void;
 };
 
-const Table: React.FC<Props> = ({ data, size, loading, onApplyAuth }) => {
+const Table: React.FC<Props> = ({ data, size, loading, question, onApplyAuth }) => {
   const { entityInfo, queryColumns, queryResults } = data;
 
   const prefixCls = `${CLS_PREFIX}-table`;
@@ -27,6 +28,13 @@ const Table: React.FC<Props> = ({ data, size, loading, onApplyAuth }) => {
         dataIndex: nameEn,
         key: nameEn,
         title: name || nameEn,
+        defaultSortOrder: 'descend',
+        sorter:
+          showType === 'NUMBER'
+            ? (a, b) => {
+                return a[nameEn] - b[nameEn];
+              }
+            : undefined,
         render: (value: string | number) => {
           if (!authorized) {
             return (
@@ -76,9 +84,11 @@ const Table: React.FC<Props> = ({ data, size, loading, onApplyAuth }) => {
   const dataSource = dateColumn
     ? queryResults.sort((a, b) => moment(a[dateColumn.nameEn]).diff(moment(b[dateColumn.nameEn])))
     : queryResults;
-
   return (
     <div className={prefixCls}>
+      <div className={`${prefixCls}-top-bar`}>
+        <div className={`${prefixCls}-indicator-name`}>{question}</div>
+      </div>
       <AntTable
         pagination={
           queryResults.length <= 10 ? false : { defaultPageSize: 10, position: ['bottomCenter'] }

webapp/packages/chat-sdk/src/components/ChatMsg/Table/style.less

@@ -26,6 +26,22 @@
     color: var(--text-color-third);
   }
 
+  &-top-bar {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    column-gap: 8px;
+    row-gap: 12px;
+    font-style: italic;
+    margin-bottom: 15px;
+  }
+  &-indicator-name {
+    font-size: 14px;
+    color: var(--text-color);
+    font-weight: 500;
+    margin-top: 2px;
+  }
+
   &-filter-item {
     display: flex;
     align-items: center;

webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx

@@ -180,6 +180,7 @@ const ChatMsg: React.FC<Props> = ({
       case MsgContentTypeEnum.TABLE:
         return (
           <Table
+            question={question}
             data={{ ...data, queryColumns: columns, queryResults: dataSource }}
             loading={loading}
           />
@@ -221,6 +222,7 @@ const ChatMsg: React.FC<Props> = ({
       default:
         return (
           <Table
+            question={question}
             data={{ ...data, queryColumns: columns, queryResults: dataSource }}
             loading={loading}
           />