@assistant-ui/react 0.5.92 → 0.5.94

package/src/primitives/composer/ComposerAttachments.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { ComponentType, type FC, memo, useMemo } from "react";
+import { Attachment } from "../../types";
+import { useComposer, useComposerRuntime } from "../../context";
+import { useThreadComposerAttachment } from "../../context/react/AttachmentContext";
+import { AttachmentRuntimeProvider } from "../../context/providers/AttachmentRuntimeProvider";
+
+/**
+ * @deprecated Use `ComposerPrimitive.Attachments.Props` instead. This will be removed in 0.6.
+ */
+export type ComposerPrimitiveAttachmentsProps =
+  ComposerPrimitiveAttachments.Props;
+
+export namespace ComposerPrimitiveAttachments {
+  export type Props = {
+    components:
+      | {
+          Image?: ComponentType | undefined;
+          Document?: ComponentType | undefined;
+          File?: ComponentType | undefined;
+          Attachment?: ComponentType | undefined;
+        }
+      | undefined;
+  };
+}
+
+const getComponent = (
+  components: ComposerPrimitiveAttachments.Props["components"],
+  attachment: Attachment,
+) => {
+  const type = attachment.type;
+  switch (type) {
+    case "image":
+      return components?.Image ?? components?.Attachment;
+    case "document":
+      return components?.Document ?? components?.Attachment;
+    case "file":
+      return components?.File ?? components?.Attachment;
+    default:
+      const _exhaustiveCheck: never = type;
+      throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
+  }
+};
+
+const AttachmentComponent: FC<{
+  components: ComposerPrimitiveAttachments.Props["components"];
+}> = ({ components }) => {
+  const Component = useThreadComposerAttachment((a) =>
+    getComponent(components, a),
+  );
+
+  if (!Component) return null;
+  return <Component />;
+};
+
+const ComposerAttachmentImpl: FC<
+  ComposerPrimitiveAttachments.Props & { attachmentIndex: number }
+> = ({ components, attachmentIndex }) => {
+  const composerRuntime = useComposerRuntime();
+  const runtime = useMemo(
+    () => composerRuntime.getAttachmentByIndex(attachmentIndex),
+    [composerRuntime, attachmentIndex],
+  );
+
+  return (
+    <AttachmentRuntimeProvider runtime={runtime}>
+      <AttachmentComponent components={components} />
+    </AttachmentRuntimeProvider>
+  );
+};
+
+const ComposerAttachment = memo(
+  ComposerAttachmentImpl,
+  (prev, next) =>
+    prev.attachmentIndex === next.attachmentIndex &&
+    prev.components?.Image === next.components?.Image &&
+    prev.components?.Document === next.components?.Document &&
+    prev.components?.File === next.components?.File &&
+    prev.components?.Attachment === next.components?.Attachment,
+);
+
+export const ComposerPrimitiveAttachments: FC<
+  ComposerPrimitiveAttachments.Props
+> = ({ components }) => {
+  const attachmentsCount = useComposer((s) => s.attachments.length);
+
+  return Array.from({ length: attachmentsCount }, (_, index) => (
+    <ComposerAttachment
+      key={index}
+      attachmentIndex={index}
+      components={components}
+    />
+  ));
+};
+
+ComposerPrimitiveAttachments.displayName = "ComposerPrimitive.Attachments";

package/src/primitives/composer/ComposerCancel.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import {
+  ActionButtonElement,
+  ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useComposerCancel } from "../../primitive-hooks/composer/useComposerCancel";
+
+/**
+ * @deprecated Use `ComposerPrimitive.Cancel.Props` instead. This will be removed in 0.6.
+ */
+export type ComposerPrimitiveCancelProps = ComposerPrimitiveCancel.Props;
+
+export namespace ComposerPrimitiveCancel {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useComposerCancel>;
+}
+
+export const ComposerPrimitiveCancel = createActionButton(
+  "ComposerPrimitive.Cancel",
+  useComposerCancel,
+);

