@assistant-ui/react 0.10.50 → 0.11.1

package/src/context/react/AssistantContext.ts

@@ -1,72 +0,0 @@
-"use client";
-
-import { createContext } from "react";
-import type { AssistantToolUIsState } from "../stores/AssistantToolUIs";
-import { ReadonlyStore } from "../ReadonlyStore";
-import { createContextHook } from "./utils/createContextHook";
-import { createContextStoreHook } from "./utils/createContextStoreHook";
-import { UseBoundStore } from "zustand";
-import { AssistantRuntime } from "../../api/AssistantRuntime";
-import { ThreadListRuntime } from "../../api/ThreadListRuntime";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
-
-export type AssistantContextValue = {
-  useAssistantRuntime: UseBoundStore<ReadonlyStore<AssistantRuntime>>;
-  useToolUIs: UseBoundStore<ReadonlyStore<AssistantToolUIsState>>;
-};
-
-export const AssistantContext = createContext<AssistantContextValue | null>(
-  null,
-);
-
-export const useAssistantContext = createContextHook(
-  AssistantContext,
-  "AssistantRuntimeProvider",
-);
-
-/**
- * Hook to access the AssistantRuntime from the current context.
- *
- * The AssistantRuntime provides access to the top-level assistant state and actions,
- * including thread management, tool registration, and configuration.
- *
- * @param options Configuration options
- * @param options.optional Whether the hook should return null if no context is found
- * @returns The AssistantRuntime instance, or null if optional is true and no context exists
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const runtime = useAssistantRuntime();
- *
- *   const handleNewThread = () => {
- *     runtime.switchToNewThread();
- *   };
- *
- *   return <button onClick={handleNewThread}>New Thread</button>;
- * }
- * ```
- */
-export function useAssistantRuntime(options?: {
-  optional?: false | undefined;
-}): AssistantRuntime;
-export function useAssistantRuntime(options?: {
-  optional?: boolean | undefined;
-}): AssistantRuntime | null;
-export function useAssistantRuntime(options?: {
-  optional?: boolean | undefined;
-}) {
-  const context = useAssistantContext(options);
-  if (!context) return null;
-  return context.useAssistantRuntime();
-}
-
-export const { useToolUIs, useToolUIsStore } = createContextStoreHook(
-  useAssistantContext,
-  "useToolUIs",
-);
-
-const useThreadListRuntime = (opt: {
-  optional: boolean | undefined;
-}): ThreadListRuntime | null => useAssistantRuntime(opt)?.threads ?? null;
-export const useThreadList = createStateHookForRuntime(useThreadListRuntime);

package/src/context/react/AttachmentContext.ts

