Prevent IME composition from submitting chat

packages/workshop-frontend/src/ChatInterface.tsx

@@ -61,6 +61,7 @@ import {
   getStoredSelectedModel,
   persistSelectedModel,
 } from "./modelSelection";
+import { isImeComposing } from "./components/chat/composer-keyboard";
 import {
   Overseer,
   GatekeeperClient,
@@ -3368,6 +3369,11 @@ export const ChatInput = ({
                 }
               }}
               onKeyDown={(e) => {
+                // Enter confirms the highlighted candidate in Chinese/Japanese/Korean IMEs. Let
+                // the browser finish that composition instead of selecting a slash command or
+                // submitting the message. keyCode 229 covers older browsers/WebViews that do not
+                // reliably expose KeyboardEvent.isComposing.
+                if (isImeComposing(e.nativeEvent)) return;
                 if (slashCommandPicker.open && e.key === "Escape") {
                   e.preventDefault();
                   slashCommandPicker.dismiss();

packages/workshop-frontend/src/components/chat/composer-keyboard.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { isImeComposing } from "./composer-keyboard";
+
+describe("composer keyboard handling", () => {
+  it("recognizes a standards-based IME composition event", () => {
+    expect(isImeComposing({ isComposing: true, keyCode: 13 })).toBe(true);
+  });
+
+  it("recognizes the legacy IME process key used by older browsers", () => {
+    expect(isImeComposing({ isComposing: false, keyCode: 229 })).toBe(true);
+  });
+
+  it("leaves an ordinary Enter key available for message submission", () => {
+    expect(isImeComposing({ isComposing: false, keyCode: 13 })).toBe(false);
+  });
+});

packages/workshop-frontend/src/components/chat/composer-keyboard.ts

@@ -0,0 +1,8 @@
+/**
+ * IMEs use Enter and arrow keys while composing candidate text. React exposes the standard
+ * `isComposing` flag on the native keyboard event; keyCode 229 covers older browsers/WebViews
+ * that only report the legacy "process key" value.
+ */
+export function isImeComposing(event: Pick<KeyboardEvent, "isComposing" | "keyCode">): boolean {
+  return event.isComposing || event.keyCode === 229;
+}