@assistant-ui/react 0.5.92 → 0.5.94

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

@@ -0,0 +1,74 @@
+import { UseBoundStore } from "zustand";
+import { ReadonlyStore } from "../../ReadonlyStore";
+
+/**
+ * Creates hooks for accessing a store within a context.
+ * @param contextHook - The hook to access the context.
+ * @param contextKey - The key of the store in the context.
+ * @returns An object containing the hooks: `use...` and `use...Store`.
+ */
+export function createContextStoreHook<T, K extends keyof T & string>(
+  contextHook: (options?: { optional?: boolean }) => T | null,
+  contextKey: K,
+) {
+  type StoreType = T[K];
+  type StateType = StoreType extends ReadonlyStore<infer S> ? S : never;
+
+  // Define useStoreStoreHook with overloads
+  function useStoreStoreHook(): ReadonlyStore<StateType>;
+  function useStoreStoreHook(options: {
+    optional: true;
+  }): ReadonlyStore<StateType> | null;
+  function useStoreStoreHook(options?: {
+    optional?: boolean;
+  }): ReadonlyStore<StateType> | null {
+    const context = contextHook(options);
+    if (!context) return null;
+    return context[contextKey] as ReadonlyStore<StateType>;
+  }
+
+  // Define useStoreHook with overloads
+  function useStoreHook(): StateType;
+  function useStoreHook<TSelected>(
+    selector: (state: StateType) => TSelected,
+  ): TSelected;
+  function useStoreHook(options: { optional: true }): StateType | null;
+  function useStoreHook<TSelected>(options: {
+    optional: true;
+    selector?: (state: StateType) => TSelected;
+  }): TSelected | null;
+  function useStoreHook<TSelected>(
+    param?:
+      | ((state: StateType) => TSelected)
+      | {
+          optional?: boolean;
+          selector?: (state: StateType) => TSelected;
+        },
+  ): TSelected | StateType | null {
+    let optional = false;
+    let selector: ((state: StateType) => TSelected) | undefined;
+
+    if (typeof param === "function") {
+      selector = param;
+    } else if (param && typeof param === "object") {
+      optional = !!param.optional;
+      selector = param.selector;
+    }
+
+    const store = useStoreStoreHook({
+      optional,
+    } as any) as UseBoundStore<ReadonlyStore<StateType>>;
+    if (!store) return null;
+    return selector ? store(selector) : store();
+  }
+
+  // Return an object with keys based on contextKey
+  return {
+    [contextKey]: useStoreHook,
+    [`${contextKey}Store`]: useStoreStoreHook,
+  } as {
+    [P in K]: typeof useStoreHook;
+  } & {
+    [P in `${K}Store`]: typeof useStoreStoreHook;
+  };
+}

package/src/context/stores/AssistantToolUIs.ts

