mirror of
https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git
synced 2025-08-14 01:35:59 +08:00
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:
parent
c432ce6be5
commit
a4f9aa2172
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user