@astryxdesign/core 0.1.8 → 0.1.9

package/src/Chat/ChatComposer.test.tsx

@@ -0,0 +1,115 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect, vi} from 'vitest';
+import {render, fireEvent} from '@testing-library/react';
+import {useEffect, useRef} from 'react';
+import {ChatComposer} from './ChatComposer';
+import {useChatComposerContext} from './ChatContext';
+
+// The composer body — the elevated surface — is the div that wraps the input
+// area (styles.body). A custom `input` slot renders inside the inputArea div,
+// so the body is two ancestors up from the slot marker. Walking from a known
+// marker keeps this independent of StyleX's generated class names.
+function renderBodyClass(elevation?: 'none' | 'low'): string {
+  const {container} = render(
+    <ChatComposer
+      onSubmit={() => {}}
+      elevation={elevation}
+      input={<div data-testid="composer-input-marker" />}
+    />,
+  );
+  const marker = container.querySelector(
+    '[data-testid="composer-input-marker"]',
+  )!;
+  const inputArea = marker.parentElement!;
+  const body = inputArea.parentElement!;
+  return body.className;
+}
+
+describe('ChatComposer elevation', () => {
+  it('applies a distinct body class for each supported level', () => {
+    expect(renderBodyClass('none')).not.toBe(renderBodyClass('low'));
+  });
+
+  it("defaults to 'low' (preserves the raised look)", () => {
+    expect(renderBodyClass(undefined)).toBe(renderBodyClass('low'));
+  });
+});
+
+// A custom input that participates in the composer's composition contract:
+// reads value/submit from the exported context, and registers a focus control
+// so the shell can drive body-click-to-focus without knowing its DOM shape.
+function CustomContextInput({focusSpy}: {focusSpy: () => void}) {
+  const ctx = useChatComposerContext();
+  const ref = useRef<HTMLInputElement>(null);
+  const controlRef = ctx?.inputControlRef;
+  useEffect(() => {
+    if (!controlRef) {
+      return;
+    }
+    controlRef.current = {
+      focus: () => {
+        focusSpy();
+        ref.current?.focus();
+      },
+    };
+    return () => {
+      controlRef.current = null;
+    };
+  }, [controlRef, focusSpy]);
+  return (
+    <input
+      ref={ref}
+      data-testid="custom-input"
+      value={ctx?.value ?? ''}
+      placeholder={ctx?.placeholder}
+      disabled={ctx?.isDisabled}
+      onChange={e => ctx?.onChange(e.target.value)}
+    />
+  );
+}
+
+describe('ChatComposer input composition contract', () => {
+  it('exposes value/onChange/placeholder/isDisabled to a custom input via context', () => {
+    const {getByTestId} = render(
+      <ChatComposer
+        onSubmit={() => {}}
+        value="hello"
+        placeholder="Say something"
+        isDisabled
+        input={<CustomContextInput focusSpy={() => {}} />}
+      />,
+    );
+    const input = getByTestId('custom-input') as HTMLInputElement;
+    expect(input.value).toBe('hello');
+    expect(input.placeholder).toBe('Say something');
+    expect(input.disabled).toBe(true);
+  });
+
+  it('focuses a custom input via its registered control on body click', () => {
+    const focusSpy = vi.fn();
+    const {getByTestId} = render(
+      <ChatComposer
+        onSubmit={() => {}}
+        input={<CustomContextInput focusSpy={focusSpy} />}
+      />,
+    );
+    const marker = getByTestId('custom-input');
+    const body = marker.parentElement!.parentElement!;
+    fireEvent.click(body);
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
+  it('falls back to focusing a bare textarea when no control is registered', () => {
+    const {getByTestId} = render(
+      <ChatComposer
+        onSubmit={() => {}}
+        input={<textarea data-testid="bare-textarea" />}
+      />,
+    );
+    const textarea = getByTestId('bare-textarea') as HTMLTextAreaElement;
+    const body = textarea.parentElement!.parentElement!;
+    fireEvent.click(body);
+    expect(document.activeElement).toBe(textarea);
+  });
+});

package/src/Chat/ChatComposer.tsx

@@ -40,6 +40,7 @@ import {
   shadowVars,
   durationVars,
   easeVars,
+  borderVars,
   typeScaleVars,
   typographyVars,
 } from '../theme/tokens.stylex';
@@ -47,6 +48,7 @@ import {mergeProps} from '../utils';
 import {Icon} from '../Icon';
 import {ChatComposerInput} from './ChatComposerInput';
 import {ChatComposerContext} from './ChatContext';
+import type {ChatComposerInputControl} from './ChatContext';
 import {ChatSendButton} from './ChatSendButton';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
@@ -83,6 +85,14 @@ export interface ChatComposerProps extends Omit<
   isDisabled?: boolean;
   /** Density variant */
   density?: ChatComposerDensity;
+  /**
+   * Resting elevation of the composer body. `low` (the default) keeps today's
+   * raised look — low at rest, bumping to med on hover / focus. `none` flattens
+   * it and draws a border with the same rest / hover / focus treatment as a
+   * text input (emphasized border → accent on focus, with matching inset rings).
+   * @default 'low'
+   */
+  elevation?: 'none' | 'low';
 
   // --- Slot props ---
 
@@ -143,14 +153,7 @@ const styles = stylex.create({
     borderRadius: 'var(--_chat-composer-radius)',
     backgroundColor: colorVars['--color-background-popover'],
     cursor: 'text',
-    boxShadow: {
-      default: shadowVars['--shadow-low'],
-      ':hover': {'@media (hover: hover)': shadowVars['--shadow-med']},
-    },
-    transition: `box-shadow ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}`,
-    ':focus-within': {
-      boxShadow: shadowVars['--shadow-med'],
-    },
+    transition: `box-shadow ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}, border-color ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}`,
   },
   header: {
     display: 'flex',
@@ -247,11 +250,56 @@ const styles = stylex.create({
     color: colorVars['--color-text-yellow'],
   },
   compact: {
-    padding: spacingVars['--spacing-2'],
+    // Override the padding var (not the `padding` property) so both the base
+    // body padding and the border-inset calc in elevationStyles.none pick up
+    // the compact value. Scoped to the body element, so the status bar (which
+    // reads the var from root) keeps its own padding.
+    '--_chat-composer-padding': spacingVars['--spacing-2'],
     gap: spacingVars['--spacing-1'],
   },
 });
 
+// Resting elevation for the composer body, narrowed to two steps.
+// - `low` (default) preserves today's look: low at rest, bumping to med on
+//   hover / focus-within (a CSS-only interaction state the component owns).
+// - `none` is flat; depth comes from a border + inset rings instead. The
+//   border is drawn *inside* the padding — its width is subtracted from every
+//   side (like Card) so total inset (border + padding) equals the elevated
+//   case and content geometry is unchanged. Border color, hover, and focus
+//   states mirror TextInput (shared `inputWrapperStyles.base` treatment):
+//   emphasized border at rest → accent on focus-within, with the same inset
+//   shadow rings on hover and focus.
+const elevationStyles = stylex.create({
+  low: {
+    boxShadow: {
+      default: shadowVars['--shadow-low'],
+      ':hover': {'@media (hover: hover)': shadowVars['--shadow-med']},
+    },
+    ':focus-within': {
+      boxShadow: shadowVars['--shadow-med'],
+    },
+  },
+  none: {
+    borderWidth: borderVars['--border-width'],
+    borderStyle: 'solid',
+    borderColor: {
+      default: colorVars['--color-border-emphasized'],
+      ':focus-within': colorVars['--color-accent'],
+    },
+    // Draw the border *inside* the padding — subtract its width from the body
+    // padding (like Card's withBorder) so total inset (border + padding) equals
+    // the elevated case and content geometry is unchanged.
+    padding: `calc(var(--_chat-composer-padding) - ${borderVars['--border-width']})`,
+    boxShadow: {
+      default: 'none',
+      ':hover:not(:focus-within)': {
+        '@media (hover: hover)': `inset 0px 0px 0px 2px color-mix(in srgb, ${colorVars['--color-border-emphasized']} 30%, transparent)`,
+      },
+      ':focus-within': `inset 0px 0px 0px 2px ${colorVars['--color-accent-muted']}`,
+    },
+  },
+});
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -280,6 +328,7 @@ export function ChatComposer(props: ChatComposerProps) {
     placeholder: placeholderFromProps,
     isDisabled = false,
     density = 'balanced',
+    elevation = 'low',
     drawer,
     headerActions,
     headerContext,
@@ -325,6 +374,11 @@ export function ChatComposer(props: ChatComposerProps) {
 
   const bodyRef = useRef<HTMLDivElement>(null);
 
+  // Input slot registers its focus (and future) control here so the shell can
+  // drive it without knowing its DOM shape. Stable ref — safe in the memoized
+  // context value.
+  const inputControlRef = useRef<ChatComposerInputControl | null>(null);
+
   const handleBodyClick = useCallback((e: MouseEvent<HTMLDivElement>) => {
     // Focus the input when clicking empty space in the body.
     // Skip if the click target is a button, link, or interactive element.
@@ -336,6 +390,14 @@ export function ChatComposer(props: ChatComposerProps) {
     ) {
       return;
     }
+    // Prefer the input's registered control (works for any input shape,
+    // including editors whose focusable node isn't a bare
+    // contenteditable/textarea). Fall back to a DOM query so uninstrumented
+    // custom inputs still get click-to-focus.
+    if (inputControlRef.current) {
+      inputControlRef.current.focus();
+      return;
+    }
     const editable = bodyRef.current?.querySelector<HTMLElement>(
       '[contenteditable="true"], textarea',
     );
@@ -370,6 +432,7 @@ export function ChatComposer(props: ChatComposerProps) {
       isStopShown,
       canSend,
       onStop,
+      inputControlRef,
     }),
     [
       currentValue,
@@ -402,6 +465,7 @@ export function ChatComposer(props: ChatComposerProps) {
           onClick={handleBodyClick}
           {...stylex.props(
             styles.body,
+            elevationStyles[elevation],
             density === 'compact' && styles.compact,
             xstyle,
           )}>

package/src/Chat/ChatComposerDrawer.test.tsx

@@ -0,0 +1,61 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
+import {ChatComposerDrawer} from './ChatComposerDrawer';
+
+describe('ChatComposerDrawer', () => {
+  it('links the toggle to the drawer content via aria-controls', () => {
+    render(
+      <ChatComposerDrawer count={2} label="Attachments">
+        <span>Drawer content</span>
+      </ChatComposerDrawer>,
+    );
+
+    const toggle = screen.getByRole('button', {name: /Attachments/});
+    const controlsId = toggle.getAttribute('aria-controls');
+    // aria-controls must be present and point at the real content region.
+    expect(controlsId).toBeTruthy();
+    const region = document.getElementById(controlsId as string);
+    expect(region).not.toBeNull();
+    expect(region).toContainElement(screen.getByText('Drawer content'));
+  });
+
+  it('keeps aria-controls resolvable while collapsed (content stays mounted)', () => {
+    render(
+      <ChatComposerDrawer count={2} label="Attachments" defaultIsCollapsed>
+        <span>Drawer content</span>
+      </ChatComposerDrawer>,
+    );
+
+    const toggle = screen.getByRole('button', {name: /Attachments/});
+    const controlsId = toggle.getAttribute('aria-controls');
+    expect(controlsId).toBeTruthy();
+    const region = document.getElementById(controlsId as string);
+    expect(region).not.toBeNull();
+    expect(region).toContainElement(screen.getByText('Drawer content'));
+  });
+
+  it('toggles aria-expanded when the toggle is activated', () => {
+    render(
+      <ChatComposerDrawer count={2} label="Attachments">
+        <span>Drawer content</span>
+      </ChatComposerDrawer>,
+    );
+
+    const toggle = screen.getByRole('button', {name: /Attachments/});
+    expect(toggle).toHaveAttribute('aria-expanded', 'true');
+
+    fireEvent.click(toggle);
+    expect(screen.getByRole('button', {name: /Attachments/})).toHaveAttribute(
+      'aria-expanded',
+      'false',
+    );
+
+    fireEvent.click(screen.getByRole('button', {name: /Attachments/}));
+    expect(screen.getByRole('button', {name: /Attachments/})).toHaveAttribute(
+      'aria-expanded',
+      'true',
+    );
+  });
+});

package/src/Chat/ChatComposerDrawer.tsx

@@ -9,13 +9,15 @@
  * @position Collapsible drawer panel for ChatComposer.
  *   Supports expanded (full content) and collapsed (count + label) states
  *   with fade animation and grid-template-rows height transition.
+ *   The collapse toggle exposes aria-expanded + aria-controls linking it to
+ *   the content region (disclosure pattern).
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /packages/cli/templates/blocks/components/ChatComposerDrawer/ (block examples)
  */
 
-import {useState, type ReactNode} from 'react';
+import {useId, useState, type ReactNode} from 'react';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import * as stylex from '@stylexjs/stylex';
 import {
@@ -240,6 +242,12 @@ export function ChatComposerDrawer({
 
   const canCollapse = count != null;
 
+  // Links the toggle to the region it shows/hides so assistive tech can move
+  // from the button to its controlled content (disclosure pattern). The
+  // content stays mounted while collapsed (hidden via the grid-row collapse),
+  // so the reference always resolves.
+  const contentId = useId();
+
   const toggle = () => {
     const next = !isCollapsed;
     if (!isControlled) {
@@ -271,6 +279,7 @@ export function ChatComposerDrawer({
           role="button"
           tabIndex={0}
           aria-expanded={!isCollapsed}
+          aria-controls={contentId}
           aria-label={
             isCollapsed
               ? t('@astryx.chatComposerDrawer.expand', {label})
@@ -301,6 +310,7 @@ export function ChatComposerDrawer({
       )}
 
       <div
+        id={contentId}
         {...stylex.props(
           styles.contentGrid,
           canCollapse && isCollapsed && styles.contentGridCollapsed,

package/src/Chat/ChatComposerInput.doc.mjs

@@ -80,6 +80,11 @@ export const docs = {
       type: '(value: string) => void',
       description: 'Called when the user presses Enter without Shift. The serialized value includes token placeholders.',
     },
+    {
+      name: 'onKeyDown',
+      type: '(event) => void',
+      description: 'Key-down handler invoked before the built-in Enter/history behavior (after any open trigger menu). The seam for platform-specific keys: call event.preventDefault() to suppress the default submit (e.g. newline on a touch keyboard), or act on the event yourself to add behavior (e.g. submit on Cmd/Ctrl+Enter). IME composition is always respected — Enter never submits mid-composition.',
+    },
   ],
 };
 
@@ -102,6 +107,7 @@ export const docsZh = {
     onPaste: '粘贴文本时调用。用于拦截或转换粘贴内容。',
     onFiles: '粘贴或拖放文件到输入时调用。用于处理附件。',
     onSubmit: '用户不按 Shift 按 Enter 时调用。序列化值包含标记占位符。',
+    onKeyDown: '在内置 Enter/历史处理之前（在打开的触发菜单之后）调用的按键处理器。平台特定按键的接缝：调用 event.preventDefault() 可抑制默认提交（例如触控键盘上插入换行），或自行处理事件以添加行为（例如 Cmd/Ctrl+Enter 提交）。始终尊重输入法组字状态——组字过程中 Enter 永不提交。',
   },
 };
 
@@ -124,5 +130,6 @@ export const docsDense = {
     onPaste: 'paste handler; intercept/transform pasted content',
     onFiles: 'file paste/drop handler; use for attachments',
     onSubmit: 'Enter w/o Shift handler; serialized value includes token placeholders',
+    onKeyDown: 'keydown handler before built-in Enter/history (after trigger menu); preventDefault() to suppress default submit (touch newline) or act on event to add behavior (Cmd/Ctrl+Enter). IME composition always respected',
   },
 };

package/src/Chat/ChatComposerInput.test.tsx

@@ -155,6 +155,109 @@ describe('ChatComposerInput', () => {
     });
   });
 
+  describe('composer focus control', () => {
+    it('registers a focus control so a body click focuses the input', () => {
+      render(
+        <ChatComposer onSubmit={() => {}} input={<ChatComposerInput />} />,
+      );
+      const editable = screen.getByRole('textbox');
+      // Walk to the composer body: editable → input root → inputArea → body.
+      const inputRoot = editable.parentElement!;
+      const inputArea = inputRoot.parentElement!;
+      const body = inputArea.parentElement!;
+      // Click empty space in the body → shell drives the registered control.
+      fireEvent.click(body);
+      expect(document.activeElement).toBe(editable);
+    });
+  });
+
+  describe('Enter submit behavior', () => {
+    it('does not submit on Enter while IME composition is in progress', () => {
+      const onSubmit = vi.fn();
+      render(<ChatComposerInput onSubmit={onSubmit} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'こんにちは';
+      fireEvent.input(textbox);
+      // isComposing is surfaced on the native event during IME composition.
+      fireEvent.keyDown(textbox, {key: 'Enter', isComposing: true});
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('does not submit on Enter for the legacy keyCode 229 composing signal', () => {
+      const onSubmit = vi.fn();
+      render(<ChatComposerInput onSubmit={onSubmit} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'ㅎ';
+      fireEvent.input(textbox);
+      fireEvent.keyDown(textbox, {key: 'Enter', keyCode: 229});
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('lets onKeyDown suppress the default submit via preventDefault (touch-newline recipe)', () => {
+      // The documented "insert a newline instead of sending" pattern: a
+      // consumer preventDefaults Enter (e.g. on a coarse pointer).
+      const onSubmit = vi.fn();
+      const onKeyDown = vi.fn(e => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+        }
+      });
+      render(<ChatComposerInput onSubmit={onSubmit} onKeyDown={onKeyDown} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'hello';
+      fireEvent.input(textbox);
+      fireEvent.keyDown(textbox, {key: 'Enter'});
+      expect(onKeyDown).toHaveBeenCalled();
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('lets onKeyDown add behavior (Cmd/Ctrl+Enter submit) without preventDefault', () => {
+      // Adding a submit shortcut is just handling the event yourself; the
+      // built-in Enter handling still runs for the plain-Enter case.
+      const onSubmit = vi.fn();
+      const handle = vi.fn();
+      const onKeyDown = vi.fn(e => {
+        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+          handle();
+        }
+      });
+      render(<ChatComposerInput onSubmit={onSubmit} onKeyDown={onKeyDown} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'hello';
+      fireEvent.input(textbox);
+      fireEvent.keyDown(textbox, {key: 'Enter', metaKey: true});
+      expect(handle).toHaveBeenCalled();
+      // Consumer did not preventDefault, so the built-in submit also fires.
+      expect(onSubmit).toHaveBeenCalledWith('hello');
+    });
+
+    it('calls onKeyDown before submit and lets preventDefault take over', () => {
+      const onSubmit = vi.fn();
+      const onKeyDown = vi.fn(e => {
+        e.preventDefault();
+      });
+      render(<ChatComposerInput onSubmit={onSubmit} onKeyDown={onKeyDown} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'hello';
+      fireEvent.input(textbox);
+      fireEvent.keyDown(textbox, {key: 'Enter'});
+      expect(onKeyDown).toHaveBeenCalled();
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('calls onKeyDown but still submits when the consumer does not preventDefault', () => {
+      const onSubmit = vi.fn();
+      const onKeyDown = vi.fn();
+      render(<ChatComposerInput onSubmit={onSubmit} onKeyDown={onKeyDown} />);
+      const textbox = screen.getByRole('textbox');
+      textbox.textContent = 'hello';
+      fireEvent.input(textbox);
+      fireEvent.keyDown(textbox, {key: 'Enter'});
+      expect(onKeyDown).toHaveBeenCalled();
+      expect(onSubmit).toHaveBeenCalledWith('hello');
+    });
+  });
+
   // Controlled-value sync used to overwrite `textContent` on every
   // distinct render, which (a) collapsed the caret to offset 0
   // (visible after a slash-command pick like

package/src/Chat/ChatComposerInput.tsx

@@ -11,8 +11,10 @@
  *
  * ContentEditable-based rich input for the chat composer.
  * Supports trigger menus (@ mentions, / commands) via SearchSource,
- * inline token rendering, serialization, Enter/Shift+Enter, message
- * history, paste/drop file handling, and mobile-safe touch typography.
+ * inline token rendering, serialization, Enter-to-submit with
+ * IME-composition guarding and an onKeyDown seam for platform-specific
+ * key handling, message history, paste/drop file handling, and
+ * mobile-safe touch typography.
  *
  *
  * SYNC: When modified, update:
@@ -188,6 +190,21 @@ export interface ChatComposerInputProps extends Omit<
   onFiles?: (files: File[]) => void;
   /** Submit handler (Enter without Shift) */
   onSubmit?: (value: string) => void;
+  /**
+   * Key-down handler invoked before the built-in Enter/history behavior
+   * (but after an open trigger menu consumes the event).
+   *
+   * This is the seam for platform- or app-specific key handling:
+   * - Call `event.preventDefault()` to suppress the default submit (e.g.
+   *   let Enter insert a newline on a touch keyboard).
+   * - Add behavior by acting on the event yourself (e.g. submit on
+   *   Cmd/Ctrl+Enter) without calling `preventDefault()`, so the default
+   *   handling still runs for other keys.
+   *
+   * IME composition is always respected regardless of this handler: Enter
+   * never submits while a composition is in progress.
+   */
+  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
 }
 
 // =============================================================================
@@ -299,6 +316,7 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
     pasteAsToken: pasteAsTokenProp,
     onFiles,
     onSubmit = composerCtx?.onSubmit,
+    onKeyDown: onKeyDownProp,
     xstyle,
     className,
     style,
@@ -366,6 +384,20 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
   selfRef.current = handle;
   useImperativeHandle(handleRef, () => handle);
 
+  // Register a focus control with the composer shell so body-click-to-focus
+  // works without the shell sniffing the input's DOM shape. Cleared on
+  // unmount so the shell falls back cleanly if the input goes away.
+  const inputControlRef = composerCtx?.inputControlRef;
+  useEffect(() => {
+    if (!inputControlRef) {
+      return;
+    }
+    inputControlRef.current = {focus: () => editableRef.current?.focus()};
+    return () => {
+      inputControlRef.current = null;
+    };
+  }, [inputControlRef]);
+
   useEffect(() => {
     if (controlledValue === undefined || !editableRef.current) {
       return;
@@ -477,6 +509,13 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
         return;
       }
 
+      // Consumer passthrough — runs before built-in Enter/history handling.
+      // A consumer can preventDefault() to fully own the keystroke.
+      onKeyDownProp?.(e);
+      if (e.defaultPrevented) {
+        return;
+      }
+
       // Handle Backspace near tokens — prevent browser from creating
       // stray <br> elements or moving the cursor unexpectedly.
       if (e.key === 'Backspace') {
@@ -519,6 +558,13 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
       }
 
       if (e.key === 'Enter' && !e.shiftKey) {
+        // Never submit mid-composition — an IME uses Enter to commit a
+        // candidate (e.g. Japanese/Chinese/Korean input), and browsers may
+        // also surface the legacy keyCode 229 for composing keystrokes.
+        if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) {
+          return;
+        }
+
         e.preventDefault();
         if (!editableRef.current) {
           return;
@@ -583,7 +629,7 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
         }
       }
     },
-    [hasHistory, onSubmit, onChange, emitChange, triggerMenu],
+    [hasHistory, onSubmit, onChange, emitChange, triggerMenu, onKeyDownProp],
   );
 
   const handlePaste = useCallback(