@@ -0,0 +1,46 @@
+"use client";
+
+import { create } from "zustand";
+import type { ToolCallContentPartComponent } from "../../types/ContentPartComponentTypes";
+import { Unsubscribe } from "../../types";
+
+export type AssistantToolUIsState = Readonly<{
+  getToolUI: (toolName: string) => ToolCallContentPartComponent | null;
+  setToolUI: (
+    toolName: string,
+    render: ToolCallContentPartComponent,
+  ) => Unsubscribe;
+}>;
+
+export const makeAssistantToolUIsStore = () =>
+  create<AssistantToolUIsState>((set) => {
+    const renderers = new Map<string, ToolCallContentPartComponent[]>();
+
+    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

@@ -0,0 +1,23 @@
+import { create } from "zustand";
+
+export type MessageUtilsState = Readonly<{
+  isCopied: boolean;
+  setIsCopied: (value: boolean) => void;
+
+  isHovering: boolean;
+  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/context/stores/ThreadViewport.tsx

@@ -0,0 +1,28 @@
+"use client";
+import { create } from "zustand";
+import type { Unsubscribe } from "../../types/Unsubscribe";
+
+export type ThreadViewportState = Readonly<{
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+  onScrollToBottom: (callback: () => void) => Unsubscribe;
+}>;
+
+export const makeThreadViewportStore = () => {
+  const scrollToBottomListeners = new Set<() => void>();
+
+  return create<ThreadViewportState>(() => ({
+    isAtBottom: true,
+    scrollToBottom: () => {
+      for (const listener of scrollToBottomListeners) {
+        listener();
+      }
+    },
+    onScrollToBottom: (callback) => {
+      scrollToBottomListeners.add(callback);
+      return () => {
+        scrollToBottomListeners.delete(callback);
+      };
+    },
+  }));
+};

package/src/context/stores/index.ts

@@ -0,0 +1,3 @@
+export type { AssistantToolUIsState } from "./AssistantToolUIs";
+export type { MessageUtilsState } from "./MessageUtils";
+export type { ThreadViewportState } from "./ThreadViewport";

package/src/edge.ts

@@ -0,0 +1,4 @@
+export {
+  createEdgeRuntimeAPI,
+  getEdgeRuntimeResponse,
+} from "./runtimes/edge/createEdgeRuntimeAPI";

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useAppendMessage } from "./useAppendMessage";
+export { useSwitchToNewThread } from "./useSwitchToNewThread";

package/src/hooks/useAppendMessage.tsx

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { useThreadRuntime } from "../context/react/ThreadContext";
+import { CreateAppendMessage } from "../api/ThreadRuntime";
+
+/**
+ * @deprecated Use `useThreadRuntime().append()` instead. This will be removed in 0.6.
+ */
+export const useAppendMessage = () => {
+  const threadRuntime = useThreadRuntime();
+
+  const append = useCallback(
+    (message: CreateAppendMessage) => {
+      threadRuntime.append(message);
+    },
+    [threadRuntime],
+  );
+
+  return append;
+};

package/src/hooks/useSwitchToNewThread.tsx

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { useAssistantRuntime } from "../context";
+
+/**
+ * @deprecated Use `useRuntimeActions().switchToNewThread()` instead. This will be removed in 0.6.0.
+ */
+export const useSwitchToNewThread = () => {
+  const assistantRuntime = useAssistantRuntime();
+  const switchToNewThread = useCallback(() => {
+    assistantRuntime.switchToNewThread();
+  }, [assistantRuntime]);
+
+  return switchToNewThread;
+};

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from "./api";
+export * from "./context";
+export * from "./hooks";
+export * from "./model-config";
+export * from "./primitive-hooks";
+export * from "./primitives";
+export * from "./runtimes";
+export * from "./types";
+export * from "./ui";
+
+export * as INTERNAL from "./internal";

package/src/internal.ts

@@ -0,0 +1,15 @@
+export type { ThreadRuntimeCore } from "./runtimes/core/ThreadRuntimeCore";
+export type { ThreadManagerRuntimeCore } from "./runtimes/core/ThreadManagerRuntimeCore";
+export { DefaultThreadComposerRuntimeCore } from "./runtimes/composer/DefaultThreadComposerRuntimeCore";
+export { ProxyConfigProvider } from "./utils/ProxyConfigProvider";
+export { MessageRepository } from "./runtimes/utils/MessageRepository";
+export { BaseAssistantRuntimeCore } from "./runtimes/core/BaseAssistantRuntimeCore";
+export { TooltipIconButton } from "./ui/base/tooltip-icon-button";
+export { generateId } from "./utils/idUtils";
+export { AssistantRuntimeImpl } from "./api/AssistantRuntime";
+export {
+  ThreadRuntimeImpl,
+  type ThreadRuntimeCoreBinding,
+} from "./api/ThreadRuntime";
+
+export * from "./utils/smooth";

package/src/model-config/index.ts

@@ -0,0 +1,12 @@
+export { makeAssistantTool, type AssistantTool } from "./makeAssistantTool";
+export {
+  type AssistantToolUI,
+  makeAssistantToolUI,
+} from "./makeAssistantToolUI";
+export { useAssistantInstructions } from "./useAssistantInstructions";
+export { useAssistantTool, type AssistantToolProps } from "./useAssistantTool";
+export {
+  useAssistantToolUI,
+  type AssistantToolUIProps,
+} from "./useAssistantToolUI";
+export { useInlineRender } from "./useInlineRender";

package/src/model-config/makeAssistantTool.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { FC } from "react";
+import { type AssistantToolProps, useAssistantTool } from "./useAssistantTool";
+
+export type AssistantTool = FC & {
+  unstable_tool: AssistantToolProps<any, any>;
+};
+
+export const makeAssistantTool = <
+  TArgs extends Record<string, unknown>,
+  TResult,
+>(
+  tool: AssistantToolProps<TArgs, TResult>,
+) => {
+  const Tool: AssistantTool = () => {
+    useAssistantTool(tool);
+    return null;
+  };
+  Tool.unstable_tool = tool;
+  return Tool;
+};

package/src/model-config/makeAssistantToolUI.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { FC } from "react";
+import {
+  type AssistantToolUIProps,
+  useAssistantToolUI,
+} from "./useAssistantToolUI";
+
+export type AssistantToolUI = FC & {
+  unstable_tool: AssistantToolUIProps<any, any>;
+};
+
+export const makeAssistantToolUI = <
+  TArgs extends Record<string, unknown>,
+  TResult,
+>(
+  tool: AssistantToolUIProps<TArgs, TResult>,
+) => {
+  const ToolUI: AssistantToolUI = () => {
+    useAssistantToolUI(tool);
+    return null;
+  };
+  ToolUI.unstable_tool = tool;
+  return ToolUI;
+};

package/src/model-config/useAssistantInstructions.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useEffect } from "react";
+import { useAssistantRuntime } from "../context";
+
+export const useAssistantInstructions = (instruction: string) => {
+  const assistantRuntime = useAssistantRuntime();
+  useEffect(() => {
+    const config = {
+      system: instruction,
+    };
+    return assistantRuntime.registerModelConfigProvider({
+      getModelConfig: () => config,
+    });
+  }, [assistantRuntime, instruction]);
+};

package/src/model-config/useAssistantTool.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+  useAssistantRuntime,
+  useToolUIsStore,
+} from "../context/react/AssistantContext";
+import type { ToolCallContentPartComponent } from "../types/ContentPartComponentTypes";
+import type { Tool } from "../types/ModelConfigTypes";
+
+export type AssistantToolProps<
+  TArgs extends Record<string, unknown>,
+  TResult,
+> = Tool<TArgs, TResult> & {
+  toolName: string;
+  render?: ToolCallContentPartComponent<TArgs, TResult> | undefined;
+};
+
+export const useAssistantTool = <
+  TArgs extends Record<string, unknown>,
+  TResult,
+>(
+  tool: AssistantToolProps<TArgs, TResult>,
+) => {
+  const assistantRuntime = useAssistantRuntime();
+  const toolUIsStore = useToolUIsStore();
+
+  useEffect(() => {
+    return tool.render
+      ? toolUIsStore.getState().setToolUI(tool.toolName, tool.render)
+      : undefined;
+  }, [toolUIsStore, tool.toolName, tool.render]);
+
+  useEffect(() => {
+    const { toolName, render, ...rest } = tool;
+    const config = {
+      tools: {
+        [toolName]: rest,
+      },
+    };
+    return assistantRuntime.registerModelConfigProvider({
+      getModelConfig: () => config,
+    });
+  }, [assistantRuntime, tool]);
+};