@@ -1,102 +0,0 @@
-"use client";
-
-import { createContext } from "react";
-import { ReadonlyStore } from "../ReadonlyStore";
-import { AttachmentRuntime } from "../../api/AttachmentRuntime";
-import { UseBoundStore } from "zustand";
-import { createContextHook } from "./utils/createContextHook";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
-
-export type AttachmentContextValue = {
-  useAttachmentRuntime: UseBoundStore<ReadonlyStore<AttachmentRuntime>>;
-};
-
-export const AttachmentContext = createContext<AttachmentContextValue | null>(
-  null,
-);
-
-const useAttachmentContext = createContextHook(
-  AttachmentContext,
-  "a ComposerPrimitive.Attachments or MessagePrimitive.Attachments component",
-);
-
-export function useAttachmentRuntime(options?: {
-  optional?: false | undefined;
-}): AttachmentRuntime;
-export function useAttachmentRuntime(options?: {
-  optional?: boolean | undefined;
-}): AttachmentRuntime | null;
-export function useAttachmentRuntime(options?: {
-  optional?: boolean | undefined;
-}): AttachmentRuntime | null {
-  const attachmentRuntime = useAttachmentContext(options);
-  if (!attachmentRuntime) return null;
-  return attachmentRuntime.useAttachmentRuntime();
-}
-
-export function useThreadComposerAttachmentRuntime(options?: {
-  optional?: false | undefined;
-}): AttachmentRuntime<"thread-composer">;
-export function useThreadComposerAttachmentRuntime(options?: {
-  optional?: boolean | undefined;
-}): AttachmentRuntime<"thread-composer"> | null;
-export function useThreadComposerAttachmentRuntime(options?: {
-  optional?: boolean | undefined;
-}): AttachmentRuntime<"thread-composer"> | null {
-  const attachmentRuntime = useAttachmentRuntime(options);
-  if (!attachmentRuntime) return null;
-  if (attachmentRuntime.source !== "thread-composer")
-    throw new Error(
-      "This component must be used within a thread's ComposerPrimitive.Attachments component.",
-    );
-  return attachmentRuntime as AttachmentRuntime<"thread-composer">;
-}
-
-export function useEditComposerAttachmentRuntime(options?: {
-  optional?: false | undefined;
-}): AttachmentRuntime<"edit-composer">;
-export function useEditComposerAttachmentRuntime(options?: {
-  optional?: boolean | undefined;
-}): AttachmentRuntime<"edit-composer"> | null;
-export function useEditComposerAttachmentRuntime(options?: {
-  optional?: boolean | undefined;
-}): AttachmentRuntime<"edit-composer"> | null {
-  const attachmentRuntime = useAttachmentRuntime(options);
-  if (!attachmentRuntime) return null;
-  if (attachmentRuntime.source !== "edit-composer")
-    throw new Error(
-      "This component must be used within a message's ComposerPrimitive.Attachments component.",
-    );
-
-  return attachmentRuntime as AttachmentRuntime<"edit-composer">;
-}
-
-export function useMessageAttachmentRuntime(options?: {
-  optional?: false | undefined;
-}): AttachmentRuntime<"message">;
-export function useMessageAttachmentRuntime(options?: {
-  optional?: boolean | undefined;
-}): AttachmentRuntime<"message"> | null;
-export function useMessageAttachmentRuntime(options?: {
-  optional?: boolean | undefined;
-}): AttachmentRuntime<"message"> | null {
-  const attachmentRuntime = useAttachmentRuntime(options);
-  if (!attachmentRuntime) return null;
-  if (attachmentRuntime.source !== "message")
-    throw new Error(
-      "This component must be used within a MessagePrimitive.Attachments component.",
-    );
-  return attachmentRuntime as AttachmentRuntime<"message">;
-}
-
-export const useAttachment = createStateHookForRuntime(useAttachmentRuntime);
-
-export const useThreadComposerAttachment = createStateHookForRuntime(
-  useThreadComposerAttachmentRuntime,
-);
-export const useEditComposerAttachment = createStateHookForRuntime(
-  useEditComposerAttachmentRuntime,
-);
-export const useMessageAttachment = createStateHookForRuntime(
-  useMessageAttachmentRuntime,
-);

package/src/context/react/ComposerContext.ts

