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"