feat: create a chat assistant and extract SimilaritySlider (#67)

* feat: extract SimilaritySlider

* feat: create a chat assistant

web/src/pages/chat/index.tsx

@@ -1,14 +1,73 @@
-import { FormOutlined } from '@ant-design/icons';
-import { Button, Card, Divider, Flex, Space, Tag } from 'antd';
-import { useSelector } from 'umi';
+import { DeleteOutlined, EditOutlined, FormOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Card,
+  Divider,
+  Dropdown,
+  Flex,
+  MenuProps,
+  Space,
+  Tag,
+} from 'antd';
 import ChatContainer from './chat-container';
 
+import { ReactComponent as ChatAppCube } from '@/assets/svg/chat-app-cube.svg';
 import ModalManager from '@/components/modal-manager';
+import classNames from 'classnames';
 import ChatConfigurationModal from './chat-configuration-modal';
+import { useFetchDialogList } from './hooks';
+
+import { useState } from 'react';
 import styles from './index.less';
 
 const Chat = () => {
-  const { name } = useSelector((state: any) => state.chatModel);
+  const dialogList = useFetchDialogList();
+  const [activated, setActivated] = useState<string>('');
+
+  const handleAppCardEnter = (id: string) => () => {
+    setActivated(id);
+  };
+
+  const handleAppCardLeave = () => {
+    setActivated('');
+  };
+
+  const items: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.antgroup.com"
+        >
+          1st menu item
+        </a>
+      ),
+    },
+  ];
+
+  const appItems: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (
+        <Space>
+          <EditOutlined />
+          Edit
+        </Space>
+      ),
+    },
+    { type: 'divider' },
+    {
+      key: '2',
+      label: (
+        <Space>
+          <DeleteOutlined />
+          Delete chat
+        </Space>
+      ),
+    },
+  ];
 
   return (
     <Flex className={styles.chatWrapper}>
@@ -32,9 +91,33 @@ const Chat = () => {
           </ModalManager>
 
           <Divider></Divider>
-          <Card>
-            <p>Card content</p>
-          </Card>
+          <Space direction={'vertical'} size={'middle'}>
+            {dialogList.map((x) => (
+              <Card
+                key={x.id}
+                className={classNames(styles.chatAppCard)}
+                onMouseEnter={handleAppCardEnter(x.id)}
+                onMouseLeave={handleAppCardLeave}
+              >
+                <Flex justify="space-between" align="center">
+                  <Space>
+                    {x.icon}
+                    <section>
+                      <b>{x.name}</b>
+                      <div>{x.description}</div>
+                    </section>
+                  </Space>
+                  {activated === x.id && (
+                    <section>
+                      <Dropdown menu={{ items: appItems }}>
+                        <ChatAppCube className={styles.cubeIcon}></ChatAppCube>
+                      </Dropdown>
+                    </section>
+                  )}
+                </Flex>
+              </Card>
+            ))}
+          </Space>
         </Flex>
       </Flex>
       <Divider type={'vertical'} className={styles.divider}></Divider>
@@ -49,7 +132,9 @@ const Chat = () => {
               <b>Chat</b>
               <Tag>25</Tag>
             </Space>
-            <FormOutlined />
+            <Dropdown menu={{ items }}>
+              <FormOutlined />
+            </Dropdown>
           </Flex>
           <Divider></Divider>
           <section className={styles.chatTitleContent}>today</section>