@assistant-ui/react 0.5.92 → 0.5.94

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

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

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

@@ -0,0 +1,17 @@
+import { useCallback } from "react";
+import {
+  useMessage,
+  useMessageRuntime,
+} from "../../context/react/MessageContext";
+
+export 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;
+};

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

@@ -0,0 +1,17 @@
+/**
+ * @deprecated Use `useComposerRuntime().cancel()` instead. This will be removed in 0.6.
+ */
+export { useComposerCancel } from "./useComposerCancel";
+/**
+ * @deprecated Use `useComoser(c => c.isEditing)` instead. This will be removed in 0.6.
+ */
+export { useComposerIf } from "./useComposerIf";
+/**
+ * @deprecated Use `useComposerRuntime().send()` instead. This will be removed in 0.6.
+ */
+export { useComposerSend } from "./useComposerSend";
+
+/**
+ * @deprecated Use `useComposerRuntime().addAttachment()` instead. This will be removed in 0.6.
+ */
+export { useComposerAddAttachment } from "./useComposerAddAttachment";

package/src/primitive-hooks/composer/useComposerAddAttachment.tsx

@@ -0,0 +1,28 @@
+import { useCallback } from "react";
+import { useComposer, useComposerRuntime } from "../../context";
+
+export const useComposerAddAttachment = () => {
+  const disabled = useComposer((c) => !c.isEditing);
+
+  const composerRuntime = useComposerRuntime();
+  const callback = useCallback(() => {
+    const input = document.createElement("input");
+    input.type = "file";
+
+    const attachmentAccept = composerRuntime.getAttachmentAccept();
+    if (attachmentAccept !== "*") {
+      input.accept = attachmentAccept;
+    }
+
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+      composerRuntime.addAttachment(file);
+    };
+
+    input.click();
+  }, [composerRuntime]);
+
+  if (disabled) return null;
+  return callback;
+};

package/src/primitive-hooks/composer/useComposerCancel.tsx

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { useComposer, useComposerRuntime } from "../../context";
+
+export const useComposerCancel = () => {
+  const composerRuntime = useComposerRuntime();
+  const disabled = useComposer((c) => !c.canCancel);
+
+  const callback = useCallback(() => {
+    composerRuntime.cancel();
+  }, [composerRuntime]);
+
+  if (disabled) return null;
+  return callback;
+};

package/src/primitive-hooks/composer/useComposerIf.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useComposer } from "../../context/react/ComposerContext";
+import type { RequireAtLeastOne } from "../../utils/RequireAtLeastOne";
+
+type ComposerIfFilters = {
+  editing: boolean | undefined;
+};
+
+export type UseComposerIfProps = RequireAtLeastOne<ComposerIfFilters>;
+
+export 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;
+  });
+};

package/src/primitive-hooks/composer/useComposerSend.tsx

@@ -0,0 +1,23 @@
+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(() => {
+    if (!composerRuntime.getState().isEditing) return;
+
+    composerRuntime.send();
+  }, [threadRuntime]);
+
+  if (disabled) return null;
+  return callback;
+};

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

@@ -0,0 +1,3 @@
+export { useContentPartDisplay } from "./useContentPartDisplay";
+export { useContentPartImage } from "./useContentPartImage";
+export { useContentPartText } from "./useContentPartText";

package/src/primitive-hooks/contentPart/useContentPartDisplay.tsx

@@ -0,0 +1,16 @@
+import { ContentPartState } from "../../api/ContentPartRuntime";
+import { useContentPart } from "../../context/react/ContentPartContext";
+import { UIContentPart } from "../../types";
+
+export const useContentPartDisplay = () => {
+  const display = useContentPart((c) => {
+    if (c.type !== "ui")
+      throw new Error(
+        "This component can only be used inside ui content parts.",
+      );
+
+    return c as ContentPartState & UIContentPart & { part: UIContentPart };
+  });
+
+  return display;
+};

package/src/primitive-hooks/contentPart/useContentPartImage.tsx

@@ -0,0 +1,17 @@
+import { ContentPartState } from "../../api/ContentPartRuntime";
+import { useContentPart } from "../../context/react/ContentPartContext";
+import { ImageContentPart } from "../../types";
+
+export const useContentPartImage = () => {
+  const image = useContentPart((c) => {
+    if (c.type !== "image")
+      throw new Error(
+        "ContentPartImage can only be used inside image content parts.",
+      );
+
+    return c as ContentPartState &
+      ImageContentPart & { part: ImageContentPart };
+  });
+
+  return image;
+};

package/src/primitive-hooks/contentPart/useContentPartText.tsx

