@assistant-ui/react 0.11.0 → 0.11.1

package/src/context/react/legacy/MessageContext.ts

@@ -1,90 +0,0 @@
-"use client";
-
-import { MessageRuntime } from "../../../api/MessageRuntime";
-import { useAssistantApi } from "..";
-import { createStateHookForRuntime } from "../utils/createStateHookForRuntime";
-import { EditComposerRuntime } from "../../../api";
-
-/**
- * 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 api = useAssistantApi();
-  const runtime = api.message.source
-    ? api.message().__internal_getRuntime()
-    : null;
-  if (!runtime && !options?.optional) {
-    throw new Error("MessageRuntime is not available");
-  }
-  return runtime;
-}
-
-/**
- * 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,
-);

package/src/context/react/legacy/MessagePartContext.ts

@@ -1,24 +0,0 @@
-"use client";
-
-import { MessagePartRuntime } from "../../../api/MessagePartRuntime";
-import { createStateHookForRuntime } from "../utils/createStateHookForRuntime";
-import { useAssistantApi } from "..";
-
-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 api = useAssistantApi();
-  const runtime = api.part.source ? api.part().__internal_getRuntime() : null;
-  if (!runtime && !options?.optional) {
-    throw new Error("MessagePartRuntime is not available");
-  }
-  return runtime;
-}
-
-export const useMessagePart = createStateHookForRuntime(useMessagePartRuntime);

package/src/context/react/legacy/ThreadContext.ts

@@ -1,94 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ThreadRuntime } from "../../../api/ThreadRuntime";
-import { ModelContext } from "../../../model-context";
-import { createStateHookForRuntime } from "../utils/createStateHookForRuntime";
-import { ThreadComposerRuntime } from "../../../api";
-import { useAssistantApi, useAssistantEvent } from "..";
-
-/**
- * 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 api = useAssistantApi();
-  const runtime = api.thread.source
-    ? api.thread().__internal_getRuntime()
-    : null;
-  if (!runtime && !options?.optional) {
-    throw new Error("ThreadRuntime is not available");
-  }
-  return runtime;
-}
-
-/**
- * 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);
-  useAssistantEvent("thread.model-context-update", () => rerender({}));
-
-  if (!runtime) return null;
-  return runtime?.getModelContext();
-}

package/src/context/react/legacy/ThreadListItemContext.ts

@@ -1,28 +0,0 @@
-"use client";
-
-import { ThreadListItemRuntime } from "../../../api/ThreadListItemRuntime";
-import { createStateHookForRuntime } from "../utils/createStateHookForRuntime";
-import { useAssistantApi } from "..";
-
-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 api = useAssistantApi();
-  const runtime = api.threadListItem.source
-    ? api.threadListItem().__internal_getRuntime()
-    : null;
-  if (!runtime && !options?.optional) {
-    throw new Error("ThreadListItemRuntime is not available");
-  }
-  return runtime;
-}
-
-export const useThreadListItem = createStateHookForRuntime(
-  useThreadListItemRuntime,
-);

package/src/hooks/useAssistantEvent.ts

@@ -1,24 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useAssistantApi } from "../context/react/AssistantApiContext";
-import {
-  AssistantEventSelector,
-  AssistantEvents,
-  normalizeEventSelector,
-} from "../types/EventTypes";
-
-export const useAssistantEvent = <TEvent extends keyof AssistantEvents>(
-  selector: AssistantEventSelector<TEvent>,
-  callback: (e: AssistantEvents[TEvent]) => void,
-) => {
-  const api = useAssistantApi();
-  const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  });
-
-  const { scope, event } = normalizeEventSelector(selector);
-  useEffect(
-    () => api.on({ scope, event }, (e) => callbackRef.current(e)),
-    [api, scope, event],
-  );
-};

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;
-};

package/src/runtimes/adapters/attachment/AttachmentAdapter.ts

@@ -1,71 +0,0 @@
-import {
-  Attachment,
-  PendingAttachment,
-  CompleteAttachment,
-} from "../../../types/AttachmentTypes";
-
-/**
- * Interface for handling file attachments in the assistant runtime.
- *
- * AttachmentAdapter provides methods for managing file attachments throughout
- * their lifecycle: adding, processing, removing, and sending attachments with messages.
- *
- * @example
- * ```tsx
- * const imageAdapter: AttachmentAdapter = {
- *   accept: "image/*",
- *
- *   async add({ file }) {
- *     return {
- *       id: generateId(),
- *       type: "image",
- *       name: file.name,
- *       file,
- *       status: { type: "uploading" }
- *     };
- *   },
- *
- *   async remove(attachment) {
- *     // Clean up resources
- *   },
- *
- *   async send(attachment) {
- *     const url = await uploadFile(attachment.file);
- *     return { ...attachment, url, status: { type: "complete" } };
- *   }
- * };
- * ```
- */
-export type AttachmentAdapter = {
-  /**
-   * MIME type pattern for accepted file types (e.g., "image/*", "text/plain").
-   */
-  accept: string;
-
-  /**
-   * Processes a file when it's added as an attachment.
-   *
-   * @param state - Object containing the file to process
-   * @param state.file - The File object to be attached
-   * @returns Promise or AsyncGenerator yielding PendingAttachment states
-   */
-  add(state: {
-    file: File;
-  }): Promise<PendingAttachment> | AsyncGenerator<PendingAttachment, void>;
-
-  /**
-   * Removes an attachment and cleans up associated resources.
-   *
-   * @param attachment - The attachment to remove
-   * @returns Promise that resolves when removal is complete
-   */
-  remove(attachment: Attachment): Promise<void>;
-
-  /**
-   * Finalizes an attachment for sending with a message.
-   *
-   * @param attachment - The pending attachment to finalize
-   * @returns Promise resolving to the complete attachment
-   */
-  send(attachment: PendingAttachment): Promise<CompleteAttachment>;
-};

