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/chat-container/index.less

@@ -1,3 +1,18 @@
 .chatContainer {
   padding: 0 24px 24px;
 }
+
+.messageItem {
+  .messageItemContent {
+    display: inline-block;
+    width: 300px;
+  }
+}
+
+.messageItemLeft {
+  text-align: left;
+}
+
+.messageItemRight {
+  text-align: right;
+}

web/src/pages/chat/chat-container/index.tsx

@@ -1,13 +1,41 @@
-import { Button, Flex, Input } from 'antd';
+import { Button, Flex, Input, Typography } from 'antd';
 import { ChangeEventHandler, useState } from 'react';
 
+import { Message } from '@/interfaces/database/chat';
+import classNames from 'classnames';
+import { useFetchConversation, useSendMessage } from '../hooks';
+
+import { MessageType } from '@/constants/chat';
+import { IClientConversation } from '../interface';
 import styles from './index.less';
 
+const { Paragraph } = Typography;
+
+const MessageItem = ({ item }: { item: Message }) => {
+  return (
+    <div
+      className={classNames(styles.messageItem, {
+        [styles.messageItemLeft]: item.role === MessageType.Assistant,
+        [styles.messageItemRight]: item.role === MessageType.User,
+      })}
+    >
+      <span className={styles.messageItemContent}>
+        <Paragraph ellipsis={{ tooltip: item.content, rows: 3 }}>
+          {item.content}
+        </Paragraph>
+      </span>
+    </div>
+  );
+};
+
 const ChatContainer = () => {
   const [value, setValue] = useState('');
+  const conversation: IClientConversation = useFetchConversation();
+  const { sendMessage } = useSendMessage();
 
   const handlePressEnter = () => {
     console.info(value);
+    sendMessage(value);
   };
 
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
@@ -16,7 +44,11 @@ const ChatContainer = () => {
 
   return (
     <Flex flex={1} className={styles.chatContainer} vertical>
-      <Flex flex={1}>xx</Flex>
+      <Flex flex={1} vertical>
+        {conversation?.message?.map((message) => (
+          <MessageItem key={message.id} item={message}></MessageItem>
+        ))}
+      </Flex>
       <Input
         size="large"
         placeholder="Message Resume Assistant..."