fix: use onCompositionStart and onCompositionEnd to aviod enter submit when using input method.

This commit is contained in:
Wentao Lyu 2023-03-13 22:53:29 +08:00
parent 953f846958
commit 2afbc5883f

View file

@ -17,6 +17,7 @@ import manualSWR from '~/utils/fetchers';
export default function TextChat({ messages }) { export default function TextChat({ messages }) {
const [errorMessage, setErrorMessage] = useState(''); const [errorMessage, setErrorMessage] = useState('');
const inputRef = useRef(null) const inputRef = useRef(null)
const isComposing = useRef(false);
const dispatch = useDispatch(); const dispatch = useDispatch();
const convo = useSelector((state) => state.convo); const convo = useSelector((state) => state.convo);
const { initial } = useSelector((state) => state.models); const { initial } = useSelector((state) => state.models);
@ -278,6 +279,11 @@ export default function TextChat({ messages }) {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
} }
if (e.key === 'Enter' && !e.shiftKey) {
if (!isComposing.current)
submitMessage();
}
}; };
const handleKeyUp = (e) => { const handleKeyUp = (e) => {
@ -288,12 +294,16 @@ export default function TextChat({ messages }) {
if (isSubmitting) { if (isSubmitting) {
return; return;
} }
if (e.key === 'Enter' && !e.shiftKey) {
submitMessage();
}
}; };
const handleCompositionStart = (e) => {
isComposing.current = true
}
const handleCompositionEnd = (e) => {
isComposing.current = false;
}
const changeHandler = (e) => { const changeHandler = (e) => {
const { value } = e.target; const { value } = e.target;
if (isSubmitting && (value === '' || value === '\n')) { if (isSubmitting && (value === '' || value === '\n')) {
@ -337,6 +347,8 @@ export default function TextChat({ messages }) {
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onChange={changeHandler} onChange={changeHandler}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
placeholder={disabled ? 'Choose another model or customize GPT again' : ''} placeholder={disabled ? 'Choose another model or customize GPT again' : ''}
disabled={disabled} disabled={disabled}
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8" className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-9 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"