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,13 +210,17 @@ const MessageInput = ({
return ( return (
<Flex gap={20} vertical className={styles.messageInputWrapper}> <Flex gap={20} vertical className={styles.messageInputWrapper}>
<Input <Flex align="center" gap={8}>
<Input.TextArea
size="large" size="large"
placeholder={t('sendPlaceholder')} placeholder={t('sendPlaceholder')}
value={value} value={value}
disabled={disabled} disabled={disabled}
className={classNames({ [styles.inputWrapper]: fileList.length === 0 })} className={classNames({ [styles.inputWrapper]: fileList.length === 0 })}
suffix={ onKeyDown={handleInputKeyDown}
onChange={onInputChange}
autoSize={{ minRows: 1, maxRows: 6 }}
/>
<Space> <Space>
{showUploadIcon && ( {showUploadIcon && (
<Upload <Upload
@ -224,7 +236,7 @@ const MessageInput = ({
<Button <Button
type={'text'} type={'text'}
disabled={disabled} disabled={disabled}
icon={<Paperclip></Paperclip>} icon={<Paperclip />}
></Button> ></Button>
</Upload> </Upload>
)} )}
@ -237,10 +249,7 @@ const MessageInput = ({
{t('send')} {t('send')}
</Button> </Button>
</Space> </Space>
} </Flex>
onPressEnter={handlePressEnter}
onChange={onInputChange}
/>
{fileList.length > 0 && ( {fileList.length > 0 && (
<List <List