@assistant-ui/react 0.7.90 → 0.8.0

package/src/ui/attachment-ui.tsx

@@ -1,211 +0,0 @@
-"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 } 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",
-});
-
-const AttachmentContent = withDefaults("div", {
-  className: "aui-attachment-content",
-});
-
-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 AttachmentUI: 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>
-      <AttachmentRoot>
-        <AttachmentPreviewDialog>
-          <TooltipTrigger asChild>
-            <AttachmentContent>
-              <AttachmentThumb />
-              <div className="aui-attachment-text">
-                <p className="aui-attachment-name">
-                  <AttachmentPrimitive.Name />
-                </p>
-                <p className="aui-attachment-type">{typeLabel}</p>
-              </div>
-            </AttachmentContent>
-          </TooltipTrigger>
-        </AttachmentPreviewDialog>
-        {canRemove && <AttachmentRemove />}
-      </AttachmentRoot>
-      <TooltipContent side="top">
-        <AttachmentPrimitive.Name />
-      </TooltipContent>
-    </Tooltip>
-  );
-};
-
-AttachmentUI.displayName = "Attachment";
-
-namespace AttachmentRemove {
-  export type Element = HTMLButtonElement;
-  export type Props = Partial<TooltipIconButton.Props>;
-}
-
-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(AttachmentUI, exports) as typeof AttachmentUI &
-  typeof exports;

package/src/ui/base/CircleStopIcon.tsx

@@ -1,17 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,42 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { Primitive } from "@radix-ui/react-primitive";
-import { ComponentPropsWithoutRef, ComponentRef, 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 = ComponentRef<typeof Primitive.button>;
-
-export type ButtonProps = 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

@@ -1,113 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-
-import classNames from "classnames";
-import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = forwardRef<
-  ComponentRef<typeof DialogPrimitive.Overlay>,
-  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 = forwardRef<
-  ComponentRef<typeof DialogPrimitive.Content>,
-  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-aui-background focus:ring-aui-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
-// }: 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
-// }: 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 = forwardRef<
-//   ComponentRef<typeof DialogPrimitive.Title>,
-//   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 = forwardRef<
-//   ComponentRef<typeof DialogPrimitive.Description>,
-//   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

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

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

@@ -1,29 +0,0 @@
-import { forwardRef } from "react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
-import { Button, ButtonProps } from "./button";
-
-export namespace TooltipIconButton {
-  export type Props = ButtonProps & {
-    tooltip: string;
-    side?: "top" | "bottom" | "left" | "right";
-  };
-}
-
-export const TooltipIconButton = forwardRef<
-  HTMLButtonElement,
-  TooltipIconButton.Props
->(({ 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

@@ -1,22 +0,0 @@
-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

@@ -1,117 +0,0 @@
-"use client";
-
-import { ComponentPropsWithoutRef, forwardRef, type FC } from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-
-import { TooltipIconButton } 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<TooltipIconButton.Props>;
-}
-
-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<TooltipIconButton.Props>;
-}
-
-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;