@@ -1,88 +0,0 @@
-"use client";
-
-import { useMessageRuntime } from "./MessageContext";
-import { useThreadRuntime } from "./ThreadContext";
-import { ComposerRuntime } from "../../api/ComposerRuntime";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
-
-/**
- * Hook to access the ComposerRuntime from the current context.
- *
- * The ComposerRuntime provides access to composer state and actions for message
- * composition, including text input, attachments, and sending functionality.
- * This hook automatically resolves to either the message's edit composer or
- * the thread's main composer depending on the context.
- *
- * @param options Configuration options
- * @param options.optional Whether the hook should return null if no context is found
- * @returns The ComposerRuntime instance, or null if optional is true and no context exists
- *
- * @example
- * ```tsx
- * function ComposerActions() {
- *   const runtime = useComposerRuntime();
- *
- *   const handleSend = () => {
- *     if (runtime.getState().canSend) {
- *       runtime.send();
- *     }
- *   };
- *
- *   const handleCancel = () => {
- *     if (runtime.getState().canCancel) {
- *       runtime.cancel();
- *     }
- *   };
- *
- *   return (
- *     <div>
- *       <button onClick={handleSend}>Send</button>
- *       <button onClick={handleCancel}>Cancel</button>
- *     </div>
- *   );
- * }
- * ```
- */
-export function useComposerRuntime(options?: {
-  optional?: false | undefined;
-}): ComposerRuntime;
-export function useComposerRuntime(options?: {
-  optional?: boolean | undefined;
-}): ComposerRuntime | null;
-export function useComposerRuntime(options?: {
-  optional?: boolean | undefined;
-}): ComposerRuntime | null {
-  const messageRuntime = useMessageRuntime({ optional: true });
-  const threadRuntime = useThreadRuntime(options);
-  return messageRuntime
-    ? messageRuntime.composer
-    : (threadRuntime?.composer ?? null);
-}
-
-/**
- * Hook to access the current composer state.
- *
- * This hook provides reactive access to the composer's state, including text content,
- * attachments, editing status, and send/cancel capabilities.
- *
- * @param selector Optional selector function to pick specific state properties
- * @returns The selected composer state or the entire composer state if no selector provided
- *
- * @example
- * ```tsx
- * function ComposerStatus() {
- *   const text = useComposer((state) => state.text);
- *   const canSend = useComposer((state) => state.canSend);
- *   const attachmentCount = useComposer((state) => state.attachments.length);
- *
- *   return (
- *     <div>
- *       Text: {text.length} chars,
- *       Attachments: {attachmentCount},
- *       Can send: {canSend}
- *     </div>
- *   );
- * }
- * ```
- */
-export const useComposer = createStateHookForRuntime(useComposerRuntime);

package/src/context/react/MessageContext.ts

@@ -1,107 +0,0 @@
-"use client";
-
-import { createContext } from "react";
-import { ReadonlyStore } from "../ReadonlyStore";
-import { MessageUtilsState } from "../stores/MessageUtils";
-import { createContextHook } from "./utils/createContextHook";
-import { createContextStoreHook } from "./utils/createContextStoreHook";
-import { UseBoundStore } from "zustand";
-import { MessageRuntime } from "../../api/MessageRuntime";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
-import { EditComposerRuntime } from "../../api";
-
-export type MessageContextValue = {
-  useMessageRuntime: UseBoundStore<ReadonlyStore<MessageRuntime>>;
-  useMessageUtils: UseBoundStore<ReadonlyStore<MessageUtilsState>>;
-};
-
-export const MessageContext = createContext<MessageContextValue | null>(null);
-
-const useMessageContext = createContextHook(
-  MessageContext,
-  "a component passed to <ThreadPrimitive.Messages components={...} />",
-);
-
-/**
- * Hook to access the MessageRuntime from the current context.
- *
- * The MessageRuntime provides access to message-level state and actions,
- * including message content, status, editing capabilities, and branching.
- *
- * @param options Configuration options
- * @param options.optional Whether the hook should return null if no context is found
- * @returns The MessageRuntime instance, or null if optional is true and no context exists
- *
- * @example
- * ```tsx
- * function MessageActions() {
- *   const runtime = useMessageRuntime();
- *
- *   const handleReload = () => {
- *     runtime.reload();
- *   };
- *
- *   const handleEdit = () => {
- *     runtime.startEdit();
- *   };
- *
- *   return (
- *     <div>
- *       <button onClick={handleReload}>Reload</button>
- *       <button onClick={handleEdit}>Edit</button>
- *     </div>
- *   );
- * }
- * ```
- */
-export function useMessageRuntime(options?: {
-  optional?: false | undefined;
-}): MessageRuntime;
-export function useMessageRuntime(options?: {
-  optional?: boolean | undefined;
-}): MessageRuntime | null;
-export function useMessageRuntime(options?: {
-  optional?: boolean | undefined;
-}) {
-  const context = useMessageContext(options);
-  if (!context) return null;
-  return context.useMessageRuntime();
-}
-
-/**
- * Hook to access the current message state.
- *
- * This hook provides reactive access to the message's state, including content,
- * role, status, and other message-level properties.
- *
- * @param selector Optional selector function to pick specific state properties
- * @returns The selected message state or the entire message state if no selector provided
- *
- * @example
- * ```tsx
- * function MessageContent() {
- *   const role = useMessage((state) => state.role);
- *   const content = useMessage((state) => state.content);
- *   const isLoading = useMessage((state) => state.status.type === "running");
- *
- *   return (
- *     <div className={`message-${role}`}>
- *       {isLoading ? "Loading..." : content.map(part => part.text).join("")}
- *     </div>
- *   );
- * }
- * ```
- */
-export const useMessage = createStateHookForRuntime(useMessageRuntime);
-
-const useEditComposerRuntime = (opt: {
-  optional: boolean | undefined;
-}): EditComposerRuntime | null => useMessageRuntime(opt)?.composer ?? null;
-export const useEditComposer = createStateHookForRuntime(
-  useEditComposerRuntime,
-);
-
-export const { useMessageUtils, useMessageUtilsStore } = createContextStoreHook(
-  useMessageContext,
-  "useMessageUtils",
-);