package/src/primitives/composer/ComposerIf.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import type { FC, PropsWithChildren } from "react";
+import {
+  UseComposerIfProps,
+  useComposerIf,
+} from "../../primitive-hooks/composer/useComposerIf";
+
+/**
+ * @deprecated Use `ComposerPrimitive.If.Props` instead. This will be removed in 0.6.
+ */
+export type ComposerPrimitiveIfProps = ComposerPrimitiveIf.Props;
+
+export namespace ComposerPrimitiveIf {
+  export type Props = PropsWithChildren<UseComposerIfProps>;
+}
+
+export const ComposerPrimitiveIf: FC<ComposerPrimitiveIf.Props> = ({
+  children,
+  ...query
+}) => {
+  const result = useComposerIf(query);
+  return result ? children : null;
+};
+
+ComposerPrimitiveIf.displayName = "ComposerPrimitive.If";

package/src/primitives/composer/ComposerInput.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  type KeyboardEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+import TextareaAutosize, {
+  type TextareaAutosizeProps,
+} from "react-textarea-autosize";
+import {
+  useComposer,
+  useComposerRuntime,
+} from "../../context/react/ComposerContext";
+import { useThread, useThreadRuntime } from "../../context/react/ThreadContext";
+import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
+import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
+
+/**
+ * @deprecated Use `ComposerPrimitive.Input.Props` instead. This will be removed in 0.6.
+ */
+export type ComposerPrimitiveInputProps = ComposerPrimitiveInput.Props;
+
+export namespace ComposerPrimitiveInput {
+  export type Element = HTMLTextAreaElement;
+  export type Props = TextareaAutosizeProps & {
+    asChild?: boolean | undefined;
+    submitOnEnter?: boolean | undefined;
+    cancelOnEscape?: boolean | undefined;
+    unstable_focusOnRunStart?: boolean | undefined;
+    unstable_focusOnScrollToBottom?: boolean | undefined;
+    unstable_focusOnThreadSwitched?: boolean | undefined;
+  };
+}
+
+export const ComposerPrimitiveInput = forwardRef<
+  ComposerPrimitiveInput.Element,
+  ComposerPrimitiveInput.Props
+>(
+  (
+    {
+      autoFocus = false,
+      asChild,
+      disabled: disabledProp,
+      onChange,
+      onKeyDown,
+      submitOnEnter = true,
+      cancelOnEscape = true,
+      unstable_focusOnRunStart = true,
+      unstable_focusOnScrollToBottom = true,
+      unstable_focusOnThreadSwitched = true,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const threadRuntime = useThreadRuntime();
+    const composerRuntime = useComposerRuntime();
+
+    const value = useComposer((c) => {
+      if (!c.isEditing) return "";
+      return c.text;
+    });
+
+    const Component = asChild ? Slot : TextareaAutosize;
+
+    const isDisabled = useThread((t) => t.isDisabled) ?? disabledProp ?? false;
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const ref = useComposedRefs(forwardedRef, textareaRef);
+
+    useEscapeKeydown((e) => {
+      if (!cancelOnEscape) return;
+
+      if (composerRuntime.getState().canCancel) {
+        composerRuntime.cancel();
+        e.preventDefault();
+      }
+    });
+
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (isDisabled || !submitOnEnter) return;
+
+      // ignore IME composition events
+      if (e.nativeEvent.isComposing) return;
+
+      if (e.key === "Enter" && e.shiftKey === false) {
+        const { isRunning } = threadRuntime.getState();
+
+        if (!isRunning) {
+          e.preventDefault();
+
+          textareaRef.current?.closest("form")?.requestSubmit();
+        }
+      }
+    };
+
+    const autoFocusEnabled = autoFocus && !isDisabled;
+    const focus = useCallback(() => {
+      const textarea = textareaRef.current;
+      if (!textarea || !autoFocusEnabled) return;
+
+      textarea.focus({ preventScroll: true });
+      textarea.setSelectionRange(
+        textareaRef.current.value.length,
+        textareaRef.current.value.length,
+      );
+    }, [autoFocusEnabled]);
+
+    useEffect(() => focus(), [focus]);
+
+    useOnScrollToBottom(() => {
+      if (composerRuntime.type === "thread" && unstable_focusOnScrollToBottom) {
+        focus();
+      }
+    });
+
+    useEffect(() => {
+      if (composerRuntime.type !== "thread" || !unstable_focusOnRunStart)
+        return undefined;
+
+      return threadRuntime.unstable_on("run-start", focus);
+    }, [unstable_focusOnRunStart]);
+
+    useEffect(() => {
+      if (composerRuntime.type !== "thread" || !unstable_focusOnThreadSwitched)
+        return undefined;
+
+      return threadRuntime.unstable_on("switched-to", focus);
+    }, [unstable_focusOnThreadSwitched]);
+
+    return (
+      <Component
+        name="input"
+        value={value}
+        {...rest}
+        ref={ref}
+        disabled={isDisabled}
+        onChange={composeEventHandlers(onChange, (e) => {
+          if (!composerRuntime.getState().isEditing) return;
+          return composerRuntime.setText(e.target.value);
+        })}
+        onKeyDown={composeEventHandlers(onKeyDown, handleKeyPress)}
+      />
+    );
+  },
+);
+
+ComposerPrimitiveInput.displayName = "ComposerPrimitive.Input";