package/src/model-config/useAssistantToolUI.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useEffect } from "react";
+import { useToolUIsStore } from "../context/react/AssistantContext";
+import type { ToolCallContentPartComponent } from "../types/ContentPartComponentTypes";
+
+export type AssistantToolUIProps<
+  TArgs extends Record<string, unknown>,
+  TResult,
+> = {
+  toolName: string;
+  render: ToolCallContentPartComponent<TArgs, TResult>;
+};
+
+export const useAssistantToolUI = (
+  // TODO remove null option in 0.6
+  tool: AssistantToolUIProps<any, any> | null,
+) => {
+  const toolUIsStore = useToolUIsStore();
+  useEffect(() => {
+    if (!tool) return;
+    return toolUIsStore.getState().setToolUI(tool.toolName, tool.render);
+  }, [toolUIsStore, tool?.toolName, tool?.render]);
+};

package/src/model-config/useInlineRender.tsx

@@ -0,0 +1,18 @@
+import { FC, useCallback, useEffect, useState } from "react";
+import { ToolCallContentPartProps } from "../types";
+import { create } from "zustand";
+
+export const useInlineRender = <TArgs extends Record<string, unknown>, TResult>(
+  toolUI: FC<ToolCallContentPartProps<TArgs, TResult>>,
+): FC<ToolCallContentPartProps<TArgs, TResult>> => {
+  const [useToolUI] = useState(() => create(() => toolUI));
+
+  useEffect(() => {
+    useToolUI.setState(toolUI);
+  });
+
+  return useCallback((args) => {
+    const toolUI = useToolUI();
+    return toolUI(args);
+  }, []);
+};

package/src/primitive-hooks/actionBar/index.ts

