fix(desktop): ignore IME composition enter

apps/desktop/src/app/chat/composer/ime.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+
+import { isImeCompositionKeyEvent } from './ime'
+
+describe('isImeCompositionKeyEvent', () => {
+  it('treats Enter keydown during IME composition as composing so it does not submit', () => {
+    const event = {
+      key: 'Enter',
+      nativeEvent: { isComposing: true }
+    }
+
+    expect(isImeCompositionKeyEvent(event)).toBe(true)
+  })
+
+  it('treats macOS IME composition Enter with keyCode 229 as composing', () => {
+    const event = {
+      key: 'Enter',
+      nativeEvent: { isComposing: false, keyCode: 229 }
+    }
+
+    expect(isImeCompositionKeyEvent(event)).toBe(true)
+  })
+
+  it('does not treat normal Enter as composing', () => {
+    const event = {
+      key: 'Enter',
+      nativeEvent: { isComposing: false, keyCode: 13 }
+    }
+
+    expect(isImeCompositionKeyEvent(event)).toBe(false)
+  })
+})

apps/desktop/src/app/chat/composer/ime.ts

@@ -0,0 +1,12 @@
+interface ImeCompositionKeyEvent {
+  nativeEvent?: {
+    isComposing?: boolean
+    keyCode?: number
+  }
+}
+
+const IME_PROCESSING_KEY_CODE = 229
+
+export function isImeCompositionKeyEvent(event: ImeCompositionKeyEvent) {
+  return Boolean(event.nativeEvent?.isComposing || event.nativeEvent?.keyCode === IME_PROCESSING_KEY_CODE)
+}

apps/desktop/src/app/chat/composer/index.tsx

@@ -54,6 +54,7 @@ import { useAtCompletions } from './hooks/use-at-completions'
 import { useSlashCompletions } from './hooks/use-slash-completions'
 import { useVoiceConversation } from './hooks/use-voice-conversation'
 import { useVoiceRecorder } from './hooks/use-voice-recorder'
+import { isImeCompositionKeyEvent } from './ime'
 import { dragHasAttachments, droppedFileInlineRef, insertInlineRefsIntoEditor } from './inline-refs'
 import { QueuePanel } from './queue-panel'
 import {
@@ -545,6 +546,10 @@ export function ChatBar({
   }
 
   const handleEditorKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (isImeCompositionKeyEvent(event)) {
+      return
+    }
+
     if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'k') {
       event.preventDefault()
 
@@ -1024,8 +1029,8 @@ export function ChatBar({
     <div className={cn('relative', stacked ? 'w-full' : 'min-w-(--composer-input-inline-min-width) flex-1')}>
       <div
         aria-label="Message"
-        autoCorrect="off"
         autoCapitalize="off"
+        autoCorrect="off"
         className={cn(
           'min-h-(--composer-input-min-height) max-h-(--composer-input-max-height) overflow-y-auto bg-transparent pb-1 pr-1 pt-1 leading-normal text-foreground outline-none disabled:cursor-not-allowed',
           'empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground/60',