@assistant-ui/react 0.5.91 → 0.5.93

package/src/ui/attachment.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import {
+  forwardRef,
+  PropsWithChildren,
+  useEffect,
+  useState,
+  type FC,
+} from "react";
+import { CircleXIcon, FileIcon } from "lucide-react";
+import { withDefaults } from "./utils/withDefaults";
+import { useThreadConfig } from "./thread-config";
+import {
+  TooltipIconButton,
+  TooltipIconButtonProps,
+} from "./base/tooltip-icon-button";
+import { AttachmentPrimitive } from "../primitives";
+import { useAttachment } from "../context/react/AttachmentContext";
+import {
+  AvatarImage,
+  AvatarRoot,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "./base";
+import { Dialog, DialogTrigger, DialogContent } from "./base/dialog";
+import { AvatarFallback } from "@radix-ui/react-avatar";
+import { useShallow } from "zustand/shallow";
+import { DialogTitle } from "@radix-ui/react-dialog";
+
+const AttachmentRoot = withDefaults(AttachmentPrimitive.Root, {
+  className: "aui-attachment-root",
+});
+
+AttachmentRoot.displayName = "AttachmentRoot";
+
+const useFileSrc = (file: File | undefined) => {
+  const [src, setSrc] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!file) {
+      setSrc(undefined);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+
+  return src;
+};
+
+const useAttachmentSrc = () => {
+  const { file, src } = useAttachment(
+    useShallow((a): { file?: File; src?: string } => {
+      if (a.type !== "image") return {};
+      if (a.file) return { file: a.file };
+      const src = a.content?.filter((c) => c.type === "image")[0]?.image;
+      if (!src) return {};
+      return { src };
+    }),
+  );
+
+  return useFileSrc(file) ?? src;
+};
+
+type AttachmentPreviewProps = {
+  src: string;
+};
+
+const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      style={{
+        width: "auto",
+        height: "auto",
+        maxWidth: "75dvh",
+        maxHeight: "75dvh",
+        display: isLoaded ? "block" : "none",
+        overflow: "clip",
+      }}
+      onLoad={() => setIsLoaded(true)}
+      alt="Image Preview"
+    />
+  );
+};
+
+const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
+  const src = useAttachmentSrc();
+
+  if (!src) return children;
+
+  return (
+    <Dialog>
+      <DialogTrigger className="aui-attachment-preview-trigger" asChild>
+        {children}
+      </DialogTrigger>
+      <DialogContent>
+        <DialogTitle className="aui-sr-only">
+          Image Attachment Preview
+        </DialogTitle>
+        <AttachmentPreview src={src} />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const AttachmentThumb: FC = () => {
+  const isImage = useAttachment((a) => a.type === "image");
+  const src = useAttachmentSrc();
+  return (
+    <AvatarRoot className="aui-attachment-thumb">
+      <AvatarFallback delayMs={isImage ? 200 : 0}>
+        <FileIcon />
+      </AvatarFallback>
+      <AvatarImage src={src}></AvatarImage>
+    </AvatarRoot>
+  );
+};
+
+const Attachment: FC = () => {
+  const canRemove = useAttachment((a) => a.source !== "message");
+  const typeLabel = useAttachment((a) => {
+    const type = a.type;
+    switch (type) {
+      case "image":
+        return "Image";
+      case "document":
+        return "Document";
+      case "file":
+        return "File";
+      default:
+        const _exhaustiveCheck: never = type;
+        throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
+    }
+  });
+  return (
+    <Tooltip>
+      <AttachmentPreviewDialog>
+        <TooltipTrigger asChild>
+          <AttachmentRoot>
+            <AttachmentThumb />
+            <div className="aui-attachment-text">
+              <p className="aui-attachment-name">
+                <AttachmentPrimitive.Name />
+              </p>
+              <p className="aui-attachment-type">{typeLabel}</p>
+            </div>
+            {canRemove && <AttachmentRemove />}
+          </AttachmentRoot>
+        </TooltipTrigger>
+      </AttachmentPreviewDialog>
+      <TooltipContent side="top">
+        <AttachmentPrimitive.Name />
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+Attachment.displayName = "Attachment";
+
+namespace AttachmentRemove {
+  export type Element = HTMLButtonElement;
+  export type Props = Partial<TooltipIconButtonProps>;
+}
+
+const AttachmentRemove = forwardRef<
+  AttachmentRemove.Element,
+  AttachmentRemove.Props
+>((props, ref) => {
+  const {
+    strings: {
+      composer: { removeAttachment: { tooltip = "Remove file" } = {} } = {},
+    } = {},
+  } = useThreadConfig();
+
+  return (
+    <AttachmentPrimitive.Remove asChild>
+      <TooltipIconButton
+        tooltip={tooltip}
+        className="aui-attachment-remove"
+        side="top"
+        {...props}
+        ref={ref}
+      >
+        {props.children ?? <CircleXIcon />}
+      </TooltipIconButton>
+    </AttachmentPrimitive.Remove>
+  );
+});
+
+AttachmentRemove.displayName = "AttachmentRemove";
+
+const exports = {
+  Root: AttachmentRoot,
+  Remove: AttachmentRemove,
+};
+
+export default Object.assign(Attachment, exports) as typeof Attachment &
+  typeof exports;

package/src/ui/base/CircleStopIcon.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+
+export const CircleStopIcon: FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      width="16"
+      height="16"
+    >
+      <rect width="10" height="10" x="3" y="3" rx="2" />
+    </svg>
+  );
+};
+
+CircleStopIcon.displayName = "CircleStopIcon";

package/src/ui/base/avatar.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import type { FC } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { withDefaults } from "../utils/withDefaults";
+
+export type AvatarProps = {
+  src?: string | undefined;
+  alt?: string | undefined;
+  fallback?: string | undefined;
+};
+
+export const Avatar: FC<AvatarProps> = ({ src, alt, fallback }) => {
+  if (src == null && fallback == null) return null;
+
+  return (
+    <AvatarRoot>
+      {src != null && <AvatarImage src={src} alt={alt} />}
+      {fallback != null && <AvatarFallback>{fallback}</AvatarFallback>}
+    </AvatarRoot>
+  );
+};
+
+Avatar.displayName = "Avatar";
+
+export const AvatarRoot = withDefaults(AvatarPrimitive.Root, {
+  className: "aui-avatar-root",
+});
+
+AvatarRoot.displayName = "AvatarRoot";
+
+export const AvatarImage = withDefaults(AvatarPrimitive.Image, {
+  className: "aui-avatar-image",
+});
+
+AvatarImage.displayName = "AvatarImage";
+
+export const AvatarFallback = withDefaults(AvatarPrimitive.Fallback, {
+  className: "aui-avatar-fallback",
+});
+
+AvatarFallback.displayName = "AvatarFallback";

package/src/ui/base/button.tsx

@@ -0,0 +1,44 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Primitive } from "@radix-ui/react-primitive";
+import { ElementRef, forwardRef } from "react";
+
+const buttonVariants = cva("aui-button", {
+  variants: {
+    variant: {
+      default: "aui-button-primary",
+      outline: "aui-button-outline",
+      ghost: "aui-button-ghost",
+    },
+    size: {
+      default: "aui-button-medium",
+      icon: "aui-button-icon",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+type ButtonElement = ElementRef<typeof Primitive.button>;
+
+export type ButtonProps = React.ComponentPropsWithoutRef<
+  typeof Primitive.button
+> &
+  VariantProps<typeof buttonVariants>;
+
+const Button = forwardRef<ButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <Primitive.button
+        className={buttonVariants({ variant, size, className })}
+        {...props}
+        ref={ref}
+      />
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/ui/base/dialog.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+import classNames from "classnames";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={classNames("aui-dialog-overlay", className)}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={classNames("aui-dialog-content", className)}
+      {...props}
+    >
+      {children}
+      {/* <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <XIcon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close> */}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+// const DialogHeader = ({
+//   className,
+//   ...props
+// }: React.HTMLAttributes<HTMLDivElement>) => (
+//   <div
+//     className={classNames(
+//       "flex flex-col space-y-1.5 text-center sm:text-left",
+//       className,
+//     )}
+//     {...props}
+//   />
+// );
+// DialogHeader.displayName = "DialogHeader";
+
+// const DialogFooter = ({
+//   className,
+//   ...props
+// }: React.HTMLAttributes<HTMLDivElement>) => (
+//   <div
+//     className={classNames(
+//       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+//       className,
+//     )}
+//     {...props}
+//   />
+// );
+// DialogFooter.displayName = "DialogFooter";
+
+// const DialogTitle = React.forwardRef<
+//   React.ElementRef<typeof DialogPrimitive.Title>,
+//   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+// >(({ className, ...props }, ref) => (
+//   <DialogPrimitive.Title
+//     ref={ref}
+//     className={classNames(
+//       "text-lg font-semibold leading-none tracking-tight",
+//       className,
+//     )}
+//     {...props}
+//   />
+// ));
+// DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+// const DialogDescription = React.forwardRef<
+//   React.ElementRef<typeof DialogPrimitive.Description>,
+//   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+// >(({ className, ...props }, ref) => (
+//   <DialogPrimitive.Description
+//     ref={ref}
+//     className={classNames("text-muted-foreground text-sm", className)}
+//     {...props}
+//   />
+// ));
+// DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  // DialogHeader,
+  // DialogFooter,
+  // DialogTitle,
+  // DialogDescription,
+};

package/src/ui/base/index.ts

@@ -0,0 +1,18 @@
+export {
+  Avatar,
+  AvatarRoot,
+  AvatarImage,
+  AvatarFallback,
+  type AvatarProps,
+} from "./avatar";
+
+export { Button, buttonVariants, type ButtonProps } from "./button";
+
+export { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+export {
+  TooltipIconButton,
+  type TooltipIconButtonProps,
+} from "./tooltip-icon-button";
+
+export { CircleStopIcon } from "./CircleStopIcon";

package/src/ui/base/tooltip-icon-button.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { forwardRef } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+import { Button, ButtonProps } from "./button";
+
+export type TooltipIconButtonProps = ButtonProps & {
+  tooltip: string;
+  side?: "top" | "bottom" | "left" | "right";
+};
+
+export const TooltipIconButton = forwardRef<
+  HTMLButtonElement,
+  TooltipIconButtonProps
+>(({ children, tooltip, side = "bottom", ...rest }, ref) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="ghost" size="icon" {...rest} ref={ref}>
+          {children}
+          <span className="aui-sr-only">{tooltip}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side={side}>{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+});
+
+TooltipIconButton.displayName = "TooltipIconButton";

package/src/ui/base/tooltip.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { withDefaults } from "../utils/withDefaults";
+import { FC } from "react";
+
+export const Tooltip: FC<TooltipPrimitive.TooltipProps> = (props) => {
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root {...props} />
+    </TooltipPrimitive.Provider>
+  );
+};
+
+Tooltip.displayName = "Tooltip";
+
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export const TooltipContent = withDefaults(TooltipPrimitive.Content, {
+  sideOffset: 4,
+  className: "aui-tooltip-content",
+});
+
+TooltipContent.displayName = "TooltipContent";

package/src/ui/branch-picker.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { ComponentPropsWithoutRef, forwardRef, type FC } from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+
+import {
+  TooltipIconButton,
+  TooltipIconButtonProps,
+} from "./base/tooltip-icon-button";
+import { withDefaults } from "./utils/withDefaults";
+import { useThreadConfig } from "./thread-config";
+import { BranchPickerPrimitive } from "../primitives";
+import { useThread } from "../context";
+
+const useAllowBranchPicker = (ensureCapability = false) => {
+  const { branchPicker: { allowBranchPicker = true } = {} } = useThreadConfig();
+  const branchPickerSupported = useThread((t) => t.capabilities.edit);
+  return allowBranchPicker && (!ensureCapability || branchPickerSupported);
+};
+
+const BranchPicker: FC = () => {
+  const allowBranchPicker = useAllowBranchPicker(true);
+  if (!allowBranchPicker) return null;
+  return (
+    <BranchPickerRoot hideWhenSingleBranch>
+      <BranchPickerPrevious />
+      <BranchPickerState />
+      <BranchPickerNext />
+    </BranchPickerRoot>
+  );
+};
+
+BranchPicker.displayName = "BranchPicker";
+
+const BranchPickerRoot = withDefaults(BranchPickerPrimitive.Root, {
+  className: "aui-branch-picker-root",
+});
+
+BranchPickerRoot.displayName = "BranchPickerRoot";
+
+namespace BranchPickerPrevious {
+  export type Element = BranchPickerPrimitive.Previous.Element;
+  export type Props = Partial<TooltipIconButtonProps>;
+}
+
+const BranchPickerPrevious = forwardRef<
+  BranchPickerPrevious.Element,
+  BranchPickerPrevious.Props
+>((props, ref) => {
+  const {
+    strings: {
+      branchPicker: { previous: { tooltip = "Previous" } = {} } = {},
+    } = {},
+  } = useThreadConfig();
+  const allowBranchPicker = useAllowBranchPicker();
+  return (
+    <BranchPickerPrimitive.Previous disabled={!allowBranchPicker} asChild>
+      <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
+        {props.children ?? <ChevronLeftIcon />}
+      </TooltipIconButton>
+    </BranchPickerPrimitive.Previous>
+  );
+});
+
+BranchPickerPrevious.displayName = "BranchPickerPrevious";
+
+const BranchPickerStateWrapper = withDefaults("span", {
+  className: "aui-branch-picker-state",
+});
+
+namespace BranchPickerState {
+  export type Element = HTMLSpanElement;
+  export type Props = ComponentPropsWithoutRef<"span">;
+}
+
+const BranchPickerState = forwardRef<
+  BranchPickerState.Element,
+  BranchPickerState.Props
+>((props, ref) => {
+  return (
+    <BranchPickerStateWrapper {...props} ref={ref}>
+      <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
+    </BranchPickerStateWrapper>
+  );
+});
+
+BranchPickerState.displayName = "BranchPickerState";
+
+namespace BranchPickerNext {
+  export type Element = BranchPickerPrimitive.Next.Element;
+  export type Props = Partial<TooltipIconButtonProps>;
+}
+
+const BranchPickerNext = forwardRef<
+  BranchPickerNext.Element,
+  BranchPickerNext.Props
+>((props, ref) => {
+  const {
+    strings: { branchPicker: { next: { tooltip = "Next" } = {} } = {} } = {},
+  } = useThreadConfig();
+  const allowBranchPicker = useAllowBranchPicker();
+  return (
+    <BranchPickerPrimitive.Next disabled={!allowBranchPicker} asChild>
+      <TooltipIconButton tooltip={tooltip} {...props} ref={ref}>
+        {props.children ?? <ChevronRightIcon />}
+      </TooltipIconButton>
+    </BranchPickerPrimitive.Next>
+  );
+});
+
+BranchPickerNext.displayName = "BranchPickerNext";
+
+const exports = {
+  Root: BranchPickerRoot,
+  Previous: BranchPickerPrevious,
+  Next: BranchPickerNext,
+};
+
+export default Object.assign(BranchPicker, exports) as typeof BranchPicker &
+  typeof exports;