@@ -0,0 +1,39 @@
+export {
+  /**
+   * @deprecated Use `useMessageRuntime().unstable_getCopyText()` instead. This will be removed in 0.6.
+   */
+  useActionBarCopy,
+  /**
+   * @deprecated Use `useMessageRuntime().unstable_getCopyText()` instead. This will be removed in 0.6.
+   */
+  type UseActionBarCopyProps,
+} from "./useActionBarCopy";
+/**
+ * @deprecated Use `useMessageRuntime().composer.beginEdit()` instead. This will be removed in 0.6.
+ */
+export { useActionBarEdit } from "./useActionBarEdit";
+
+/**
+ * @deprecated Use `useMessageRuntime().reload()` instead. This will be removed in 0.6.
+ */
+export { useActionBarReload } from "./useActionBarReload";
+
+/**
+ * @deprecated Use `useMessageRuntime().speak()` instead. This will be removed in 0.6.
+ */
+export { useActionBarSpeak } from "./useActionBarSpeak";
+
+/**
+ * @deprecated Use `useMessageRuntime().stopSpeaking()` instead. This will be removed in 0.6.
+ */
+export { useActionBarStopSpeaking } from "./useActionBarStopSpeaking";
+
+/**
+ * @deprecated Use `useMessageRuntime().submitFeedback()` instead. This will be removed in 0.6.
+ */
+export { useActionBarFeedbackPositive } from "./useActionBarFeedbackPositive";
+
+/**
+ * @deprecated Use `useMessageRuntime().submitFeedback()` instead. This will be removed in 0.6.
+ */
+export { useActionBarFeedbackNegative } from "./useActionBarFeedbackNegative";

package/src/primitive-hooks/actionBar/useActionBarCopy.tsx

@@ -0,0 +1,41 @@
+import { useCallback } from "react";
+import {
+  useMessage,
+  useMessageRuntime,
+  useMessageUtils,
+} from "../../context/react/MessageContext";
+import { useComposerRuntime } from "../../context";
+
+export type UseActionBarCopyProps = {
+  copiedDuration?: number | undefined;
+};
+
+export const useActionBarCopy = ({
+  copiedDuration = 3000,
+}: UseActionBarCopyProps = {}) => {
+  const messageRuntime = useMessageRuntime();
+  const composerRuntime = useComposerRuntime();
+  const setIsCopied = useMessageUtils((s) => s.setIsCopied);
+  const hasCopyableContent = useMessage((message) => {
+    return (
+      (message.role !== "assistant" || message.status.type !== "running") &&
+      message.content.some((c) => c.type === "text" && c.text.length > 0)
+    );
+  });
+
+  const callback = useCallback(() => {
+    const { isEditing, text: composerValue } = composerRuntime.getState();
+
+    const valueToCopy = isEditing
+      ? composerValue
+      : messageRuntime.unstable_getCopyText();
+
+    navigator.clipboard.writeText(valueToCopy).then(() => {
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), copiedDuration);
+    });
+  }, [messageRuntime, setIsCopied, composerRuntime, copiedDuration]);
+
+  if (!hasCopyableContent) return null;
+  return callback;
+};

package/src/primitive-hooks/actionBar/useActionBarEdit.tsx

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { useEditComposer, useMessageRuntime } from "../../context";
+
+export const useActionBarEdit = () => {
+  const messageRuntime = useMessageRuntime();
+  const disabled = useEditComposer((c) => c.isEditing);
+
+  const callback = useCallback(() => {
+    messageRuntime.composer.beginEdit();
+  }, [messageRuntime]);
+
+  if (disabled) return null;
+  return callback;
+};

package/src/primitive-hooks/actionBar/useActionBarFeedbackNegative.tsx

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useMessageRuntime } from "../../context";
+
+export const useActionBarFeedbackNegative = () => {
+  const messageRuntime = useMessageRuntime();
+
+  const callback = useCallback(() => {
+    messageRuntime.submitFeedback({ type: "negative" });
+  }, [messageRuntime]);
+
+  return callback;
+};

package/src/primitive-hooks/actionBar/useActionBarFeedbackPositive.tsx

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useMessageRuntime } from "../../context";
+
+export const useActionBarFeedbackPositive = () => {
+  const messageRuntime = useMessageRuntime();
+
+  const callback = useCallback(() => {
+    messageRuntime.submitFeedback({ type: "positive" });
+  }, [messageRuntime]);
+
+  return callback;
+};

