From a4f9aa2172bc4fed0f09e26d54ab850be19dd862 Mon Sep 17 00:00:00 2001
From: liwenju0 <like4hub@gmail.com>
Date: Wed, 19 Feb 2025 19:32:35 +0800
Subject: [PATCH] Fix: Improve message input handling with Shift+Enter support
 (#5129)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What problem does this PR solve?

just resolve issue： [Improve message input handling with Shift+Enter
support](https://github.com/infiniflow/ragflow/issues/5116)
### Type of change

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

---------

Co-authored-by: wenju.li <wenju.li@deepctr.cn>
---
 web/src/components/message-input/index.tsx | 85 ++++++++++++----------
 1 file changed, 47 insertions(+), 38 deletions(-)

diff --git a/web/src/components/message-input/index.tsx b/web/src/components/message-input/index.tsx
index a20147a50..0780261af 100644
--- a/web/src/components/message-input/index.tsx
+++ b/web/src/components/message-input/index.tsx
@@ -35,6 +35,7 @@ import {
   useEffect,
   useRef,
   useState,
+  KeyboardEventHandler,
 } from 'react';
 import FileIcon from '../file-icon';
 import styles from './index.less';
@@ -155,6 +156,13 @@ const MessageInput = ({
     setFileList([]);
   }, [fileList, onPressEnter, isUploadingFile]);
 
+  const handleInputKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
+    if (e.key === 'Enter' && !e.nativeEvent.shiftKey) {
+      e.preventDefault();
+      handlePressEnter();
+    }
+  };
+
   const handleRemove = useCallback(
     async (file: UploadFile) => {
       const ids = get(file, 'response.data', []);
@@ -202,45 +210,46 @@ const MessageInput = ({
 
   return (
     <Flex gap={20} vertical className={styles.messageInputWrapper}>
-      <Input
-        size="large"
-        placeholder={t('sendPlaceholder')}
-        value={value}
-        disabled={disabled}
-        className={classNames({ [styles.inputWrapper]: fileList.length === 0 })}
-        suffix={
-          <Space>
-            {showUploadIcon && (
-              <Upload
-                onPreview={handlePreview}
-                onChange={handleChange}
-                multiple={false}
-                onRemove={handleRemove}
-                showUploadList={false}
-                beforeUpload={() => {
-                  return false;
-                }}
-              >
-                <Button
-                  type={'text'}
-                  disabled={disabled}
-                  icon={<Paperclip></Paperclip>}
-                ></Button>
-              </Upload>
-            )}
-            <Button
-              type="primary"
-              onClick={handlePressEnter}
-              loading={sendLoading}
-              disabled={sendDisabled || isUploadingFile}
+      <Flex align="center" gap={8}>
+        <Input.TextArea
+          size="large"
+          placeholder={t('sendPlaceholder')}
+          value={value}
+          disabled={disabled}
+          className={classNames({ [styles.inputWrapper]: fileList.length === 0 })}
+          onKeyDown={handleInputKeyDown}
+          onChange={onInputChange}
+          autoSize={{ minRows: 1, maxRows: 6 }}
+        />
+        <Space>
+          {showUploadIcon && (
+            <Upload
+              onPreview={handlePreview}
+              onChange={handleChange}
+              multiple={false}
+              onRemove={handleRemove}
+              showUploadList={false}
+              beforeUpload={() => {
+                return false;
+              }}
             >
-              {t('send')}
-            </Button>
-          </Space>
-        }
-        onPressEnter={handlePressEnter}
-        onChange={onInputChange}
-      />
+              <Button
+                type={'text'}
+                disabled={disabled}
+                icon={<Paperclip />}
+              ></Button>
+            </Upload>
+          )}
+          <Button
+            type="primary"
+            onClick={handlePressEnter}
+            loading={sendLoading}
+            disabled={sendDisabled || isUploadingFile}
+          >
+            {t('send')}
+          </Button>
+        </Space>
+      </Flex>
 
       {fileList.length > 0 && (
         <List