@vvedantb/ui 0.0.0-stage → 0.1.0

package/src/ai-elements/queue.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { cn } from "../utils/cn";
+import {
+  flatPanelSubtleClass,
+  flatPanelSubtleHoverClass,
+} from "../ui/surface-classes";
+import { Button } from "../ui/button";
+import { Badge } from "../ui/badge";
+import { ScrollArea } from "../ui/scroll-area";
+import { Textarea } from "../ui/textarea";
+import {
+  IconChevronDown,
+  IconEdit,
+  IconTrash,
+  IconCheck,
+  IconX,
+  IconStack2,
+} from "@tabler/icons-react";
+
+export interface QueueProps {
+  className?: string;
+  children?: ReactNode;
+  count: number;
+}
+
+export function Queue({ className, children, count }: QueueProps) {
+  return (
+    <AnimatePresence initial={false}>
+      {count > 0 ? (
+        <motion.div
+          key="queue"
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: "auto", opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          transition={{ type: "spring", bounce: 0, duration: 0.35 }}
+          className={cn("w-full overflow-hidden", className)}
+        >
+          {children}
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}
+
+export interface QueueHeaderProps {
+  count: number;
+  isOpen: boolean;
+  onToggle: () => void;
+  className?: string;
+}
+
+export function QueueHeader({
+  count,
+  isOpen,
+  onToggle,
+  className,
+}: QueueHeaderProps) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className={cn(
+        "flex items-center justify-between w-full",
+        "px-4 py-2.5",
+        flatPanelSubtleClass,
+        flatPanelSubtleHoverClass,
+        "rounded-t-2xl",
+        "group",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <IconStack2 size={16} className="text-muted" />
+        <span className="text-sm font-medium text-foreground">
+          Queued Messages
+        </span>
+        <Badge variant="secondary" className="text-xs">
+          {count}
+        </Badge>
+      </div>
+      <IconChevronDown
+        size={16}
+        className={cn(
+          "text-muted transition-transform duration-200 ease-out",
+          isOpen && "rotate-180",
+        )}
+      />
+    </button>
+  );
+}
+
+export interface QueueListProps {
+  className?: string;
+  children?: ReactNode;
+  open?: boolean;
+}
+
+export function QueueList({
+  className,
+  children,
+  open = true,
+}: QueueListProps) {
+  return (
+    <AnimatePresence initial={false}>
+      {open ? (
+        <motion.div
+          key="queue-list"
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: "auto", opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          transition={{ type: "spring", bounce: 0, duration: 0.35 }}
+          className="overflow-hidden"
+        >
+          <div className={cn(flatPanelSubtleClass, "rounded-b-2xl", className)}>
+            <ScrollArea className="max-h-[240px]">
+              <div className="p-2 space-y-1.5">{children}</div>
+            </ScrollArea>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}
+
+export interface QueueItemProps {
+  text: string;
+  model?: string;
+  personalityName?: string;
+  personaName?: string;
+  personaImage?: string;
+  onEdit: (newText: string) => void;
+  onRemove: () => void;
+  className?: string;
+}
+
+export function QueueItem({
+  text,
+  model,
+  personalityName,
+  personaName,
+  personaImage,
+  onEdit,
+  onRemove,
+  className,
+}: QueueItemProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editText, setEditText] = useState(text);
+
+  const handleSaveEdit = () => {
+    if (editText.trim()) {
+      onEdit(editText.trim());
+      setIsEditing(false);
+    }
+  };
+
+  const handleCancelEdit = () => {
+    setEditText(text);
+    setIsEditing(false);
+  };
+
+  return (
+    <div
+      className={cn(
+        "group relative",
+        "p-2.5 rounded-lg",
+        "transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary",
+        className,
+      )}
+    >
+      {isEditing ? (
+        <div className="flex flex-col gap-2">
+          <Textarea
+            value={editText}
+            onChange={(e) => setEditText(e.currentTarget.value)}
+            className="min-h-[60px] text-sm"
+            autoFocus
+          />
+          <div className="flex justify-end gap-2">
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={handleCancelEdit}
+              className="h-7 px-2"
+            >
+              <IconX size={14} />
+              <span className="ml-1 text-xs">Cancel</span>
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleSaveEdit}
+              disabled={!editText.trim()}
+              className="h-7 px-2"
+            >
+              <IconCheck size={14} />
+              <span className="ml-1 text-xs">Save</span>
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex items-center gap-2">
+          {personaImage && (
+            <img
+              src={personaImage}
+              alt={personaName || "Persona"}
+              className="size-5 rounded-full shrink-0"
+            />
+          )}
+          <p className="text-sm text-foreground/90 flex-1 truncate">{text}</p>
+          <div className="flex items-center gap-1.5 shrink-0">
+            {model && (
+              <Badge variant="outline" className="text-xs h-5 px-1.5">
+                {model.split("/").pop()}
+              </Badge>
+            )}
+            {personalityName && (
+              <Badge variant="outline" className="text-xs h-5 px-1.5">
+                {personalityName}
+              </Badge>
+            )}
+            {personaName && !personaImage && (
+              <Badge variant="outline" className="text-xs h-5 px-1.5">
+                {personaName}
+              </Badge>
+            )}
+          </div>
+          <div className="flex items-center gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => setIsEditing(true)}
+              className="h-6 w-6 p-0"
+            >
+              <IconEdit size={13} />
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onRemove}
+              className="h-6 w-6 p-0 text-danger hover:text-danger"
+            >
+              <IconTrash size={13} />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ai-elements/reasoning.tsx

@@ -0,0 +1,178 @@
+"use client";
+import type { ComponentProps, ReactNode } from "react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { cn } from "../utils/cn";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { IconBrain, IconChevronDown } from "@tabler/icons-react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Streamdown } from "streamdown";
+import { Shimmer } from "./shimmer";
+interface ReasoningContextValue {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+}
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+export const useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+};
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+export function Reasoning({
+  className,
+  isStreaming = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  duration: durationProp,
+  children,
+  ...props
+}: ReasoningProps) {
+  const resolvedDefaultOpen = defaultOpen ?? isStreaming;
+  // Track if defaultOpen was explicitly set to false (to prevent auto-open)
+  const isExplicitlyClosed = defaultOpen === false;
+  const [isOpen, setIsOpen] = useControllableState<boolean>({
+    defaultProp: resolvedDefaultOpen,
+    onChange: onOpenChange,
+    prop: open,
+  });
+  const [duration, setDuration] = useControllableState<number | undefined>({
+    defaultProp: undefined,
+    prop: durationProp,
+  });
+  const hasEverStreamedRef = useRef(isStreaming);
+  const [hasAutoClosed, setHasAutoClosed] = useState(false);
+  const startTimeRef = useRef<number | null>(null);
+  // Track when streaming starts and compute duration
+  useEffect(() => {
+    if (isStreaming) {
+      hasEverStreamedRef.current = true;
+      if (startTimeRef.current === null) {
+        startTimeRef.current = Date.now();
+      }
+    } else if (startTimeRef.current !== null) {
+      setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+      startTimeRef.current = null;
+    }
+  }, [isStreaming, setDuration]);
+  // Auto-open when streaming starts (unless explicitly closed)
+  useEffect(() => {
+    if (isStreaming && !isOpen && !isExplicitlyClosed) {
+      setIsOpen(true);
+    }
+  }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
+  // Auto-close when streaming ends (once only, and only if it ever streamed)
+  useEffect(() => {
+    if (
+      hasEverStreamedRef.current &&
+      !isStreaming &&
+      isOpen &&
+      !hasAutoClosed
+    ) {
+      const timer = setTimeout(() => {
+        setIsOpen(false);
+        setHasAutoClosed(true);
+      }, AUTO_CLOSE_DELAY);
+      return () => clearTimeout(timer);
+    }
+  }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
+  const handleOpenChange = (newOpen: boolean) => {
+    setIsOpen(newOpen);
+  };
+  const contextValue = { duration, isOpen, isStreaming, setIsOpen };
+  return (
+    <ReasoningContext.Provider value={contextValue}>
+      <Collapsible
+        className={cn("not-prose mb-4", className)}
+        onOpenChange={handleOpenChange}
+        open={isOpen}
+        {...props}
+      >
+        {children}
+      </Collapsible>
+    </ReasoningContext.Provider>
+  );
+}
+export type ReasoningTriggerProps = ComponentProps<
+  typeof CollapsibleTrigger
+> & {
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+  if (isStreaming || duration === 0) {
+    return <Shimmer duration={1}>Thinking...</Shimmer>;
+  }
+  if (duration === undefined) {
+    return <p>Thought for a few seconds</p>;
+  }
+  return <p>Thought for {duration} seconds</p>;
+};
+export function ReasoningTrigger({
+  className,
+  children,
+  getThinkingMessage = defaultGetThinkingMessage,
+  ...props
+}: ReasoningTriggerProps) {
+  const { isStreaming, isOpen, duration } = useReasoning();
+  return (
+    <CollapsibleTrigger
+      className={cn(
+        "flex w-full items-center gap-2 py-1 text-sm text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <IconBrain className="size-4" />
+          {getThinkingMessage(isStreaming, duration)}
+          <IconChevronDown
+            className={cn(
+              "size-4 transition-transform duration-150 ease-out",
+              isOpen ? "rotate-180" : "rotate-0",
+            )}
+          />
+        </>
+      )}
+    </CollapsibleTrigger>
+  );
+}
+export type ReasoningContentProps = ComponentProps<
+  typeof CollapsibleContent
+> & {
+  children: string;
+};
+const streamdownPlugins = { cjk, code, math, mermaid };
+export function ReasoningContent({
+  className,
+  children,
+  ...props
+}: ReasoningContentProps) {
+  return (
+    <CollapsibleContent className={cn("pt-2 pb-1", className)} {...props}>
+      <div className="rounded-lg bg-surface-secondary/40 p-3">
+        <Streamdown plugins={streamdownPlugins}>{children}</Streamdown>
+      </div>
+    </CollapsibleContent>
+  );
+}

package/src/ai-elements/shimmer.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { type CSSProperties, type ElementType } from "react";
+import { motion } from "motion/react";
+import { cn } from "../utils/cn";
+interface ShimmerCSSProperties extends CSSProperties {
+  "--spread"?: string;
+  "--bg"?: string;
+}
+interface ShimmerProps {
+  children: string;
+  as?: ElementType;
+  className?: string;
+  duration?: number;
+  spread?: number;
+}
+function Shimmer({
+  children,
+  as: Component = "span",
+  className,
+  duration = 2,
+  spread = 2,
+}: ShimmerProps) {
+  const MotionComponent = motion.create(Component);
+  const totalSpread = spread * children.length;
+  const style = {
+    "--spread": `${totalSpread}px`,
+    "--bg": `linear-gradient(
+            90deg,
+            var(--muted) 0%,
+            var(--foreground) calc(50% - var(--spread)),
+            var(--muted) 50%,
+            var(--foreground) calc(50% + var(--spread)),
+            var(--muted) 100%
+          )`,
+    backgroundImage: "var(--bg)",
+    backgroundSize: "200% 100%",
+  } satisfies ShimmerCSSProperties;
+  return (
+    <MotionComponent
+      className={cn(
+        "inline-block bg-clip-text text-transparent [-webkit-text-fill-color:transparent]",
+        className,
+      )}
+      style={style}
+      animate={{ backgroundPosition: ["100% center", "0% center"] }}
+      transition={{
+        duration,
+        ease: "linear",
+        repeat: Number.POSITIVE_INFINITY,
+      }}
+    >
+      {children}
+    </MotionComponent>
+  );
+}
+export { Shimmer, type ShimmerProps };

package/src/ai-elements/sources.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { cn } from "../utils/cn";
+import { IconBook, IconChevronDown } from "@tabler/icons-react";
+
+export type SourcesProps = ComponentProps<typeof Collapsible>;
+
+export const Sources = ({ className, ...props }: SourcesProps) => (
+  <Collapsible className={cn("w-full", className)} {...props} />
+);
+
+export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  count: number;
+};
+
+export const SourcesTrigger = ({
+  className,
+  count,
+  children,
+  ...props
+}: SourcesTriggerProps) => (
+  <CollapsibleTrigger
+    className={cn(
+      "group inline-flex items-center gap-1.5 text-xs text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.97] hover:text-foreground",
+      className,
+    )}
+    {...props}
+  >
+    {children ?? (
+      <>
+        <IconBook className="size-3.5" stroke={1.5} />
+        <span>Used {count} sources</span>
+        <IconChevronDown className="size-3.5 transition-transform duration-150 ease-out group-data-[state=open]:rotate-180" />
+      </>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const SourcesContent = ({
+  className,
+  ...props
+}: SourcesContentProps) => (
+  <CollapsibleContent className={cn("mt-2 space-y-2", className)} {...props} />
+);
+
+export type SourceProps = ComponentProps<"a">;
+
+export const Source = ({
+  href,
+  title,
+  children,
+  className,
+  ...props
+}: SourceProps) => (
+  <a
+    className={cn(
+      "flex items-center justify-between gap-2 rounded-md px-3 py-2 text-xs text-muted transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary hover:text-foreground",
+      className,
+    )}
+    href={href}
+    rel="noreferrer"
+    target="_blank"
+    {...props}
+  >
+    <span className="line-clamp-1">{children ?? title}</span>
+    <IconBook className="size-3.5 shrink-0" stroke={1.5} />
+  </a>
+);