@assistant-ui/react 0.15.23 → 0.15.24

package/src/primitives/thread/ThreadRoot.test.tsx

@@ -357,6 +357,39 @@ describe("ThreadPrimitiveRoot", () => {
     expect(event.defaultPrevented).toBe(true);
   });
 
+  it.each([
+    ["during the composition", { isComposing: true }],
+    ["after compositionend (Safari)", { keyCode: 229 }],
+  ])(
+    "keeps speech playing when Escape ends an IME composition %s",
+    async (_, init) => {
+      const speech = createSpeechAdapter();
+      const runtimeRef: RuntimeRef = { current: null };
+      render(
+        <RuntimeProvider runtimeRef={runtimeRef} speech={speech.adapter}>
+          <ThreadPrimitiveRoot>
+            <ComposerPrimitiveInput data-testid="composer" />
+          </ThreadPrimitiveRoot>
+        </RuntimeProvider>,
+      );
+      startSpeaking(runtimeRef);
+      await waitFor(() => {
+        expect(runtimeRef.current!.thread.getState().speech).toBeDefined();
+      });
+
+      const event = new KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+        cancelable: true,
+        ...init,
+      });
+      act(() => screen.getByTestId("composer").dispatchEvent(event));
+
+      expect(speech.cancel).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    },
+  );
+
   it("lets an idle composer fall through so Escape still stops speech", async () => {
     const speech = createSpeechAdapter();
     const runtimeRef: RuntimeRef = { current: null };

package/src/primitives/thread/ThreadRoot.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Primitive } from "../../utils/Primitive";
+import { isCompositionKey } from "../../utils/isCompositionKey";
 import {
   type ComponentRef,
   forwardRef,
@@ -64,6 +65,8 @@ export const ThreadPrimitiveRoot = forwardRef<
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key !== "Escape") return;
+      // An Escape that ends an IME composition belongs to the input method.
+      if (isCompositionKey(event)) return;
       if (event.defaultPrevented || aui.thread.source === null) return;
       const eventThreadRoot =
         escapeEventThreadRoots.get(event) ??

package/src/utils/isCompositionKey.ts

@@ -0,0 +1,5 @@
+// A keydown that ends an IME composition can arrive after compositionend with
+// isComposing false and keyCode 229, as the Enter that commits one does in
+// Safari.
+export const isCompositionKey = (event: KeyboardEvent) =>
+  event.isComposing || event.keyCode === 229;