@@ -0,0 +1,16 @@
+import { ContentPartState } from "../../api/ContentPartRuntime";
+import { useContentPart } from "../../context/react/ContentPartContext";
+import { TextContentPart } from "../../types";
+
+export const useContentPartText = () => {
+  const text = useContentPart((c) => {
+    if (c.type !== "text")
+      throw new Error(
+        "ContentPartText can only be used inside text content parts.",
+      );
+
+    return c as ContentPartState & TextContentPart & { part: TextContentPart };
+  });
+
+  return text;
+};

package/src/primitive-hooks/index.ts

@@ -0,0 +1,6 @@
+export * from "./actionBar";
+export * from "./branchPicker";
+export * from "./composer";
+export * from "./contentPart";
+export * from "./message";
+export * from "./thread";

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

@@ -0,0 +1,4 @@
+/**
+ * @deprecated Use `useMessage(m => <condition>)` instead. This will be removed in 0.6.
+ */
+export { useMessageIf } from "./useMessageIf";

package/src/primitive-hooks/message/useMessageIf.tsx

@@ -0,0 +1,79 @@
+"use client";
+import {
+  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;
+};
+export type UseMessageIfProps = RequireAtLeastOne<MessageIfFilters>;
+
+export 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;
+    },
+  );
+};

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

@@ -0,0 +1,16 @@
+/**
+ * @deprecated Use `useThread(t => t.messages.length === 0)` instead. This will be removed in 0.6.
+ */
+export { useThreadEmpty } from "./useThreadEmpty";
+/**
+ * @deprecated Use `useThread(m => <condition>)` instead. This will be removed in 0.6.
+ */
+export { useThreadIf } from "./useThreadIf";
+/**
+ * @deprecated Use `useThreadViewport().scrollToBottom()` instead. This will be removed in 0.6.
+ */
+export { useThreadScrollToBottom } from "./useThreadScrollToBottom";
+/**
+ * @deprecated Use `useThreadRuntime().append()` instead. This will be removed in 0.6.
+ */
+export { useThreadSuggestion } from "./useThreadSuggestion";

package/src/primitive-hooks/thread/useThread.tsx

@@ -0,0 +1 @@
+

package/src/primitive-hooks/thread/useThreadEmpty.tsx

@@ -0,0 +1,5 @@
+import { useThreadIf } from "./useThreadIf";
+
+export const useThreadEmpty = () => {
+  return useThreadIf({ empty: true });
+};

package/src/primitive-hooks/thread/useThreadIf.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useThread } from "../../context";
+import type { RequireAtLeastOne } from "../../utils/RequireAtLeastOne";
+
+type ThreadIfFilters = {
+  empty: boolean | undefined;
+  running: boolean | undefined;
+  disabled: boolean | undefined;
+};
+
+export type UseThreadIfProps = RequireAtLeastOne<ThreadIfFilters>;
+
+export 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;
+  });
+};

package/src/primitive-hooks/thread/useThreadScrollToBottom.tsx

@@ -0,0 +1,16 @@
+import { useCallback } from "react";
+import { useThreadViewport } from "../../context";
+import { useThreadViewportStore } from "../../context/react/ThreadContext";
+
+export const useThreadScrollToBottom = () => {
+  const isAtBottom = useThreadViewport((s) => s.isAtBottom);
+
+  const threadViewportStore = useThreadViewportStore();
+
+  const handleScrollToBottom = useCallback(() => {
+    threadViewportStore.getState().scrollToBottom();
+  }, [threadViewportStore]);
+
+  if (isAtBottom) return null;
+  return handleScrollToBottom;
+};

package/src/primitive-hooks/thread/useThreadSuggestion.tsx

@@ -0,0 +1,29 @@
+import { useCallback } from "react";
+import { useThread } from "../../context";
+import { useThreadRuntime } from "../../context/react/ThreadContext";
+
+export type UseApplyThreadSuggestionProps = {
+  prompt: string;
+  method: "replace";
+  autoSend?: boolean | undefined;
+};
+
+export const useThreadSuggestion = ({
+  prompt,
+  autoSend,
+}: UseApplyThreadSuggestionProps) => {
+  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;
+};

package/src/primitive-hooks/thread/useThreadViewportAutoScroll.tsx

