@assistant-ui/react 0.5.91 → 0.5.93

package/src/context/react/AttachmentContext.ts

@@ -0,0 +1,193 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import { ReadonlyStore } from "../ReadonlyStore";
+import { createContextStoreHook } from "./utils/createContextStoreHook";
+import {
+  AttachmentRuntime,
+  AttachmentState,
+} from "../../api/AttachmentRuntime";
+import { UseBoundStore } from "zustand";
+
+export type AttachmentContextValue = {
+  source: "thread-composer" | "edit-composer" | "message";
+  useAttachment: UseBoundStore<ReadonlyStore<AttachmentState>>;
+  useAttachmentRuntime: UseBoundStore<ReadonlyStore<AttachmentRuntime>>;
+};
+
+type ThreadComposerAttachmentContextValue = {
+  source: "thread-composer";
+  useAttachment: UseBoundStore<
+    ReadonlyStore<AttachmentState & { source: "thread-composer" }>
+  >;
+  useAttachmentRuntime: UseBoundStore<
+    ReadonlyStore<AttachmentRuntime & { type: "thread-composer" }>
+  >;
+};
+type EditComposerAttachmentContextValue = {
+  source: "edit-composer";
+  useAttachment: UseBoundStore<
+    ReadonlyStore<AttachmentState & { source: "edit-composer" }>
+  >;
+  useAttachmentRuntime: UseBoundStore<
+    ReadonlyStore<AttachmentRuntime & { type: "edit-composer" }>
+  >;
+};
+
+type MessageAttachmentContextValue = {
+  source: "message";
+  useAttachment: UseBoundStore<
+    ReadonlyStore<AttachmentState & { source: "message" }>
+  >;
+  useAttachmentRuntime: UseBoundStore<
+    ReadonlyStore<AttachmentRuntime & { type: "message" }>
+  >;
+};
+
+export const AttachmentContext = createContext<AttachmentContextValue | null>(
+  null,
+);
+
+export function useAttachmentContext(options?: {
+  optional?: false | undefined;
+}): AttachmentContextValue;
+export function useAttachmentContext(options?: {
+  optional?: boolean | undefined;
+}): AttachmentContextValue | null;
+export function useAttachmentContext(options?: {
+  optional?: boolean | undefined;
+}) {
+  const context = useContext(AttachmentContext);
+  if (!options?.optional && !context)
+    throw new Error(
+      "This component must be used within a ComposerPrimitive.Attachments or MessagePrimitive.Attachments component.",
+    );
+
+  return context;
+}
+
+function useThreadComposerAttachmentContext(options?: {
+  optional?: false | undefined;
+}): ThreadComposerAttachmentContextValue;
+function useThreadComposerAttachmentContext(options?: {
+  optional?: boolean | undefined;
+}): ThreadComposerAttachmentContextValue | null;
+function useThreadComposerAttachmentContext(options?: {
+  optional?: boolean | undefined;
+}): ThreadComposerAttachmentContextValue | null {
+  const context = useAttachmentContext(options);
+  if (!context) return null;
+  if (context.source !== "thread-composer")
+    throw new Error(
+      "This component must be used within a thread's ComposerPrimitive.Attachments component.",
+    );
+  return context as ThreadComposerAttachmentContextValue;
+}
+
+function useEditComposerAttachmentContext(options?: {
+  optional?: false | undefined;
+}): EditComposerAttachmentContextValue;
+function useEditComposerAttachmentContext(options?: {
+  optional?: boolean | undefined;
+}): EditComposerAttachmentContextValue | null;
+function useEditComposerAttachmentContext(options?: {
+  optional?: boolean | undefined;
+}): EditComposerAttachmentContextValue | null {
+  const context = useAttachmentContext(options);
+  if (!context) return null;
+  if (context.source !== "edit-composer")
+    throw new Error(
+      "This component must be used within a messages's ComposerPrimitive.Attachments component.",
+    );
+  return context as EditComposerAttachmentContextValue;
+}
+
+function useMessageAttachmentContext(options?: {
+  optional?: false | undefined;
+}): MessageAttachmentContextValue;
+function useMessageAttachmentContext(options?: {
+  optional?: boolean | undefined;
+}): MessageAttachmentContextValue | null;
+function useMessageAttachmentContext(options?: {
+  optional?: boolean | undefined;
+}): MessageAttachmentContextValue | null {
+  const context = useAttachmentContext(options);
+  if (!context) return null;
+  if (context.source !== "message")
+    throw new Error(
+      "This component must be used within a MessagePrimitive.Attachments component.",
+    );
+  return context as MessageAttachmentContextValue;
+}
+
+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;
+export function useThreadComposerAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime | null;
+export function useThreadComposerAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime | null {
+  const attachmentRuntime = useThreadComposerAttachmentContext(options);
+  if (!attachmentRuntime) return null;
+  return attachmentRuntime.useAttachmentRuntime();
+}
+
+export function useEditComposerAttachmentRuntime(options?: {
+  optional?: false | undefined;
+}): AttachmentRuntime;
+export function useEditComposerAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime | null;
+export function useEditComposerAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime | null {
+  const attachmentRuntime = useEditComposerAttachmentContext(options);
+  if (!attachmentRuntime) return null;
+  return attachmentRuntime.useAttachmentRuntime();
+}
+
+export function useMessageAttachmentRuntime(options?: {
+  optional?: false | undefined;
+}): AttachmentRuntime;
+export function useMessageAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime | null;
+export function useMessageAttachmentRuntime(options?: {
+  optional?: boolean | undefined;
+}): AttachmentRuntime | null {
+  const attachmentRuntime = useMessageAttachmentContext(options);
+  if (!attachmentRuntime) return null;
+  return attachmentRuntime.useAttachmentRuntime();
+}
+
+export const { useAttachment } = createContextStoreHook(
+  useAttachmentContext,
+  "useAttachment",
+);
+
+export const { useAttachment: useThreadComposerAttachment } =
+  createContextStoreHook(useThreadComposerAttachmentContext, "useAttachment");
+
+export const { useAttachment: useEditComposerAttachment } =
+  createContextStoreHook(useEditComposerAttachmentContext, "useAttachment");
+
+export const { useAttachment: useMessageAttachment } = createContextStoreHook(
+  useMessageAttachmentContext,
+  "useAttachment",
+);

