@assistant-ui/react 0.7.53 → 0.7.55

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -1,12 +1,21 @@
 "use client";
 
-import { forwardRef } from "react";
-import { useActionBarFeedbackPositive } from "../../primitive-hooks/actionBar/useActionBarFeedbackPositive";
+import { forwardRef, useCallback } from "react";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { useMessage } from "../../context";
+import { useMessage, useMessageRuntime } from "../../context";
 import { Primitive } from "@radix-ui/react-primitive";
 
+const useActionBarFeedbackPositive = () => {
+  const messageRuntime = useMessageRuntime();
+
+  const callback = useCallback(() => {
+    messageRuntime.submitFeedback({ type: "positive" });
+  }, [messageRuntime]);
+
+  return callback;
+};
+
 export namespace ActionBarPrimitiveFeedbackPositive {
   export type Element = HTMLButtonElement;
   export type Props = ActionButtonProps<typeof useActionBarFeedbackPositive>;

package/src/primitives/actionBar/ActionBarReload.tsx

@@ -1,11 +1,31 @@
 "use client";
 
-import { useActionBarReload } from "../../primitive-hooks/actionBar/useActionBarReload";
 import {
   ActionButtonElement,
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
+import { useCallback } from "react";
+import { useMessageRuntime } from "../../context";
+import { useThreadRuntime } from "../../context/react/ThreadContext";
+import { useCombinedStore } from "../../utils/combined/useCombinedStore";
+
+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;
+};
 
 export namespace ActionBarPrimitiveReload {
   export type Element = ActionButtonElement;

package/src/primitives/actionBar/ActionBarSpeak.tsx

@@ -1,12 +1,30 @@
 "use client";
 
-import { useActionBarSpeak } from "../../primitive-hooks/actionBar/useActionBarSpeak";
+import { useCallback } from "react";
+import { useMessage, useMessageRuntime } from "../../context";
 import {
   ActionButtonElement,
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
 
+const useActionBarSpeak = () => {
+  const messageRuntime = useMessageRuntime();
+  const callback = useCallback(async () => {
+    messageRuntime.speak();
+  }, [messageRuntime]);
+
+  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;
+};
+
 export namespace ActionBarPrimitiveSpeak {
   export type Element = ActionButtonElement;
   export type Props = ActionButtonProps<typeof useActionBarSpeak>;

package/src/primitives/actionBar/ActionBarStopSpeaking.tsx

@@ -1,11 +1,28 @@
 "use client";
 
 import { forwardRef } from "react";
-import { useActionBarStopSpeaking } from "../../primitive-hooks/actionBar/useActionBarStopSpeaking";
 import { ActionButtonProps } from "../../utils/createActionButton";
 import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { Primitive } from "@radix-ui/react-primitive";
 import { composeEventHandlers } from "@radix-ui/primitive";
+import { useCallback } from "react";
+import {
+  useMessage,
+  useMessageRuntime,
+} from "../../context/react/MessageContext";
+
+const useActionBarStopSpeaking = () => {
+  const messageRuntime = useMessageRuntime();
+  const isSpeaking = useMessage((u) => u.speech != null);
+
+  const callback = useCallback(() => {
+    messageRuntime.stopSpeaking();
+  }, [messageRuntime]);
+
+  if (!isSpeaking) return null;
+
+  return callback;
+};
 
 export namespace ActionBarPrimitiveStopSpeaking {
   export type Element = HTMLButtonElement;

package/src/primitives/attachment/AttachmentRemove.tsx

@@ -1,11 +1,22 @@
 "use client";
 
-import { useAttachmentRemove } from "../../primitive-hooks/attachment/useAttachmentRemove";
 import {
   ActionButtonElement,
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
+import { useCallback } from "react";
+import { useAttachmentRuntime } from "../../context/react/AttachmentContext";
+
+const useAttachmentRemove = () => {
+  const attachmentRuntime = useAttachmentRuntime();
+
+  const handleRemoveAttachment = useCallback(() => {
+    attachmentRuntime.remove();
+  }, [attachmentRuntime]);
+
+  return handleRemoveAttachment;
+};
 
 export namespace AttachmentPrimitiveRemove {
   export type Element = ActionButtonElement;

package/src/primitives/branchPicker/BranchPickerCount.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import type { FC } from "react";
-import { useBranchPickerCount } from "../../primitive-hooks/branchPicker/useBranchPickerCount";
+import { useMessage } from "../../context/react/MessageContext";
+
+const useBranchPickerCount = () => {
+  const branchCount = useMessage((s) => s.branchCount);
+  return branchCount;
+};
 
 export namespace BranchPickerPrimitiveCount {
   export type Props = Record<string, never>;

package/src/primitives/branchPicker/BranchPickerNext.tsx

@@ -1,11 +1,27 @@
 "use client";
 
-import { useBranchPickerNext } from "../../primitive-hooks/branchPicker/useBranchPickerNext";
 import {
   ActionButtonElement,
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
+import { useCallback } from "react";
+import {
+  useMessage,
+  useMessageRuntime,
+} from "../../context/react/MessageContext";
+
+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;
+};
 
 export namespace BranchPickerPrimitiveNext {
   export type Element = ActionButtonElement;

package/src/primitives/branchPicker/BranchPickerNumber.tsx

@@ -1,7 +1,12 @@
 "use client";
 
 import type { FC } from "react";
-import { useBranchPickerNumber } from "../../primitive-hooks/branchPicker/useBranchPickerNumber";
+import { useMessage } from "../../context/react/MessageContext";
+
+const useBranchPickerNumber = () => {
+  const branchNumber = useMessage((s) => s.branchNumber);
+  return branchNumber;
+};
 
 export namespace BranchPickerPrimitiveNumber {
   export type Props = Record<string, never>;

package/src/primitives/branchPicker/BranchPickerPrevious.tsx

@@ -1,11 +1,27 @@
 "use client";
 
-import { useBranchPickerPrevious } from "../../primitive-hooks/branchPicker/useBranchPickerPrevious";
 import {
   ActionButtonElement,
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
+import { useCallback } from "react";
+import {
+  useMessage,
+  useMessageRuntime,
+} from "../../context/react/MessageContext";
+
+const useBranchPickerPrevious = () => {
+  const messageRuntime = useMessageRuntime();
+  const disabled = useMessage((m) => m.branchNumber <= 1);
+
+  const callback = useCallback(() => {
+    messageRuntime.switchToBranch({ position: "previous" });
+  }, [messageRuntime]);
+
+  if (disabled) return null;
+  return callback;
+};
 
 export namespace BranchPickerPrimitivePrevious {
   export type Element = ActionButtonElement;

package/src/primitives/composer/ComposerAddAttachment.tsx

@@ -5,7 +5,42 @@ import {
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
-import { useComposerAddAttachment } from "../../primitive-hooks/composer/useComposerAddAttachment";
+import { useCallback } from "react";
+import { useComposer, useComposerRuntime } from "../../context";
+
+const useComposerAddAttachment = ({
+  multiple = true,
+}: {
+  /** allow selecting multiple files */
+  multiple?: boolean | undefined;
+} = {}) => {
+  const disabled = useComposer((c) => !c.isEditing);
+
+  const composerRuntime = useComposerRuntime();
+  const callback = useCallback(() => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = multiple;
+
+    const attachmentAccept = composerRuntime.getAttachmentAccept();
+    if (attachmentAccept !== "*") {
+      input.accept = attachmentAccept;
+    }
+
+    input.onchange = (e) => {
+      const fileList = (e.target as HTMLInputElement).files;
+      if (!fileList) return;
+      for (const file of fileList) {
+        composerRuntime.addAttachment(file);
+      }
+    };
+
+    input.click();
+  }, [composerRuntime, multiple]);
+
+  if (disabled) return null;
+  return callback;
+};
 
 export namespace ComposerPrimitiveAddAttachment {
   export type Element = ActionButtonElement;

package/src/primitives/composer/ComposerCancel.tsx

@@ -5,7 +5,20 @@ import {
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
-import { useComposerCancel } from "../../primitive-hooks/composer/useComposerCancel";
+import { useCallback } from "react";
+import { useComposer, useComposerRuntime } from "../../context";
+
+const useComposerCancel = () => {
+  const composerRuntime = useComposerRuntime();
+  const disabled = useComposer((c) => !c.canCancel);
+
+  const callback = useCallback(() => {
+    composerRuntime.cancel();
+  }, [composerRuntime]);
+
+  if (disabled) return null;
+  return callback;
+};
 
 export namespace ComposerPrimitiveCancel {
   export type Element = ActionButtonElement;

package/src/primitives/composer/ComposerIf.tsx

@@ -1,10 +1,23 @@
 "use client";
 
 import type { FC, PropsWithChildren } from "react";
-import {
-  UseComposerIfProps,
-  useComposerIf,
-} from "../../primitive-hooks/composer/useComposerIf";
+import { useComposer } from "../../context/react/ComposerContext";
+import type { RequireAtLeastOne } from "../../utils/RequireAtLeastOne";
+
+type ComposerIfFilters = {
+  editing: boolean | undefined;
+};
+
+export type UseComposerIfProps = RequireAtLeastOne<ComposerIfFilters>;
+
+const useComposerIf = (props: UseComposerIfProps) => {
+  return useComposer((composer) => {
+    if (props.editing === true && !composer.isEditing) return false;
+    if (props.editing === false && composer.isEditing) return false;
+
+    return true;
+  });
+};
 
 export namespace ComposerPrimitiveIf {
   export type Props = PropsWithChildren<UseComposerIfProps>;

package/src/primitives/composer/ComposerRoot.tsx

@@ -8,7 +8,7 @@ import {
   forwardRef,
   ComponentPropsWithoutRef,
 } from "react";
-import { useComposerSend } from "../../primitive-hooks/composer/useComposerSend";
+import { useComposerSend } from "./ComposerSend";
 
 export namespace ComposerPrimitiveRoot {
   export type Element = ComponentRef<typeof Primitive.form>;

package/src/primitives/composer/ComposerSend.tsx

@@ -5,7 +5,27 @@ import {
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
-import { useComposerSend } from "../../primitive-hooks/composer/useComposerSend";
+import { useCallback } from "react";
+import { useCombinedStore } from "../../utils/combined/useCombinedStore";
+import { useThreadRuntime } from "../../context/react/ThreadContext";
+import { useComposerRuntime } from "../../context";
+
+export const useComposerSend = () => {
+  const composerRuntime = useComposerRuntime();
+  const threadRuntime = useThreadRuntime();
+
+  const disabled = useCombinedStore(
+    [threadRuntime, composerRuntime],
+    (t, c) => t.isRunning || !c.isEditing || c.isEmpty,
+  );
+
+  const callback = useCallback(() => {
+    composerRuntime.send();
+  }, [composerRuntime]);
+
+  if (disabled) return null;
+  return callback;
+};
 
 export namespace ComposerPrimitiveSend {
   export type Element = ActionButtonElement;

package/src/primitives/contentPart/ContentPartDisplay.tsx

@@ -1,12 +1,15 @@
 "use client";
 
 import type { FC } from "react";
-import { useContentPartDisplay } from "../../primitive-hooks/contentPart/useContentPartDisplay";
+import { useContentPartDisplay } from "./useContentPartDisplay";
 
 export namespace ContentPartPrimitiveDisplay {
   export type Props = Record<string, never>;
 }
 
+/**
+ * @deprecated UI content parts are deprecated and will be removed in the next major version.
+ */
 export const ContentPartPrimitiveDisplay: FC<
   ContentPartPrimitiveDisplay.Props
 > = () => {

package/src/primitives/contentPart/ContentPartImage.tsx

@@ -2,7 +2,7 @@
 
 import { Primitive } from "@radix-ui/react-primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
-import { useContentPartImage } from "../../primitive-hooks/contentPart/useContentPartImage";
+import { useContentPartImage } from "./useContentPartImage";
 
 export namespace ContentPartPrimitiveImage {
   export type Element = ComponentRef<typeof Primitive.img>;

package/src/primitives/contentPart/ContentPartText.tsx

@@ -7,7 +7,7 @@ import {
   ComponentPropsWithoutRef,
   ElementType,
 } from "react";
-import { useContentPartText } from "../../primitive-hooks/contentPart/useContentPartText";
+import { useContentPartText } from "./useContentPartText";
 import { useSmooth } from "../../utils/smooth/useSmooth";
 
 export namespace ContentPartPrimitiveText {

package/src/primitives/index.ts

@@ -8,3 +8,7 @@ export * as MessagePrimitive from "./message";
 export * as ThreadPrimitive from "./thread";
 export * as ThreadListPrimitive from "./threadList";
 export * as ThreadListItemPrimitive from "./threadListItem";
+
+export { useContentPartDisplay } from "./contentPart/useContentPartDisplay";
+export { useContentPartImage } from "./contentPart/useContentPartImage";
+export { useContentPartText } from "./contentPart/useContentPartText";

package/src/primitives/message/MessageIf.tsx

@@ -2,9 +2,83 @@
 
 import type { FC, PropsWithChildren } from "react";
 import {
-  UseMessageIfProps,
-  useMessageIf,
-} from "../../primitive-hooks/message/useMessageIf";
+  useMessageRuntime,
+  useMessageUtilsStore,
+} from "../../context/react/MessageContext";
+import type { RequireAtLeastOne } from "../../utils/RequireAtLeastOne";
+import { useCombinedStore } from "../../utils/combined/useCombinedStore";
+
+type MessageIfFilters = {
+  user: boolean | undefined;
+  assistant: boolean | undefined;
+  system: boolean | undefined;
+  hasBranches: boolean | undefined;
+  copied: boolean | undefined;
+  lastOrHover: boolean | undefined;
+  speaking: boolean | undefined;
+  hasAttachments: boolean | undefined;
+  hasContent: boolean | undefined;
+  submittedFeedback: "positive" | "negative" | null | undefined;
+};
+type UseMessageIfProps = RequireAtLeastOne<MessageIfFilters>;
+
+const useMessageIf = (props: UseMessageIfProps) => {
+  const messageRuntime = useMessageRuntime();
+  const messageUtilsStore = useMessageUtilsStore();
+
+  return useCombinedStore(
+    [messageRuntime, messageUtilsStore],
+    (
+      {
+        role,
+        attachments,
+        content,
+        branchCount,
+        isLast,
+        speech,
+        submittedFeedback,
+      },
+      { isCopied, isHovering },
+    ) => {
+      if (props.hasBranches === true && branchCount < 2) return false;
+
+      if (props.user && role !== "user") return false;
+      if (props.assistant && role !== "assistant") return false;
+      if (props.system && role !== "system") return false;
+
+      if (props.lastOrHover === true && !isHovering && !isLast) return false;
+
+      if (props.copied === true && !isCopied) return false;
+      if (props.copied === false && isCopied) return false;
+
+      if (props.speaking === true && speech == null) return false;
+      if (props.speaking === false && speech != null) return false;
+
+      if (
+        props.hasAttachments === true &&
+        (role !== "user" || !attachments.length)
+      )
+        return false;
+      if (
+        props.hasAttachments === false &&
+        role === "user" &&
+        !!attachments.length
+      )
+        return false;
+
+      if (props.hasContent === true && content.length === 0) return false;
+      if (props.hasContent === false && content.length > 0) return false;
+
+      if (
+        props.submittedFeedback !== undefined &&
+        (submittedFeedback?.type ?? null) !== props.submittedFeedback
+      )
+        return false;
+
+      return true;
+    },
+  );
+};
 
 export namespace MessagePrimitiveIf {
   export type Props = PropsWithChildren<UseMessageIfProps>;

package/src/primitives/thread/ThreadEmpty.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC, PropsWithChildren } from "react";
-import { useThreadEmpty } from "../../primitive-hooks/thread/useThreadEmpty";
+import { useThread } from "../../context";
 
 export namespace ThreadPrimitiveEmpty {
   export type Props = PropsWithChildren;
@@ -10,7 +10,7 @@ export namespace ThreadPrimitiveEmpty {
 export const ThreadPrimitiveEmpty: FC<ThreadPrimitiveEmpty.Props> = ({
   children,
 }) => {
-  const empty = useThreadEmpty();
+  const empty = useThread((u) => u.messages.length === 0);
   return empty ? children : null;
 };
 

package/src/primitives/thread/ThreadIf.tsx

@@ -1,10 +1,29 @@
 "use client";
 
 import type { FC, PropsWithChildren } from "react";
-import {
-  UseThreadIfProps,
-  useThreadIf,
-} from "../../primitive-hooks/thread/useThreadIf";
+import { useThread } from "../../context";
+import type { RequireAtLeastOne } from "../../utils/RequireAtLeastOne";
+
+type ThreadIfFilters = {
+  empty: boolean | undefined;
+  running: boolean | undefined;
+  disabled: boolean | undefined;
+};
+
+type UseThreadIfProps = RequireAtLeastOne<ThreadIfFilters>;
+
+const useThreadIf = (props: UseThreadIfProps) => {
+  return useThread((thread) => {
+    if (props.empty === true && thread.messages.length !== 0) return false;
+    if (props.empty === false && thread.messages.length === 0) return false;
+    if (props.running === true && !thread.isRunning) return false;
+    if (props.running === false && thread.isRunning) return false;
+    if (props.disabled === true && !thread.isDisabled) return false;
+    if (props.disabled === false && thread.isDisabled) return false;
+
+    return true;
+  });
+};
 
 export namespace ThreadPrimitiveIf {
   export type Props = PropsWithChildren<UseThreadIfProps>;

package/src/primitives/thread/ThreadScrollToBottom.tsx

@@ -5,7 +5,22 @@ import {
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
-import { useThreadScrollToBottom } from "../../primitive-hooks/thread/useThreadScrollToBottom";
+import { useCallback } from "react";
+import { useThreadViewport } from "../../context";
+import { useThreadViewportStore } from "../../context/react/ThreadContext";
+
+const useThreadScrollToBottom = () => {
+  const isAtBottom = useThreadViewport((s) => s.isAtBottom);
+
+  const threadViewportStore = useThreadViewportStore();
+
+  const handleScrollToBottom = useCallback(() => {
+    threadViewportStore.getState().scrollToBottom();
+  }, [threadViewportStore]);
+
+  if (isAtBottom) return null;
+  return handleScrollToBottom;
+};
 
 export namespace ThreadPrimitiveScrollToBottom {
   export type Element = ActionButtonElement;

package/src/primitives/thread/ThreadSuggestion.tsx

@@ -5,7 +5,33 @@ import {
   ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
-import { useThreadSuggestion } from "../../primitive-hooks/thread/useThreadSuggestion";
+import { useCallback } from "react";
+import { useThread } from "../../context";
+import { useThreadRuntime } from "../../context/react/ThreadContext";
+
+const useThreadSuggestion = ({
+  prompt,
+  autoSend,
+}: {
+  prompt: string;
+  method: "replace";
+  autoSend?: boolean | undefined;
+}) => {
+  const threadRuntime = useThreadRuntime();
+
+  const disabled = useThread((t) => t.isDisabled);
+  const callback = useCallback(() => {
+    if (autoSend && !threadRuntime.getState().isRunning) {
+      threadRuntime.append(prompt);
+      threadRuntime.composer.setText("");
+    } else {
+      threadRuntime.composer.setText(prompt);
+    }
+  }, [threadRuntime, autoSend, prompt]);
+
+  if (disabled) return null;
+  return callback;
+};
 
 export namespace ThreadPrimitiveSuggestion {
   export type Element = ActionButtonElement;

package/src/primitives/thread/ThreadViewport.tsx

@@ -3,7 +3,7 @@
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Primitive } from "@radix-ui/react-primitive";
 import { type ComponentRef, forwardRef, ComponentPropsWithoutRef } from "react";
-import { useThreadViewportAutoScroll } from "../../primitive-hooks/thread/useThreadViewportAutoScroll";
+import { useThreadViewportAutoScroll } from "./useThreadViewportAutoScroll";
 
 export namespace ThreadPrimitiveViewport {
   export type Element = ComponentRef<typeof Primitive.div>;

package/src/runtimes/adapters/thread-history/ThreadHistoryAdapter.ts

@@ -3,7 +3,6 @@ import {
   ExportedMessageRepositoryItem,
 } from "../../utils/MessageRepository";
 
-// TODO external store - which version to save? how to restore?
 export type ThreadHistoryAdapter = {
   load(): Promise<ExportedMessageRepository>;
   append(item: ExportedMessageRepositoryItem): Promise<void>;

package/src/runtimes/core/AssistantRuntimeCore.tsx

@@ -1,12 +1,12 @@
 import { ComponentType } from "react";
-import type { ModelConfigProvider } from "../../types/ModelConfigTypes";
+import type { ModelContextProvider } from "../../model-context/ModelContextTypes";
 import type { Unsubscribe } from "../../types/Unsubscribe";
 import { ThreadListRuntimeCore } from "./ThreadListRuntimeCore";
 
 export type AssistantRuntimeCore = {
   readonly threads: ThreadListRuntimeCore;
 
-  registerModelConfigProvider: (provider: ModelConfigProvider) => Unsubscribe;
+  registerModelContextProvider: (provider: ModelContextProvider) => Unsubscribe;
 
   /**
    * EXPERIMENTAL: A component that is rendered inside the AssistantRuntimeProvider.