feat(MessageInput): add composition event handlers

ItzCrazyKns · Oct 30, 2024 · a169418 · a169418
1 parent b33e5fe
commit a169418
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/ui/components/MessageInput.tsx b/ui/components/MessageInput.tsx
@@ -16,6 +16,7 @@ const MessageInput = ({
   const [message, setMessage] = useState('');
   const [textareaRows, setTextareaRows] = useState(1);
   const [mode, setMode] = useState<'multi' | 'single'>('single');
+  const [isComposing, setIsComposing] = useState(false);
 
   useEffect(() => {
     if (textareaRows >= 2 && message && mode === 'single') {
@@ -58,7 +59,7 @@ const MessageInput = ({
         setMessage('');
       }}
       onKeyDown={(e) => {
-        if (e.key === 'Enter' && !e.shiftKey && !loading) {
+        if (e.key === 'Enter' && !e.shiftKey && !loading && !isComposing) {
           e.preventDefault();
           sendMessage(message);
           setMessage('');
@@ -74,6 +75,8 @@ const MessageInput = ({
         ref={inputRef}
         value={message}
         onChange={(e) => setMessage(e.target.value)}
+        onCompositionStart={() => setIsComposing(true)}
+        onCompositionEnd={() => setIsComposing(false)}
         onHeightChange={(height, props) => {
           setTextareaRows(Math.ceil(height / props.rowHeight));
         }}