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

webapp/packages/chat-sdk/src/Chat/components/AgentTip/index.tsx

@@ -0,0 +1,48 @@
+import LeftAvatar from '../CopilotAvatar';
+import Message from '../Message';
+import styles from './style.module.less';
+import { AgentType } from '../../type';
+import { isMobile } from '../../../utils/utils';
+
+type Props = {
+  currentAgent?: AgentType;
+  onSendMsg: (value: string) => void;
+};
+
+const AgentTip: React.FC<Props> = ({ currentAgent, onSendMsg }) => {
+  if (!currentAgent) {
+    return null;
+  }
+  return (
+    <div className={styles.agentTip}>
+      {!isMobile && <LeftAvatar />}
+      <Message position="left" bubbleClassName={styles.agentTipMsg}>
+        <div className={styles.title}>
+          您好，智能助理【{currentAgent.name}
+          】将与您对话，试着问：
+        </div>
+        <div className={styles.content}>
+          <div className={styles.examples}>
+            {currentAgent.examples?.length > 0 ? (
+              currentAgent.examples.map(example => (
+                <div
+                  key={example}
+                  className={styles.example}
+                  onClick={() => {
+                    onSendMsg(example);
+                  }}
+                >
+                  “{example}”
+                </div>
+              ))
+            ) : (
+              <div className={styles.example}>{currentAgent.description}</div>
+            )}
+          </div>
+        </div>
+      </Message>
+    </div>
+  );
+};
+
+export default AgentTip;

webapp/packages/chat-sdk/src/Chat/components/AgentTip/style.module.less

@@ -0,0 +1,44 @@
+.agentTip {
+  display: flex;
+
+  .agentTipMsg {
+    padding: 12px 20px 20px !important;
+
+    .title {
+      margin-bottom: 12px;
+      font-size: 14px;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      margin-top: 10px;
+      column-gap: 14px;
+
+      .topBar {
+        .tip {
+          margin-top: 2px;
+          font-size: 13px;
+        }
+      }
+
+      .examples {
+        display: flex;
+        flex-direction: column;
+        font-size: 13px;
+        row-gap: 8px;
+
+        .example {
+          color: var(--chat-blue);
+          cursor: pointer;
+        }
+      }
+
+      &.fullscreen {
+        flex: none;
+        width: 280px;
+      }
+    }
+  }
+}