diff --git a/web/app/components/base/chat/chat/chat-input-area/index.tsx b/web/app/components/base/chat/chat/chat-input-area/index.tsx
index cbfa3168e9..8eaf2d4ebc 100644
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -83,6 +83,15 @@ const ChatInputArea = ({
   const historyRef = useRef([''])
   const [currentIndex, setCurrentIndex] = useState(-1)
   const isComposingRef = useRef(false)
+
+  const handleQueryChange = useCallback(
+    (value: string) => {
+      setQuery(value)
+      setTimeout(handleTextareaResize, 0)
+    },
+    [handleTextareaResize],
+  )
+
   const handleSend = () => {
     if (isResponding) {
       notify({ type: 'info', message: t('appDebug.errorMessage.waitForResponse') })
@@ -101,7 +110,7 @@ const ChatInputArea = ({
       }
       if (checkInputsForm(inputs, inputsForm)) {
         onSend(query, files)
-        setQuery('')
+        handleQueryChange('')
         setFiles([])
       }
     }
@@ -131,19 +140,19 @@ const ChatInputArea = ({
       // When the cmd + up key is pressed, output the previous element
       if (currentIndex > 0) {
         setCurrentIndex(currentIndex - 1)
-        setQuery(historyRef.current[currentIndex - 1])
+        handleQueryChange(historyRef.current[currentIndex - 1])
       }
     }
     else if (e.key === 'ArrowDown' && !e.shiftKey && !e.nativeEvent.isComposing && e.metaKey) {
       // When the cmd + down key is pressed, output the next element
       if (currentIndex < historyRef.current.length - 1) {
         setCurrentIndex(currentIndex + 1)
-        setQuery(historyRef.current[currentIndex + 1])
+        handleQueryChange(historyRef.current[currentIndex + 1])
       }
       else if (currentIndex === historyRef.current.length - 1) {
         // If it is the last element, clear the input box
         setCurrentIndex(historyRef.current.length)
-        setQuery('')
+        handleQueryChange('')
       }
     }
   }
@@ -197,12 +206,8 @@ const ChatInputArea = ({
                 placeholder={t('common.chat.inputPlaceholder', { botName }) || ''}
                 autoFocus
                 minRows={1}
-                onResize={handleTextareaResize}
                 value={query}
-                onChange={(e) => {
-                  setQuery(e.target.value)
-                  setTimeout(handleTextareaResize, 0)
-                }}
+                onChange={e => handleQueryChange(e.target.value)}
                 onKeyDown={handleKeyDown}
                 onCompositionStart={handleCompositionStart}
                 onCompositionEnd={handleCompositionEnd}
@@ -221,7 +226,7 @@ const ChatInputArea = ({
             showVoiceInput && (
               <VoiceInput
                 onCancel={() => setShowVoiceInput(false)}
-                onConverted={text => setQuery(text)}
+                onConverted={text => handleQueryChange(text)}
               />
             )
           }
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
index 122dfcb6fb..014ca6651f 100644
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -1,3 +1,4 @@
+import type { FC, Ref } from 'react'
 import { memo } from 'react'
 import {
   RiMicLine,
@@ -18,20 +19,17 @@ type OperationProps = {
   speechToTextConfig?: EnableType
   onShowVoiceInput?: () => void
   onSend: () => void
-  theme?: Theme | null
+  theme?: Theme | null,
+  ref?: Ref<HTMLDivElement>;
 }
-const Operation = (
-  {
-    ref,
-    fileConfig,
-    speechToTextConfig,
-    onShowVoiceInput,
-    onSend,
-    theme,
-  }: OperationProps & {
-    ref: React.RefObject<HTMLDivElement>;
-  },
-) => {
+const Operation: FC<OperationProps> = ({
+  ref,
+  fileConfig,
+  speechToTextConfig,
+  onShowVoiceInput,
+  onSend,
+  theme,
+}) => {
   return (
     <div
       className={cn(