package/src/runtimes/adapters/attachment/CloudFileAttachmentAdapter.ts

@@ -1,101 +0,0 @@
-import type { AssistantCloud } from "assistant-cloud";
-import {
-  Attachment,
-  PendingAttachment,
-  CompleteAttachment,
-} from "../../../types/AttachmentTypes";
-import { ThreadUserMessagePart } from "../../../types/MessagePartTypes";
-import { AttachmentAdapter } from "./AttachmentAdapter";
-
-const guessAttachmentType = (
-  contentType: string,
-): "image" | "document" | "file" => {
-  if (contentType.startsWith("image/")) return "image";
-  if (contentType.startsWith("text/")) return "document";
-  return "file";
-};
-
-export class CloudFileAttachmentAdapter implements AttachmentAdapter {
-  public accept = "*";
-
-  constructor(private cloud: AssistantCloud) {}
-
-  private uploadedUrls = new Map<string, string>();
-
-  public async *add({
-    file,
-  }: {
-    file: File;
-  }): AsyncGenerator<PendingAttachment, void> {
-    const id = crypto.randomUUID();
-    const type = guessAttachmentType(file.type);
-    let attachment: PendingAttachment = {
-      id,
-      type,
-      name: file.name,
-      contentType: file.type,
-      file,
-      status: { type: "running", reason: "uploading", progress: 0 },
-    };
-    yield attachment;
-
-    try {
-      const { signedUrl, publicUrl } =
-        await this.cloud.files.generatePresignedUploadUrl({
-          filename: file.name,
-        });
-      await fetch(signedUrl, {
-        method: "PUT",
-        body: file,
-        headers: {
-          "Content-Type": file.type,
-        },
-        mode: "cors",
-      });
-      this.uploadedUrls.set(id, publicUrl);
-      attachment = {
-        ...attachment,
-        status: { type: "requires-action", reason: "composer-send" },
-      };
-      yield attachment;
-    } catch {
-      attachment = {
-        ...attachment,
-        status: { type: "incomplete", reason: "error" },
-      };
-      yield attachment;
-    }
-  }
-
-  public async remove(attachment: Attachment): Promise<void> {
-    this.uploadedUrls.delete(attachment.id);
-  }
-
-  public async send(
-    attachment: PendingAttachment,
-  ): Promise<CompleteAttachment> {
-    const url = this.uploadedUrls.get(attachment.id);
-    if (!url) throw new Error("Attachment not uploaded");
-    this.uploadedUrls.delete(attachment.id);
-
-    let content: ThreadUserMessagePart[];
-    if (attachment.type === "image") {
-      content = [{ type: "image", image: url, filename: attachment.name }];
-    } else {
-      content = [
-        {
-          type: "file",
-          data: url,
-          mimeType: attachment.contentType,
-          filename: attachment.name,
-        },
-      ];
-    }
-
-    return {
-      ...attachment,
-      status: { type: "complete" },
-      content,
-    };
-  }
-}

package/src/runtimes/adapters/attachment/CompositeAttachmentAdapter.ts

