mirror of
https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git
synced 2025-08-14 07:05:54 +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,
|
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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user