@@ -0,0 +1,98 @@
+"use client";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useEffect, useRef } from "react";
+import {
+  useThreadRuntime,
+  useThreadViewportStore,
+} from "../../context/react/ThreadContext";
+import { useOnResizeContent } from "../../utils/hooks/useOnResizeContent";
+import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
+import { useManagedRef } from "../../utils/hooks/useManagedRef";
+import { writableStore } from "../../context/ReadonlyStore";
+
+export type UseThreadViewportAutoScrollProps = {
+  autoScroll?: boolean | undefined;
+  unstable_scrollToBottomOnRunStart?: boolean | undefined;
+};
+
+export const useThreadViewportAutoScroll = <TElement extends HTMLElement>({
+  autoScroll = true,
+  unstable_scrollToBottomOnRunStart = true,
+}: UseThreadViewportAutoScrollProps) => {
+  const divRef = useRef<TElement>(null);
+
+  const threadViewportStore = useThreadViewportStore();
+
+  const lastScrollTop = useRef<number>(0);
+
+  // bug: when ScrollToBottom's button changes its disabled state, the scroll stops
+  // fix: delay the state change until the scroll is done
+  const isScrollingToBottomRef = useRef(false);
+
+  const scrollToBottom = (behavior: ScrollBehavior) => {
+    const div = divRef.current;
+    if (!div || !autoScroll) return;
+
+    isScrollingToBottomRef.current = true;
+    div.scrollTo({ top: div.scrollHeight, behavior });
+  };
+
+  const handleScroll = () => {
+    const div = divRef.current;
+    if (!div) return;
+
+    const isAtBottom = threadViewportStore.getState().isAtBottom;
+    const newIsAtBottom =
+      div.scrollHeight - div.scrollTop <= div.clientHeight + 1; // TODO figure out why +1 is needed
+
+    if (!newIsAtBottom && lastScrollTop.current < div.scrollTop) {
+      // ignore scroll down
+    } else {
+      if (newIsAtBottom) {
+        isScrollingToBottomRef.current = false;
+      }
+
+      if (newIsAtBottom !== isAtBottom) {
+        writableStore(threadViewportStore).setState({
+          isAtBottom: newIsAtBottom,
+        });
+      }
+    }
+
+    lastScrollTop.current = div.scrollTop;
+  };
+
+  const resizeRef = useOnResizeContent(() => {
+    if (
+      isScrollingToBottomRef.current ||
+      threadViewportStore.getState().isAtBottom
+    ) {
+      scrollToBottom("instant");
+    }
+
+    handleScroll();
+  });
+
+  const scrollRef = useManagedRef<HTMLElement>((el) => {
+    el.addEventListener("scroll", handleScroll);
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  });
+
+  const autoScrollRef = useComposedRefs<TElement>(resizeRef, scrollRef, divRef);
+
+  useOnScrollToBottom(() => {
+    scrollToBottom("auto");
+  });
+
+  // autoscroll on run start
+  const threadRuntime = useThreadRuntime();
+  useEffect(() => {
+    if (!unstable_scrollToBottomOnRunStart) return undefined;
+
+    return threadRuntime.unstable_on("run-start", focus);
+  }, [unstable_scrollToBottomOnRunStart]);
+
+  return autoScrollRef;
+};

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { forwardRef } from "react";
+import { useActionBarCopy } from "../../primitive-hooks/actionBar/useActionBarCopy";
+import { ActionButtonProps } from "../../utils/createActionButton";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { Primitive } from "@radix-ui/react-primitive";
+import { useMessageUtils } from "../../context";
+
+/**
+ * @deprecated Use `ActionBarPrimitive.Copy.Props` instead. This will be removed in 0.6.
+ */
+export type ActionBarPrimitiveCopyProps = ActionBarPrimitiveCopy.Props;
+
+export namespace ActionBarPrimitiveCopy {
+  export type Element = HTMLButtonElement;
+  export type Props = ActionButtonProps<typeof useActionBarCopy>;
+}
+
+export const ActionBarPrimitiveCopy = forwardRef<
+  ActionBarPrimitiveCopy.Element,
+  ActionBarPrimitiveCopy.Props
+>(({ copiedDuration, onClick, disabled, ...props }, forwardedRef) => {
+  const isCopied = useMessageUtils((u) => u.isCopied);
+  const callback = useActionBarCopy({ copiedDuration });
+  return (
+    <Primitive.button
+      type="button"
+      {...(isCopied ? { "data-copied": "true" } : {})}
+      {...props}
+      ref={forwardedRef}
+      disabled={disabled || !callback}
+      onClick={composeEventHandlers(onClick, () => {
+        callback?.();
+      })}
+    />
+  );
+});
+
+ActionBarPrimitiveCopy.displayName = "ActionBarPrimitive.Copy";