package/src/primitives/composer/ComposerRoot.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { Primitive } from "@radix-ui/react-primitive";
+import {
+  type ElementRef,
+  type FormEvent,
+  forwardRef,
+  ComponentPropsWithoutRef,
+} from "react";
+import { useComposerSend } from "../../primitive-hooks";
+
+export type ComposerPrimitiveRootProps = ComposerPrimitiveRoot.Props;
+
+export namespace ComposerPrimitiveRoot {
+  export type Element = ElementRef<typeof Primitive.form>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.form>;
+}
+
+export const ComposerPrimitiveRoot = forwardRef<
+  ComposerPrimitiveRoot.Element,
+  ComposerPrimitiveRoot.Props
+>(({ onSubmit, ...rest }, forwardedRef) => {
+  const send = useComposerSend();
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!send) return;
+    send();
+  };
+
+  return (
+    <Primitive.form
+      {...rest}
+      ref={forwardedRef}
+      onSubmit={composeEventHandlers(onSubmit, handleSubmit)}
+    />
+  );
+});
+
+ComposerPrimitiveRoot.displayName = "ComposerPrimitive.Root";

package/src/primitives/composer/ComposerSend.tsx

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

package/src/primitives/composer/index.ts

@@ -0,0 +1,7 @@
+export { ComposerPrimitiveRoot as Root } from "./ComposerRoot";
+export { ComposerPrimitiveInput as Input } from "./ComposerInput";
+export { ComposerPrimitiveSend as Send } from "./ComposerSend";
+export { ComposerPrimitiveCancel as Cancel } from "./ComposerCancel";
+export { ComposerPrimitiveAddAttachment as AddAttachment } from "./ComposerAddAttachment";
+export { ComposerPrimitiveAttachments as Attachments } from "./ComposerAttachments";
+export { ComposerPrimitiveIf as If } from "./ComposerIf";

package/src/primitives/composer/types.ts

@@ -0,0 +1,5 @@
+export type { ComposerPrimitiveRootProps } from "./ComposerRoot";
+export type { ComposerPrimitiveInputProps } from "./ComposerInput";
+export type { ComposerPrimitiveSendProps } from "./ComposerSend";
+export type { ComposerPrimitiveCancelProps } from "./ComposerCancel";
+export type { ComposerPrimitiveIfProps } from "./ComposerIf";

package/src/primitives/contentPart/ContentPartDisplay.tsx

@@ -0,0 +1,21 @@
+import type { FC } from "react";
+import { useContentPartDisplay } from "../../primitive-hooks/contentPart/useContentPartDisplay";
+
+/**
+ * @deprecated Use `ContentPartPrimitive.Display.Props` instead. This will be removed in 0.6.
+ */
+export type ContentPartPrimitiveDisplayProps =
+  ContentPartPrimitiveDisplay.Props;
+
+export namespace ContentPartPrimitiveDisplay {
+  export type Props = Record<string, never>;
+}
+
+export const ContentPartPrimitiveDisplay: FC<
+  ContentPartPrimitiveDisplay.Props
+> = () => {
+  const { display } = useContentPartDisplay();
+  return display ?? null;
+};
+
+ContentPartPrimitiveDisplay.displayName = "ContentPartPrimitive.Display";

package/src/primitives/contentPart/ContentPartImage.tsx