package/src/context/react/MessagePartContext.ts

@@ -1,37 +0,0 @@
-"use client";
-
-import { createContext } from "react";
-import { ReadonlyStore } from "../ReadonlyStore";
-import { createContextHook } from "./utils/createContextHook";
-import { UseBoundStore } from "zustand";
-import { MessagePartRuntime } from "../../api/MessagePartRuntime";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
-
-export type MessagePartContextValue = {
-  useMessagePartRuntime: UseBoundStore<ReadonlyStore<MessagePartRuntime>>;
-};
-
-export const MessagePartContext = createContext<MessagePartContextValue | null>(
-  null,
-);
-
-const useMessagePartContext = createContextHook(
-  MessagePartContext,
-  "a component passed to <MessagePrimitive.Parts components={...}>",
-);
-
-export function useMessagePartRuntime(options?: {
-  optional?: false | undefined;
-}): MessagePartRuntime;
-export function useMessagePartRuntime(options?: {
-  optional?: boolean | undefined;
-}): MessagePartRuntime | null;
-export function useMessagePartRuntime(options?: {
-  optional?: boolean | undefined;
-}) {
-  const context = useMessagePartContext(options);
-  if (!context) return null;
-  return context.useMessagePartRuntime();
-}
-
-export const useMessagePart = createStateHookForRuntime(useMessagePartRuntime);

package/src/context/react/ThreadContext.ts