package/src/primitives/actionBar/ActionBarEdit.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useActionBarEdit } from "../../primitive-hooks/actionBar/useActionBarEdit";
+import {
+  ActionButtonElement,
+  ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+
+/**
+ * @deprecated Use `ActionBarPrimitive.Edit.Props` instead. This will be removed in 0.6.
+ */
+export type ActionBarPrimitiveEditProps = ActionBarPrimitiveEdit.Props;
+
+export namespace ActionBarPrimitiveEdit {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useActionBarEdit>;
+}
+
+export const ActionBarPrimitiveEdit = createActionButton(
+  "ActionBarPrimitive.Edit",
+  useActionBarEdit,
+);

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { forwardRef } from "react";
+import { useActionBarFeedbackNegative } from "../../primitive-hooks/actionBar/useActionBarFeedbackNegative";
+import { ActionButtonProps } from "../../utils/createActionButton";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { useMessage } from "../../context";
+import { Primitive } from "@radix-ui/react-primitive";
+
+/**
+ * @deprecated Use `ActionBarPrimitive.FeedbackNegative.Props` instead. This will be removed in 0.6.
+ */
+export type ActionBarPrimitiveFeedbackNegativeProps =
+  ActionBarPrimitiveFeedbackNegative.Props;
+
+export namespace ActionBarPrimitiveFeedbackNegative {
+  export type Element = HTMLButtonElement;
+  export type Props = ActionButtonProps<typeof useActionBarFeedbackNegative>;
+}
+
+export const ActionBarPrimitiveFeedbackNegative = forwardRef<
+  ActionBarPrimitiveFeedbackNegative.Element,
+  ActionBarPrimitiveFeedbackNegative.Props
+>(({ onClick, disabled, ...props }, forwardedRef) => {
+  const isSubmitted = useMessage(
+    (u) => u.submittedFeedback?.type === "negative",
+  );
+  const callback = useActionBarFeedbackNegative();
+  return (
+    <Primitive.button
+      type="button"
+      {...(isSubmitted ? { "data-submitted": "true" } : {})}
+      {...props}
+      ref={forwardedRef}
+      disabled={disabled || !callback}
+      onClick={composeEventHandlers(onClick, () => {
+        callback?.();
+      })}
+    />
+  );
+});
+
+ActionBarPrimitiveFeedbackNegative.displayName =
+  "ActionBarPrimitive.FeedbackNegative";

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { forwardRef } from "react";
+import { useActionBarFeedbackPositive } from "../../primitive-hooks/actionBar/useActionBarFeedbackPositive";
+import { ActionButtonProps } from "../../utils/createActionButton";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { useMessage } from "../../context";
+import { Primitive } from "@radix-ui/react-primitive";
+
+/**
+ * @deprecated Use `ActionBarPrimitive.FeedbackPositive.Props` instead. This will be removed in 0.6.
+ */
+export type ActionBarPrimitiveFeedbackPositiveProps =
+  ActionBarPrimitiveFeedbackPositive.Props;
+
+export namespace ActionBarPrimitiveFeedbackPositive {
+  export type Element = HTMLButtonElement;
+  export type Props = ActionButtonProps<typeof useActionBarFeedbackPositive>;
+}
+
+export const ActionBarPrimitiveFeedbackPositive = forwardRef<
+  ActionBarPrimitiveFeedbackPositive.Element,
+  ActionBarPrimitiveFeedbackPositive.Props
+>(({ onClick, disabled, ...props }, forwardedRef) => {
+  const isSubmitted = useMessage(
+    (u) => u.submittedFeedback?.type === "positive",
+  );
+  const callback = useActionBarFeedbackPositive();
+  return (
+    <Primitive.button
+      type="button"
+      {...(isSubmitted ? { "data-submitted": "true" } : {})}
+      {...props}
+      ref={forwardedRef}
+      disabled={disabled || !callback}
+      onClick={composeEventHandlers(onClick, () => {
+        callback?.();
+      })}
+    />
+  );
+});
+
+ActionBarPrimitiveFeedbackPositive.displayName =
+  "ActionBarPrimitive.FeedbackPositive";

package/src/primitives/actionBar/ActionBarReload.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useActionBarReload } from "../../primitive-hooks/actionBar/useActionBarReload";
+import {
+  ActionButtonElement,
+  ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+
+/**
+ * @deprecated Use `ActionBarPrimitive.Reload.Props` instead. This will be removed in 0.6.
+ */
+export type ActionBarPrimitiveReloadProps = ActionBarPrimitiveReload.Props;
+
+export namespace ActionBarPrimitiveReload {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useActionBarReload>;
+}
+
+export const ActionBarPrimitiveReload = createActionButton(
+  "ActionBarPrimitive.Reload",
+  useActionBarReload,
+);