package/src/context/react/ComposerContext.ts

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { useMessageContext, useMessageRuntime } from "./MessageContext";
+import { useThreadContext, useThreadRuntime } from "./ThreadContext";
+import { ReadonlyStore } from "../ReadonlyStore";
+import { createContextStoreHook } from "./utils/createContextStoreHook";
+import { ComposerRuntime, ComposerState } from "../../api/ComposerRuntime";
+import { UseBoundStore } from "zustand";
+
+export type ComposerContextValue = {
+  useComposer: UseBoundStore<ReadonlyStore<ComposerState>>;
+  type: "edit" | "new";
+};
+
+export const useComposerContext = (): ComposerContextValue => {
+  const { useComposer: useThreadComposer } = useThreadContext();
+  const { useEditComposer } = useMessageContext({ optional: true }) ?? {};
+  return useMemo(
+    () => ({
+      useComposer: useEditComposer ?? useThreadComposer,
+      type: useEditComposer ? ("edit" as const) : ("new" as const),
+    }),
+    [useEditComposer, useThreadComposer],
+  );
+};
+
+export const { useComposer, useComposerStore } = createContextStoreHook(
+  useComposerContext,
+  "useComposer",
+);
+
+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);
+}

package/src/context/react/ContentPartContext.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import { createContext } from "react";
+import { ReadonlyStore } from "../ReadonlyStore";
+import { createContextStoreHook } from "./utils/createContextStoreHook";
+import { createContextHook } from "./utils/createContextHook";
+import { UseBoundStore } from "zustand";
+import { ContentPartRuntime } from "../../api/ContentPartRuntime";
+import { ContentPartState } from "../../api/ContentPartRuntime";
+
+export type ContentPartContextValue = {
+  useContentPartRuntime: UseBoundStore<ReadonlyStore<ContentPartRuntime>>;
+  useContentPart: UseBoundStore<ReadonlyStore<ContentPartState>>;
+};
+
+export const ContentPartContext = createContext<ContentPartContextValue | null>(
+  null,
+);
+
+export const useContentPartContext = createContextHook(
+  ContentPartContext,
+  "a component passed to <MessagePrimitive.Content components={...}>",
+);
+
+export function useContentPartRuntime(options?: {
+  optional?: false | undefined;
+}): ContentPartRuntime;
+export function useContentPartRuntime(options?: {
+  optional?: boolean | undefined;
+}): ContentPartRuntime | null;
+export function useContentPartRuntime(options?: {
+  optional?: boolean | undefined;
+}) {
+  const context = useContentPartContext(options);
+  if (!context) return null;
+  return context.useContentPartRuntime();
+}
+
+export const { useContentPart, useContentPartStore } = createContextStoreHook(
+  useContentPartContext,
+  "useContentPart",
+);

