Fix: Improve message input handling with Shift+Enter support (#5129)

### 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>
This commit is contained in:
liwenju0 2025-02-19 19:32:35 +08:00 committed by GitHub
parent c432ce6be5
commit a4f9aa2172
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

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