@@ -0,0 +1,23 @@
+import { Primitive } from "@radix-ui/react-primitive";
+import { type ElementRef, forwardRef, ComponentPropsWithoutRef } from "react";
+import { useContentPartImage } from "../../primitive-hooks/contentPart/useContentPartImage";
+
+/**
+ * @deprecated Use `ContentPartPrimitive.Image.Props` instead. This will be removed in 0.6.
+ */
+export type ContentPartPrimitiveImageProps = ContentPartPrimitiveImage.Props;
+
+export namespace ContentPartPrimitiveImage {
+  export type Element = ElementRef<typeof Primitive.img>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.img>;
+}
+
+export const ContentPartPrimitiveImage = forwardRef<
+  ContentPartPrimitiveImage.Element,
+  ContentPartPrimitiveImage.Props
+>((props, forwardedRef) => {
+  const { image } = useContentPartImage();
+  return <Primitive.img src={image} {...props} ref={forwardedRef} />;
+});
+
+ContentPartPrimitiveImage.displayName = "ContentPartPrimitive.Image";

package/src/primitives/contentPart/ContentPartInProgress.tsx

@@ -0,0 +1,23 @@
+import { FC, PropsWithChildren } from "react";
+import { useContentPart } from "../../context";
+
+/**
+ * @deprecated Use `ContentPartPrimitive.InProgress.Props` instead. This will be removed in 0.6.
+ */
+export type ContentPartPrimitiveInProgressProps =
+  ContentPartPrimitiveInProgress.Props;
+
+export namespace ContentPartPrimitiveInProgress {
+  export type Props = PropsWithChildren;
+}
+
+// TODO should this be renamed to IsRunning?
+export const ContentPartPrimitiveInProgress: FC<
+  ContentPartPrimitiveInProgress.Props
+> = ({ children }) => {
+  const isInProgress = useContentPart((c) => c.status.type === "running");
+
+  return isInProgress ? children : null;
+};
+
+ContentPartPrimitiveInProgress.displayName = "ContentPartPrimitive.InProgress";

package/src/primitives/contentPart/ContentPartText.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Primitive } from "@radix-ui/react-primitive";
+import {
+  type ElementRef,
+  forwardRef,
+  ComponentPropsWithoutRef,
+  ElementType,
+} from "react";
+import { useContentPartText } from "../../primitive-hooks/contentPart/useContentPartText";
+import { useSmooth } from "../../utils/smooth/useSmooth";
+
+/**
+ * @deprecated Use `ContentPartPrimitive.Text.Props` instead. This will be removed in 0.6.
+ */
+export type ContentPartPrimitiveTextProps = ContentPartPrimitiveText.Props;
+
+export namespace ContentPartPrimitiveText {
+  export type Element = ElementRef<typeof Primitive.span>;
+  export type Props = Omit<
+    ComponentPropsWithoutRef<typeof Primitive.span>,
+    "children" | "asChild"
+  > & {
+    smooth?: boolean;
+    component?: ElementType;
+  };
+}
+
+export const ContentPartPrimitiveText = forwardRef<
+  ContentPartPrimitiveText.Element,
+  ContentPartPrimitiveText.Props
+>(({ smooth = true, component: Component = "span", ...rest }, forwardedRef) => {
+  const { text, status } = useSmooth(useContentPartText(), smooth);
+
+  return (
+    <Component data-status={status.type} {...rest} ref={forwardedRef}>
+      {text}
+    </Component>
+  );
+});
+
+ContentPartPrimitiveText.displayName = "ContentPartPrimitive.Text";

package/src/primitives/contentPart/index.ts

@@ -0,0 +1,4 @@
+export { ContentPartPrimitiveText as Text } from "./ContentPartText";
+export { ContentPartPrimitiveImage as Image } from "./ContentPartImage";
+export { ContentPartPrimitiveDisplay as Display } from "./ContentPartDisplay";
+export { ContentPartPrimitiveInProgress as InProgress } from "./ContentPartInProgress";

package/src/primitives/contentPart/types.ts

@@ -0,0 +1,4 @@
+export type { ContentPartPrimitiveTextProps } from "./ContentPartText";
+export type { ContentPartPrimitiveImageProps } from "./ContentPartImage";
+export type { ContentPartPrimitiveDisplayProps } from "./ContentPartDisplay";
+export type { ContentPartPrimitiveInProgressProps } from "./ContentPartInProgress";