package/src/context/react/MessageContext.ts

@@ -0,0 +1,54 @@
+"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 { MessageState } from "../../api/MessageRuntime";
+import { EditComposerState } from "../../api/ComposerRuntime";
+
+export type MessageContextValue = {
+  useMessageRuntime: UseBoundStore<ReadonlyStore<MessageRuntime>>;
+  useMessage: UseBoundStore<ReadonlyStore<MessageState>>;
+  useMessageUtils: UseBoundStore<ReadonlyStore<MessageUtilsState>>;
+  useEditComposer: UseBoundStore<ReadonlyStore<EditComposerState>>;
+};
+
+export const MessageContext = createContext<MessageContextValue | null>(null);
+
+export const useMessageContext = createContextHook(
+  MessageContext,
+  "a component passed to <ThreadPrimitive.Messages components={...} />",
+);
+
+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();
+}
+
+export const { useMessage, useMessageStore } = createContextStoreHook(
+  useMessageContext,
+  "useMessage",
+);
+
+export const { useMessageUtils, useMessageUtilsStore } = createContextStoreHook(
+  useMessageContext,
+  "useMessageUtils",
+);
+
+export const { useEditComposer, useEditComposerStore } = createContextStoreHook(
+  useMessageContext,
+  "useEditComposer",
+);

package/src/context/react/ThreadContext.ts

@@ -0,0 +1,110 @@
+"use client";
+
+import { createContext, useEffect, useState } from "react";
+import type { ThreadViewportState } from "../stores/ThreadViewport";
+import { ReadonlyStore } from "../ReadonlyStore";
+import { UseBoundStore } from "zustand";
+import { createContextHook } from "./utils/createContextHook";
+import { createContextStoreHook } from "./utils/createContextStoreHook";
+import { ThreadRuntime } from "../../api/ThreadRuntime";
+import { ThreadState } from "../../api/ThreadRuntime";
+import { ModelConfig, ThreadMessage } from "../../types";
+import { ThreadComposerState } from "../../api/ComposerRuntime";
+
+export type ThreadContextValue = {
+  useThread: UseBoundStore<ReadonlyStore<ThreadState>>;
+  /**
+   * @deprecated Use `useThreadRuntime` instead. This will be removed in 0.6.0.
+   */
+  useThreadActions: UseBoundStore<ReadonlyStore<ThreadRuntime>>;
+  useThreadRuntime: UseBoundStore<ReadonlyStore<ThreadRuntime>>;
+  useThreadMessages: UseBoundStore<ReadonlyStore<readonly ThreadMessage[]>>;
+  useComposer: UseBoundStore<ReadonlyStore<ThreadComposerState>>;
+  useViewport: UseBoundStore<ReadonlyStore<ThreadViewportState>>;
+};
+
+export const ThreadContext = createContext<ThreadContextValue | null>(null);
+
+export const useThreadContext = createContextHook(
+  ThreadContext,
+  "AssistantRuntimeProvider",
+);
+
+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();
+}
+
+export const actions = createContextStoreHook(
+  useThreadContext,
+  "useThreadActions",
+);
+
+/**
+ * @deprecated Use `useThreadRuntime` instead. This will be removed in 0.6.0.
+ */
+export const useThreadActionsStore = actions.useThreadActionsStore;
+
+/**
+ * @deprecated Use `useThreadRuntime` instead. This will be removed in 0.6.0.
+ */
+export const useThreadActions = actions.useThreadActions;
+
+/**
+ * @deprecated Use `useThreadRuntime` instead. This will be removed in 0.6.0.
+ */
+export const useThreadRuntimeStore = useThreadActionsStore;
+
+export const { useThread, useThreadStore } = createContextStoreHook(
+  useThreadContext,
+  "useThread",
+);
+
+const messages = createContextStoreHook(useThreadContext, "useThreadMessages");
+
+/**
+ * @deprecated Use `useThread().messages` instead. This will be removed in 0.6.0.
+ */
+export const useThreadMessages = messages.useThreadMessages;
+
+/**
+ * @deprecated Use `useThreadRuntime().getState().messages` instead. This will be removed in 0.6.0.
+ */
+export const useThreadMessagesStore = messages.useThreadMessagesStore;
+
+export const {
+  useComposer: useThreadComposer,
+  useComposerStore: useThreadComposerStore,
+} = createContextStoreHook(useThreadContext, "useComposer");
+
+export const {
+  useViewport: useThreadViewport,
+  useViewportStore: useThreadViewportStore,
+} = createContextStoreHook(useThreadContext, "useViewport");
+
+export function useThreadModelConfig(options?: {
+  optional?: false | undefined;
+}): ModelConfig;
+export function useThreadModelConfig(options?: {
+  optional?: boolean | undefined;
+}): ModelConfig | null;
+export function useThreadModelConfig(options?: {
+  optional?: boolean | undefined;
+}): ModelConfig | null {
+  const [, rerender] = useState({});
+
+  const runtime = useThreadRuntime(options);
+  useEffect(() => {
+    return runtime?.unstable_on("model-config-update", () => rerender({}));
+  }, [runtime]);
+
+  if (!runtime) return null;
+  return runtime?.getModelConfig();
+}

