From a73b50faadb4998addfce0ac4f41caf88bb45022 Mon Sep 17 00:00:00 2001
From: Simon Farshid <simon.farshid@outlook.com>
Date: Mon, 17 Jun 2024 23:29:00 -0700
Subject: [PATCH] fix: ComposerRoot  onSubmit called using keyboard shortcuts
 (#230)

---
 .changeset/tough-gorillas-live.md                 |  5 +++++
 .../src/primitives/composer/ComposerInput.tsx     | 15 +++++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/tough-gorillas-live.md

diff --git a/.changeset/tough-gorillas-live.md b/.changeset/tough-gorillas-live.md
new file mode 100644
index 000000000..74c437195
--- /dev/null
+++ b/.changeset/tough-gorillas-live.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+fix: ComposerRoot onSubmit should be called when using keyboard shortcuts
diff --git a/packages/react/src/primitives/composer/ComposerInput.tsx b/packages/react/src/primitives/composer/ComposerInput.tsx
index a4bb46f07..9faa51e08 100644
--- a/packages/react/src/primitives/composer/ComposerInput.tsx
+++ b/packages/react/src/primitives/composer/ComposerInput.tsx
@@ -29,7 +29,7 @@ export const ComposerInput = forwardRef<
     { autoFocus = false, asChild, disabled, onChange, onKeyDown, ...rest },
     forwardedRef,
   ) => {
-    const { useThread, useViewport } = useThreadContext();
+    const { useThread } = useThreadContext();
     const { useComposer, type } = useComposerContext();
 
     const value = useComposer((c) => {
@@ -39,28 +39,27 @@ export const ComposerInput = forwardRef<
 
     const Component = asChild ? Slot : TextareaAutosize;
 
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const ref = useComposedRefs(forwardedRef, textareaRef);
+
     const handleKeyPress = (e: KeyboardEvent) => {
       if (disabled) return;
 
-      const composer = useComposer.getState();
       if (e.key === "Escape") {
-        if (useComposer.getState().cancel()) {
+        const composer = useComposer.getState();
+        if (composer.cancel()) {
           e.preventDefault();
         }
       } else if (e.key === "Enter" && e.shiftKey === false) {
         const isRunning = useThread.getState().isRunning;
         if (!isRunning) {
           e.preventDefault();
-          composer.send();
 
-          useViewport.getState().scrollToBottom();
+          textareaRef.current?.closest("form")?.requestSubmit();
         }
       }
     };
 
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const ref = useComposedRefs(forwardedRef, textareaRef);
-
     const autoFocusEnabled = autoFocus && !disabled;
     const focus = useCallback(() => {
       const textarea = textareaRef.current;