@assistant-ui/react 0.11.53 → 0.11.55

package/src/legacy-runtime/hooks/AttachmentContext.ts

@@ -5,7 +5,7 @@ import { createStateHookForRuntime } from "../../context/react/utils/createState
 import { useAssistantApi, useAssistantState } from "../../context/react";
 
 /**
- * @deprecated Use `useAssistantApi()` with `api.attachment()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantApi()` with `api.attachment()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export function useAttachmentRuntime(options?: {
   optional?: false | undefined;
@@ -84,7 +84,7 @@ export function useMessageAttachmentRuntime(options?: {
 }
 
 /**
- * @deprecated Use `useAssistantState(({ attachment }) => attachment)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantState(({ attachment }) => attachment)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export const useAttachment = createStateHookForRuntime(useAttachmentRuntime);
 

package/src/legacy-runtime/hooks/ComposerContext.ts

@@ -5,7 +5,7 @@ import { ComposerRuntime } from "../runtime/ComposerRuntime";
 import { createStateHookForRuntime } from "../../context/react/utils/createStateHookForRuntime";
 
 /**
- * @deprecated Use `useAssistantApi()` with `api.composer()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantApi()` with `api.composer()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  *
  * Hook to access the ComposerRuntime from the current context.
  *
@@ -87,7 +87,7 @@ export function useComposerRuntime(options?: {
 }
 
 /**
- * @deprecated Use `useAssistantState(({ composer }) => composer)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantState(({ composer }) => composer)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  *
  * Hook to access the current composer state.
  *

package/src/legacy-runtime/hooks/MessageContext.ts

@@ -6,7 +6,7 @@ import { createStateHookForRuntime } from "../../context/react/utils/createState
 import { EditComposerRuntime } from "../runtime";
 
 /**
- * @deprecated Use `useAssistantApi()` with `api.message()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantApi()` with `api.message()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  *
  * Hook to access the MessageRuntime from the current context.
  *
@@ -76,7 +76,7 @@ export function useMessageRuntime(options?: {
 }
 
 /**
- * @deprecated Use `useAssistantState(({ message }) => message)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantState(({ message }) => message)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  *
  * Hook to access the current message state.
  *
@@ -120,7 +120,7 @@ const useEditComposerRuntime = (opt: {
 }): EditComposerRuntime | null => useMessageRuntime(opt)?.composer ?? null;
 
 /**
- * @deprecated Use `useAssistantState(({ message }) => message.composer)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantState(({ message }) => message.composer)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export const useEditComposer = createStateHookForRuntime(
   useEditComposerRuntime,

package/src/legacy-runtime/hooks/MessagePartContext.ts

@@ -5,7 +5,7 @@ import { createStateHookForRuntime } from "../../context/react/utils/createState
 import { useAssistantApi, useAssistantState } from "../../context/react";
 
 /**
- * @deprecated Use `useAssistantApi()` with `api.part()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantApi()` with `api.part()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export function useMessagePartRuntime(options?: {
   optional?: false | undefined;
@@ -27,6 +27,6 @@ export function useMessagePartRuntime(options?: {
 }
 
 /**
- * @deprecated Use `useAssistantState(({ part }) => part)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantState(({ part }) => part)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export const useMessagePart = createStateHookForRuntime(useMessagePartRuntime);

package/src/legacy-runtime/hooks/ThreadContext.ts

@@ -12,7 +12,7 @@ import {
 } from "../../context/react";
 
 /**
- * @deprecated Use `useAssistantApi()` with `api.thread()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantApi()` with `api.thread()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  *
  * Hook to access the ThreadRuntime from the current context.
  *
@@ -62,7 +62,7 @@ export function useThreadRuntime(options?: { optional?: boolean | undefined }) {
 }
 
 /**
- * @deprecated Use `useAssistantState(({ thread }) => thread)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantState(({ thread }) => thread)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  *
  * Hook to access the current thread state.
  *
@@ -96,14 +96,14 @@ const useThreadComposerRuntime = (opt: {
 }): ThreadComposerRuntime | null => useThreadRuntime(opt)?.composer ?? null;
 
 /**
- * @deprecated Use `useAssistantState(({ thread }) => thread.composer)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantState(({ thread }) => thread.composer)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export const useThreadComposer = createStateHookForRuntime(
   useThreadComposerRuntime,
 );
 
 /**
- * @deprecated Use `useAssistantState(({ thread }) => thread.modelContext)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantState(({ thread }) => thread.modelContext)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export function useThreadModelContext(options?: {
   optional?: false | undefined;

package/src/legacy-runtime/hooks/ThreadListItemContext.ts

@@ -5,7 +5,7 @@ import { createStateHookForRuntime } from "../../context/react/utils/createState
 import { useAssistantApi, useAssistantState } from "../../context/react";
 
 /**
- * @deprecated Use `useAssistantApi()` with `api.threadListItem()` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantApi()` with `api.threadListItem()` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export function useThreadListItemRuntime(options?: {
   optional?: false | undefined;
@@ -29,7 +29,7 @@ export function useThreadListItemRuntime(options?: {
 }
 
 /**
- * @deprecated Use `useAssistantState(({ threadListItem }) => threadListItem)` instead. See migration guide: https://docs.assistant-ui.com/docs/migrations/v0-12
+ * @deprecated Use `useAssistantState(({ threadListItem }) => threadListItem)` instead. See migration guide: https://assistant-ui.com/docs/migrations/v0-12
  */
 export const useThreadListItem = createStateHookForRuntime(
   useThreadListItemRuntime,

package/src/legacy-runtime/runtime/ComposerRuntime.ts

@@ -1,28 +1,32 @@
-import { Attachment, PendingAttachment } from "../../types/AttachmentTypes";
-import {
+import type {
+  Attachment,
+  PendingAttachment,
+} from "../../types/AttachmentTypes";
+import type {
   ComposerRuntimeCore,
   ComposerRuntimeEventType,
+  DictationState,
   ThreadComposerRuntimeCore,
 } from "../runtime-cores/core/ComposerRuntimeCore";
-import { Unsubscribe } from "../../types";
+import type { Unsubscribe } from "../../types";
+import type { MessageRole, RunConfig } from "../../types/AssistantTypes";
+import type {
+  ThreadComposerRuntimeCoreBinding,
+  EditComposerRuntimeCoreBinding,
+  ComposerRuntimeCoreBinding,
+} from "./RuntimeBindings";
+import type { ComposerRuntimePath } from "./RuntimePathTypes";
 
 import { LazyMemoizeSubject } from "./subscribable/LazyMemoizeSubject";
 import {
-  AttachmentRuntime,
-  AttachmentState,
+  type AttachmentRuntime,
+  type AttachmentState,
   EditComposerAttachmentRuntimeImpl,
   ThreadComposerAttachmentRuntimeImpl,
 } from "./AttachmentRuntime";
 import { ShallowMemoizeSubject } from "./subscribable/ShallowMemoizeSubject";
 import { SKIP_UPDATE } from "./subscribable/SKIP_UPDATE";
-import { ComposerRuntimePath } from "./RuntimePathTypes";
-import { MessageRole, RunConfig } from "../../types/AssistantTypes";
 import { EventSubscriptionSubject } from "./subscribable/EventSubscriptionSubject";
-import type {
-  ThreadComposerRuntimeCoreBinding,
-  EditComposerRuntimeCoreBinding,
-  ComposerRuntimeCoreBinding,
-} from "./RuntimeBindings";
 
 export type {
   ThreadComposerRuntimeCoreBinding,
@@ -41,6 +45,12 @@ type BaseComposerState = {
   readonly runConfig: RunConfig;
 
   readonly attachmentAccept: string;
+
+  /**
+   * The current state of dictation.
+   * Undefined when dictation is not active.
+   */
+  readonly dictation: DictationState | undefined;
 };
 
 export type ThreadComposerState = BaseComposerState & {
@@ -72,6 +82,7 @@ const getThreadComposerState = (
     role: runtime?.role ?? "user",
     runConfig: runtime?.runConfig ?? EMPTY_OBJECT,
     attachmentAccept: runtime?.attachmentAccept ?? "",
+    dictation: runtime?.dictation,
 
     value: runtime?.text ?? "",
   });
@@ -92,6 +103,7 @@ const getEditComposerState = (
     attachments: runtime?.attachments ?? EMPTY_ARRAY,
     runConfig: runtime?.runConfig ?? EMPTY_OBJECT,
     attachmentAccept: runtime?.attachmentAccept ?? "",
+    dictation: runtime?.dictation,
 
     value: runtime?.text ?? "",
   });
@@ -169,6 +181,17 @@ export type ComposerRuntime = {
    */
   getAttachmentByIndex(idx: number): AttachmentRuntime;
 
+  /**
+   * Start dictation to convert voice to text input.
+   * Requires a DictationAdapter to be configured.
+   */
+  startDictation(): void;
+
+  /**
+   * Stop the current dictation session.
+   */
+  stopDictation(): void;
+
   /**
    * @deprecated This API is still under active development and might change without notice.
    */
@@ -199,6 +222,8 @@ export abstract class ComposerRuntimeImpl implements ComposerRuntime {
     this.cancel = this.cancel.bind(this);
     this.setRole = this.setRole.bind(this);
     this.getAttachmentByIndex = this.getAttachmentByIndex.bind(this);
+    this.startDictation = this.startDictation.bind(this);
+    this.stopDictation = this.stopDictation.bind(this);
     this.unstable_on = this.unstable_on.bind(this);
   }
 
@@ -252,6 +277,18 @@ export abstract class ComposerRuntimeImpl implements ComposerRuntime {
     core.setRole(role);
   }
 
+  public startDictation() {
+    const core = this._core.getState();
+    if (!core) throw new Error("Composer is not available");
+    core.startDictation();
+  }
+
+  public stopDictation() {
+    const core = this._core.getState();
+    if (!core) throw new Error("Composer is not available");
+    core.stopDictation();
+  }
+
   public subscribe(callback: () => void) {
     return this._core.subscribe(callback);
   }
@@ -335,7 +372,7 @@ export class ThreadComposerRuntimeImpl
           ...this.path,
           attachmentSource: "thread-composer",
           attachmentSelector: { type: "index", index: idx },
-          ref: `${this.path.ref}${this.path.ref}.attachments[${idx}]`,
+          ref: `${this.path.ref}.attachments[${idx}]`,
         },
         getState: () => {
           const attachments = this.getState().attachments;
@@ -423,7 +460,7 @@ export class EditComposerRuntimeImpl
           ...this.path,
           attachmentSource: "edit-composer",
           attachmentSelector: { type: "index", index: idx },
-          ref: `${this.path.ref}${this.path.ref}.attachments[${idx}]`,
+          ref: `${this.path.ref}.attachments[${idx}]`,
         },
         getState: () => {
           const attachments = this.getState().attachments;

package/src/legacy-runtime/runtime-cores/adapters/speech/SpeechAdapterTypes.ts

@@ -69,7 +69,7 @@ export type SpeechSynthesisAdapter = {
   speak: (text: string) => SpeechSynthesisAdapter.Utterance;
 };
 
-export namespace SpeechRecognitionAdapter {
+export namespace DictationAdapter {
   export type Status =
     | {
         type: "starting" | "running";
@@ -80,7 +80,22 @@ export namespace SpeechRecognitionAdapter {
       };
 
   export type Result = {
+    /** The transcribed text */
     transcript: string;
+    /**
+     * Whether this is a final (committed) result or an interim (partial) result.
+     *
+     * - `true` (final): The text should be appended to the composer input.
+     *   This text is finalized and won't change.
+     *
+     * - `false` (interim/partial): The text is a preview that may change.
+     *   It should be displayed as a preview but not appended to the input yet.
+     *   Subsequent interim results replace the previous interim result.
+     *
+     * Defaults to `true` for backwards compatibility with adapters that
+     * don't set this flag.
+     */
+    isFinal?: boolean;
   };
 
   export type Session = {
@@ -93,6 +108,14 @@ export namespace SpeechRecognitionAdapter {
   };
 }
 
-export type SpeechRecognitionAdapter = {
-  listen: () => SpeechRecognitionAdapter.Session;
+export type DictationAdapter = {
+  listen: () => DictationAdapter.Session;
+
+  /**
+   * Whether to disable text input while dictation is active.
+   * Some adapters (like ElevenLabs Scribe) return cumulative transcripts
+   * that conflict with simultaneous typing.
+   * @default false
+   */
+  disableInputDuringDictation?: boolean;
 };

package/src/legacy-runtime/runtime-cores/adapters/speech/WebSpeechDictationAdapter.ts

@@ -0,0 +1,255 @@
+import type { Unsubscribe } from "../../../../types";
+import type { DictationAdapter } from "./SpeechAdapterTypes";
+
+// Type definitions for Web Speech API
+// Users can install @types/dom-speech-recognition for full type support
+interface SpeechRecognitionResultItem {
+  transcript: string;
+  confidence: number;
+}
+
+interface SpeechRecognitionResult {
+  readonly length: number;
+  item(index: number): SpeechRecognitionResultItem;
+  readonly isFinal: boolean;
+  [index: number]: SpeechRecognitionResultItem;
+}
+
+interface SpeechRecognitionResultList {
+  readonly length: number;
+  item(index: number): SpeechRecognitionResult;
+  [index: number]: SpeechRecognitionResult;
+}
+
+interface SpeechRecognitionEvent extends Event {
+  readonly resultIndex: number;
+  readonly results: SpeechRecognitionResultList;
+}
+
+interface SpeechRecognitionErrorEvent extends Event {
+  readonly error: string;
+  readonly message: string;
+}
+
+interface SpeechRecognitionInstance extends EventTarget {
+  lang: string;
+  continuous: boolean;
+  interimResults: boolean;
+  start(): void;
+  stop(): void;
+  abort(): void;
+}
+
+interface SpeechRecognitionConstructor {
+  new (): SpeechRecognitionInstance;
+}
+
+declare global {
+  interface Window {
+    SpeechRecognition?: SpeechRecognitionConstructor;
+    webkitSpeechRecognition?: SpeechRecognitionConstructor;
+  }
+}
+
+const getSpeechRecognitionAPI = ():
+  | SpeechRecognitionConstructor
+  | undefined => {
+  if (typeof window === "undefined") return undefined;
+  return window.SpeechRecognition ?? window.webkitSpeechRecognition;
+};
+
+/**
+ * WebSpeechDictationAdapter provides speech-to-text (dictation) functionality using
+ * the browser's Web Speech API (SpeechRecognition).
+ *
+ * @example
+ * ```tsx
+ * const runtime = useChatRuntime({
+ *   api: "/api/chat",
+ *   adapters: {
+ *     dictation: new WebSpeechDictationAdapter(),
+ *   },
+ * });
+ * ```
+ */
+export class WebSpeechDictationAdapter implements DictationAdapter {
+  private _language: string;
+  private _continuous: boolean;
+  private _interimResults: boolean;
+
+  constructor(
+    options: {
+      /**
+       * The language for dictation (e.g., "en-US", "zh-CN").
+       * Defaults to the browser's language.
+       */
+      language?: string;
+      /**
+       * Whether to keep recording after the user stops speaking.
+       * Defaults to true.
+       */
+      continuous?: boolean;
+      /**
+       * Whether to return interim (partial) results.
+       * Defaults to true for real-time feedback.
+       */
+      interimResults?: boolean;
+    } = {},
+  ) {
+    const defaultLanguage =
+      typeof navigator !== "undefined" && navigator.language
+        ? navigator.language
+        : "en-US";
+    this._language = options.language ?? defaultLanguage;
+    this._continuous = options.continuous ?? true;
+    this._interimResults = options.interimResults ?? true;
+  }
+
+  /**
+   * Check if the browser supports the Web Speech Recognition API.
+   */
+  static isSupported(): boolean {
+    return getSpeechRecognitionAPI() !== undefined;
+  }
+
+  listen(): DictationAdapter.Session {
+    const SpeechRecognitionAPI = getSpeechRecognitionAPI();
+    if (!SpeechRecognitionAPI) {
+      throw new Error(
+        "SpeechRecognition is not supported in this browser. " +
+          "Try using Chrome, Edge, or Safari.",
+      );
+    }
+
+    const recognition = new SpeechRecognitionAPI();
+    recognition.lang = this._language;
+    recognition.continuous = this._continuous;
+    recognition.interimResults = this._interimResults;
+
+    const speechStartCallbacks = new Set<() => void>();
+    const speechEndCallbacks = new Set<
+      (result: DictationAdapter.Result) => void
+    >();
+    const speechCallbacks = new Set<
+      (result: DictationAdapter.Result) => void
+    >();
+
+    let finalTranscript = "";
+
+    const session: DictationAdapter.Session = {
+      status: { type: "starting" },
+
+      stop: async () => {
+        recognition.stop();
+        return new Promise<void>((resolve) => {
+          const checkEnded = () => {
+            if (session.status.type === "ended") {
+              resolve();
+            } else {
+              setTimeout(checkEnded, 50);
+            }
+          };
+          checkEnded();
+        });
+      },
+
+      cancel: () => {
+        recognition.abort();
+      },
+
+      onSpeechStart: (callback: () => void): Unsubscribe => {
+        speechStartCallbacks.add(callback);
+        return () => {
+          speechStartCallbacks.delete(callback);
+        };
+      },
+
+      onSpeechEnd: (
+        callback: (result: DictationAdapter.Result) => void,
+      ): Unsubscribe => {
+        speechEndCallbacks.add(callback);
+        return () => {
+          speechEndCallbacks.delete(callback);
+        };
+      },
+
+      onSpeech: (
+        callback: (result: DictationAdapter.Result) => void,
+      ): Unsubscribe => {
+        speechCallbacks.add(callback);
+        return () => {
+          speechCallbacks.delete(callback);
+        };
+      },
+    };
+
+    const updateStatus = (newStatus: DictationAdapter.Status) => {
+      session.status = newStatus;
+    };
+
+    recognition.addEventListener("speechstart", () => {
+      for (const cb of speechStartCallbacks) cb();
+    });
+
+    recognition.addEventListener("start", () => {
+      updateStatus({ type: "running" });
+    });
+
+    recognition.addEventListener("result", (event) => {
+      const speechEvent = event as unknown as SpeechRecognitionEvent;
+
+      for (
+        let i = speechEvent.resultIndex;
+        i < speechEvent.results.length;
+        i++
+      ) {
+        const result = speechEvent.results[i];
+        if (!result) continue;
+
+        const transcript = result[0]?.transcript ?? "";
+
+        if (result.isFinal) {
+          finalTranscript += transcript;
+          for (const cb of speechCallbacks) cb({ transcript, isFinal: true });
+        } else {
+          for (const cb of speechCallbacks) cb({ transcript, isFinal: false });
+        }
+      }
+    });
+
+    recognition.addEventListener("speechend", () => {
+      // speechend fires when user stops speaking, but 'end' handles final cleanup
+    });
+
+    recognition.addEventListener("end", () => {
+      const currentStatus = session.status;
+      if (currentStatus.type !== "ended") {
+        updateStatus({ type: "ended", reason: "stopped" });
+      }
+      if (finalTranscript) {
+        for (const cb of speechEndCallbacks)
+          cb({ transcript: finalTranscript });
+        finalTranscript = "";
+      }
+    });
+
+    recognition.addEventListener("error", (event) => {
+      const errorEvent = event as unknown as SpeechRecognitionErrorEvent;
+      if (errorEvent.error === "aborted") {
+        updateStatus({ type: "ended", reason: "cancelled" });
+      } else {
+        updateStatus({ type: "ended", reason: "error" });
+        console.error("Dictation error:", errorEvent.error, errorEvent.message);
+      }
+    });
+
+    try {
+      recognition.start();
+    } catch (error) {
+      updateStatus({ type: "ended", reason: "error" });
+      throw error;
+    }
+
+    return session;
+  }
+}

package/src/legacy-runtime/runtime-cores/adapters/speech/index.ts

@@ -1,2 +1,6 @@
-export type { SpeechSynthesisAdapter } from "./SpeechAdapterTypes";
+export type {
+  SpeechSynthesisAdapter,
+  DictationAdapter,
+} from "./SpeechAdapterTypes";
 export { WebSpeechSynthesisAdapter } from "./WebSpeechSynthesisAdapter";
+export { WebSpeechDictationAdapter } from "./WebSpeechDictationAdapter";

package/src/legacy-runtime/runtime-cores/assistant-transport/types.ts

@@ -88,7 +88,7 @@ export type AssistantTransportOptions<T> = {
   protocol?: AssistantTransportProtocol;
   converter: AssistantTransportStateConverter<T>;
   headers: HeadersValue | (() => Promise<HeadersValue>);
-  body?: object;
+  body?: object | (() => Promise<object | undefined>);
   onResponse?: (response: Response) => void;
   onFinish?: () => void;
   onError?: (

package/src/legacy-runtime/runtime-cores/assistant-transport/useAssistantTransportRuntime.tsx

@@ -97,6 +97,10 @@ const useAssistantTransportThreadRuntime = <T,>(
         throw new Error("No commands to send");
 
       const headers = await createRequestHeaders(options.headers);
+      const bodyValue =
+        typeof options.body === "function"
+          ? await options.body()
+          : options.body;
       const context = runtime.thread.getModelContext();
 
       const response = await fetch(
@@ -113,7 +117,7 @@ const useAssistantTransportThreadRuntime = <T,>(
               : undefined,
             ...context.callSettings,
             ...context.config,
-            ...options.body,
+            ...(bodyValue ?? {}),
           }),
           signal,
         },