@@ -1,104 +0,0 @@
-"use client";
-
-import { createContext, useEffect, useState } from "react";
-import { ReadonlyStore } from "../ReadonlyStore";
-import { UseBoundStore } from "zustand";
-import { createContextHook } from "./utils/createContextHook";
-import { ThreadRuntime } from "../../api/ThreadRuntime";
-import { ModelContext } from "../../model-context";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
-import { ThreadComposerRuntime } from "../../api";
-
-export type ThreadContextValue = {
-  useThreadRuntime: UseBoundStore<ReadonlyStore<ThreadRuntime>>;
-};
-
-export const ThreadContext = createContext<ThreadContextValue | null>(null);
-
-const useThreadContext = createContextHook(
-  ThreadContext,
-  "AssistantRuntimeProvider",
-);
-
-/**
- * Hook to access the ThreadRuntime from the current context.
- *
- * The ThreadRuntime provides access to thread-level state and actions,
- * including message management, thread state, and composer functionality.
- *
- * @param options Configuration options
- * @param options.optional Whether the hook should return null if no context is found
- * @returns The ThreadRuntime instance, or null if optional is true and no context exists
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const runtime = useThreadRuntime();
- *
- *   const handleSendMessage = (text: string) => {
- *     runtime.append({ role: "user", content: [{ type: "text", text }] });
- *   };
- *
- *   return <button onClick={() => handleSendMessage("Hello!")}>Send</button>;
- * }
- * ```
- */
-export function useThreadRuntime(options?: {
-  optional?: false | undefined;
-}): ThreadRuntime;
-export function useThreadRuntime(options?: {
-  optional?: boolean | undefined;
-}): ThreadRuntime | null;
-export function useThreadRuntime(options?: { optional?: boolean | undefined }) {
-  const context = useThreadContext(options);
-  if (!context) return null;
-  return context.useThreadRuntime();
-}
-
-/**
- * Hook to access the current thread state.
- *
- * This hook provides reactive access to the thread's state, including messages,
- * running status, capabilities, and other thread-level properties.
- *
- * @param selector Optional selector function to pick specific state properties
- * @returns The selected thread state or the entire thread state if no selector provided
- *
- * @example
- * ```tsx
- * function ThreadStatus() {
- *   const isRunning = useThread((state) => state.isRunning);
- *   const messageCount = useThread((state) => state.messages.length);
- *
- *   return <div>Running: {isRunning}, Messages: {messageCount}</div>;
- * }
- * ```
- */
-export const useThread = createStateHookForRuntime(useThreadRuntime);
-
-const useThreadComposerRuntime = (opt: {
-  optional: boolean | undefined;
-}): ThreadComposerRuntime | null => useThreadRuntime(opt)?.composer ?? null;
-export const useThreadComposer = createStateHookForRuntime(
-  useThreadComposerRuntime,
-);
-
-export function useThreadModelContext(options?: {
-  optional?: false | undefined;
-}): ModelContext;
-export function useThreadModelContext(options?: {
-  optional?: boolean | undefined;
-}): ModelContext | null;
-export function useThreadModelContext(options?: {
-  optional?: boolean | undefined;
-}): ModelContext | null {
-  const [, rerender] = useState({});
-
-  const runtime = useThreadRuntime(options);
-  useEffect(() => {
-    return runtime?.unstable_on("model-context-update", () => rerender({}));
-  }, [runtime]);
-
-  if (!runtime) return null;
-  return runtime?.getModelContext();
-}

package/src/context/react/ThreadListItemContext.ts

@@ -1,38 +0,0 @@
-"use client";
-
-import { createContext } from "react";
-import { ReadonlyStore } from "../ReadonlyStore";
-import { createContextHook } from "./utils/createContextHook";
-import { UseBoundStore } from "zustand";
-import { ThreadListItemRuntime } from "../../api/ThreadListItemRuntime";
-import { createStateHookForRuntime } from "./utils/createStateHookForRuntime";
-
-export type ThreadListItemContextValue = {
-  useThreadListItemRuntime: UseBoundStore<ReadonlyStore<ThreadListItemRuntime>>;
-};
-
-export const ThreadListItemContext =
-  createContext<ThreadListItemContextValue | null>(null);
-
-const useThreadListItemContext = createContextHook(
-  ThreadListItemContext,
-  "a component passed to <ThreadListPrimitive.Items components={...}>",
-);
-
-export function useThreadListItemRuntime(options?: {
-  optional?: false | undefined;
-}): ThreadListItemRuntime;
-export function useThreadListItemRuntime(options?: {
-  optional?: boolean | undefined;
-}): ThreadListItemRuntime | null;
-export function useThreadListItemRuntime(options?: {
-  optional?: boolean | undefined;
-}) {
-  const context = useThreadListItemContext(options);
-  if (!context) return null;
-  return context.useThreadListItemRuntime();
-}
-
-export const useThreadListItem = createStateHookForRuntime(
-  useThreadListItemRuntime,
-);