@@ -1,104 +0,0 @@
-import { Attachment, PendingAttachment } from "../../../types/AttachmentTypes";
-import { AttachmentAdapter } from "./AttachmentAdapter";
-
-function fileMatchesAccept(
-  file: { name: string; type: string },
-  acceptString: string,
-) {
-  // Check if the accept string is "*", which allows any file
-  if (acceptString === "*") {
-    return true;
-  }
-
-  // Split the accept string into an array of allowed types
-  const allowedTypes = acceptString
-    .split(",")
-    .map((type) => type.trim().toLowerCase());
-
-  // Get the file's extension and MIME type
-  const fileExtension = "." + file.name.split(".").pop()!.toLowerCase();
-  const fileMimeType = file.type.toLowerCase();
-
-  for (const type of allowedTypes) {
-    // Check for file extension match
-    if (type.startsWith(".") && type === fileExtension) {
-      return true;
-    }
-
-    // Check for exact MIME type match
-    if (type.includes("/") && type === fileMimeType) {
-      return true;
-    }
-
-    if (type === "image/*" || type === "video/*" || type === "audio/*") {
-      // Check for wildcard MIME type match
-      if (type.endsWith("/*")) {
-        const generalType = type.split("/")[0]!;
-        if (fileMimeType.startsWith(generalType + "/")) {
-          return true;
-        }
-      }
-    }
-  }
-
-  return false;
-}
-
-export class CompositeAttachmentAdapter implements AttachmentAdapter {
-  private _adapters: AttachmentAdapter[];
-
-  public accept: string;
-
-  constructor(adapters: AttachmentAdapter[]) {
-    this._adapters = adapters;
-
-    const wildcardIdx = adapters.findIndex((a) => a.accept === "*");
-    if (wildcardIdx !== -1) {
-      if (wildcardIdx !== adapters.length - 1)
-        throw new Error(
-          "A wildcard adapter (handling all files) can only be specified as the last adapter.",
-        );
-
-      this.accept = "*";
-    } else {
-      this.accept = adapters.map((a) => a.accept).join(",");
-    }
-  }
-
-  public add(state: { file: File }) {
-    for (const adapter of this._adapters) {
-      if (fileMatchesAccept(state.file, adapter.accept)) {
-        return adapter.add(state);
-      }
-    }
-    throw new Error("No matching adapter found for file");
-  }
-
-  public async send(attachment: PendingAttachment) {
-    const adapters = this._adapters.slice();
-    for (const adapter of adapters) {
-      if (fileMatchesAccept(attachment.file, adapter.accept)) {
-        return adapter.send(attachment);
-      }
-    }
-    throw new Error("No matching adapter found for attachment");
-  }
-
-  public async remove(attachment: Attachment) {
-    const adapters = this._adapters.slice();
-    for (const adapter of adapters) {
-      if (
-        fileMatchesAccept(
-          {
-            name: attachment.name,
-            type: attachment.contentType,
-          },
-          adapter.accept,
-        )
-      ) {
-        return adapter.remove(attachment);
-      }
-    }
-    throw new Error("No matching adapter found for attachment");
-  }
-}

package/src/runtimes/adapters/attachment/SimpleImageAttachmentAdapter.ts

@@ -1,49 +0,0 @@
-import {
-  PendingAttachment,
-  CompleteAttachment,
-} from "../../../types/AttachmentTypes";
-import { AttachmentAdapter } from "./AttachmentAdapter";
-
-export class SimpleImageAttachmentAdapter implements AttachmentAdapter {
-  public accept = "image/*";
-
-  public async add(state: { file: File }): Promise<PendingAttachment> {
-    return {
-      id: state.file.name,
-      type: "image",
-      name: state.file.name,
-      contentType: state.file.type,
-      file: state.file,
-      status: { type: "requires-action", reason: "composer-send" },
-    };
-  }
-
-  public async send(
-    attachment: PendingAttachment,
-  ): Promise<CompleteAttachment> {
-    return {
-      ...attachment,
-      status: { type: "complete" },
-      content: [
-        {
-          type: "image",
-          image: await getFileDataURL(attachment.file),
-        },
-      ],
-    };
-  }
-
-  public async remove() {
-    // noop
-  }
-}
-
-const getFileDataURL = (file: File) =>
-  new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-
-    reader.onload = () => resolve(reader.result as string);
-    reader.onerror = (error) => reject(error);
-
-    reader.readAsDataURL(file);
-  });

package/src/runtimes/adapters/attachment/SimpleTextAttachmentAdapter.ts

@@ -1,50 +0,0 @@
-import {
-  CompleteAttachment,
-  PendingAttachment,
-} from "../../../types/AttachmentTypes";
-import { AttachmentAdapter } from "./AttachmentAdapter";
-
-export class SimpleTextAttachmentAdapter implements AttachmentAdapter {
-  public accept =
-    "text/plain,text/html,text/markdown,text/csv,text/xml,text/json,text/css";
-
-  public async add(state: { file: File }): Promise<PendingAttachment> {
-    return {
-      id: state.file.name,
-      type: "document",
-      name: state.file.name,
-      contentType: state.file.type,
-      file: state.file,
-      status: { type: "requires-action", reason: "composer-send" },
-    };
-  }
-
-  public async send(
-    attachment: PendingAttachment,
-  ): Promise<CompleteAttachment> {
-    return {
-      ...attachment,
-      status: { type: "complete" },
-      content: [
-        {
-          type: "text",
-          text: `<attachment name=${attachment.name}>\n${await getFileText(attachment.file)}\n</attachment>`,
-        },
-      ],
-    };
-  }
-
-  public async remove() {
-    // noop
-  }
-}
-
-const getFileText = (file: File) =>
-  new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-
-    reader.onload = () => resolve(reader.result as string);
-    reader.onerror = (error) => reject(error);
-
-    reader.readAsText(file);
-  });