fix: escape key interop with other radix utilities (#309)

packages/react/package.json

@@ -71,6 +71,7 @@
     "@radix-ui/react-primitive": "^2.0.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-use-callback-ref": "^1.1.0",
+    "@radix-ui/react-use-escape-keydown": "^1.1.0",
     "nanoid": "^5.0.7",
     "react-textarea-autosize": "^8.5.3",
     "zod": "^3.23.8",

packages/react/src/primitives/composer/ComposerInput.tsx

@@ -16,6 +16,7 @@ import TextareaAutosize, {
 import { useComposerContext } from "../../context/react/ComposerContext";
 import { useThreadContext } from "../../context/react/ThreadContext";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
+import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 
 type ComposerInputProps = TextareaAutosizeProps & {
   asChild?: boolean;
@@ -42,15 +43,17 @@ export const ComposerInput = forwardRef<
     const textareaRef = useRef<HTMLTextAreaElement>(null);
     const ref = useComposedRefs(forwardedRef, textareaRef);
 
+    useEscapeKeydown((e) => {
+      const composer = useComposer.getState();
+      if (composer.cancel()) {
+        e.preventDefault();
+      }
+    });
+
     const handleKeyPress = (e: KeyboardEvent) => {
       if (disabled) return;
 
-      if (e.key === "Escape") {
-        const composer = useComposer.getState();
-        if (composer.cancel()) {
-          e.preventDefault();
-        }
-      } else if (e.key === "Enter" && e.shiftKey === false) {
+      if (e.key === "Enter" && e.shiftKey === false) {
         const isRunning = useThread.getState().isRunning;
         if (!isRunning) {
           e.preventDefault();