feat: Composer.unstable_on("send", callback) (#1279)

packages/react-ai-sdk/package.json

@@ -34,7 +34,7 @@
     "zustand": "^5.0.2"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.7.20",
+    "@assistant-ui/react": "^0.7.21",
     "@types/react": "*",
     "react": "^18 || ^19 || ^19.0.0-rc"
   },

packages/react-hook-form/package.json

@@ -30,7 +30,7 @@
     "zod": "^3.24.1"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.7.20",
+    "@assistant-ui/react": "^0.7.21",
     "@types/react": "*",
     "react": "^18 || ^19 || ^19.0.0-rc",
     "react-hook-form": "^7"

packages/react-langgraph/package.json

@@ -30,7 +30,7 @@
     "zod": "^3.24.1"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.7.20",
+    "@assistant-ui/react": "^0.7.21",
     "@types/react": "*",
     "react": "^18 || ^19 || ^19.0.0-rc"
   },

packages/react-markdown/package.json

@@ -41,7 +41,7 @@
     "react-markdown": "^9.0.1"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.7.20",
+    "@assistant-ui/react": "^0.7.21",
     "@types/react": "*",
     "react": "^18 || ^19 || ^19.0.0-rc",
     "tailwindcss": "^3.4.4"

packages/react-playground/package.json

@@ -47,7 +47,7 @@
     "zustand": "^5.0.2"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.7.20",
+    "@assistant-ui/react": "^0.7.21",
     "@types/react": "*",
     "react": "^18 || ^19 || ^19.0.0-rc",
     "tailwindcss": "^3.4.4"

packages/react-syntax-highlighter/package.json

@@ -27,7 +27,7 @@
     "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap --clean"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.7.20",
+    "@assistant-ui/react": "^0.7.21",
     "@assistant-ui/react-markdown": "^0.7.7",
     "@types/react": "*",
     "@types/react-syntax-highlighter": "*",

packages/react-trieve/package.json

@@ -45,7 +45,7 @@
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.7.20",
+    "@assistant-ui/react": "^0.7.21",
     "@assistant-ui/react-markdown": "^0.7.7",
     "@types/react": "*",
     "react": "^18 || ^19 || ^19.0.0-rc",

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @assistant-ui/react
 
+## 0.7.21
+
+### Patch Changes
+
+- feat: Composer.unstable_on("send", callback)
+
 ## 0.7.20
 
 ### Patch Changes

packages/react/package.json

@@ -29,7 +29,7 @@
     "conversational-ui",
     "conversational-ai"
   ],