package/src/primitive-hooks/actionBar/useActionBarReload.tsx

@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+import { useMessageRuntime } from "../../context/react/MessageContext";
+import { useThreadRuntime } from "../../context/react/ThreadContext";
+import { useCombinedStore } from "../../utils/combined/useCombinedStore";
+
+export const useActionBarReload = () => {
+  const messageRuntime = useMessageRuntime();
+  const threadRuntime = useThreadRuntime();
+
+  const disabled = useCombinedStore(
+    [threadRuntime, messageRuntime],
+    (t, m) => t.isRunning || t.isDisabled || m.role !== "assistant",
+  );
+
+  const callback = useCallback(() => {
+    messageRuntime.reload();
+  }, [messageRuntime]);
+
+  if (disabled) return null;
+  return callback;
+};

package/src/primitive-hooks/actionBar/useActionBarSpeak.tsx

@@ -0,0 +1,20 @@
+import { useCallback } from "react";
+
+import { useMessage, useMessageRuntime } from "../../context";
+
+export const useActionBarSpeak = () => {
+  const messageRunime = useMessageRuntime();
+  const callback = useCallback(async () => {
+    messageRunime.speak();
+  }, [messageRunime]);
+
+  const hasSpeakableContent = useMessage((m) => {
+    return (
+      (m.role !== "assistant" || m.status.type !== "running") &&
+      m.content.some((c) => c.type === "text" && c.text.length > 0)
+    );
+  });
+
+  if (!hasSpeakableContent) return null;
+  return callback;
+};

package/src/primitive-hooks/actionBar/useActionBarStopSpeaking.tsx

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+import {
+  useMessage,
+  useMessageRuntime,
+} from "../../context/react/MessageContext";
+
+export const useActionBarStopSpeaking = () => {
+  const messageRuntime = useMessageRuntime();
+  const isSpeaking = useMessage((u) => u.speech != null);
+
+  const callback = useCallback(async () => {
+    messageRuntime.stopSpeaking();
+  }, [messageRuntime]);
+
+  if (!isSpeaking) return null;
+
+  return callback;
+};

package/src/primitive-hooks/attachment/useAttachmentRemove.ts

@@ -0,0 +1,12 @@
+import { useCallback } from "react";
+import { useAttachmentRuntime } from "../../context/react/AttachmentContext";
+
+export const useAttachmentRemove = () => {
+  const attachmentRuntime = useAttachmentRuntime();
+
+  const handleRemoveAttachment = useCallback(() => {
+    attachmentRuntime.remove();
+  }, [attachmentRuntime]);
+
+  return handleRemoveAttachment;
+};

package/src/primitive-hooks/branchPicker/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @deprecated Use `useMessage(m => m.branhcCount)` instead. This will be removed in 0.6.
+ */
+export { useBranchPickerCount } from "./useBranchPickerCount";
+
+/**
+ * @deprecated Use `useMessageRuntime().switchToBranch({ position: "next" })` instead. This will be removed in 0.6.
+ */
+export { useBranchPickerNext } from "./useBranchPickerNext";
+/**
+ * @deprecated Use `useMessage(m => m.branchNumber)` instead. This will be removed in 0.6.
+ */
+export { useBranchPickerNumber } from "./useBranchPickerNumber";
+
+/**
+ * @deprecated Use `useMessageRuntime().switchToBranch({ position: "previous" })` instead. This will be removed in 0.6.
+ */
+export { useBranchPickerPrevious } from "./useBranchPickerPrevious";

package/src/primitive-hooks/branchPicker/useBranchPickerCount.tsx

@@ -0,0 +1,7 @@
+"use client";
+import { useMessage } from "../../context/react/MessageContext";
+
+export const useBranchPickerCount = () => {
+  const branchCount = useMessage((s) => s.branchCount);
+  return branchCount;
+};

package/src/primitive-hooks/branchPicker/useBranchPickerNext.tsx

@@ -0,0 +1,17 @@
+import { useCallback } from "react";
+import {
+  useMessage,
+  useMessageRuntime,
+} from "../../context/react/MessageContext";
+
+export const useBranchPickerNext = () => {
+  const messageRuntime = useMessageRuntime();
+  const disabled = useMessage((m) => m.branchNumber >= m.branchCount);
+
+  const callback = useCallback(() => {
+    messageRuntime.switchToBranch({ position: "next" });
+  }, [messageRuntime]);
+
+  if (disabled) return null;
+  return callback;
+};