package/src/primitives/index.ts

@@ -0,0 +1,16 @@
+export * as ActionBarPrimitive from "./actionBar";
+export * as AssistantModalPrimitive from "./assistantModal";
+export * as AttachmentPrimitive from "./attachment";
+export * as BranchPickerPrimitive from "./branchPicker";
+export * as ComposerPrimitive from "./composer";
+export * as ContentPartPrimitive from "./contentPart";
+export * as MessagePrimitive from "./message";
+export * as ThreadPrimitive from "./thread";
+
+export type * from "./actionBar/types";
+export type * from "./assistantModal/types";
+export type * from "./branchPicker/types";
+export type * from "./composer/types";
+export type * from "./contentPart/types";
+export type * from "./message/types";
+export type * from "./thread/types";

package/src/primitives/message/MessageAttachments.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { ComponentType, type FC, memo, useMemo } from "react";
+import { useMessage, useMessageRuntime } from "../../context";
+import { useMessageAttachment } from "../../context/react/AttachmentContext";
+import { AttachmentRuntimeProvider } from "../../context/providers/AttachmentRuntimeProvider";
+import { CompleteAttachment } from "../../types";
+
+/**
+ * @deprecated Use `MessagePrimitive.Attachments.Props` instead. This will be removed in 0.6.
+ */
+export type MessagePrimitiveAttachmentsProps =
+  MessagePrimitiveAttachments.Props;
+
+export namespace MessagePrimitiveAttachments {
+  export type Props = {
+    components:
+      | {
+          Image?: ComponentType | undefined;
+          Document?: ComponentType | undefined;
+          File?: ComponentType | undefined;
+          Attachment?: ComponentType | undefined;
+        }
+      | undefined;
+  };
+}
+
+const getComponent = (
+  components: MessagePrimitiveAttachments.Props["components"],
+  attachment: CompleteAttachment,
+) => {
+  const type = attachment.type;
+  switch (type) {
+    case "image":
+      return components?.Image ?? components?.Attachment;
+    case "document":
+      return components?.Document ?? components?.Attachment;
+    case "file":
+      return components?.File ?? components?.Attachment;
+    default:
+      const _exhaustiveCheck: never = type;
+      throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
+  }
+};
+
+const AttachmentComponent: FC<{
+  components: MessagePrimitiveAttachments.Props["components"];
+}> = ({ components }) => {
+  const Component = useMessageAttachment((a) =>
+    getComponent(components, a.attachment),
+  );
+
+  if (!Component) return null;
+  return <Component />;
+};
+
+const MessageAttachmentImpl: FC<
+  MessagePrimitiveAttachments.Props & { attachmentIndex: number }
+> = ({ components, attachmentIndex }) => {
+  const messageRuntime = useMessageRuntime();
+  const runtime = useMemo(
+    () => messageRuntime.getAttachmentByIndex(attachmentIndex),
+    [messageRuntime, attachmentIndex],
+  );
+
+  return (
+    <AttachmentRuntimeProvider runtime={runtime}>
+      <AttachmentComponent components={components} />
+    </AttachmentRuntimeProvider>
+  );
+};
+
+const MessageAttachment = memo(
+  MessageAttachmentImpl,
+  (prev, next) =>
+    prev.attachmentIndex === next.attachmentIndex &&
+    prev.components?.Image === next.components?.Image &&
+    prev.components?.Document === next.components?.Document &&
+    prev.components?.File === next.components?.File &&
+    prev.components?.Attachment === next.components?.Attachment,
+);
+
+export const MessagePrimitiveAttachments: FC<
+  MessagePrimitiveAttachments.Props
+> = ({ components }) => {
+  const attachmentsCount = useMessage(({ message }) => {
+    if (message.role !== "user") return 0;
+    return message.attachments.length;
+  });
+
+  return Array.from({ length: attachmentsCount }, (_, index) => (
+    <MessageAttachment
+      key={index}
+      attachmentIndex={index}
+      components={components}
+    />
+  ));
+};
+
+MessagePrimitiveAttachments.displayName = "MessagePrimitive.Attachments";