-  "version": "0.7.20",
+  "version": "0.7.21",
   "license": "MIT",
   "exports": {
     ".": {

packages/react/src/api/ComposerRuntime.ts

@@ -1,6 +1,7 @@
 import { Attachment, PendingAttachment } from "../types/AttachmentTypes";
 import {
   ComposerRuntimeCore,
+  ComposerRuntimeEventType,
   ThreadComposerRuntimeCore,
 } from "../runtimes/core/ComposerRuntimeCore";
 import { Unsubscribe } from "../types";
@@ -162,6 +163,13 @@ export abstract class ComposerRuntimeImpl implements ComposerRuntime {
     return this._core.subscribe(callback);
   }
 
+  public unstable_on(event: ComposerRuntimeEventType, callback: () => void) {
+    const core = this._core.getState();
+    if (!core) throw new Error("Composer is not available");
+
+    return core.unstable_on(event, callback);
+  }
+
   public getAttachmentAccept(): string {
     const core = this._core.getState();
     if (!core) throw new Error("Composer is not available");

packages/react/src/runtimes/composer/BaseComposerRuntimeCore.tsx

@@ -5,7 +5,10 @@ import {
 } from "../../types/AttachmentTypes";
 import { AppendMessage, Unsubscribe } from "../../types";
 import { AttachmentAdapter } from "../attachment";
-import { ComposerRuntimeCore } from "../core/ComposerRuntimeCore";
+import {
+  ComposerRuntimeCore,
+  ComposerRuntimeEventType,
+} from "../core/ComposerRuntimeCore";
 import { MessageRole } from "../../types/AssistantTypes";
 
 const isAttachmentComplete = (a: Attachment): a is CompleteAttachment =>
@@ -48,23 +51,27 @@ export abstract class BaseComposerRuntimeCore implements ComposerRuntimeCore {
     return this._role;
   }
 
-  setRole(role: MessageRole) {
+  public setRole(role: MessageRole) {
     this._role = role;
     this.notifySubscribers();
   }
 
-  setText(value: string) {
+  public setText(value: string) {
     this._text = value;
     this.notifySubscribers();
   }
 
-  reset() {
+  private _resetInternal() {
     this._text = "";
     this._role = "user";
     this._attachments = [];
     this.notifySubscribers();
   }
 
+  public reset() {
+    this._resetInternal();
+  }
+
   public async send() {
     const adapter = this.getAttachmentAdapter();
     const attachments =
@@ -83,12 +90,18 @@ export abstract class BaseComposerRuntimeCore implements ComposerRuntimeCore {
       content: this.text ? [{ type: "text", text: this.text }] : [],
       attachments,
     };
-    this.reset();
+    this._resetInternal();
 
     this.handleSend(message);
+    this._notifyEventSubscribers("send");
   }
-  public abstract handleSend(message: Omit<AppendMessage, "parentId">): void;
-  public abstract cancel(): void;
+
+  public cancel() {
+    this.handleCancel();
+  }
+
+  protected abstract handleSend(message: Omit<AppendMessage, "parentId">): void;
+  protected abstract handleCancel(): void;
 
   async addAttachment(file: File) {
     const adapter = this.getAttachmentAdapter();
@@ -115,6 +128,7 @@ export abstract class BaseComposerRuntimeCore implements ComposerRuntimeCore {
   }
 
   private _subscriptions = new Set<() => void>();
+
   protected notifySubscribers() {
     for (const callback of this._subscriptions) callback();
   }
@@ -123,4 +137,31 @@ export abstract class BaseComposerRuntimeCore implements ComposerRuntimeCore {
     this._subscriptions.add(callback);
     return () => this._subscriptions.delete(callback);
   }
+
+  private _eventSubscribers = new Map<
+    ComposerRuntimeEventType,
+    Set<() => void>
+  >();
+
+  protected _notifyEventSubscribers(event: ComposerRuntimeEventType) {
+    const subscribers = this._eventSubscribers.get(event);
+    if (!subscribers) return;
+
+    for (const callback of subscribers) callback();
+  }
+
+  public unstable_on(event: ComposerRuntimeEventType, callback: () => void) {
+    const subscribers = this._eventSubscribers.get(event);
+    if (!subscribers) {
+      this._eventSubscribers.set(event, new Set([callback]));
+    } else {
+      subscribers.add(callback);
+    }
+
+    return () => {
+      const subscribers = this._eventSubscribers.get(event);
+      if (!subscribers) return;
+      subscribers.delete(callback);
+    };
+  }
 }

packages/react/src/runtimes/composer/DefaultEditComposerRuntimeCore.tsx

@@ -50,7 +50,7 @@ export class DefaultEditComposerRuntimeCore extends BaseComposerRuntimeCore {
     this.notifySubscribers();
   }
 
-  public async cancel() {
+  public handleCancel() {
     this.endEditCallback();
     this.notifySubscribers();
   }

packages/react/src/runtimes/composer/DefaultThreadComposerRuntimeCore.tsx

@@ -46,7 +46,7 @@ export class DefaultThreadComposerRuntimeCore
     });
   }
 
-  public async cancel() {
+  public async handleCancel() {
     this.runtime.cancelRun();
   }
 }

packages/react/src/runtimes/core/BaseThreadRuntimeCore.tsx

@@ -180,7 +180,10 @@ export abstract class BaseThreadRuntimeCore implements ThreadRuntimeCore {
     this._notifySubscribers();
   }
 
-  private _eventSubscribers = new Map<string, Set<() => void>>();
+  private _eventSubscribers = new Map<
+    ThreadRuntimeEventType,
+    Set<() => void>
+  >();
 
   public unstable_on(event: ThreadRuntimeEventType, callback: () => void) {
     if (event === "model-config-update") {

packages/react/src/runtimes/core/ComposerRuntimeCore.tsx

@@ -1,6 +1,8 @@
 import type { Attachment, PendingAttachment, Unsubscribe } from "../../types";
 import { MessageRole } from "../../types/AssistantTypes";
 
+export type ComposerRuntimeEventType = "send";
+
 export type ComposerRuntimeCore = Readonly<{
   attachments: readonly Attachment[];
 
@@ -25,6 +27,11 @@ export type ComposerRuntimeCore = Readonly<{
   cancel: () => void;
 
   subscribe: (callback: () => void) => Unsubscribe;
+
+  unstable_on: (
+    event: ComposerRuntimeEventType,
+    callback: () => void,
+  ) => Unsubscribe;
 }>;
 
 export type ThreadComposerRuntimeCore = ComposerRuntimeCore &