feat: fetch conversation and delete chat dialog (#69)

* feat: set chat configuration to backend

* feat: exclude unEnabled variables

* feat: delete chat dialog

* feat: fetch conversation

web/src/pages/chat/index.tsx

@@ -1,3 +1,5 @@
+import { ReactComponent as ChatAppCube } from '@/assets/svg/chat-app-cube.svg';
+import { useSetModalState } from '@/hooks/commonHooks';
 import { DeleteOutlined, EditOutlined, FormOutlined } from '@ant-design/icons';
 import {
   Button,
@@ -9,20 +11,39 @@ import {
   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 { useCallback, useState } from 'react';
 import ChatConfigurationModal from './chat-configuration-modal';
-import { useFetchDialogList } from './hooks';
+import ChatContainer from './chat-container';
+import {
+  useClickConversationCard,
+  useClickDialogCard,
+  useCreateTemporaryConversation,
+  useFetchConversationList,
+  useFetchDialog,
+  useGetChatSearchParams,
+  useRemoveDialog,
+  useSelectFirstDialogOnMount,
+  useSetCurrentDialog,
+} from './hooks';
 
-import { useState } from 'react';
 import styles from './index.less';
 
 const Chat = () => {
-  const dialogList = useFetchDialogList();
+  const dialogList = useSelectFirstDialogOnMount();
   const [activated, setActivated] = useState<string>('');
+  const { visible, hideModal, showModal } = useSetModalState();
+  const { setCurrentDialog, currentDialog } = useSetCurrentDialog();
+  const { onRemoveDialog } = useRemoveDialog();
+  const { handleClickDialog } = useClickDialogCard();
+  const { handleClickConversation } = useClickConversationCard();
+  const { dialogId, conversationId } = useGetChatSearchParams();
+  const list = useFetchConversationList(dialogId);
+  const { createTemporaryConversation } = useCreateTemporaryConversation();
+
+  const selectedDialog = useFetchDialog(dialogId, true);
+
+  const prologue = selectedDialog?.prompt_config?.prologue || '';
 
   const handleAppCardEnter = (id: string) => () => {
     setActivated(id);
@@ -32,72 +53,84 @@ const Chat = () => {
     setActivated('');
   };
 
+  const handleShowChatConfigurationModal = (dialogId?: string) => () => {
+    if (dialogId) {
+      setCurrentDialog(dialogId);
+    }
+    showModal();
+  };
+
+  const handleDialogCardClick = (dialogId: string) => () => {
+    handleClickDialog(dialogId);
+  };
+
+  const handleConversationCardClick = (dialogId: string) => () => {
+    handleClickConversation(dialogId);
+  };
+
+  const handleCreateTemporaryConversation = useCallback(() => {
+    createTemporaryConversation(prologue);
+  }, [createTemporaryConversation, prologue]);
+
   const items: MenuProps['items'] = [
     {
       key: '1',
+      onClick: handleCreateTemporaryConversation,
       label: (
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://www.antgroup.com"
-        >
-          1st menu item
-        </a>
+        <Space>
+          <EditOutlined /> New chat
+        </Space>
       ),
     },
   ];
 
-  const appItems: MenuProps['items'] = [
-    {
-      key: '1',
-      label: (
-        <Space>
-          <EditOutlined />
-          Edit
-        </Space>
-      ),
-    },
-    { type: 'divider' },
-    {
-      key: '2',
-      label: (
-        <Space>
-          <DeleteOutlined />
-          Delete chat
-        </Space>
-      ),
-    },
-  ];
+  const buildAppItems = (dialogId: string) => {
+    const appItems: MenuProps['items'] = [
+      {
+        key: '1',
+        onClick: handleShowChatConfigurationModal(dialogId),
+        label: (
+          <Space>
+            <EditOutlined />
+            Edit
+          </Space>
+        ),
+      },
+      { type: 'divider' },
+      {
+        key: '2',
+        onClick: () => onRemoveDialog([dialogId]),
+        label: (
+          <Space>
+            <DeleteOutlined />
+            Delete chat
+          </Space>
+        ),
+      },
+    ];
+
+    return appItems;
+  };
 
   return (
     <Flex className={styles.chatWrapper}>
       <Flex className={styles.chatAppWrapper}>
         <Flex flex={1} vertical>
-          <ModalManager>
-            {({ visible, showModal, hideModal }) => {
-              return (
-                <>
-                  <Button type="primary" onClick={() => showModal()}>
-                    Create an Assistant
-                  </Button>
-                  <ChatConfigurationModal
-                    visible={visible}
-                    showModal={showModal}
-                    hideModal={hideModal}
-                  ></ChatConfigurationModal>
-                </>
-              );
-            }}
-          </ModalManager>
-
+          <Button type="primary" onClick={handleShowChatConfigurationModal()}>
+            Create an Assistant
+          </Button>
           <Divider></Divider>
-          <Space direction={'vertical'} size={'middle'}>
+          <Flex className={styles.chatAppContent} vertical gap={10}>
             {dialogList.map((x) => (
               <Card
                 key={x.id}
-                className={classNames(styles.chatAppCard)}
+                hoverable
+                className={classNames(styles.chatAppCard, {
+                  [styles.chatAppCardSelected]: dialogId === x.id,
+                })}
                 onMouseEnter={handleAppCardEnter(x.id)}
                 onMouseLeave={handleAppCardLeave}
+                onClick={handleDialogCardClick(x.id)}
               >
                 <Flex justify="space-between" align="center">
                   <Space>
@@ -109,7 +142,7 @@ const Chat = () => {
                   </Space>
                   {activated === x.id && (
                     <section>
-                      <Dropdown menu={{ items: appItems }}>
+                      <Dropdown menu={{ items: buildAppItems(x.id) }}>
                         <ChatAppCube className={styles.cubeIcon}></ChatAppCube>
                       </Dropdown>
                     </section>
@@ -117,7 +150,7 @@ const Chat = () => {
                 </Flex>
               </Card>
             ))}
-          </Space>
+          </Flex>
         </Flex>
       </Flex>
       <Divider type={'vertical'} className={styles.divider}></Divider>
@@ -137,11 +170,30 @@ const Chat = () => {
             </Dropdown>
           </Flex>
           <Divider></Divider>
-          <section className={styles.chatTitleContent}>today</section>
+          <Flex vertical gap={10} className={styles.chatTitleContent}>
+            {list.map((x) => (
+              <Card
+                key={x.id}
+                hoverable
+                onClick={handleConversationCardClick(x.id)}
+                className={classNames(styles.chatTitleCard, {
+                  [styles.chatTitleCardSelected]: x.id === conversationId,
+                })}
+              >
+                <div>{x.name}</div>
+              </Card>
+            ))}
+          </Flex>
         </Flex>
       </Flex>
       <Divider type={'vertical'} className={styles.divider}></Divider>
       <ChatContainer></ChatContainer>
+      <ChatConfigurationModal
+        visible={visible}
+        showModal={showModal}
+        hideModal={hideModal}
+        id={currentDialog.id}
+      ></ChatConfigurationModal>
     </Flex>
   );
 };