jamesf/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(MessageInput): add composition event handlers

Browse source
This commit is contained in:
mj 2024-10-30 16:37:02 +09:00
parent b33e5fefba
commit a16941858c
1 changed files with 4 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/components/MessageInput.tsx
View file

@ -16,6 +16,7 @@ const MessageInput = ({
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
const [textareaRows, setTextareaRows] = useState(1); const [textareaRows, setTextareaRows] = useState(1);
const [mode, setMode] = useState<'multi' | 'single'>('single'); const [mode, setMode] = useState<'multi' | 'single'>('single');
const [isComposing, setIsComposing] = useState(false);
useEffect(() => { useEffect(() => {
if (textareaRows >= 2 && message && mode === 'single') { if (textareaRows >= 2 && message && mode === 'single') {
@ -58,7 +59,7 @@ const MessageInput = ({
setMessage(''); setMessage('');
}} }}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey && !loading) { if (e.key === 'Enter' && !e.shiftKey && !loading && !isComposing) {
e.preventDefault(); e.preventDefault();
sendMessage(message); sendMessage(message);
setMessage(''); setMessage('');
@ -74,6 +75,8 @@ const MessageInput = ({
ref={inputRef} ref={inputRef}
value={message} value={message}
onChange={(e) => setMessage(e.target.value)} onChange={(e) => setMessage(e.target.value)}
onCompositionStart={() => setIsComposing(true)}
onCompositionEnd={() => setIsComposing(false)}
onHeightChange={(height, props) => { onHeightChange={(height, props) => {
setTextareaRows(Math.ceil(height / props.rowHeight)); setTextareaRows(Math.ceil(height / props.rowHeight));
}} }}