package/src/context/react/index.ts

@@ -0,0 +1,160 @@
+export {
+  useAssistantRuntime,
+  useThreadManager,
+  useToolUIs,
+  useToolUIsStore,
+
+  /**
+   * @deprecated Use `useAssistantRuntime()` instead. This will be removed in 0.6.0.
+   */
+  useAssistantActions,
+  /**
+   * @deprecated Use `useAssistantRuntime()` instead. This will be removed in 0.6.0.
+   */
+  useAssistantActionsStore,
+  /**
+   * @deprecated Use `useAssistantRuntime()` instead. This will be removed in 0.6.0.
+   */
+  useAssistantRuntimeStore,
+
+  /**
+   * @deprecated You can import the hooks directly, e.g. `import { useAssistantRuntime } from "@assistant-ui/react"`. This will be removed in 0.6.0.
+   */
+  type AssistantContextValue,
+  /**
+   * @deprecated You can import the hooks directly, e.g. `import { useAssistantRuntime } from "@assistant-ui/react"`. This will be removed in 0.6.0.
+   */
+  useAssistantContext,
+} from "./AssistantContext";
+
+export {
+  useThreadRuntime,
+  useThread,
+  useThreadComposer,
+  useThreadModelConfig,
+
+  /**
+   * @deprecated Use `useThread().messages` instead. This will be removed in 0.6.0.
+   */
+  useThreadMessages,
+
+  /**
+   * @deprecated Use `useThreadRuntime().getState()` instead. This will be removed in 0.6.0.
+   */
+  useThreadStore,
+
+  /**
+   * @deprecated Use `useThreadRuntime().getState().messages` instead. This will be removed in 0.6.0.
+   */
+  useThreadMessagesStore,
+
+  /**
+   * @deprecated Use `useThreadRuntime()` instead. This will be removed in 0.6.0.
+   */
+  useThreadActions,
+
+  /**
+   * @deprecated Use `useThreadRuntime()` instead. This will be removed in 0.6.0.
+   */
+  useThreadActionsStore,
+
+  /**
+   * @deprecated Use `useThreadRuntime()` instead. This will be removed in 0.6.0.
+   */
+  useThreadRuntimeStore,
+  // TODO move out of runtime context after 0.6.0
+  useThreadViewport,
+  // TODO move out of runtime context after 0.6.0
+  useThreadViewportStore,
+
+  /**
+   * @deprecated Use `useThreadRuntime().composer.getState()` instead. This will be removed in 0.6.0.
+   */
+  useThreadComposerStore,
+
+  /**
+   * @deprecated You can import the hooks directly, e.g. `import { useThread } from "@assistant-ui/react"`. This will be removed in 0.6.0.
+   */
+  type ThreadContextValue,
+  /**
+   * @deprecated You can import the hooks directly, e.g. `import { useThread } from "@assistant-ui/react"`. This will be removed in 0.6.0.
+   */
+  useThreadContext,
+} from "./ThreadContext";
+export {
+  useMessageRuntime,
+  useMessage,
+  useEditComposer,
+  // TODO move out of runtime context after 0.6.0
+  useMessageUtils,
+  // TODO move out of runtime context after 0.6.0
+  useMessageUtilsStore,
+
+  /**
+   * @deprecated Use `useMessageRuntime().getState()` instead. This will be removed in 0.6.0.
+   */
+  useMessageStore,
+
+  /**
+   * @deprecated Use `useMessageRuntime().composer.getState()` instead. This will be removed in 0.6.0.
+   */
+  useEditComposerStore,
+
+  /**
+   * @deprecated You can import the hooks directly, e.g. `import { useMessage } from "@assistant-ui/react"`. This will be removed in 0.6.0.
+   */
+  type MessageContextValue,
+  /**
+   * @deprecated You can import the hooks directly, e.g. `import { useMessage } from "@assistant-ui/react"`. This will be removed in 0.6.0.
+   */
+  useMessageContext,
+} from "./MessageContext";
+export {
+  useContentPartRuntime,
+  useContentPart,
+
+  /**
+   * @deprecated Use `useContentPartRuntime().getState()` instead. This will be removed in 0.6.0.
+   */
+  useContentPartStore,
+
+  /**
+   * @deprecated You can import the hooks directly, e.g. `import { useContentPart } from "@assistant-ui/react"`. This will be removed in 0.6.0.
+   */
+  type ContentPartContextValue,
+  /**
+   * @deprecated You can import the hooks directly, e.g. `import { useContentPart } from "@assistant-ui/react"`. This will be removed in 0.6.0.
+   */
+  useContentPartContext,
+} from "./ContentPartContext";
+export {
+  useComposerRuntime,
+  useComposer,
+
+  /**
+   * @deprecated Use `useComposerRuntime().getState()` instead. This will be removed in 0.6.0.
+   */
+  useComposerStore,
+
+  /**
+   * @deprecated You can import the hooks directly, e.g. `import { useComposer } from "@assistant-ui/react"`. This will be removed in 0.6.0.
+   */
+  type ComposerContextValue,
+  /**
+   * @deprecated You can import the hooks directly, e.g. `import { useComposer } from "@assistant-ui/react"`. This will be removed in 0.6.0.
+   */
+  useComposerContext,
+} from "./ComposerContext";
+
+export {
+  useAttachment,
+  useAttachmentRuntime,
+
+  // TODO decide if we want to export/drop these? 
+  // useEditComposerAttachment,
+  // useEditComposerAttachmentRuntime,
+  // useMessageAttachment,
+  // useMessageAttachmentRuntime,
+  // useThreadComposerAttachment,
+  // useThreadComposerAttachmentRuntime,
+} from "./AttachmentContext";

package/src/context/react/utils/createContextHook.ts

@@ -0,0 +1,26 @@
+import { useContext, Context } from "react";
+
+/**
+ * Creates a context hook with optional support.
+ * @param context - The React context to consume.
+ * @param providerName - The name of the provider for error messages.
+ * @returns A hook function that provides the context value.
+ */
+export function createContextHook<T>(
+  context: Context<T | null>,
+  providerName: string,
+) {
+  function useContextHook(options?: { optional?: false | undefined }): T;
+  function useContextHook(options?: {
+    optional?: boolean | undefined;
+  }): T | null;
+  function useContextHook(options?: { optional?: boolean | undefined }) {
+    const contextValue = useContext(context);
+    if (!options?.optional && !contextValue) {
+      throw new Error(`This component must be used within ${providerName}.`);
+    }
+    return contextValue;
+  }
+
+  return useContextHook;
+}