package/src/context/stores/AssistantToolUIs.ts

@@ -1,51 +0,0 @@
-import { create } from "zustand";
-import type { ToolCallMessagePartComponent } from "../../types/MessagePartComponentTypes";
-import { Unsubscribe } from "../../types";
-
-export type AssistantToolUIsState = {
-  /**
-   * Get the tool UI configured for a given tool name.
-   */
-  getToolUI: (toolName: string) => ToolCallMessagePartComponent | null;
-
-  /**
-   * Registers a tool UI for a given tool name. Returns an unsubscribe function to remove the tool UI.
-   */
-  setToolUI: (
-    toolName: string,
-    render: ToolCallMessagePartComponent,
-  ) => Unsubscribe;
-};
-
-export const makeAssistantToolUIsStore = () =>
-  create<AssistantToolUIsState>((set) => {
-    const renderers = new Map<string, ToolCallMessagePartComponent[]>();
-
-    return Object.freeze({
-      getToolUI: (name) => {
-        const arr = renderers.get(name);
-        const last = arr?.at(-1);
-        if (last) return last;
-        return null;
-      },
-      setToolUI: (name, render) => {
-        let arr = renderers.get(name);
-        if (!arr) {
-          arr = [];
-          renderers.set(name, arr);
-        }
-        arr.push(render);
-        set({}); // notify the store listeners
-
-        return () => {
-          const index = arr.indexOf(render);
-          if (index !== -1) {
-            arr.splice(index, 1);
-          }
-          if (index === arr.length) {
-            set({}); // notify the store listeners
-          }
-        };
-      },
-    }) satisfies AssistantToolUIsState;
-  });

package/src/context/stores/MessageUtils.ts

@@ -1,23 +0,0 @@
-import { create } from "zustand";
-
-export type MessageUtilsState = {
-  readonly isCopied: boolean;
-  readonly setIsCopied: (value: boolean) => void;
-
-  readonly isHovering: boolean;
-  readonly setIsHovering: (value: boolean) => void;
-};
-
-export const makeMessageUtilsStore = () =>
-  create<MessageUtilsState>((set) => {
-    return {
-      isCopied: false,
-      setIsCopied: (value) => {
-        set({ isCopied: value });
-      },
-      isHovering: false,
-      setIsHovering: (value) => {
-        set({ isHovering: value });
-      },
-    };
-  });

package/src/runtimes/adapters/RuntimeAdapterProvider.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import { createContext, FC, ReactNode, useContext } from "react";
-import { ThreadHistoryAdapter } from "./thread-history/ThreadHistoryAdapter";
-import { AttachmentAdapter } from "./attachment/AttachmentAdapter";
-import { ModelContextProvider } from "../../model-context";
-
-export type RuntimeAdapters = {
-  modelContext?: ModelContextProvider;
-  history?: ThreadHistoryAdapter;
-  attachments?: AttachmentAdapter;
-};
-
-const RuntimeAdaptersContext = createContext<RuntimeAdapters | null>(null);
-
-namespace RuntimeAdapterProvider {
-  export type Props = {
-    adapters: RuntimeAdapters;
-    children: ReactNode;
-  };
-}
-
-export const RuntimeAdapterProvider: FC<RuntimeAdapterProvider.Props> = ({
-  adapters,
-  children,
-}) => {
-  const context = useContext(RuntimeAdaptersContext);
-  return (
-    <RuntimeAdaptersContext.Provider
-      value={{
-        ...context,
-        ...adapters,
-      }}
-    >
-      {children}
-    </RuntimeAdaptersContext.Provider>
-  );
-};
-
-export const useRuntimeAdapters = () => {
-  const adapters = useContext(RuntimeAdaptersContext);
-  return adapters;
-};