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

webapp/packages/chat-sdk/src/Chat/MobileAgents/index.tsx

@@ -0,0 +1,62 @@
+import IconFont from '../../components/IconFont';
+import { Drawer } from 'antd';
+import classNames from 'classnames';
+import { AGENT_ICONS } from '../constants';
+import { AgentType } from '../type';
+import styles from './style.module.less';
+
+type Props = {
+  open: boolean;
+  agentList: AgentType[];
+  currentAgent?: AgentType;
+  onSelectAgent: (agent: AgentType) => void;
+  onClose: () => void;
+};
+
+const MobileAgents: React.FC<Props> = ({
+  open,
+  agentList,
+  currentAgent,
+  onSelectAgent,
+  onClose,
+}) => {
+  return (
+    <Drawer
+      title="智能助理"
+      placement="bottom"
+      open={open}
+      height="85%"
+      className={styles.mobileAgents}
+      onClose={onClose}
+    >
+      <div className={styles.agentListContent}>
+        {agentList.map((agent, index) => {
+          const agentItemClass = classNames(styles.agentItem, {
+            [styles.active]: currentAgent?.id === agent.id,
+          });
+          return (
+            <div
+              key={agent.id}
+              className={agentItemClass}
+              onClick={() => {
+                onSelectAgent(agent);
+                onClose();
+              }}
+            >
+              <div className={styles.agentTitleBar}>
+                <IconFont
+                  type={AGENT_ICONS[index % AGENT_ICONS.length]}
+                  className={styles.avatar}
+                />
+                <div className={styles.agentName}>{agent.name}</div>
+              </div>
+              <div className={styles.agentDesc}>{agent.description}</div>
+            </div>
+          );
+        })}
+      </div>
+    </Drawer>
+  );
+};
+
+export default MobileAgents;

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

@@ -0,0 +1,55 @@
+.mobileAgents {
+  :global {
+    .ant-drawer-content {
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+
+      .ant-drawer-header {
+        padding: 16px 12px;
+      }
+
+      .ant-drawer-body {
+        padding: 12px;
+      }
+    }
+  }
+
+  .agentListContent {
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+
+    .agentItem {
+      padding: 12px 16px;
+      background-color: #f5f7f9;
+      border: 1px solid transparent;
+      border-radius: 10px;
+
+      &.active {
+        border: 1px solid var(--chat-blue);
+      }
+
+      .agentTitleBar {
+        display: flex;
+        align-items: center;
+        column-gap: 6px;
+
+        .avatar {
+          font-size: 24px;
+        }
+
+        .agentName {
+          color: var(--text-color);
+          font-weight: 500;
+        }
+      }
+
+      .agentDesc {
+        margin-top: 8px;
+        color: var(--text-color-third);
+        font-size: 13px;
+        line-height: 24px;
+      }
+    }
+  }
+}