diff --git a/web/src/components/message-input/index.tsx b/web/src/components/message-input/index.tsx
index 0780261af..751c1f4a7 100644
--- a/web/src/components/message-input/index.tsx
+++ b/web/src/components/message-input/index.tsx
@@ -30,12 +30,12 @@ import get from 'lodash/get';
 import { Paperclip } from 'lucide-react';
 import {
   ChangeEventHandler,
+  KeyboardEventHandler,
   memo,
   useCallback,
   useEffect,
   useRef,
   useState,
-  KeyboardEventHandler,
 } from 'react';
 import FileIcon from '../file-icon';
 import styles from './index.less';
@@ -64,7 +64,7 @@ interface IProps {
   sendDisabled: boolean;
   sendLoading: boolean;
   onPressEnter(documentIds: string[]): void;
-  onInputChange: ChangeEventHandler<HTMLInputElement>;
+  onInputChange: ChangeEventHandler<HTMLTextAreaElement>;
   conversationId: string;
   uploadMethod?: string;
   isShared?: boolean;
@@ -216,7 +216,9 @@ const MessageInput = ({
           placeholder={t('sendPlaceholder')}
           value={value}
           disabled={disabled}
-          className={classNames({ [styles.inputWrapper]: fileList.length === 0 })}
+          className={classNames({
+            [styles.inputWrapper]: fileList.length === 0,
+          })}
           onKeyDown={handleInputKeyDown}
           onChange={onInputChange}
           autoSize={{ minRows: 1, maxRows: 6 }}
diff --git a/web/src/hooks/logic-hooks.ts b/web/src/hooks/logic-hooks.ts
index edc2e89a0..2935db9bb 100644
--- a/web/src/hooks/logic-hooks.ts
+++ b/web/src/hooks/logic-hooks.ts
@@ -284,7 +284,7 @@ export const useScrollToBottom = (messages?: unknown) => {
 export const useHandleMessageInputChange = () => {
   const [value, setValue] = useState('');
 
-  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+  const handleInputChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
     const value = e.target.value;
     const nextValue = value.replaceAll('\\n', '\n').replaceAll('\\t', '\t');
     setValue(nextValue);
diff --git a/web/src/pages/chat/hooks.ts b/web/src/pages/chat/hooks.ts
index 13140c68c..cf09384db 100644
--- a/web/src/pages/chat/hooks.ts
+++ b/web/src/pages/chat/hooks.ts
@@ -341,7 +341,7 @@ export const useSelectNextMessages = () => {
 export const useHandleMessageInputChange = () => {
   const [value, setValue] = useState('');
 
-  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+  const handleInputChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
     const value = e.target.value;
     const nextValue = value.replaceAll('\\n', '\n').replaceAll('\\t', '\t');
     setValue(nextValue);
diff --git a/web/src/pages/flow/chat/box.tsx b/web/src/pages/flow/chat/box.tsx
index b7cb76071..e9ffba7a7 100644
--- a/web/src/pages/flow/chat/box.tsx
+++ b/web/src/pages/flow/chat/box.tsx
@@ -1,12 +1,12 @@
 import MessageItem from '@/components/message-item';
 import { MessageType } from '@/constants/chat';
-import { useTranslate } from '@/hooks/common-hooks';
 import { useGetFileIcon } from '@/pages/chat/hooks';
 import { buildMessageItemReference } from '@/pages/chat/utils';
-import { Button, Flex, Input, Spin } from 'antd';
+import { Flex, Spin } from 'antd';
 
 import { useSendNextMessage } from './hooks';
 
+import MessageInput from '@/components/message-input';
 import PdfDrawer from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { useFetchFlow } from '@/hooks/flow-hooks';
@@ -29,7 +29,6 @@ const FlowChatBox = () => {
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
   useGetFileIcon();
-  const { t } = useTranslate('chat');
   const { data: userInfo } = useFetchUserInfo();
   const { data: canvasInfo } = useFetchFlow();
 
@@ -67,21 +66,15 @@ const FlowChatBox = () => {
           </div>
           <div ref={ref} />
         </Flex>
-        <Input
-          size="large"
-          placeholder={t('sendPlaceholder')}
+        <MessageInput
+          showUploadIcon={false}
           value={value}
-          suffix={
-            <Button
-              type="primary"
-              onClick={handlePressEnter}
-              loading={sendLoading}
-            >
-              {t('send')}
-            </Button>
-          }
+          sendLoading={sendLoading}
+          disabled={false}
+          sendDisabled={sendLoading}
+          conversationId=""
           onPressEnter={handlePressEnter}
-          onChange={handleInputChange}
+          onInputChange={handleInputChange}
         />
       </Flex>
       <PdfDrawer
diff --git a/web/src/pages/flow/chat/drawer.tsx b/web/src/pages/flow/chat/drawer.tsx
index 190fda553..e86422957 100644
--- a/web/src/pages/flow/chat/drawer.tsx
+++ b/web/src/pages/flow/chat/drawer.tsx
@@ -16,7 +16,6 @@ const ChatDrawer = ({ visible, hideModal }: IModalProps<any>) => {
       getContainer={false}
       width={getDrawerWidth()}
       mask={false}
-      // zIndex={10000}
     >
       <FlowChatBox></FlowChatBox>
     </Drawer>