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

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

@@ -0,0 +1,52 @@
+import { PlusCircleOutlined } from '@ant-design/icons';
+import { AgentType } from '../type';
+import styles from './style.module.less';
+import classNames from 'classnames';
+import { message } from 'antd';
+import IconFont from '../../components/IconFont';
+import { AGENT_ICONS } from '../constants';
+
+type Props = {
+  agentList: AgentType[];
+  currentAgent?: AgentType;
+  onSelectAgent: (agent: AgentType) => void;
+};
+
+const AgentList: React.FC<Props> = ({ agentList, currentAgent, onSelectAgent }) => {
+  const onAddAgent = () => {
+    message.info('正在开发中，敬请期待');
+  };
+
+  return (
+    <div className={styles.agentList}>
+      <div className={styles.header}>
+        <div className={styles.headerTitle}>智能助理</div>
+        <PlusCircleOutlined className={styles.plusIcon} onClick={onAddAgent} />
+      </div>
+      <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);
+              }}
+            >
+              <IconFont type={AGENT_ICONS[index % AGENT_ICONS.length]} className={styles.avatar} />
+              <div className={styles.agentInfo}>
+                <div className={styles.agentName}>{agent.name}</div>
+                <div className={styles.agentDesc}>{agent.description}</div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default AgentList;

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

@@ -0,0 +1,80 @@
+.agentList {
+  width: 248px;
+  height: 100%;
+  background: #f9f9f9;
+  border-right: 1px solid #f1f1f1;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+    padding: 0 16px;
+
+    .headerTitle {
+      color: var(--text-color);
+      font-weight: 500;
+      font-size: 15px;
+    }
+
+    .plusIcon {
+      color: var(--text-color);
+      font-size: 15px;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--chat-blue);
+      }
+    }
+  }
+
+  .agentListContent {
+    display: flex;
+    flex-direction: column;
+    padding: 4px 8px;
+    row-gap: 2px;
+
+    .agentItem {
+      display: flex;
+      align-items: center;
+      padding: 8px 4px;
+      column-gap: 8px;
+      border-radius: 8px;
+      cursor: pointer;
+
+      .avatar {
+        font-size: 40px;
+      }
+
+      .agentInfo {
+        display: flex;
+        flex-direction: column;
+        row-gap: 2px;
+
+        .agentName {
+          color: #000;
+          font-size: 14px;
+        }
+
+        .agentDesc {
+          width: 160px;
+          overflow: hidden;
+          color: var(--text-color-fourth);
+          font-size: 12px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      &:hover,
+      &.active {
+        background: #22a5f7;
+
+        .agentName,
+        .agentDesc {
+          color: #fff;
+        }
+      }
+    }
+  }
+}