@vvedantb/ui 0.0.0-stage → 0.1.0

package/src/ai-elements/conversation.tsx

@@ -0,0 +1,157 @@
+"use client";
+import type { ComponentProps } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { IconArrowDown, IconDownload } from "@tabler/icons-react";
+import { Button } from "../ui/button";
+import { cn } from "../utils/cn";
+import { flatInteractiveClass } from "../ui/surface-classes";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import { fastTransition } from "../motion/presets.vibot";
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+export const Conversation = ({ className, ...props }: ConversationProps) => (
+  <StickToBottom
+    className={cn("relative flex-1 overflow-y-hidden", className)}
+    initial="instant"
+    resize="smooth"
+    role="log"
+    {...props}
+  />
+);
+export type ConversationContentProps = ComponentProps<
+  typeof StickToBottom.Content
+>;
+export const ConversationContent = ({
+  className,
+  ...props
+}: ConversationContentProps) => (
+  <StickToBottom.Content
+    className={cn("flex flex-col gap-4 px-3 py-3", className)}
+    {...props}
+  />
+);
+export type ConversationEmptyStateProps = ComponentProps<"div"> & {
+  title?: string;
+  description?: string;
+  icon?: React.ReactNode;
+};
+export const ConversationEmptyState = ({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}: ConversationEmptyStateProps) => (
+  <div
+    className={cn(
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      className,
+    )}
+    {...props}
+  >
+    {children ?? (
+      <>
+        {icon && <div className="text-muted">{icon}</div>}
+        <div className="space-y-1">
+          <h3 className="font-medium text-sm">{title}</h3>
+          {description && <p className="text-muted text-sm">{description}</p>}
+        </div>
+      </>
+    )}
+  </div>
+);
+export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+export const ConversationScrollButton = ({
+  className,
+  ...props
+}: ConversationScrollButtonProps) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+  const handleScrollToBottom = () => {
+    scrollToBottom();
+  };
+  return (
+    <AnimatePresence initial={false}>
+      {isAtBottom ? null : (
+        <motion.div
+          key="scroll-to-bottom"
+          className="absolute bottom-4 left-0 right-0 z-10 flex justify-center"
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 8 }}
+          transition={fastTransition}
+        >
+          <Button
+            className={cn(flatInteractiveClass, "rounded-full", className)}
+            onClick={handleScrollToBottom}
+            size="icon"
+            type="button"
+            variant="outline"
+            {...props}
+          >
+            <IconArrowDown className="size-4" />
+          </Button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+export interface ConversationMessage {
+  role: "user" | "assistant" | "system" | "data" | "tool";
+  content: string;
+}
+export type ConversationDownloadProps = Omit<
+  ComponentProps<typeof Button>,
+  "onClick"
+> & {
+  messages: ConversationMessage[];
+  filename?: string;
+  formatMessage?: (message: ConversationMessage, index: number) => string;
+};
+const defaultFormatMessage = (message: ConversationMessage): string => {
+  const roleLabel =
+    message.role.charAt(0).toUpperCase() + message.role.slice(1);
+  return `**${roleLabel}:** ${message.content}`;
+};
+export const messagesToMarkdown = (
+  messages: ConversationMessage[],
+  formatMessage: (
+    message: ConversationMessage,
+    index: number,
+  ) => string = defaultFormatMessage,
+): string => messages.map((msg, i) => formatMessage(msg, i)).join("\n\n");
+export const ConversationDownload = ({
+  messages,
+  filename = "conversation.md",
+  formatMessage = defaultFormatMessage,
+  className,
+  children,
+  ...props
+}: ConversationDownloadProps) => {
+  const handleDownload = () => {
+    const markdown = messagesToMarkdown(messages, formatMessage);
+    const blob = new Blob([markdown], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.append(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+  };
+  return (
+    <Button
+      className={cn(
+        cn(flatInteractiveClass, "absolute top-4 right-4 rounded-full"),
+        className,
+      )}
+      onClick={handleDownload}
+      size="icon"
+      type="button"
+      variant="outline"
+      {...props}
+    >
+      {children ?? <IconDownload className="size-4" />}
+    </Button>
+  );
+};

package/src/ai-elements/image.tsx

@@ -0,0 +1,25 @@
+import type { Experimental_GeneratedImage } from "ai";
+
+import { cn } from "../utils/cn";
+
+export type ImageProps = Experimental_GeneratedImage & {
+  className?: string;
+  alt?: string;
+};
+
+export const Image = ({
+  base64,
+  uint8Array: _uint8Array,
+  mediaType,
+  ...props
+}: ImageProps) => (
+  <img
+    {...props}
+    alt={props.alt}
+    className={cn(
+      "h-auto max-w-full overflow-hidden rounded-md",
+      props.className,
+    )}
+    src={`data:${mediaType};base64,${base64}`}
+  />
+);

package/src/ai-elements/inline-citation.tsx

@@ -0,0 +1,252 @@
+"use client";
+import type { CarouselApi } from "../ui/carousel";
+import type { ComponentProps } from "react";
+import { Badge } from "../ui/badge";
+import { Carousel, CarouselContent, CarouselItem } from "../ui/carousel";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../ui/hover-card";
+import { cn } from "../utils/cn";
+import { flatPanelSubtleClass } from "../ui/surface-classes";
+import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
+import { createContext, useContext, useEffect, useState } from "react";
+export type InlineCitationProps = ComponentProps<"span">;
+export const InlineCitation = ({
+  className,
+  ...props
+}: InlineCitationProps) => (
+  <span
+    className={cn("group inline items-center gap-1", className)}
+    {...props}
+  />
+);
+export type InlineCitationTextProps = ComponentProps<"span">;
+export const InlineCitationText = ({
+  className,
+  ...props
+}: InlineCitationTextProps) => (
+  <span
+    className={cn(
+      "transition-colors group-hover:bg-surface-secondary",
+      className,
+    )}
+    {...props}
+  />
+);
+export type InlineCitationCardProps = ComponentProps<typeof HoverCard>;
+export const InlineCitationCard = (props: InlineCitationCardProps) => (
+  <HoverCard closeDelay={0} openDelay={0} {...props} />
+);
+export type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
+  sources: string[];
+};
+export const InlineCitationCardTrigger = ({
+  sources,
+  className,
+  ...props
+}: InlineCitationCardTriggerProps) => (
+  <HoverCardTrigger asChild>
+    <Badge
+      className={cn("ml-1 rounded-full", className)}
+      variant="secondary"
+      {...props}
+    >
+      {sources[0] ? (
+        <>
+          {new URL(sources[0]).hostname}{" "}
+          {sources.length > 1 && `+${sources.length - 1}`}
+        </>
+      ) : (
+        "unknown"
+      )}
+    </Badge>
+  </HoverCardTrigger>
+);
+export type InlineCitationCardBodyProps = ComponentProps<"div">;
+export const InlineCitationCardBody = ({
+  className,
+  ...props
+}: InlineCitationCardBodyProps) => (
+  <HoverCardContent className={cn("relative w-80 p-0", className)} {...props} />
+);
+const CarouselApiContext = createContext<CarouselApi | undefined>(undefined);
+const useCarouselApi = () => {
+  const context = useContext(CarouselApiContext);
+  return context;
+};
+export type InlineCitationCarouselProps = ComponentProps<typeof Carousel>;
+export const InlineCitationCarousel = ({
+  className,
+  children,
+  ...props
+}: InlineCitationCarouselProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+  return (
+    <CarouselApiContext.Provider value={api}>
+      <Carousel className={cn("w-full", className)} setApi={setApi} {...props}>
+        {children}
+      </Carousel>
+    </CarouselApiContext.Provider>
+  );
+};
+export type InlineCitationCarouselContentProps = ComponentProps<"div">;
+export const InlineCitationCarouselContent = (
+  props: InlineCitationCarouselContentProps,
+) => <CarouselContent {...props} />;
+export type InlineCitationCarouselItemProps = ComponentProps<"div">;
+export const InlineCitationCarouselItem = ({
+  className,
+  ...props
+}: InlineCitationCarouselItemProps) => (
+  <CarouselItem
+    className={cn("w-full space-y-2 p-4 pl-8", className)}
+    {...props}
+  />
+);
+export type InlineCitationCarouselHeaderProps = ComponentProps<"div">;
+export const InlineCitationCarouselHeader = ({
+  className,
+  ...props
+}: InlineCitationCarouselHeaderProps) => (
+  <div
+    className={cn(
+      cn(
+        flatPanelSubtleClass,
+        "flex items-center justify-between gap-2 rounded-t-md p-2",
+      ),
+      className,
+    )}
+    {...props}
+  />
+);
+export type InlineCitationCarouselIndexProps = ComponentProps<"div">;
+export const InlineCitationCarouselIndex = ({
+  children,
+  className,
+  ...props
+}: InlineCitationCarouselIndexProps) => {
+  const api = useCarouselApi();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+    const handleSelect = () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    };
+    api.on("select", handleSelect);
+    return () => {
+      api.off("select", handleSelect);
+    };
+  }, [api]);
+  return (
+    <div
+      className={cn(
+        "flex flex-1 items-center justify-end px-3 py-1 text-muted text-xs",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? `${current}/${count}`}
+    </div>
+  );
+};
+export type InlineCitationCarouselPrevProps = ComponentProps<"button">;
+export const InlineCitationCarouselPrev = ({
+  className,
+  ...props
+}: InlineCitationCarouselPrevProps) => {
+  const api = useCarouselApi();
+  const handleClick = () => {
+    if (api) {
+      api.scrollPrev();
+    }
+  };
+  return (
+    <button
+      aria-label="Previous"
+      className={cn(
+        "shrink-0 rounded-md p-0.5 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] hover:bg-surface-secondary",
+        className,
+      )}
+      onClick={handleClick}
+      type="button"
+      {...props}
+    >
+      <IconArrowLeft className="size-4 text-muted" />
+    </button>
+  );
+};
+export type InlineCitationCarouselNextProps = ComponentProps<"button">;
+export const InlineCitationCarouselNext = ({
+  className,
+  ...props
+}: InlineCitationCarouselNextProps) => {
+  const api = useCarouselApi();
+  const handleClick = () => {
+    if (api) {
+      api.scrollNext();
+    }
+  };
+  return (
+    <button
+      aria-label="Next"
+      className={cn(
+        "shrink-0 rounded-md p-0.5 transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] hover:bg-surface-secondary",
+        className,
+      )}
+      onClick={handleClick}
+      type="button"
+      {...props}
+    >
+      <IconArrowRight className="size-4 text-muted" />
+    </button>
+  );
+};
+export type InlineCitationSourceProps = ComponentProps<"div"> & {
+  title?: string;
+  url?: string;
+  description?: string;
+};
+export const InlineCitationSource = ({
+  title,
+  url,
+  description,
+  className,
+  children,
+  ...props
+}: InlineCitationSourceProps) => (
+  <div className={cn("space-y-1", className)} {...props}>
+    {title && (
+      <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>
+    )}
+    {url && <p className="truncate break-all text-muted text-xs">{url}</p>}
+    {description && (
+      <p className="line-clamp-3 text-muted text-sm leading-relaxed">
+        {description}
+      </p>
+    )}
+    {children}
+  </div>
+);
+export type InlineCitationQuoteProps = ComponentProps<"blockquote">;
+export const InlineCitationQuote = ({
+  children,
+  className,
+  ...props
+}: InlineCitationQuoteProps) => (
+  <blockquote
+    className={cn(
+      "border-l-2 border-separator pl-3 text-muted text-sm italic",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </blockquote>
+);

package/src/ai-elements/message.tsx

@@ -0,0 +1,269 @@
+"use client";
+import type { UIMessage } from "ai";
+import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
+import { Button } from "../ui/button";
+import { ButtonGroup, ButtonGroupText } from "../ui/button-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+import { cn } from "../utils/cn";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { createContext, useContext, useEffect, useState } from "react";
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+  from: UIMessage["role"];
+};
+export const Message = ({ className, from, ...props }: MessageProps) => (
+  <div
+    className={cn(
+      "group flex w-full max-w-[95%] flex-col gap-2",
+      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
+      className,
+    )}
+    {...props}
+  />
+);
+export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+export const MessageContent = ({
+  children,
+  className,
+  ...props
+}: MessageContentProps) => (
+  <div
+    className={cn(
+      "is-user:dark flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
+      "group-[.is-user]:ml-auto group-[.is-user]:rounded-2xl group-[.is-user]:rounded-br-md group-[.is-user]:bg-primary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-primary-foreground",
+      "group-[.is-assistant]:px-0 group-[.is-assistant]:text-foreground",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+export type MessageActionsBarProps = ComponentProps<"div">;
+export const MessageActionsBar = ({
+  className,
+  children,
+  ...props
+}: MessageActionsBarProps) => (
+  <div className={cn("flex items-center gap-1", className)} {...props}>
+    {children}
+  </div>
+);
+export type MessageActionProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+  label?: string;
+};
+export const MessageAction = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+}: MessageActionProps) => {
+  const button = (
+    <Button size={size} type="button" variant={variant} {...props}>
+      {children}
+      <span className="sr-only">{label || tooltip}</span>
+    </Button>
+  );
+  if (tooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+  return button;
+};
+interface MessageBranchContextType {
+  currentBranch: number;
+  totalBranches: number;
+  goToPrevious: () => void;
+  goToNext: () => void;
+  branches: ReactElement[];
+  setBranches: (branches: ReactElement[]) => void;
+}
+const MessageBranchContext = createContext<MessageBranchContextType | null>(
+  null,
+);
+const useMessageBranch = () => {
+  const context = useContext(MessageBranchContext);
+  if (!context) {
+    throw new Error(
+      "MessageBranch components must be used within MessageBranch",
+    );
+  }
+  return context;
+};
+export type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+  defaultBranch?: number;
+  onBranchChange?: (branchIndex: number) => void;
+};
+export const MessageBranch = ({
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  ...props
+}: MessageBranchProps) => {
+  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+  const [branches, setBranches] = useState<ReactElement[]>([]);
+  const handleBranchChange = (newBranch: number) => {
+    setCurrentBranch(newBranch);
+    onBranchChange?.(newBranch);
+  };
+  const goToPrevious = () => {
+    const newBranch =
+      currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  };
+  const goToNext = () => {
+    const newBranch =
+      currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  };
+  const contextValue = {
+    branches,
+    currentBranch,
+    goToNext,
+    goToPrevious,
+    setBranches,
+    totalBranches: branches.length,
+  };
+  return (
+    <MessageBranchContext.Provider value={contextValue}>
+      <div
+        className={cn("grid w-full gap-2 [&>div]:pb-0", className)}
+        {...props}
+      />
+    </MessageBranchContext.Provider>
+  );
+};
+export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+export const MessageBranchContent = ({
+  children,
+  ...props
+}: MessageBranchContentProps) => {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = Array.isArray(children) ? children : [children];
+  useEffect(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+  return childrenArray.map((branch, index) => (
+    <div
+      className={cn(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden",
+      )}
+      key={branch.key}
+      {...props}
+    >
+      {branch}
+    </div>
+  ));
+};
+export type MessageBranchSelectorProps = ComponentProps<typeof ButtonGroup>;
+export const MessageBranchSelector = ({
+  className,
+  ...props
+}: MessageBranchSelectorProps) => {
+  const { totalBranches } = useMessageBranch();
+  if (totalBranches <= 1) {
+    return null;
+  }
+  return (
+    <ButtonGroup
+      className={cn(
+        "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+        className,
+      )}
+      orientation="horizontal"
+      {...props}
+    />
+  );
+};
+export type MessageBranchPreviousProps = ComponentProps<typeof Button>;
+export const MessageBranchPrevious = ({
+  children,
+  ...props
+}: MessageBranchPreviousProps) => {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+  return (
+    <Button
+      aria-label="Previous branch"
+      disabled={totalBranches <= 1}
+      onClick={goToPrevious}
+      size="icon-sm"
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <IconChevronLeft size={14} />}
+    </Button>
+  );
+};
+export type MessageBranchNextProps = ComponentProps<typeof Button>;
+export const MessageBranchNext = ({
+  children,
+  ...props
+}: MessageBranchNextProps) => {
+  const { goToNext, totalBranches } = useMessageBranch();
+  return (
+    <Button
+      aria-label="Next branch"
+      disabled={totalBranches <= 1}
+      onClick={goToNext}
+      size="icon-sm"
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <IconChevronRight size={14} />}
+    </Button>
+  );
+};
+export type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+export const MessageBranchPage = ({
+  className,
+  ...props
+}: MessageBranchPageProps) => {
+  const { currentBranch, totalBranches } = useMessageBranch();
+  return (
+    <ButtonGroupText
+      className={cn(
+        "border-none bg-transparent text-muted shadow-none",
+        className,
+      )}
+      {...props}
+    >
+      {currentBranch + 1} of {totalBranches}
+    </ButtonGroupText>
+  );
+};
+export type MessageToolbarProps = ComponentProps<"div">;
+export const MessageToolbar = ({
+  className,
+  children,
+  ...props
+}: MessageToolbarProps) => (
+  <div
+    className={cn(
+      "mt-4 flex w-full items-center justify-between gap-4",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);