feat: Supports chatting with files/images #1880 (#1943)

### What problem does this PR solve?

feat: Supports chatting with files/images #1880

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

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

@@ -1,8 +1,7 @@
 import MessageItem from '@/components/message-item';
 import DocumentPreviewer from '@/components/pdf-previewer';
 import { MessageType } from '@/constants/chat';
-import { useTranslate } from '@/hooks/common-hooks';
-import { Button, Drawer, Flex, Input, Spin } from 'antd';
+import { Drawer, Flex, Spin } from 'antd';
 import {
   useClickDrawer,
   useFetchConversationOnMount,
@@ -14,6 +13,7 @@ import {
 } from '../hooks';
 import { buildMessageItemReference } from '../utils';
 
+import MessageInput from '@/components/message-input';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import styles from './index.less';
 
@@ -42,7 +42,6 @@ const ChatContainer = () => {
   const sendDisabled = useSendButtonDisabled(value);
   useGetFileIcon();
   const loading = useSelectConversationLoading();
-  const { t } = useTranslate('chat');
   const { data: userInfo } = useFetchUserInfo();
 
   return (
@@ -72,7 +71,16 @@ const ChatContainer = () => {
           </div>
           <div ref={ref} />
         </Flex>
-        <Input
+        <MessageInput
+          disabled={disabled}
+          sendDisabled={sendDisabled}
+          sendLoading={sendLoading}
+          value={value}
+          onInputChange={handleInputChange}
+          onPressEnter={handlePressEnter}
+          conversationId={conversation.id}
+        ></MessageInput>
+        {/* <Input
           size="large"
           placeholder={t('sendPlaceholder')}
           value={value}
@@ -89,7 +97,7 @@ const ChatContainer = () => {
           }
           onPressEnter={handlePressEnter}
           onChange={handleInputChange}
-        />
+        /> */}
       </Flex>
       <Drawer
         title="Document Previewer"

web/src/pages/chat/hooks.ts

@@ -547,7 +547,7 @@ export const useSendMessage = (
   const { send, answer, done, setDone } = useSendMessageWithSse();
 
   const sendMessage = useCallback(
-    async (message: string, id?: string) => {
+    async (message: string, documentIds: string[], id?: string) => {
       const res = await send({
         conversation_id: id ?? conversationId,
         messages: [
@@ -555,6 +555,7 @@ export const useSendMessage = (
           {
             role: MessageType.User,
             content: message,
+            doc_ids: documentIds,
           },
         ],
       });
@@ -586,14 +587,14 @@ export const useSendMessage = (
   );
 
   const handleSendMessage = useCallback(
-    async (message: string) => {
+    async (message: string, documentIds: string[]) => {
       if (conversationId !== '') {
-        sendMessage(message);
+        return sendMessage(message, documentIds);
       } else {
         const data = await setConversation(message);
         if (data.retcode === 0) {
           const id = data.data.id;
-          sendMessage(message, id);
+          return sendMessage(message, documentIds, id);
         }
       }
     },
@@ -614,15 +615,19 @@ export const useSendMessage = (
     }
   }, [setDone, conversationId]);
 
-  const handlePressEnter = useCallback(() => {
-    if (trim(value) === '') return;
-
-    if (done) {
-      setValue('');
-      handleSendMessage(value.trim());
-    }
-    addNewestConversation(value);
-  }, [addNewestConversation, handleSendMessage, done, setValue, value]);
+  const handlePressEnter = useCallback(
+    async (documentIds: string[]) => {
+      if (trim(value) === '') return;
+      let ret;
+      if (done) {
+        setValue('');
+        ret = await handleSendMessage(value.trim(), documentIds);
+      }
+      addNewestConversation(value);
+      return ret;
+    },
+    [addNewestConversation, handleSendMessage, done, setValue, value],
+  );
 
   return {
     handlePressEnter,