beui
componentchat-appsource: ok · hit
Chat App
A complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and prompt input.
npx shadcn add "https://beui.dev/r/chat-app.json"free
Where it goes
chat
Visual style
terminal-mono
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · mediumiconslucide-react
animationmotion
Files52 · source cached 10/15/2026, 11:40:32 AM
components/agents/chat-app.tsx
"use client";
// beui.dev/components/agents/chat-app
import { useEffect, useRef } from "react";
import {
AnimatedSidebarProvider,
type AnimatedSidebarProviderProps,
useAnimatedSidebar,
} from "@/components/motion/animated-sidebar";
import { cn } from "@/lib/utils";
/**
* Shell width below which a docked sidebar leaves too little room for the
* conversation: the default sidebar is 17rem, so under 600px the conversation
* pane is left with barely 330px — narrower than a phone.
*
* Deliberately not AnimatedSidebar's own 767px mobile query: that one asks
* whether the *viewport* is a phone (and swaps the sidebar for an off-canvas
* sheet), this one asks whether the *shell's own box* — which may be a column,
* a split view or a panel inside a much wider page — still fits both panes.
*/
const MIN_DOCKED_WIDTH = 600;
export interface ChatAppProps extends AnimatedSidebarProviderProps {
/** Docked sidebar width as a CSS length. Default `17rem`. */
sidebarWidth?: string;
/**
* Shell width in px under which the sidebar folds off-canvas. Ignored while
* `open` is controlled — the consumer owns the state then.
*/
collapseSidebarBelow?: number;
}
/**
* Folds the sidebar away while the shell is too narrow to carry both panes,
* and brings it back when it isn't. Only crossings are acted on, so a manual
* toggle at either size stays put until the shell actually changes shape.
*
* Mount is not a crossing in the opening direction: a shell that merely has
* room says nothing about whether the caller wanted the sidebar open, so the
* first measurement leaves `defaultOpen` alone. Too narrow at mount *is* the
* fold condition itself, so that half applies immediately.
*/
function ShellFit({ minWidth }: { minWidth: number }) {
const { open, setOpen } = useAnimatedSidebar();
const markerRef = useRef<HTMLDivElement>(null);
const narrowRef = useRef<boolean | null>(null);
const openRef = useRef(open);
openRef.current = open;
useEffect(() => {
const shell = markerRef.current?.parentElement;
if (!shell) return;
const observer = new ResizeObserver(([entry]) => {
const narrow = entry.contentRect.width < minWidth;
if (narrowRef.current === narrow) return;
const first = narrowRef.current === null;
narrowRef.current = narrow;
if (first && !narrow) return;
const wanted = !narrow;
// Already where the shell wants it — saying so again would only be an
// onOpenChange the caller never asked for.
if (openRef.current === wanted) return;
setOpen(wanted);
});
observer.observe(shell);
return () => observer.disconnect();
}, [minWidth, setOpen]);
return <div ref={markerRef} className="hidden" />;
}
export function ChatApp({
children,
className,
sidebarWidth = "17rem",
collapseSidebarBelow = MIN_DOCKED_WIDTH,
style,
...props
}: ChatAppProps) {
return (
<AnimatedSidebarProvider
{...props}
style={{ ...style, "--sidebar-width": sidebarWidth }}
className={cn(
"min-h-0 w-full overflow-hidden rounded-2xl border border-border bg-background",
className,
)}
>
{/* A controlled `open` is the consumer's to change; fitting the shell
would fire an onOpenChange they never asked for. */}
{props.open === undefined ? (
<ShellFit minWidth={collapseSidebarBelow} />
) : null}
{children}
</AnimatedSidebarProvider>
);
}
components/agents/agent-activity/index.tsx
"use client";
// beui.dev/components/agents/chat-app
import { ChevronDown } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
type ReactNode,
useCallback,
useEffect,
useId,
useLayoutEffect,
useRef,
useState,
} from "react";
import { ThinkingShimmer } from "@/components/agents/loading-states/thinking-shimmer";
import { AgentDisclosure } from "@/components/agents/agent-disclosure";
import {
EASE_OUT,
SPRING_LAYOUT,
SPRING_SWAP,
} from "@/lib/ease";
import { cn } from "@/lib/utils";
import { ActivityRow } from "./activity-row";
import type {
AgentActivityContentType,
AgentActivityItem,
AgentActivityProps,
} from "./types";
export type {
AgentActivityContentType,
AgentActivityItem,
AgentActivityProps,
AgentActivitySearch,
AgentActivityStatus,
AgentActivityStep,
AgentActivityText,
AgentActivityTool,
AgentActivityTrace,
AgentSearchResult,
AgentStepStatus,
AgentTraceKind,
} from "./types";
function formatDuration(duration: number) {
const seconds = Math.max(0, Math.round(duration));
if (seconds < 60) return `${seconds}s`;
const minutes = Math.floor(seconds / 60);
const remainder = seconds % 60;
return remainder === 0 ? `${minutes}m` : `${minutes}m ${remainder}s`;
}
function useControllableOpen({
open,
defaultOpen,
onOpenChange,
}: {
open?: boolean;
defaultOpen: boolean;
onOpenChange?: (open: boolean) => void;
}) {
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const controlled = open !== undefined;
const currentOpen = open ?? internalOpen;
const setOpen = useCallback(
(next: boolean) => {
if (!controlled) setInternalOpen(next);
onOpenChange?.(next);
},
[controlled, onOpenChange],
);
return [currentOpen, setOpen] as const;
}
function getContentType(items: AgentActivityItem[]): AgentActivityContentType {
const first = items[0]?.type;
return first && items.every((item) => item.type === first) ? first : "mixed";
}
function getActiveLabel(type: AgentActivityContentType) {
if (type === "search") return "Searching the web…";
if (type === "tool") return "Running tools…";
if (type === "trace") return "Working through the run…";
if (type === "mixed") return "Working through it…";
return "Thinking…";
}
function getSummary(
type: AgentActivityContentType,
items: AgentActivityItem[],
duration: number,
): ReactNode {
if (type === "step" || type === "text") {
return (
<>
Thought for <span className="tabular-nums">{formatDuration(duration)}</span>
</>
);
}
if (type === "search") return "Searched the web";
if (type === "tool") {
return `Ran ${items.length} ${items.length === 1 ? "tool" : "tools"}`;
}
if (type === "trace") {
const messages = items.filter(
(item) =>
item.type === "trace" &&
(item.kind === "thinking" || item.kind === "message"),
).length;
const tools = items.length - messages;
return `${tools} ${tools === 1 ? "tool call" : "tool calls"}, ${messages} ${messages === 1 ? "message" : "messages"}`;
}
return `Completed ${items.length} ${items.length === 1 ? "step" : "steps"}`;
}
export function AgentActivity({
items,
contentType: initialContentType,
status = "working",
duration = 0,
open,
defaultOpen = false,
onOpenChange,
collapseOnComplete = true,
activeLabel,
summary,
renderWorkingStatus,
renderCompletedStatus,
maxHeight = 208,
className,
contentClassName,
}: AgentActivityProps) {
const reduce = useReducedMotion() ?? false;
const baseId = useId();
const triggerId = `${baseId}-trigger`;
const contentId = `${baseId}-content`;
const contentRef = useRef<HTMLDivElement>(null);
const viewportRef = useRef<HTMLDivElement>(null);
const previousStatus = useRef(status);
const [contentHeight, setContentHeight] = useState(0);
const [currentOpen, setOpen] = useControllableOpen({
open,
defaultOpen,
onOpenChange,
});
const working = status === "working";
const expanded = working || currentOpen;
const contentType = items.length
? getContentType(items)
: (initialContentType ?? "mixed");
const cappedHeight = Math.min(contentHeight, Math.max(0, maxHeight));
const viewportHeight = working ? Math.max(0, maxHeight) : cappedHeight;
const capped = contentHeight > maxHeight;
const streamOffset = working
? Math.min(0, viewportHeight - contentHeight)
: 0;
useLayoutEffect(() => {
const node = contentRef.current;
if (!node) return;
const measure = () => setContentHeight(node.offsetHeight);
measure();
if (typeof ResizeObserver === "undefined") return;
const observer = new ResizeObserver(measure);
observer.observe(node);
return () => observer.disconnect();
}, []);
useEffect(() => {
if (previousStatus.current === "working" && status === "complete") {
setOpen(!collapseOnComplete);
}
previousStatus.current = status;
}, [collapseOnComplete, setOpen, status]);
const toggle = () => {
const next = !currentOpen;
setOpen(next);
if (next) requestAnimationFrame(() => viewportRef.current?.scrollTo({ top: 0 }));
};
const liveLabel = activeLabel ?? getActiveLabel(contentType);
const completedSummary = summary ?? getSummary(contentType, items, duration);
const maskImage = capped
? working
? "linear-gradient(to bottom, transparent, black 12px)"
: "linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent)"
: undefined;
return (
<div
data-state={working ? "working" : expanded ? "open" : "closed"}
data-content={contentType}
aria-busy={working}
className={cn("w-full text-sm", className)}
>
{working ? (
<div
id={triggerId}
role="status"
className="flex h-7 min-w-0 items-center text-muted-foreground"
>
{renderWorkingStatus
? renderWorkingStatus({ label: liveLabel, duration })
: <ThinkingShimmer>{liveLabel}</ThinkingShimmer>}
</div>
) : (
<button
id={triggerId}
type="button"
aria-expanded={expanded}
aria-controls={contentId}
onClick={toggle}
className="group flex h-7 min-w-0 items-center gap-1.5 rounded-md text-left font-medium text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
>
<span className="truncate">
{renderCompletedStatus
? renderCompletedStatus({ summary: completedSummary, duration })
: completedSummary}
</span>
<motion.span
aria-hidden="true"
animate={{ rotate: expanded ? 180 : 0 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
className="inline-flex shrink-0 text-muted-foreground/70 group-hover:text-foreground"
>
<ChevronDown className="size-3.5" />
</motion.span>
</button>
)}
<AgentDisclosure
id={contentId}
role="region"
aria-labelledby={triggerId}
open={expanded}
openHeight={viewportHeight}
>
<div
ref={viewportRef}
className={cn(
"scrollbar-hide pr-1",
capped && expanded && !working ? "overflow-y-auto" : "overflow-y-hidden",
)}
style={{ height: viewportHeight, maskImage, WebkitMaskImage: maskImage }}
>
<motion.div
ref={contentRef}
role="list"
initial={false}
animate={{ y: streamOffset }}
transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
className={cn("space-y-0.5 py-2", contentClassName)}
>
<AnimatePresence mode="popLayout">
{items.map((item) => (
<motion.div
layout="position"
key={item.id}
role="listitem"
initial={reduce ? { opacity: 1 } : { opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
exit={reduce ? { opacity: 0 } : { opacity: 0, y: -3 }}
transition={
reduce
? { duration: 0 }
: {
opacity: { duration: 0.18, ease: EASE_OUT },
y: SPRING_LAYOUT,
layout: SPRING_LAYOUT,
}
}
>
<ActivityRow item={item} />
</motion.div>
))}
</AnimatePresence>
</motion.div>
</div>
</AgentDisclosure>
</div>
);
}
components/agents/ai-sidebar.tsx
"use client";
// beui.dev/components/agents/chat-app
import {
ArrowDown,
ArrowUp,
Bookmark,
FileText,
Folder,
FolderInput,
FolderOpen,
type LucideIcon,
MoreHorizontal,
Pencil,
Undo2,
} from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
type DragEvent,
type KeyboardEvent,
type ReactNode,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import {
MorphPopover,
MorphPopoverContent,
MorphPopoverTrigger,
} from "@/components/motion/popover-morph";
import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
import { useTouchCapable } from "@/lib/hooks/use-touch-capable";
import { cn } from "@/lib/utils";
export type SidebarResourceKind =
| "folder"
| "project"
| "file"
| "bookmark";
export interface SidebarResource {
id: string;
label: string;
kind: SidebarResourceKind;
children?: SidebarResource[];
disabled?: boolean;
}
export type SidebarResourceDropPosition = "before" | "inside" | "after";
export interface SidebarResourceMove {
itemId: string;
targetId: string | null;
position: SidebarResourceDropPosition;
}
/**
* The moves this row can make right now, the same four the keyboard offers on
* `Alt+Shift+Arrow`. A pointer drag is the fast path for them; a finger has no
* drag to give, so the row menu carries them too. Absent keys are moves this
* row cannot make from where it sits.
*/
export interface SidebarResourceMoveCommands {
up?: () => void;
down?: () => void;
into?: { label: string; run: () => void };
out?: () => void;
}
export interface SidebarResourceMenuControls {
close: () => void;
rename: () => void;
moves: SidebarResourceMoveCommands;
}
export interface AISidebarProps {
items?: SidebarResource[];
defaultItems?: SidebarResource[];
onItemsChange?: (items: SidebarResource[]) => void;
/** Reject the promise to roll the optimistic move back. */
onMove?: (move: SidebarResourceMove) => void | Promise<void>;
onMoveError?: (error: unknown, move: SidebarResourceMove) => void;
onRename?: (item: SidebarResource, label: string) => void | Promise<void>;
activeId?: string | null;
defaultActiveId?: string | null;
onActiveChange?: (id: string) => void;
defaultExpandedIds?: string[];
renderIcon?: (item: SidebarResource) => ReactNode;
renderMenu?: (
item: SidebarResource,
controls: SidebarResourceMenuControls,
) => ReactNode;
ariaLabel?: string;
className?: string;
}
interface FlatResource {
item: SidebarResource;
depth: number;
parentId: string | null;
}
interface DropTarget {
id: string | null;
position: SidebarResourceDropPosition;
}
const ROW_REVEAL = {
duration: 0.16,
ease: EASE_OUT,
} as const;
function canContain(item: SidebarResource) {
return item.kind === "folder" || item.kind === "project";
}
function flattenResources(
items: SidebarResource[],
expanded: Set<string>,
depth = 0,
parentId: string | null = null,
): FlatResource[] {
return items.flatMap((item) => {
const row = { item, depth, parentId };
if (!item.children?.length || !expanded.has(item.id)) return [row];
return [
row,
...flattenResources(item.children, expanded, depth + 1, item.id),
];
});
}
function findResource(
items: SidebarResource[],
id: string,
): SidebarResource | undefined {
for (const item of items) {
if (item.id === id) return item;
const child = item.children ? findResource(item.children, id) : undefined;
if (child) return child;
}
}
function containsResource(item: SidebarResource, id: string): boolean {
return (
item.id === id ||
item.children?.some((child) => containsResource(child, id)) === true
);
}
function removeResource(
items: SidebarResource[],
id: string,
): { items: SidebarResource[]; removed?: SidebarResource } {
let removed: SidebarResource | undefined;
const next: SidebarResource[] = [];
for (const item of items) {
if (item.id === id) {
removed = item;
continue;
}
if (item.children?.length) {
const childResult = removeResource(item.children, id);
if (childResult.removed) {
removed = childResult.removed;
next.push({ ...item, children: childResult.items });
continue;
}
}
next.push(item);
}
return { items: next, removed };
}
function insertResource(
items: SidebarResource[],
resource: SidebarResource,
targetId: string | null,
position: SidebarResourceDropPosition,
): SidebarResource[] {
if (targetId === null) return [...items, resource];
const next: SidebarResource[] = [];
for (const item of items) {
if (item.id === targetId) {
if (position === "before") next.push(resource, item);
else if (position === "after") next.push(item, resource);
else next.push({ ...item, children: [...(item.children ?? []), resource] });
continue;
}
if (item.children?.length) {
next.push({
...item,
children: insertResource(item.children, resource, targetId, position),
});
} else {
next.push(item);
}
}
return next;
}
function moveResource(
items: SidebarResource[],
move: SidebarResourceMove,
): SidebarResource[] | null {
const source = findResource(items, move.itemId);
if (!source || source.disabled) return null;
if (move.targetId && containsResource(source, move.targetId)) return null;
const target = move.targetId ? findResource(items, move.targetId) : undefined;
if (
move.position === "inside" &&
(!target || target.disabled || !canContain(target))
)
return null;
const removed = removeResource(items, move.itemId);
if (!removed.removed) return null;
return insertResource(
removed.items,
removed.removed,
move.targetId,
move.position,
);
}
function renameResource(
items: SidebarResource[],
id: string,
label: string,
): SidebarResource[] {
return items.map((item) => ({
...item,
label: item.id === id ? label : item.label,
children: item.children
? renameResource(item.children, id, label)
: undefined,
}));
}
function defaultIcon(item: SidebarResource, expanded: boolean) {
const Icon =
item.kind === "folder" || item.kind === "project"
? expanded
? FolderOpen
: Folder
: item.kind === "bookmark"
? Bookmark
: FileText;
return <Icon className="size-4" />;
}
function MarqueeLabel({ active, children }: { active: boolean; children: string }) {
const reduce = useReducedMotion() ?? false;
const viewportRef = useRef<HTMLSpanElement>(null);
const labelRef = useRef<HTMLSpanElement>(null);
const [distance, setDistance] = useState(0);
useEffect(() => {
const measure = () => {
const viewport = viewportRef.current;
const label = labelRef.current;
if (!viewport || !label) return;
setDistance(label.scrollWidth > viewport.clientWidth ? label.scrollWidth + 24 : 0);
};
measure();
const observer = new ResizeObserver(measure);
if (viewportRef.current) observer.observe(viewportRef.current);
if (labelRef.current) observer.observe(labelRef.current);
return () => observer.disconnect();
}, []);
const running = active && distance > 0 && !reduce;
return (
<span ref={viewportRef} className="block min-w-0 flex-1 overflow-hidden">
<motion.span
className="flex w-max items-center gap-6 whitespace-nowrap"
animate={{ x: running ? [0, -distance] : 0 }}
transition={
running
? {
duration: Math.max(2.4, distance / 34),
ease: "linear",
repeat: Number.POSITIVE_INFINITY,
repeatDelay: 2,
}
: ROW_REVEAL
}
>
<span ref={labelRef}>{children}</span>
{running ? <span aria-hidden="true">{children}</span> : null}
</motion.span>
</span>
);
}
function ResourceMenuAction({
icon: Icon,
onSelect,
children,
}: {
icon: LucideIcon;
onSelect: () => void;
children: ReactNode;
}) {
return (
<button
type="button"
onClick={onSelect}
className="flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-xs text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
>
<Icon aria-hidden="true" className="size-3.5 shrink-0" />
<span className="min-w-0 truncate">{children}</span>
</button>
);
}
interface ResourceRowProps {
row: FlatResource;
active: boolean;
expanded: boolean;
focused: boolean;
draggingId: string | null;
dropTarget: DropTarget | null;
menuOpen: boolean;
moves: SidebarResourceMoveCommands;
renaming: boolean;
onDragEnd: () => void;
onDragOver: (event: DragEvent<HTMLDivElement>, row: FlatResource) => void;
onDragStart: (event: DragEvent<HTMLDivElement>, id: string) => void;
onDrop: (event: DragEvent<HTMLDivElement>) => void;
onFocus: () => void;
onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
onMenuOpenChange: (open: boolean) => void;
onRenameCancel: () => void;
onRenameCommit: (label: string) => void;
onRenameStart: () => void;
onSelect: () => void;
onToggle: () => void;
renderIcon?: (item: SidebarResource) => ReactNode;
renderMenu?: AISidebarProps["renderMenu"];
setRef: (node: HTMLDivElement | null) => void;
}
function ResourceRow({
row,
active,
expanded,
focused,
draggingId,
dropTarget,
menuOpen,
moves,
renaming,
onDragEnd,
onDragOver,
onDragStart,
onDrop,
onFocus,
onKeyDown,
onMenuOpenChange,
onRenameCancel,
onRenameCommit,
onRenameStart,
onSelect,
onToggle,
renderIcon,
renderMenu,
setRef,
}: ResourceRowProps) {
const reduce = useReducedMotion() ?? false;
const canTouch = useTouchCapable();
const [hovered, setHovered] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const skipRenameBlurRef = useRef(false);
const draggedRef = useRef(false);
const [draft, setDraft] = useState(row.item.label);
const acceptsChildren = canContain(row.item);
const isDragging = draggingId === row.item.id;
const dropPosition = dropTarget?.id === row.item.id ? dropTarget.position : null;
useEffect(() => {
if (!renaming) return;
skipRenameBlurRef.current = false;
setDraft(row.item.label);
requestAnimationFrame(() => {
inputRef.current?.focus();
inputRef.current?.select();
});
}, [renaming, row.item.label]);
const runFromMenu = (action: () => void) => () => {
onMenuOpenChange(false);
action();
};
const menu = renderMenu?.(row.item, {
close: () => onMenuOpenChange(false),
rename: () => {
onMenuOpenChange(false);
onRenameStart();
},
moves,
}) ?? (
<>
<ResourceMenuAction icon={Pencil} onSelect={runFromMenu(onRenameStart)}>
Rename
</ResourceMenuAction>
{moves.up || moves.down || moves.into || moves.out ? (
<div aria-hidden="true" className="my-1 h-px bg-border" />
) : null}
{moves.up ? (
<ResourceMenuAction icon={ArrowUp} onSelect={runFromMenu(moves.up)}>
Move up
</ResourceMenuAction>
) : null}
{moves.down ? (
<ResourceMenuAction icon={ArrowDown} onSelect={runFromMenu(moves.down)}>
Move down
</ResourceMenuAction>
) : null}
{moves.into ? (
<ResourceMenuAction
icon={FolderInput}
onSelect={runFromMenu(moves.into.run)}
>
Move into {moves.into.label}
</ResourceMenuAction>
) : null}
{moves.out ? (
<ResourceMenuAction icon={Undo2} onSelect={runFromMenu(moves.out)}>
Move out
</ResourceMenuAction>
) : null}
</>
);
return (
<motion.div
ref={setRef}
layout="position"
transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
role="treeitem"
aria-level={row.depth + 1}
aria-selected={acceptsChildren ? undefined : active}
aria-expanded={acceptsChildren ? expanded : undefined}
aria-disabled={row.item.disabled || undefined}
tabIndex={focused ? 0 : -1}
draggable={!row.item.disabled && !renaming}
data-menu-open={menuOpen || undefined}
data-drop={dropPosition ?? undefined}
data-dragging={isDragging || undefined}
onFocus={onFocus}
onKeyDown={onKeyDown}
onClick={(event) => {
if (
event.defaultPrevented ||
draggedRef.current ||
renaming ||
row.item.disabled
)
return;
if (acceptsChildren) onToggle();
else onSelect();
}}
onDoubleClick={(event) => {
if (acceptsChildren || row.item.disabled) return;
event.preventDefault();
onRenameStart();
}}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
onDragStartCapture={(event) => {
draggedRef.current = true;
onDragStart(event, row.item.id);
}}
onDragEndCapture={() => {
onDragEnd();
requestAnimationFrame(() => {
draggedRef.current = false;
});
}}
onDragOver={(event) => onDragOver(event, row)}
onDrop={onDrop}
className={cn(
"group/resource relative flex min-h-9 min-w-0 cursor-pointer items-center gap-2.5 rounded-xl pr-3 text-sm outline-none",
"text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
"focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
"data-[menu-open=true]:bg-muted data-[menu-open=true]:text-foreground",
"data-[dragging=true]:opacity-40",
"data-[drop=inside]:bg-muted data-[drop=inside]:ring-1 data-[drop=inside]:ring-primary/45",
"data-[drop=before]:before:absolute data-[drop=before]:before:-top-0.5 data-[drop=before]:before:right-2 data-[drop=before]:before:left-2 data-[drop=before]:before:h-0.5 data-[drop=before]:before:rounded-full data-[drop=before]:before:bg-primary",
"data-[drop=after]:after:absolute data-[drop=after]:after:-bottom-0.5 data-[drop=after]:after:right-2 data-[drop=after]:after:left-2 data-[drop=after]:after:h-0.5 data-[drop=after]:after:rounded-full data-[drop=after]:after:bg-primary",
!acceptsChildren && active && "bg-muted text-foreground",
row.item.disabled && "cursor-not-allowed opacity-45",
)}
style={{ paddingLeft: `${12 + row.depth * 16}px` }}
>
<span aria-hidden="true" className="grid size-5 shrink-0 place-items-center">
{renderIcon?.(row.item) ?? defaultIcon(row.item, expanded)}
</span>
{renaming ? (
<input
ref={inputRef}
value={draft}
aria-label={`Rename ${row.item.label}`}
onChange={(event) => setDraft(event.target.value)}
draggable={false}
onClick={(event) => event.stopPropagation()}
onDoubleClick={(event) => event.stopPropagation()}
onBlur={() => {
if (!skipRenameBlurRef.current) onRenameCommit(draft);
}}
onKeyDown={(event) => {
event.stopPropagation();
if (event.key === "Enter") {
skipRenameBlurRef.current = true;
onRenameCommit(draft);
}
if (event.key === "Escape") {
skipRenameBlurRef.current = true;
onRenameCancel();
}
}}
className="mx-1 h-7 min-w-0 flex-1 rounded-md border border-border bg-background px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
/>
) : (
<MarqueeLabel active={hovered || menuOpen}>{row.item.label}</MarqueeLabel>
)}
{!renaming && !row.item.disabled ? (
<MorphPopover
open={menuOpen}
onOpenChange={onMenuOpenChange}
>
<MorphPopoverTrigger>
<button
type="button"
draggable={false}
tabIndex={-1}
aria-label={`Actions for ${row.item.label}`}
onClick={(event) => event.stopPropagation()}
className={cn(
"grid size-7 shrink-0 place-items-center rounded-lg outline-none transition-opacity hover:bg-foreground/5 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring group-hover/resource:opacity-100 group-data-[menu-open=true]/resource:opacity-100",
// A finger never hovers, and this menu is the only path to
// rename and move without a drag — keep it on screen there.
canTouch ? "opacity-100" : "opacity-0",
)}
>
<MoreHorizontal aria-hidden="true" className="size-4" />
</button>
</MorphPopoverTrigger>
<MorphPopoverContent
side="bottom"
align="end"
sideOffset={8}
radius={12}
className="w-40 p-1.5"
>
<div data-sidebar-resource-menu={row.item.id}>{menu}</div>
</MorphPopoverContent>
</MorphPopover>
) : null}
</motion.div>
);
}
export function AISidebar({
items,
defaultItems = [],
onItemsChange,
onMove,
onMoveError,
onRename,
activeId,
defaultActiveId = null,
onActiveChange,
defaultExpandedIds = [],
renderIcon,
renderMenu,
ariaLabel = "Resources",
className,
}: AISidebarProps) {
const [internalItems, setInternalItems] = useState(items ?? defaultItems);
const [internalActiveId, setInternalActiveId] = useState(defaultActiveId);
const [expandedIds, setExpandedIds] = useState(
() => new Set(defaultExpandedIds),
);
const [focusedId, setFocusedId] = useState<string | null>(
activeId ?? defaultActiveId,
);
const [draggingId, setDraggingId] = useState<string | null>(null);
const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
const [menuOpenId, setMenuOpenId] = useState<string | null>(null);
const [renamingId, setRenamingId] = useState<string | null>(null);
const [announcement, setAnnouncement] = useState("");
const rowRefs = useRef(new Map<string, HTMLDivElement>());
const movePendingRef = useRef(false);
const renderedItems = internalItems;
const selectedId = activeId ?? internalActiveId;
useEffect(() => {
if (items) setInternalItems(items);
}, [items]);
const flat = useMemo(
() => flattenResources(renderedItems, expandedIds),
[expandedIds, renderedItems],
);
// Which row carries the roving tabindex is resolved during render, never in
// a passive effect: an effect lands after the browser paints, so the first
// commit — and, on a server-rendered page, the markup itself — would have no
// tabbable row and Tab would skip the whole tree. The same hole opens again
// whenever a collapse or a rolled-back move takes the focused row out of it.
const focusedRow =
focusedId !== null && flat.some((row) => row.item.id === focusedId)
? focusedId
: (flat[0]?.item.id ?? null);
if (focusedId !== focusedRow) setFocusedId(focusedRow);
useEffect(() => {
if (!menuOpenId) return;
const frame = requestAnimationFrame(() => {
const menus = Array.from(
document.querySelectorAll<HTMLElement>("[data-sidebar-resource-menu]"),
);
menus
.find((menu) => menu.dataset.sidebarResourceMenu === menuOpenId)
?.querySelector<HTMLElement>("button, a[href]")
?.focus();
});
return () => cancelAnimationFrame(frame);
}, [menuOpenId]);
const updateItems = useCallback(
(next: SidebarResource[]) => {
setInternalItems(next);
onItemsChange?.(next);
},
[onItemsChange],
);
const performMove = useCallback(
async (move: SidebarResourceMove) => {
if (movePendingRef.current) {
setAnnouncement("Wait for the current move to finish.");
return;
}
const before = renderedItems;
const next = moveResource(before, move);
if (!next || next === before) return;
movePendingRef.current = true;
updateItems(next);
setDropTarget(null);
setDraggingId(null);
const moved = findResource(before, move.itemId);
const target = move.targetId ? findResource(before, move.targetId) : null;
setAnnouncement(
target
? `Moved ${moved?.label ?? "item"} ${move.position} ${target.label}.`
: `Moved ${moved?.label ?? "item"} to the top level.`,
);
try {
await onMove?.(move);
} catch (error) {
updateItems(before);
setAnnouncement(`Move failed. ${moved?.label ?? "Item"} was restored.`);
onMoveError?.(error, move);
} finally {
movePendingRef.current = false;
}
},
[onMove, onMoveError, renderedItems, updateItems],
);
const focusRow = useCallback((id: string) => {
setFocusedId(id);
requestAnimationFrame(() => rowRefs.current.get(id)?.focus());
}, []);
const select = useCallback(
(id: string) => {
if (activeId === undefined) setInternalActiveId(id);
onActiveChange?.(id);
},
[activeId, onActiveChange],
);
const toggle = useCallback((id: string) => {
setExpandedIds((current) => {
const next = new Set(current);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
}, []);
// The same four moves `Alt+Shift+Arrow` performs, handed to the row menu so
// they survive on a device with no drag and no modifier keys.
const moveCommands = useCallback(
(row: FlatResource): SidebarResourceMoveCommands => {
if (row.item.disabled) return {};
const index = flat.findIndex(({ item }) => item.id === row.item.id);
const previous = flat[index - 1];
const next = flat[index + 1];
const parentId = row.parentId;
const commands: SidebarResourceMoveCommands = {};
if (previous) {
commands.up = () =>
void performMove({
itemId: row.item.id,
targetId: previous.item.id,
position: "before",
});
}
if (next) {
commands.down = () =>
void performMove({
itemId: row.item.id,
targetId: next.item.id,
position: "after",
});
}
// Only offer the reparent when it lands somewhere new — the row above a
// folder's first child is the folder it already lives in.
if (previous && canContain(previous.item) && previous.item.id !== parentId) {
commands.into = {
label: previous.item.label,
run: () => {
setExpandedIds((current) => new Set(current).add(previous.item.id));
void performMove({
itemId: row.item.id,
targetId: previous.item.id,
position: "inside",
});
},
};
}
if (parentId) {
commands.out = () =>
void performMove({
itemId: row.item.id,
targetId: parentId,
position: "after",
});
}
return commands;
},
[flat, performMove],
);
const handleKeyDown = useCallback(
(event: KeyboardEvent<HTMLDivElement>, row: FlatResource) => {
const index = flat.findIndex(({ item }) => item.id === row.item.id);
const previous = flat[index - 1];
const next = flat[index + 1];
const moveModifier = event.altKey && event.shiftKey;
if (event.key === "ArrowDown" && !moveModifier && next) {
event.preventDefault();
focusRow(next.item.id);
return;
}
if (event.key === "ArrowUp" && !moveModifier && previous) {
event.preventDefault();
focusRow(previous.item.id);
return;
}
if (event.key === "Home" && flat[0]) {
event.preventDefault();
focusRow(flat[0].item.id);
return;
}
if (event.key === "End" && flat.at(-1)) {
event.preventDefault();
focusRow(flat.at(-1)?.item.id ?? row.item.id);
return;
}
if (row.item.disabled) {
if (event.key === "ArrowLeft" && row.parentId) {
event.preventDefault();
focusRow(row.parentId);
} else if (
moveModifier ||
["ArrowRight", "Enter", " ", "F2", "ContextMenu"].includes(
event.key,
) ||
(event.shiftKey && event.key === "F10")
) {
event.preventDefault();
}
return;
}
if (moveModifier && event.key === "ArrowUp" && previous) {
event.preventDefault();
void performMove({ itemId: row.item.id, targetId: previous.item.id, position: "before" });
return;
}
if (moveModifier && event.key === "ArrowDown" && next) {
event.preventDefault();
void performMove({ itemId: row.item.id, targetId: next.item.id, position: "after" });
return;
}
if (moveModifier && event.key === "ArrowRight" && previous && canContain(previous.item)) {
event.preventDefault();
setExpandedIds((current) => new Set(current).add(previous.item.id));
void performMove({ itemId: row.item.id, targetId: previous.item.id, position: "inside" });
return;
}
if (moveModifier && event.key === "ArrowLeft" && row.parentId) {
event.preventDefault();
void performMove({ itemId: row.item.id, targetId: row.parentId, position: "after" });
return;
}
if (event.key === "ArrowRight" && canContain(row.item)) {
event.preventDefault();
if (!expandedIds.has(row.item.id)) toggle(row.item.id);
else if (next?.parentId === row.item.id) focusRow(next.item.id);
} else if (event.key === "ArrowLeft") {
event.preventDefault();
if (expandedIds.has(row.item.id)) toggle(row.item.id);
else if (row.parentId) focusRow(row.parentId);
} else if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
if (canContain(row.item)) toggle(row.item.id);
else select(row.item.id);
} else if (event.key === "F2") {
event.preventDefault();
setRenamingId(row.item.id);
} else if (event.key === "ContextMenu" || (event.shiftKey && event.key === "F10")) {
event.preventDefault();
setMenuOpenId(row.item.id);
}
},
[expandedIds, flat, focusRow, performMove, select, toggle],
);
return (
<>
<div
role="tree"
aria-label={ariaLabel}
aria-multiselectable="false"
onDragOver={(event) => {
if (!draggingId || event.target !== event.currentTarget) return;
event.preventDefault();
setDropTarget({ id: null, position: "after" });
}}
onDrop={(event) => {
event.preventDefault();
if (draggingId && dropTarget) {
void performMove({
itemId: draggingId,
targetId: dropTarget.id,
position: dropTarget.position,
});
}
}}
className={cn(
"relative flex min-w-0 flex-col gap-0.5 [overflow-anchor:none] group-data-[state=collapsed]/sidebar:hidden",
draggingId && "select-none pb-9",
className,
)}
>
<AnimatePresence initial={false}>
{flat.map((row) => (
<ResourceRow
key={row.item.id}
row={row}
active={selectedId === row.item.id}
expanded={expandedIds.has(row.item.id)}
focused={focusedRow === row.item.id}
draggingId={draggingId}
dropTarget={dropTarget}
menuOpen={menuOpenId === row.item.id}
moves={moveCommands(row)}
renaming={renamingId === row.item.id}
onFocus={() => setFocusedId(row.item.id)}
onSelect={() => select(row.item.id)}
onToggle={() => toggle(row.item.id)}
onKeyDown={(event) => handleKeyDown(event, row)}
onRenameStart={() => setRenamingId(row.item.id)}
onRenameCancel={() => setRenamingId(null)}
onRenameCommit={(label) => {
const trimmed = label.trim();
setRenamingId(null);
if (!trimmed || trimmed === row.item.label) return;
const before = renderedItems;
updateItems(renameResource(before, row.item.id, trimmed));
void Promise.resolve(onRename?.(row.item, trimmed)).catch(() => {
updateItems(before);
setAnnouncement(`Rename failed. ${row.item.label} was restored.`);
});
}}
onMenuOpenChange={(open) => {
setMenuOpenId(open ? row.item.id : null);
if (!open) focusRow(row.item.id);
}}
onDragStart={(event, id) => {
setDraggingId(id);
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("text/plain", id);
}}
onDragEnd={() => {
setDraggingId(null);
setDropTarget(null);
}}
onDragOver={(event, targetRow) => {
if (!draggingId || draggingId === targetRow.item.id) return;
const source = findResource(renderedItems, draggingId);
if (source && containsResource(source, targetRow.item.id)) return;
event.preventDefault();
event.stopPropagation();
const rect = event.currentTarget.getBoundingClientRect();
const ratio = (event.clientY - rect.top) / rect.height;
const position =
!targetRow.item.disabled &&
canContain(targetRow.item) &&
ratio >= 0.25 &&
ratio <= 0.75
? "inside"
: ratio < 0.5
? "before"
: "after";
setDropTarget({ id: targetRow.item.id, position });
}}
onDrop={(event) => {
event.preventDefault();
event.stopPropagation();
if (draggingId && dropTarget) {
void performMove({
itemId: draggingId,
targetId: dropTarget.id,
position: dropTarget.position,
});
}
}}
renderIcon={renderIcon}
renderMenu={renderMenu}
setRef={(node) => {
if (node) rowRefs.current.set(row.item.id, node);
else rowRefs.current.delete(row.item.id);
}}
/>
))}
</AnimatePresence>
{draggingId ? (
<div
aria-hidden="true"
data-active={dropTarget?.id === null || undefined}
className="absolute inset-x-1 bottom-0 flex h-8 items-center justify-center rounded-lg border border-dashed border-border text-[10px] text-muted-foreground data-[active=true]:border-primary/50 data-[active=true]:bg-muted data-[active=true]:text-foreground"
>
Move to top level
</div>
) : null}
</div>
<span className="sr-only" aria-live="polite">
{announcement}
</span>
</>
);
}
components/agents/approval-card/index.tsx
"use client";
// beui.dev/components/agents/chat-app
import {
ArrowLeft,
ArrowRight,
Check,
CircleHelp,
LoaderCircle,
MessageSquareText,
X,
} from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useCallback, useEffect, useRef, useState } from "react";
import { AgentDisclosure } from "@/components/agents/agent-disclosure";
import { ActionSwapRollText } from "@/components/motion/action-swap-roll";
import { Button } from "@/components/motion/button";
import { Checkbox } from "@/components/motion/checkbox";
import { Input } from "@/components/motion/input";
import { RadioGroup, RadioGroupItem } from "@/components/motion/radio";
import { EASE_OUT, SPRING_SWAP } from "@/lib/ease";
import { cn } from "@/lib/utils";
import type {
ApprovalCardAnswer,
ApprovalCardAnswers,
ApprovalCardProps,
ApprovalCardQuestion,
ApprovalCardStatus,
} from "./types";
export type {
ApprovalCardAnswer,
ApprovalCardAnswers,
ApprovalCardOption,
ApprovalCardProps,
ApprovalCardQuestion,
ApprovalCardStatus,
} from "./types";
const EMPTY_ANSWER: ApprovalCardAnswer = { selected: [], custom: "" };
function getStatusLabel(status: ApprovalCardStatus) {
if (status === "submitting") return "Submitting";
if (status === "approved") return "Approved";
if (status === "rejected") return "Rejected";
if (status === "changes-requested") return "Changes requested";
if (status === "answered") return "Response submitted";
return "Input required";
}
function getStatusClass(status: ApprovalCardStatus) {
if (status === "approved" || status === "answered") {
return "text-emerald-600 dark:text-emerald-400";
}
if (status === "rejected") return "text-rose-600 dark:text-rose-400";
if (status === "changes-requested") {
return "text-amber-600 dark:text-amber-400";
}
return "text-muted-foreground";
}
function getStatusBadgeClass(status: ApprovalCardStatus) {
if (status === "pending" || status === "changes-requested") {
return "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400";
}
if (status === "submitting") {
return "border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400";
}
if (status === "approved" || status === "answered") {
return "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400";
}
return "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400";
}
function isAnswered(answer: ApprovalCardAnswer) {
return answer.selected.length > 0 || Boolean(answer.custom?.trim());
}
function QuestionOptions({
question,
answer,
disabled,
onChange,
onSingleSelect,
}: {
question: ApprovalCardQuestion;
answer: ApprovalCardAnswer;
disabled: boolean;
onChange: (answer: ApprovalCardAnswer) => void;
onSingleSelect?: () => void;
}) {
const custom = answer.custom ?? "";
return (
<div className="mt-3">
{question.options?.length ? (
question.multiple ? (
<div className="grid gap-0.5">
{question.options.map((option) => (
<Checkbox
key={option.value}
checked={answer.selected.includes(option.value)}
disabled={disabled || option.disabled}
label={option.label}
description={option.description}
onCheckedChange={(checked) =>
onChange({
...answer,
selected: checked
? [...answer.selected, option.value]
: answer.selected.filter((value) => value !== option.value),
})
}
className="min-h-9 rounded-lg px-1.5 py-1"
/>
))}
</div>
) : (
<RadioGroup
value={answer.selected[0] ?? ""}
onValueChange={(value) => {
onChange({ selected: [value], custom: "" });
onSingleSelect?.();
}}
className="gap-0.5"
>
{question.options.map((option) => (
<RadioGroupItem
key={option.value}
value={option.value}
label={option.label}
description={option.description}
disabled={disabled || option.disabled}
className="min-h-9 rounded-lg px-1.5 py-1"
/>
))}
</RadioGroup>
)
) : null}
{question.allowCustom ? (
<Input
value={custom}
disabled={disabled}
placeholder={question.customPlaceholder ?? "Add another response…"}
onChange={(value) =>
onChange({
selected: question.multiple ? answer.selected : [],
custom: value,
})
}
className={cn("p-0.5", question.options?.length && "mt-1.5")}
classNames={{
field:
"h-10 rounded-xl border-0 bg-background/70 focus-within:bg-background",
input: "px-3 text-sm",
}}
/>
) : null}
</div>
);
}
function ProgressDots({ current, ids }: { current: number; ids: string[] }) {
return (
<span className="flex gap-1.5">
<span className="sr-only">
Question {current + 1} of {ids.length}
</span>
{ids.map((id, index) => (
<motion.span
key={id}
aria-hidden="true"
initial={{
scale: index === current ? 1 : 0.75,
opacity: index <= current ? 1 : 0.35,
}}
animate={{
scale: index === current ? 1 : 0.75,
opacity: index <= current ? 1 : 0.35,
}}
transition={SPRING_SWAP}
className="size-1.5 rounded-full bg-foreground"
/>
))}
</span>
);
}
export function ApprovalCard({
title = "Approval required",
description,
children,
questions = [],
status = "pending",
answers,
defaultAnswers = {},
onAnswersChange,
step,
defaultStep = 0,
onStepChange,
onSubmit,
onApprove,
onReject,
onRequestChanges,
onDismiss,
approveLabel = "Approve",
submitLabel = "Submit response",
result,
className,
}: ApprovalCardProps) {
const reduce = useReducedMotion() ?? false;
const [internalAnswers, setInternalAnswers] =
useState<ApprovalCardAnswers>(defaultAnswers);
const [internalStep, setInternalStep] = useState(defaultStep);
const autoAdvanceTimer = useRef<number | undefined>(undefined);
const currentAnswers = answers ?? internalAnswers;
const currentStep = Math.min(
Math.max(0, step ?? internalStep),
Math.max(0, questions.length - 1),
);
const question = questions[currentStep];
const questionMode = questions.length > 0;
const multipleQuestions = questions.length > 1;
const pending = status === "pending";
const busy = status === "submitting";
const interactive = pending || busy;
const currentAnswer = question
? (currentAnswers[question.id] ?? EMPTY_ANSWER)
: EMPTY_ANSWER;
const displayTitle = question?.title ?? title;
const titleKey = question?.id ?? String(status);
const statusLabel = getStatusLabel(status);
const clearAutoAdvance = useCallback(() => {
if (autoAdvanceTimer.current === undefined) return;
window.clearTimeout(autoAdvanceTimer.current);
autoAdvanceTimer.current = undefined;
}, []);
useEffect(() => clearAutoAdvance, [clearAutoAdvance]);
const setAnswers = useCallback(
(next: ApprovalCardAnswers) => {
if (answers === undefined) setInternalAnswers(next);
onAnswersChange?.(next);
},
[answers, onAnswersChange],
);
const setStep = (next: number) => {
clearAutoAdvance();
if (step === undefined) setInternalStep(next);
onStepChange?.(next);
};
const updateCurrentAnswer = (next: ApprovalCardAnswer) => {
if (!question) return;
setAnswers({ ...currentAnswers, [question.id]: next });
};
const continueQuestion = () => {
if (currentStep < questions.length - 1) {
setStep(currentStep + 1);
return;
}
onSubmit?.(currentAnswers);
};
const queueAutoAdvance = () => {
if (
!question ||
question.multiple ||
question.autoAdvance === false ||
currentStep >= questions.length - 1 ||
busy
) {
return;
}
clearAutoAdvance();
autoAdvanceTimer.current = window.setTimeout(() => {
setStep(currentStep + 1);
}, 240);
};
return (
<div
data-state={status}
aria-busy={busy}
className={cn(
"w-full overflow-hidden rounded-2xl bg-muted p-4 text-sm",
className,
)}
>
<div className="flex items-start gap-3">
<span
aria-hidden="true"
className={cn(
"grid size-5 shrink-0 place-items-center text-muted-foreground",
getStatusClass(status),
)}
>
{busy ? (
<LoaderCircle className={cn("size-4", !reduce && "animate-spin")} />
) : interactive ? (
questionMode ? (
<CircleHelp className="size-4" />
) : (
<MessageSquareText className="size-4" />
)
) : status === "rejected" ? (
<X className="size-4" />
) : (
<Check className="size-4" />
)}
</span>
<div className="min-w-0 flex-1">
<div className="flex min-w-0 items-start gap-3">
<h3 className="min-w-0 flex-1 text-base font-medium leading-5 text-foreground">
<ActionSwapRollText value={titleKey}>
{displayTitle}
</ActionSwapRollText>
</h3>
{questionMode && interactive ? (
multipleQuestions ? (
<span className="shrink-0 text-xs tabular-nums text-muted-foreground/65">
{currentStep + 1}/{questions.length}
</span>
) : null
) : (
<span
className={cn(
"shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-medium transition-colors",
getStatusBadgeClass(status),
)}
>
{statusLabel}
</span>
)}
{onDismiss ? (
<button
type="button"
aria-label="Dismiss"
onClick={onDismiss}
className="grid size-5 shrink-0 place-items-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
>
<X className="size-4" />
</button>
) : null}
</div>
<AgentDisclosure open={interactive}>
{questionMode && question ? (
<AnimatePresence initial={false} mode="wait">
<motion.div
key={question.id}
initial={reduce ? { opacity: 1 } : { opacity: 0, x: 8 }}
animate={{ opacity: 1, x: 0 }}
exit={reduce ? { opacity: 0 } : { opacity: 0, x: -6 }}
transition={{ duration: reduce ? 0 : 0.2, ease: EASE_OUT }}
>
{question.description ? (
<p className="mt-1 leading-5 text-muted-foreground">
{question.description}
</p>
) : null}
<QuestionOptions
question={question}
answer={currentAnswer}
disabled={busy}
onChange={updateCurrentAnswer}
onSingleSelect={queueAutoAdvance}
/>
</motion.div>
</AnimatePresence>
) : (
<div>
{description ? (
<p className="mt-1 leading-5 text-muted-foreground">
{description}
</p>
) : null}
{children ? <div className="mt-3">{children}</div> : null}
</div>
)}
{questionMode ? (
<div className="mt-4 flex items-center gap-3">
{multipleQuestions ? (
<>
<Button
variant="ghost"
size="icon"
aria-label="Previous question"
disabled={busy || currentStep === 0}
onClick={() => setStep(currentStep - 1)}
className="rounded-full"
>
<ArrowLeft className="size-4" />
</Button>
<ProgressDots
current={currentStep}
ids={questions.map((item) => item.id)}
/>
</>
) : null}
<Button
size={currentStep === questions.length - 1 ? "sm" : "icon"}
aria-label={
currentStep === questions.length - 1
? "Submit response"
: "Next question"
}
disabled={busy || !isAnswered(currentAnswer)}
onClick={continueQuestion}
className="ml-auto rounded-full"
>
{busy ? (
<LoaderCircle className={cn("size-4", !reduce && "animate-spin")} />
) : currentStep === questions.length - 1 ? (
<>
{submitLabel}
<ArrowRight className="size-3.5" />
</>
) : (
<ArrowRight className="size-4" />
)}
</Button>
</div>
) : (
<div className="mt-4 flex flex-wrap items-center gap-2">
<Button
size="sm"
disabled={busy}
onClick={onApprove}
className="rounded-full"
>
{approveLabel}
</Button>
{onRequestChanges ? (
<Button
variant="secondary"
size="sm"
disabled={busy}
onClick={onRequestChanges}
className="rounded-full"
>
Request changes
</Button>
) : null}
{onReject ? (
<Button
variant="ghost"
size="sm"
disabled={busy}
onClick={onReject}
className="rounded-full text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400"
>
Reject
</Button>
) : null}
</div>
)}
</AgentDisclosure>
{!interactive ? (
<p className="mt-1 text-sm text-muted-foreground">
{result ?? statusLabel}
</p>
) : null}
</div>
</div>
</div>
);
}
components/agents/code-block.tsx
"use client";
// beui.dev/components/agents/chat-app
import { Check, Copy, FileCode2, LoaderCircle } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import {
type ReactNode,
useCallback,
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
} from "react";
import {
type AgentCodeLanguage,
AgentCodeLine,
useAgentCodeTokens,
} from "@/components/agents/agent-code";
import { SPRING_PRESS } from "@/lib/ease";
import { cn } from "@/lib/utils";
export type CodeBlockStatus = "streaming" | "complete";
export interface CodeBlockProps {
code: string;
language?: AgentCodeLanguage;
filename?: ReactNode;
status?: CodeBlockStatus;
showLineNumbers?: boolean;
highlightLines?: number[];
maxHeight?: number;
wrap?: boolean;
copyable?: boolean;
onCopy?: () => void | Promise<void>;
className?: string;
}
export function CodeBlock({
code,
language = "typescript",
filename,
status = "complete",
showLineNumbers = true,
highlightLines = [],
maxHeight = 280,
wrap = false,
copyable = true,
onCopy,
className,
}: CodeBlockProps) {
const reduce = useReducedMotion() ?? false;
const viewportRef = useRef<HTMLDivElement>(null);
const copyTimer = useRef<number | undefined>(undefined);
const [copied, setCopied] = useState(false);
const streaming = status === "streaming";
const tokens = useAgentCodeTokens(code, language);
const highlighted = useMemo(
() => new Set(highlightLines),
[highlightLines],
);
let offset = 0;
const lines = code.split("\n").map((content) => {
const line = { content, offset };
offset += content.length + 1;
return line;
});
useEffect(
() => () => {
if (copyTimer.current) window.clearTimeout(copyTimer.current);
},
[],
);
useLayoutEffect(() => {
const viewport = viewportRef.current;
if (!viewport || !streaming) return;
const frame = requestAnimationFrame(() => {
if (viewport.scrollHeight <= viewport.clientHeight) return;
if (typeof viewport.scrollTo === "function") {
viewport.scrollTo({
top: viewport.scrollHeight,
behavior: reduce ? "auto" : "smooth",
});
} else {
viewport.scrollTop = viewport.scrollHeight;
}
});
return () => cancelAnimationFrame(frame);
});
const handleCopy = useCallback(async () => {
if (onCopy) await onCopy();
else await navigator.clipboard?.writeText(code);
setCopied(true);
if (copyTimer.current) window.clearTimeout(copyTimer.current);
copyTimer.current = window.setTimeout(() => setCopied(false), 1600);
}, [code, onCopy]);
return (
<div
data-state={status}
aria-busy={streaming}
className={cn(
"w-full overflow-hidden rounded-2xl bg-muted/80 text-sm",
className,
)}
>
<div className="flex h-10 items-center gap-2.5 px-3">
<FileCode2
aria-hidden="true"
className="size-3.5 shrink-0 text-muted-foreground/70"
/>
{filename ? (
<span className="min-w-0 truncate font-mono text-xs text-foreground/80">
{filename}
</span>
) : null}
<span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground/55">
{language}
</span>
<span
className={cn(
"ml-auto inline-flex shrink-0 items-center gap-1 text-[10px] font-medium",
streaming
? "text-blue-600 dark:text-blue-400"
: "text-emerald-600 dark:text-emerald-400",
)}
>
{streaming ? (
<LoaderCircle className={cn("size-3", !reduce && "animate-spin")} />
) : (
<Check className="size-3" />
)}
{streaming ? "Writing" : "Ready"}
</span>
{copyable || onCopy ? (
<motion.button
type="button"
aria-label={copied ? "Copied" : "Copy code"}
title={copied ? "Copied" : "Copy code"}
onClick={handleCopy}
whileTap={reduce ? undefined : { scale: 0.9 }}
transition={SPRING_PRESS}
className="grid size-7 shrink-0 place-items-center rounded-full text-muted-foreground outline-none transition-colors hover:bg-background/70 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
>
{copied ? (
<Check className="size-3.5" />
) : (
<Copy className="size-3.5" />
)}
</motion.button>
) : null}
</div>
<div
ref={viewportRef}
role={streaming ? "log" : undefined}
aria-live={streaming ? "polite" : undefined}
className="scrollbar-hide overflow-auto border-t border-foreground/[0.06] py-2"
style={{ maxHeight }}
>
<pre className="m-0 min-w-max font-mono text-xs leading-5 text-foreground/85">
<code>
{lines.map((line, index) => {
const lineNumber = index + 1;
return (
<span
key={line.offset}
className={cn(
"grid min-h-5",
showLineNumbers
? "grid-cols-[2.75rem_minmax(0,1fr)]"
: "grid-cols-1",
highlighted.has(lineNumber) && "bg-blue-500/[0.07]",
)}
>
{showLineNumbers ? (
<span className="select-none pr-3 text-right tabular-nums text-muted-foreground/35">
{lineNumber}
</span>
) : null}
<AgentCodeLine
code={line.content}
tokens={tokens?.[index]}
className={cn(
"pr-4",
showLineNumbers ? "pl-1" : "pl-4",
wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre",
)}
/>
</span>
);
})}
</code>
</pre>
</div>
</div>
);
}
components/agents/file-diff.tsx
"use client";
// beui.dev/components/agents/chat-app
import {
Check,
ChevronDown,
Copy,
FileCode2,
LoaderCircle,
} from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import {
type ReactNode,
useCallback,
useEffect,
useId,
useLayoutEffect,
useRef,
useState,
} from "react";
import {
type AgentCodeLanguage,
AgentCodeLine,
useAgentCodeTokens,
} from "@/components/agents/agent-code";
import { AgentDisclosure } from "@/components/agents/agent-disclosure";
import { SPRING_PRESS, SPRING_SWAP } from "@/lib/ease";
import { cn } from "@/lib/utils";
export type FileDiffStatus = "streaming" | "complete";
export type FileDiffLineType = "added" | "removed" | "context";
export interface FileDiffLine {
id: string;
type?: FileDiffLineType;
oldLine?: number;
newLine?: number;
content: string;
}
export interface FileDiffProps {
file: ReactNode;
lines: FileDiffLine[];
status?: FileDiffStatus;
open?: boolean;
defaultOpen?: boolean;
onOpenChange?: (open: boolean) => void;
collapseOnComplete?: boolean;
maxHeight?: number;
language?: AgentCodeLanguage;
copyText?: string;
onCopy?: () => void | Promise<void>;
className?: string;
}
function ChangeCount({ value, type }: { value: number; type: "added" | "removed" }) {
if (!value) return null;
return (
<span
className={cn(
"font-mono text-xs tabular-nums",
type === "added"
? "text-emerald-600 dark:text-emerald-400"
: "text-rose-600 dark:text-rose-400",
)}
>
{type === "added" ? "+" : "−"}
{value}
</span>
);
}
export function FileDiff({
file,
lines,
status = "streaming",
open,
defaultOpen = true,
onOpenChange,
collapseOnComplete = true,
maxHeight = 220,
language = "typescript",
copyText,
onCopy,
className,
}: FileDiffProps) {
const reduce = useReducedMotion() ?? false;
const baseId = useId();
const triggerId = `${baseId}-trigger`;
const contentId = `${baseId}-content`;
const viewportRef = useRef<HTMLDivElement>(null);
const previousStatus = useRef(status);
const copyTimer = useRef<number | undefined>(undefined);
const [copied, setCopied] = useState(false);
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const currentOpen = open ?? internalOpen;
const streaming = status === "streaming";
const additions = lines.filter((line) => line.type === "added").length;
const deletions = lines.filter((line) => line.type === "removed").length;
const canCopy = Boolean(copyText || onCopy);
const code = lines.map((line) => line.content).join("\n");
const tokens = useAgentCodeTokens(code, language);
const setOpen = useCallback(
(next: boolean) => {
if (open === undefined) setInternalOpen(next);
onOpenChange?.(next);
},
[onOpenChange, open],
);
useEffect(() => {
if (previousStatus.current !== "streaming" && status === "streaming") {
setOpen(true);
}
if (
previousStatus.current === "streaming" &&
status === "complete" &&
collapseOnComplete
) {
setOpen(false);
}
previousStatus.current = status;
}, [collapseOnComplete, setOpen, status]);
useEffect(
() => () => {
if (copyTimer.current) window.clearTimeout(copyTimer.current);
},
[],
);
useLayoutEffect(() => {
const viewport = viewportRef.current;
if (!viewport || !currentOpen || !streaming) return;
const frame = requestAnimationFrame(() => {
if (viewport.scrollHeight <= viewport.clientHeight) return;
if (typeof viewport.scrollTo === "function") {
viewport.scrollTo({
top: viewport.scrollHeight,
behavior: reduce ? "auto" : "smooth",
});
} else {
viewport.scrollTop = viewport.scrollHeight;
}
});
return () => cancelAnimationFrame(frame);
});
const handleCopy = useCallback(async () => {
if (onCopy) await onCopy();
else if (copyText) await navigator.clipboard?.writeText(copyText);
setCopied(true);
if (copyTimer.current) window.clearTimeout(copyTimer.current);
copyTimer.current = window.setTimeout(() => setCopied(false), 1600);
}, [copyText, onCopy]);
return (
<div
data-state={status}
aria-busy={streaming}
className={cn("w-full text-sm", className)}
>
<button
id={triggerId}
type="button"
aria-expanded={currentOpen}
aria-controls={contentId}
onClick={() => setOpen(!currentOpen)}
className="group flex min-h-9 w-full items-center gap-2 rounded-md py-1 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
>
<FileCode2
aria-hidden="true"
className="size-4 shrink-0 text-muted-foreground"
/>
<span className="min-w-0 flex-1 truncate font-mono text-xs text-foreground/80">
{file}
</span>
<span className="flex shrink-0 items-center gap-2">
<ChangeCount value={additions} type="added" />
<ChangeCount value={deletions} type="removed" />
</span>
<span className="grid size-4 shrink-0 place-items-center text-muted-foreground/60">
{streaming ? (
<LoaderCircle
aria-label="Applying changes"
className={cn("size-3.5", !reduce && "animate-spin")}
/>
) : (
<Check aria-label="Changes applied" className="size-3.5" />
)}
</span>
<motion.span
aria-hidden="true"
animate={{ rotate: currentOpen ? 180 : 0 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
className="shrink-0 text-muted-foreground/45 transition-colors group-hover:text-muted-foreground"
>
<ChevronDown className="size-3.5" />
</motion.span>
</button>
<AgentDisclosure
id={contentId}
role="region"
aria-labelledby={triggerId}
open={currentOpen}
>
<div className="pl-6 pt-1.5">
<div className="overflow-hidden rounded-xl bg-muted/80">
<div
ref={viewportRef}
data-slot="file-diff-viewport"
aria-live="polite"
className="scrollbar-hide overflow-auto"
style={{ maxHeight }}
>
<div className="font-mono text-xs leading-5">
<span className="sr-only">File changes</span>
{lines.map((line, index) => {
const type = line.type ?? "context";
return (
<div
key={line.id}
className={cn(
"grid grid-cols-[2.25rem_2.25rem_1rem_minmax(0,1fr)]",
type === "added" && "bg-emerald-500/[0.07]",
type === "removed" && "bg-rose-500/[0.07]",
)}
>
<span className="select-none pr-2 text-right tabular-nums text-muted-foreground/40">
{line.oldLine}
</span>
<span className="select-none pr-2 text-right tabular-nums text-muted-foreground/40">
{line.newLine}
</span>
<span
className={cn(
"select-none text-center text-muted-foreground/45",
type === "added" &&
"text-emerald-600 dark:text-emerald-400",
type === "removed" &&
"text-rose-600 dark:text-rose-400",
)}
>
{type === "added"
? "+"
: type === "removed"
? "−"
: ""}
</span>
<AgentCodeLine
code={line.content}
tokens={tokens?.[index]}
className="min-w-0 whitespace-pre px-1.5"
/>
</div>
);
})}
</div>
</div>
{canCopy ? (
<div className="flex justify-end px-2 pb-1.5 pt-1">
<motion.button
type="button"
aria-label={copied ? "Copied" : "Copy diff"}
title={copied ? "Copied" : "Copy diff"}
onClick={handleCopy}
whileTap={reduce ? undefined : { scale: 0.9 }}
transition={SPRING_PRESS}
className="grid size-7 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-background/70 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
>
{copied ? (
<Check className="size-3.5" />
) : (
<Copy className="size-3.5" />
)}
</motion.button>
</div>
) : null}
</div>
</div>
</AgentDisclosure>
</div>
);
}
components/agents/image-generation.tsx
"use client";
// beui.dev/components/agents/chat-app
import { Check, CircleAlert, RotateCcw } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type { CSSProperties, ReactNode } from "react";
import { useEffect, useRef } from "react";
import { EASE_IN_OUT, EASE_OUT, SPRING_PRESS } from "@/lib/ease";
import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
import { cn } from "@/lib/utils";
export type ImageGenerationStatus =
| "queued"
| "generating"
| "refining"
| "complete"
| "error";
export interface ImageGenerationProps {
/** The completed media. Pass an img, Next Image, canvas, video, or custom preview. */
children?: ReactNode;
status?: ImageGenerationStatus;
/** Accessible description. Defaults to a description derived from prompt. */
label?: string;
prompt?: string;
resolution?: string;
/** CSS aspect ratio reserved before generated media is available. */
aspectRatio?: CSSProperties["aspectRatio"];
size?: "compact" | "fluid";
/** Lets the active dither cluster follow fine-pointer movement. */
interactive?: boolean;
statusText?: string;
showStatus?: boolean;
onRetry?: () => void;
className?: string;
mediaClassName?: string;
statusClassName?: string;
}
const STATUS_TEXT: Record<ImageGenerationStatus, string> = {
queued: "Waiting to generate",
generating: "Generating image",
refining: "Refining details",
complete: "Image ready",
error: "Generation failed",
};
const MEDIA_STATE: Record<
ImageGenerationStatus,
{ filter: string; opacity: number; scale: number }
> = {
queued: { filter: "blur(4px) saturate(0.75)", opacity: 0, scale: 1.02 },
generating: { filter: "blur(3px) saturate(0.85)", opacity: 0, scale: 1.015 },
refining: { filter: "blur(1.5px) saturate(0.95)", opacity: 0.62, scale: 1.005 },
complete: { filter: "blur(0px) saturate(1)", opacity: 1, scale: 1 },
error: { filter: "blur(2px) saturate(0.5)", opacity: 0.28, scale: 1 },
};
const OVERLAY_OPACITY: Record<ImageGenerationStatus, number> = {
queued: 1,
generating: 1,
refining: 0.48,
complete: 0,
error: 0,
};
const DOT_GAP = 10;
const TWO_PI = Math.PI * 2;
function DitherMark({
status,
reduce,
}: {
status: ImageGenerationStatus;
reduce: boolean;
}) {
if (status === "complete") {
return <Check aria-hidden="true" className="size-3.5" />;
}
if (status === "error") {
return <CircleAlert aria-hidden="true" className="size-3.5" />;
}
return (
<motion.span
aria-hidden="true"
animate={reduce ? undefined : { rotate: 360 }}
transition={{
duration: 2.4,
ease: EASE_IN_OUT,
repeat: Number.POSITIVE_INFINITY,
}}
className="grid size-3.5 grid-cols-2 place-items-center gap-0.5"
>
<span className="size-1 rounded-[1px] bg-current" />
<span className="size-1 rounded-[1px] bg-current opacity-55" />
<span className="size-1 rounded-[1px] bg-current opacity-55" />
<span className="size-1 rounded-[1px] bg-current" />
</motion.span>
);
}
function DitherField({
interactive,
reduce,
status,
}: {
interactive: boolean;
reduce: boolean;
status: ImageGenerationStatus;
}) {
const canHover = useHoverCapable();
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const canvas = canvasRef.current;
const context = canvas?.getContext("2d");
if (!canvas || !context) return;
let frame = 0;
let width = 0;
let height = 0;
let dotColor = "currentColor";
const pointer = {
x: 0,
y: 0,
targetX: 0,
targetY: 0,
inside: false,
};
const pointerEnabled = interactive && canHover && !reduce;
const resize = () => {
const rect = canvas.getBoundingClientRect();
width = rect.width || canvas.clientWidth || 208;
height = rect.height || canvas.clientHeight || 208;
const dpr = Math.min(window.devicePixelRatio || 1, 2);
canvas.width = Math.round(width * dpr);
canvas.height = Math.round(height * dpr);
context.setTransform(dpr, 0, 0, dpr, 0, 0);
dotColor = window.getComputedStyle(canvas).color;
pointer.x = width / 2;
pointer.y = height / 2;
pointer.targetX = pointer.x;
pointer.targetY = pointer.y;
};
const draw = (time: number) => {
context.clearRect(0, 0, width, height);
if (!pointer.inside) {
pointer.targetX =
width / 2 + (reduce ? 0 : Math.sin(time / 1700) * width * 0.12);
pointer.targetY =
height / 2 + (reduce ? 0 : Math.cos(time / 2100) * height * 0.1);
}
const follow = reduce ? 1 : pointer.inside ? 0.16 : 0.045;
pointer.x += (pointer.targetX - pointer.x) * follow;
pointer.y += (pointer.targetY - pointer.y) * follow;
const radius = Math.min(width, height) * 0.38;
const columns = Math.ceil(width / DOT_GAP) + 1;
const rows = Math.ceil(height / DOT_GAP) + 1;
const offsetX = (width - (columns - 1) * DOT_GAP) / 2;
const offsetY = (height - (rows - 1) * DOT_GAP) / 2;
context.fillStyle = dotColor;
for (let row = 0; row < rows; row += 1) {
for (let column = 0; column < columns; column += 1) {
const anchorX = offsetX + column * DOT_GAP;
const anchorY = offsetY + row * DOT_GAP;
const deltaX = anchorX - pointer.x;
const deltaY = anchorY - pointer.y;
const distance = Math.hypot(deltaX, deltaY);
const proximity = Math.max(0, 1 - distance / radius);
const influence = proximity * proximity * (3 - 2 * proximity);
const displacement = influence * influence * 9;
const directionX = distance > 0 ? deltaX / distance : 0;
const directionY = distance > 0 ? deltaY / distance : 0;
const x = anchorX + directionX * displacement;
const y = anchorY + directionY * displacement;
const dotRadius = 0.65 + influence * 0.85;
context.globalAlpha = 0.17 + influence * 0.72;
context.beginPath();
context.arc(x, y, dotRadius, 0, TWO_PI);
context.fill();
}
}
context.globalAlpha = 1;
if (!reduce) frame = window.requestAnimationFrame(draw);
};
const handlePointerMove = (event: PointerEvent) => {
if (!pointerEnabled) return;
const rect = canvas.getBoundingClientRect();
pointer.inside = true;
pointer.targetX = event.clientX - rect.left;
pointer.targetY = event.clientY - rect.top;
};
const handlePointerLeave = () => {
pointer.inside = false;
};
const resizeObserver =
typeof ResizeObserver === "undefined"
? null
: new ResizeObserver(resize);
resize();
resizeObserver?.observe(canvas);
canvas.addEventListener("pointermove", handlePointerMove, { passive: true });
canvas.addEventListener("pointerleave", handlePointerLeave);
draw(0);
return () => {
if (frame) window.cancelAnimationFrame(frame);
resizeObserver?.disconnect();
canvas.removeEventListener("pointermove", handlePointerMove);
canvas.removeEventListener("pointerleave", handlePointerLeave);
};
}, [canHover, interactive, reduce]);
return (
<motion.div
aria-hidden="true"
initial={false}
animate={{ opacity: OVERLAY_OPACITY[status] }}
transition={{ duration: reduce ? 0 : 0.4, ease: EASE_OUT }}
className="absolute inset-0 overflow-hidden bg-muted"
>
<canvas
ref={canvasRef}
className="absolute inset-0 size-full text-foreground"
/>
</motion.div>
);
}
export function ImageGeneration({
children,
status = "generating",
label,
prompt,
resolution = "1024 × 1024",
aspectRatio = "1 / 1",
size = "compact",
interactive = true,
statusText,
showStatus = true,
onRetry,
className,
mediaClassName,
statusClassName,
}: ImageGenerationProps) {
const reduce = useReducedMotion() ?? false;
const active =
status === "queued" || status === "generating" || status === "refining";
const mediaState = MEDIA_STATE[status];
const resolvedStatusText = statusText ?? STATUS_TEXT[status];
const resolvedLabel =
label ?? (prompt ? `${resolvedStatusText}: ${prompt}` : resolvedStatusText);
return (
<div
data-slot="image-generation"
data-state={status}
aria-busy={active}
className={cn("w-full", className)}
>
<div
className={cn(
"w-full",
size === "compact" && "mx-auto max-w-52",
)}
>
<div
role="img"
aria-label={resolvedLabel}
style={{ aspectRatio }}
className="relative isolate w-full overflow-hidden rounded-xl bg-muted"
>
<motion.div
aria-hidden={children ? undefined : true}
initial={false}
animate={
reduce
? { opacity: mediaState.opacity }
: {
filter: mediaState.filter,
opacity: mediaState.opacity,
scale: mediaState.scale,
}
}
transition={
reduce ? { duration: 0 } : { duration: 0.4, ease: EASE_OUT }
}
className={cn(
"absolute inset-0 [&>*]:size-full [&>*]:object-cover [&_img]:size-full [&_img]:object-cover",
mediaClassName,
)}
>
{children}
</motion.div>
<AnimatePresence initial={false}>
{active ? (
<motion.div
key="dither-field"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: reduce ? 0 : 0.25, ease: EASE_OUT }}
className="absolute inset-0"
>
<DitherField
interactive={interactive}
reduce={reduce}
status={status}
/>
</motion.div>
) : null}
</AnimatePresence>
{resolution ? (
<span className="absolute top-2 right-2 z-10 rounded-full bg-background/75 px-2 py-0.5 font-mono text-[10px] tabular-nums text-muted-foreground">
{resolution}
</span>
) : null}
</div>
{showStatus || prompt ? (
<div className="mt-3 text-left">
{showStatus ? (
<div
aria-live="polite"
className={cn(
"flex min-h-5 items-center gap-2 text-sm font-medium text-foreground",
status === "error" && "text-destructive",
statusClassName,
)}
>
<DitherMark status={status} reduce={reduce} />
<AnimatePresence mode="popLayout" initial={false}>
<motion.span
key={resolvedStatusText}
initial={reduce ? false : { opacity: 0, y: 4 }}
animate={{ opacity: 1, y: 0 }}
exit={reduce ? undefined : { opacity: 0, y: -4 }}
transition={{
duration: reduce ? 0 : 0.15,
ease: EASE_OUT,
}}
>
{resolvedStatusText}
</motion.span>
</AnimatePresence>
</div>
) : null}
{prompt ? (
<p className="mt-0.5 truncate text-xs text-muted-foreground">
“{prompt}”
</p>
) : null}
</div>
) : null}
{status === "error" && onRetry ? (
<motion.button
type="button"
onClick={onRetry}
whileTap={reduce ? undefined : { scale: 0.96 }}
transition={SPRING_PRESS}
className="mt-3 inline-flex min-h-10 items-center gap-2 rounded-full px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
>
<RotateCcw aria-hidden="true" className="size-4" />
Try again
</motion.button>
) : null}
</div>
</div>
);
}
components/agents/loading-states/thinking-shimmer.tsx
// beui.dev/components/agents/chat-app
import type { ReactNode } from "react";
import { TextShimmer } from "@/components/motion/text-shimmer";
import { cn } from "@/lib/utils";
export interface ThinkingShimmerProps {
/** Loading message shown to the user. */
children?: ReactNode;
/** Seconds taken for one shimmer pass. */
duration?: number;
className?: string;
}
export function ThinkingShimmer({
children = "Thinking…",
duration = 1.8,
className,
}: ThinkingShimmerProps) {
return (
<TextShimmer
as="span"
duration={duration}
className={cn("font-medium", className)}
>
{children}
</TextShimmer>
);
}
components/agents/message.tsx
"use client";
// beui.dev/components/agents/chat-app
import { motion, useReducedMotion } from "motion/react";
import {
type ComponentPropsWithRef,
createContext,
type ReactNode,
useContext,
} from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";
import { MessageSideContext } from "@/components/agents/message-context";
export {
MessageBubble,
MessageBubbleCollapsible,
MessageBubbleContent,
MessageBubbleGroup,
} from "@/components/agents/message-bubble";
export { MessageScroller } from "@/components/agents/message-scroller";
export type { MessageScrollerProps } from "@/components/agents/message-scroller";
export type MessageFrom = "user" | "assistant";
interface MessageContextValue {
from: MessageFrom;
}
const MessageContext = createContext<MessageContextValue>({
from: "assistant",
});
export interface MessageProps
extends Omit<ComponentPropsWithRef<typeof motion.article>, "children"> {
from: MessageFrom;
/** Plays a trailing-edge pop-up once when this message row mounts. */
animateIn?: boolean;
children: ReactNode;
}
export interface MessageGroupProps extends ComponentPropsWithRef<"div"> {
spacing?: "compact" | "default";
}
export interface MessageAvatarProps extends ComponentPropsWithRef<"div"> {
/** Keep an empty avatar slot so grouped messages remain aligned. */
placeholder?: boolean;
}
export type MessageContentProps = ComponentPropsWithRef<"div">;
export type MessageHeaderProps = ComponentPropsWithRef<"div">;
export type MessageFooterProps = ComponentPropsWithRef<"div">;
export type MessageMarkerProps = ComponentPropsWithRef<"div">;
export interface MessageTypingProps extends ComponentPropsWithRef<"span"> {
label?: string;
}
// A sent row should rise from the live edge without changing measured layout.
const MESSAGE_POP_UP = {
type: "spring",
stiffness: 480,
damping: 32,
mass: 0.62,
} as const;
export function Message({
from,
animateIn = false,
children,
className,
initial,
animate,
transition,
exit,
style,
...props
}: MessageProps) {
const reduce = useReducedMotion() ?? false;
return (
<MessageSideContext.Provider value={from === "user" ? "end" : "start"}>
<MessageContext.Provider value={{ from }}>
<motion.article
data-slot="message"
data-from={from}
aria-label={props["aria-label"] ?? `${from} message`}
initial={
initial ??
(animateIn && !reduce
? {
opacity: 0,
transform: "translateY(8px) scale(0.95)",
}
: false)
}
animate={
animate ??
(animateIn && !reduce
? {
opacity: 1,
transform: "translateY(0px) scale(1)",
}
: { opacity: 1 })
}
exit={
exit ??
(reduce
? { opacity: 0 }
: {
opacity: 0,
transform: "translateY(-3px) scale(0.99)",
})
}
transition={
transition ?? (reduce ? { duration: 0.12 } : MESSAGE_POP_UP)
}
style={{
transformOrigin: from === "user" ? "100% 100%" : "0% 100%",
...style,
}}
className={cn(
"group/message flex w-full items-start gap-2",
from === "user" ? "flex-row-reverse" : "flex-row",
className,
)}
{...props}
>
{children}
</motion.article>
</MessageContext.Provider>
</MessageSideContext.Provider>
);
}
export function MessageGroup({
spacing = "compact",
className,
...props
}: MessageGroupProps) {
return (
<div
data-slot="message-group"
className={cn(
"flex w-full flex-col",
spacing === "compact" ? "gap-1.5" : "gap-4",
className,
)}
{...props}
/>
);
}
export function MessageAvatar({
placeholder = false,
children,
className,
...props
}: MessageAvatarProps) {
return (
<div
data-slot="message-avatar"
aria-hidden={placeholder || undefined}
className={cn(
"grid size-7 shrink-0 place-items-center overflow-hidden rounded-full bg-muted text-xs font-medium text-muted-foreground [&_img]:size-full [&_img]:object-cover [&_svg]:size-3.5",
placeholder && "invisible",
className,
)}
{...props}
>
{children}
</div>
);
}
export function MessageContent({ className, ...props }: MessageContentProps) {
const { from } = useContext(MessageContext);
return (
<div
data-slot="message-content"
className={cn(
"flex min-w-0 flex-1 flex-col gap-1.5",
from === "user" ? "items-end" : "items-start",
className,
)}
{...props}
/>
);
}
export function MessageHeader({ className, ...props }: MessageHeaderProps) {
const { from } = useContext(MessageContext);
return (
<div
data-slot="message-header"
className={cn(
"flex items-center gap-1.5 px-1 text-[11px] leading-none text-muted-foreground",
from === "user" ? "justify-end" : "justify-start",
className,
)}
{...props}
/>
);
}
export function MessageFooter({ className, ...props }: MessageFooterProps) {
const { from } = useContext(MessageContext);
return (
<div
data-slot="message-footer"
className={cn(
"flex min-h-5 items-center gap-1 px-1 text-[11px] text-muted-foreground",
from === "user" ? "justify-end" : "justify-start",
className,
)}
{...props}
/>
);
}
export function MessageMarker({ className, ...props }: MessageMarkerProps) {
return (
<div
data-slot="message-marker"
className={cn(
"mx-auto flex w-fit max-w-[88%] items-center gap-1.5 rounded-full bg-muted/70 px-2.5 py-1 text-center text-xs text-muted-foreground",
className,
)}
{...props}
/>
);
}
export function MessageTyping({
label = "Responding",
className,
...props
}: MessageTypingProps) {
const reduce = useReducedMotion() ?? false;
return (
<span
data-slot="message-typing"
className={cn("inline-flex h-5 items-center gap-1", className)}
{...props}
>
<span className="sr-only">{label}</span>
{[0, 1, 2].map((index) => (
<motion.span
key={index}
aria-hidden="true"
className="size-1 rounded-full bg-current"
animate={
reduce
? { opacity: 0.45 }
: { opacity: [0.28, 0.85, 0.28], y: [0, -2, 0] }
}
transition={{
duration: 1.05,
ease: EASE_OUT,
repeat: Number.POSITIVE_INFINITY,
delay: index * 0.14,
}}
/>
))}
</span>
);
}
components/agents/message-bubble.tsx
"use client";
// beui.dev/components/agents/chat-app
import { ChevronDown } from "lucide-react";
import {
type HTMLMotionProps,
motion,
useReducedMotion,
} from "motion/react";
import {
cloneElement,
type ComponentPropsWithRef,
createContext,
type ReactElement,
type ReactNode,
type Ref,
useCallback,
useContext,
useId,
useState,
} from "react";
import {
EASE_OUT,
SPRING_LAYOUT,
SPRING_SWAP,
} from "@/lib/ease";
import { cn } from "@/lib/utils";
import { MessageSideContext } from "@/components/agents/message-context";
export type MessageBubbleVariant =
| "solid"
| "soft"
| "tint"
| "outline"
| "ghost"
| "danger";
export type MessageBubbleAlign = "start" | "end";
interface MessageBubbleContextValue {
align?: MessageBubbleAlign;
animateIn: boolean;
variant: MessageBubbleVariant;
}
const MessageBubbleContext = createContext<MessageBubbleContextValue>({
animateIn: true,
variant: "soft",
});
const MessageBubbleLayoutContext = createContext<() => void>(() => {});
export interface MessageBubbleProps
extends Omit<HTMLMotionProps<"div">, "children"> {
variant?: MessageBubbleVariant;
/** Defaults to the surrounding Message alignment when omitted. */
align?: MessageBubbleAlign;
/** Plays the bubble entrance once when this component mounts. */
animateIn?: boolean;
children?: ReactNode;
}
export interface MessageBubbleContentProps
extends ComponentPropsWithRef<"div"> {
/** Replaces the content element while preserving bubble styling. */
render?: ReactElement;
}
export interface MessageBubbleGroupProps extends ComponentPropsWithRef<"div"> {
spacing?: "compact" | "default";
}
export interface MessageBubbleCollapsibleProps
extends ComponentPropsWithRef<"div"> {
open?: boolean;
defaultOpen?: boolean;
onOpenChange?: (open: boolean) => void;
collapsedLines?: 2 | 3 | 4 | 5 | 6;
moreLabel?: ReactNode;
lessLabel?: ReactNode;
contentClassName?: string;
triggerClassName?: string;
children?: ReactNode;
}
function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {
return (node: T | null) => {
for (const ref of refs) {
if (typeof ref === "function") ref(node);
else if (ref) ref.current = node;
}
};
}
const BUBBLE_CONTENT_REVEAL = {
duration: 0.12,
ease: EASE_OUT,
delay: 0.04,
} as const;
// Sent bubbles should pop into place quickly with one restrained overshoot.
const BUBBLE_POP = {
type: "spring",
stiffness: 520,
damping: 27,
mass: 0.52,
} as const;
export function MessageBubble({
variant = "soft",
align,
animateIn = false,
className,
children,
initial,
animate,
exit,
transition,
layout,
...props
}: MessageBubbleProps) {
const reduce = useReducedMotion() ?? false;
const messageSide = useContext(MessageSideContext);
const resolvedAlign = align ?? messageSide ?? "start";
return (
<MessageBubbleContext.Provider
value={{ align: resolvedAlign, animateIn, variant }}
>
<motion.div
data-slot="message-bubble"
data-align={resolvedAlign}
data-variant={variant}
layout={layout}
initial={initial ?? false}
animate={animate}
exit={
exit ??
(reduce ? { opacity: 0 } : { opacity: 0, y: -3, scale: 0.99 })
}
transition={transition ?? (reduce ? { duration: 0.12 } : SPRING_LAYOUT)}
className={cn(
"group/bubble flex w-full flex-col",
resolvedAlign === "end" ? "items-end" : "items-start",
className,
)}
{...props}
>
{children}
</motion.div>
</MessageBubbleContext.Provider>
);
}
function bubbleContentClass(
variant: MessageBubbleVariant,
interactive: boolean,
) {
return cn(
"relative z-0 min-w-9 max-w-[82%] rounded-2xl px-3.5 py-2.5 text-sm leading-6 text-foreground",
"[&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4 [&_code]:rounded [&_code]:bg-background/60 [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_p+p]:mt-2 [&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:bg-background/60 [&_pre]:p-3 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5",
variant === "solid" && "text-background",
variant === "ghost" && "w-full max-w-none rounded-none px-0 py-0",
variant === "danger" && "text-destructive",
interactive &&
"cursor-pointer text-left outline-none transition-[background-color,color,transform] duration-150 hover:brightness-[0.98] focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.99]",
);
}
function bubbleSurfaceClass(
variant: MessageBubbleVariant,
align: MessageBubbleAlign,
) {
return cn(
"pointer-events-none absolute inset-0 -z-10 rounded-[inherit]",
align === "end" ? "origin-bottom-right" : "origin-bottom-left",
variant === "solid" && "bg-foreground",
variant === "soft" && "bg-muted",
variant === "tint" && "bg-muted",
variant === "outline" && "border border-border/70 bg-background",
variant === "danger" && "bg-destructive/10",
);
}
export function MessageBubbleContent({
render,
className,
children,
ref,
...props
}: MessageBubbleContentProps) {
const reduce = useReducedMotion() ?? false;
const { align = "start", animateIn, variant } =
useContext(MessageBubbleContext);
const [layoutVersion, setLayoutVersion] = useState(0);
const notifyLayout = useCallback(
() => setLayoutVersion((version) => version + 1),
[],
);
const interactive =
render?.type === "button" || render?.type === "a";
const classes = cn(bubbleContentClass(variant, interactive), className);
const composedChildren = (
<>
{variant !== "ghost" ? (
<motion.span
aria-hidden="true"
layout={reduce ? false : "size"}
layoutDependency={layoutVersion}
initial={
animateIn && !reduce
? {
opacity: 0,
scale: 0.92,
}
: false
}
animate={{ opacity: 1, scale: 1 }}
transition={
reduce
? { duration: 0 }
: {
opacity: { duration: 0.12, ease: EASE_OUT },
scale: BUBBLE_POP,
layout: SPRING_LAYOUT,
}
}
className={bubbleSurfaceClass(variant, align)}
/>
) : null}
<MessageBubbleLayoutContext.Provider value={notifyLayout}>
<motion.div
initial={
animateIn
? reduce
? { opacity: 0 }
: { opacity: 0 }
: false
}
animate={{ opacity: 1 }}
transition={
reduce ? { duration: 0.12, ease: EASE_OUT } : BUBBLE_CONTENT_REVEAL
}
className="relative"
>
{children}
</motion.div>
</MessageBubbleLayoutContext.Provider>
</>
);
if (render) {
const child = render as ReactElement<
Record<string, unknown> & { className?: string; ref?: Ref<HTMLElement> }
>;
return cloneElement(child, {
...props,
ref: mergeRefs(child.props.ref, ref as Ref<HTMLElement> | undefined),
className: cn(classes, child.props.className),
children: composedChildren,
"data-slot": "message-bubble-content",
});
}
return (
<div
ref={ref}
data-slot="message-bubble-content"
className={classes}
{...props}
>
{composedChildren}
</div>
);
}
export function MessageBubbleGroup({
spacing = "compact",
className,
...props
}: MessageBubbleGroupProps) {
return (
<div
data-slot="message-bubble-group"
className={cn(
"flex w-full flex-col",
spacing === "compact" ? "gap-1.5" : "gap-3",
className,
)}
{...props}
/>
);
}
const LINE_CLAMP_CLASS = {
2: "line-clamp-2",
3: "line-clamp-3",
4: "line-clamp-4",
5: "line-clamp-5",
6: "line-clamp-6",
} as const;
export function MessageBubbleCollapsible({
open,
defaultOpen = false,
onOpenChange,
collapsedLines = 4,
moreLabel = "Show more",
lessLabel = "Show less",
contentClassName,
triggerClassName,
className,
children,
...props
}: MessageBubbleCollapsibleProps) {
const reduce = useReducedMotion() ?? false;
const contentId = useId();
const notifyLayout = useContext(MessageBubbleLayoutContext);
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const currentOpen = open ?? internalOpen;
const setOpen = useCallback(
(next: boolean) => {
notifyLayout();
if (open === undefined) setInternalOpen(next);
onOpenChange?.(next);
},
[notifyLayout, onOpenChange, open],
);
return (
<div
data-slot="message-bubble-collapsible"
data-state={currentOpen ? "open" : "closed"}
className={cn("w-full", className)}
{...props}
>
<div
id={contentId}
className={cn(
"transition-[mask-image] duration-200",
!currentOpen && LINE_CLAMP_CLASS[collapsedLines],
!currentOpen &&
"[mask-image:linear-gradient(to_bottom,#000_68%,transparent_100%)]",
contentClassName,
)}
>
{children}
</div>
<button
type="button"
aria-expanded={currentOpen}
aria-controls={contentId}
onClick={() => setOpen(!currentOpen)}
className={cn(
"mt-2 inline-flex h-7 items-center gap-1 rounded-full px-2 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
triggerClassName,
)}
>
<span>{currentOpen ? lessLabel : moreLabel}</span>
<motion.span
aria-hidden="true"
animate={{ rotate: currentOpen ? 180 : 0 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
>
<ChevronDown className="size-3.5" />
</motion.span>
</button>
</div>
);
}
components/agents/message-scroller.tsx
"use client";
// beui.dev/components/agents/chat-app
import { useReducedMotion } from "motion/react";
import {
type ComponentPropsWithRef,
type Ref,
useCallback,
useEffect,
useLayoutEffect,
useRef,
useState,
} from "react";
import {
PreviewRail,
type PreviewRailItem,
} from "@/components/motion/preview-rail";
import { cn } from "@/lib/utils";
const PREVIEW_TITLE_LENGTH = 56;
const PREVIEW_DESCRIPTION_LENGTH = 88;
function truncateMessageText(text: string, limit: number) {
if (text.length <= limit) return text;
const excerpt = text.slice(0, limit);
const boundary = excerpt.lastIndexOf(" ");
return `${excerpt.slice(0, boundary > limit * 0.65 ? boundary : limit).trim()}…`;
}
function getMessageText(message: HTMLElement) {
const surface =
message.querySelector<HTMLElement>('[data-slot="message-bubble-content"]') ??
message.querySelector<HTMLElement>('[data-slot="message-content"]') ??
message;
return (surface.textContent ?? "").replace(/\s+/g, " ").trim();
}
function getMessagePreview(
message: HTMLElement,
assistantResponse?: HTMLElement,
) {
const text = getMessageText(message);
if (!text) {
return { label: "Message", description: undefined };
}
if (text.length <= PREVIEW_TITLE_LENGTH) {
const responseText = assistantResponse
? getMessageText(assistantResponse)
: "";
return {
label: text,
description: responseText
? truncateMessageText(responseText, PREVIEW_DESCRIPTION_LENGTH)
: undefined,
};
}
const titleExcerpt = text.slice(0, PREVIEW_TITLE_LENGTH);
const titleBoundary = titleExcerpt.lastIndexOf(" ");
const titleEnd =
titleBoundary > PREVIEW_TITLE_LENGTH * 0.65
? titleBoundary
: PREVIEW_TITLE_LENGTH;
const label = `${text.slice(0, titleEnd).trim()}…`;
const responseText = assistantResponse
? getMessageText(assistantResponse)
: text.slice(titleEnd).trim();
return {
label,
description: responseText
? truncateMessageText(responseText, PREVIEW_DESCRIPTION_LENGTH)
: undefined,
};
}
export interface MessageScrollerProps extends ComponentPropsWithRef<"div"> {
/** Keep streamed output pinned while the reader remains near the end. */
followOutput?: boolean;
/** Distance from the end that still counts as following the output. */
followThreshold?: number;
/** Smoothly follow growing content. */
smooth?: boolean;
/** Reports when the reader leaves or returns to the live edge. */
onFollowChange?: (following: boolean) => void;
/** Accessible label for the scrollable transcript. */
label?: string;
/** Marks the transcript as waiting for more streamed content. */
busy?: boolean;
/** Adds a compact rail for navigating between rendered Message rows. */
navigation?: "rail";
/** Accessible label for the optional message navigation rail. */
navigationLabel?: string;
viewportClassName?: string;
contentClassName?: string;
railClassName?: string;
viewportRef?: Ref<HTMLElement>;
viewportProps?: Omit<
ComponentPropsWithRef<"section">,
"children" | "className" | "ref"
>;
contentProps?: Omit<
ComponentPropsWithRef<"div">,
"children" | "className" | "ref"
>;
}
export function MessageScroller({
followOutput = true,
followThreshold = 56,
smooth = true,
onFollowChange,
label = "Conversation",
busy,
navigation,
navigationLabel = "Message navigation",
viewportClassName,
contentClassName,
railClassName,
viewportRef: externalViewportRef,
viewportProps,
contentProps,
className,
children,
...props
}: MessageScrollerProps) {
const reduce = useReducedMotion() ?? false;
const viewportRef = useRef<HTMLElement>(null);
const contentRef = useRef<HTMLDivElement>(null);
const followingRef = useRef(followOutput);
const programmaticScrollRef = useRef(false);
const scrollTimerRef = useRef<number | undefined>(undefined);
const frameRef = useRef<number | undefined>(undefined);
const railFrameRef = useRef<number | undefined>(undefined);
const railIdRef = useRef(new WeakMap<HTMLElement, string>());
const railIdCounterRef = useRef(0);
const railTargetsRef = useRef(new Map<string, HTMLElement>());
const [railItems, setRailItems] = useState<PreviewRailItem[]>([]);
const [activeRailId, setActiveRailId] = useState("");
const [railOverflowing, setRailOverflowing] = useState(false);
const {
onScroll: onViewportScroll,
onWheel: onViewportWheel,
onTouchStart: onViewportTouchStart,
onKeyDown: onViewportKeyDown,
...restViewportProps
} = viewportProps ?? {};
const setViewportRef = useCallback(
(node: HTMLElement | null) => {
viewportRef.current = node;
if (typeof externalViewportRef === "function") {
externalViewportRef(node);
} else if (externalViewportRef) {
externalViewportRef.current = node;
}
},
[externalViewportRef],
);
const setFollowing = useCallback(
(next: boolean) => {
if (followingRef.current === next) return;
followingRef.current = next;
onFollowChange?.(next);
},
[onFollowChange],
);
const updateActiveRailItem = useCallback(() => {
if (navigation !== "rail") return;
const viewport = viewportRef.current;
const targets = [...railTargetsRef.current.entries()];
if (!viewport || targets.length === 0) return;
const viewportRect = viewport.getBoundingClientRect();
if (viewport.scrollTop <= followThreshold) {
const firstId = targets[0]?.[0] ?? "";
setActiveRailId((current) => (current === firstId ? current : firstId));
return;
}
const distanceFromEnd =
viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
if (distanceFromEnd <= followThreshold) {
const lastId = targets.at(-1)?.[0] ?? "";
setActiveRailId((current) => (current === lastId ? current : lastId));
return;
}
const viewportCenter = viewportRect.top + viewportRect.height / 2;
let nearestId = targets[0]?.[0] ?? "";
let nearestDistance = Number.POSITIVE_INFINITY;
for (const [id, element] of targets) {
const rect = element.getBoundingClientRect();
const messageCenter = rect.top + rect.height / 2;
const distance = Math.abs(messageCenter - viewportCenter);
if (distance < nearestDistance) {
nearestDistance = distance;
nearestId = id;
}
}
setActiveRailId((current) =>
current === nearestId ? current : nearestId,
);
}, [followThreshold, navigation]);
const syncRailItems = useCallback(() => {
if (navigation !== "rail") return;
const content = contentRef.current;
const viewport = viewportRef.current;
if (!content || !viewport) return;
const messages = Array.from(
content.querySelectorAll<HTMLElement>('[data-slot="message"]'),
);
const targets = new Map<string, HTMLElement>();
const nextItems = messages.map((message, index) => {
let id = railIdRef.current.get(message);
if (!id) {
railIdCounterRef.current += 1;
id = `message-rail-${railIdCounterRef.current}`;
railIdRef.current.set(message, id);
}
targets.set(id, message);
const sender = message.dataset.from ?? "conversation";
const assistantResponse =
sender === "user"
? messages
.slice(index + 1)
.find((candidate) => candidate.dataset.from === "assistant")
: undefined;
const preview = getMessagePreview(message, assistantResponse);
return {
id,
label: preview.label,
description: preview.description,
ariaLabel: `Go to ${sender} message ${index + 1} of ${messages.length}`,
};
});
railTargetsRef.current = targets;
setRailItems((current) => {
const unchanged =
current.length === nextItems.length &&
current.every(
(item, index) =>
item.id === nextItems[index]?.id &&
item.label === nextItems[index]?.label &&
item.description === nextItems[index]?.description &&
item.ariaLabel === nextItems[index]?.ariaLabel,
);
return unchanged ? current : nextItems;
});
setRailOverflowing(
viewport.scrollHeight > viewport.clientHeight + 1 && messages.length > 1,
);
}, [navigation]);
const scheduleRailSync = useCallback(() => {
if (navigation !== "rail") return;
if (railFrameRef.current) cancelAnimationFrame(railFrameRef.current);
railFrameRef.current = requestAnimationFrame(() => {
syncRailItems();
updateActiveRailItem();
});
}, [navigation, syncRailItems, updateActiveRailItem]);
const scrollToEnd = useCallback((behavior: ScrollBehavior) => {
const viewport = viewportRef.current;
if (!viewport) return;
programmaticScrollRef.current = true;
if (typeof viewport.scrollTo === "function") {
viewport.scrollTo({ top: viewport.scrollHeight, behavior });
} else {
viewport.scrollTop = viewport.scrollHeight;
}
if (scrollTimerRef.current) window.clearTimeout(scrollTimerRef.current);
scrollTimerRef.current = window.setTimeout(() => {
programmaticScrollRef.current = false;
}, behavior === "smooth" ? 320 : 0);
}, []);
const handleScroll = useCallback(() => {
const viewport = viewportRef.current;
if (!viewport || programmaticScrollRef.current) return;
const distance =
viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
setFollowing(distance <= followThreshold);
updateActiveRailItem();
}, [followThreshold, setFollowing, updateActiveRailItem]);
const leaveLiveEdge = useCallback(() => {
programmaticScrollRef.current = false;
}, []);
useLayoutEffect(() => {
followingRef.current = followOutput;
if (!followOutput) return;
frameRef.current = requestAnimationFrame(() => scrollToEnd("auto"));
return () => {
if (frameRef.current) cancelAnimationFrame(frameRef.current);
};
}, [followOutput, scrollToEnd]);
useEffect(() => {
const content = contentRef.current;
if (!content || typeof ResizeObserver === "undefined") return;
const observer = new ResizeObserver(() => {
scheduleRailSync();
if (!followOutput || !followingRef.current) return;
scrollToEnd(reduce || !smooth ? "auto" : "smooth");
});
observer.observe(content);
return () => observer.disconnect();
}, [followOutput, reduce, scheduleRailSync, scrollToEnd, smooth]);
useEffect(() => {
if (navigation !== "rail") {
railTargetsRef.current.clear();
setRailItems([]);
setRailOverflowing(false);
return;
}
const content = contentRef.current;
const viewport = viewportRef.current;
if (!content || !viewport) return;
scheduleRailSync();
const mutationObserver =
typeof MutationObserver === "undefined"
? null
: new MutationObserver(scheduleRailSync);
mutationObserver?.observe(content, {
childList: true,
characterData: true,
subtree: true,
});
const resizeObserver =
typeof ResizeObserver === "undefined"
? null
: new ResizeObserver(scheduleRailSync);
resizeObserver?.observe(content);
resizeObserver?.observe(viewport);
return () => {
mutationObserver?.disconnect();
resizeObserver?.disconnect();
};
}, [navigation, scheduleRailSync]);
useEffect(
() => () => {
if (scrollTimerRef.current) window.clearTimeout(scrollTimerRef.current);
if (frameRef.current) cancelAnimationFrame(frameRef.current);
if (railFrameRef.current) cancelAnimationFrame(railFrameRef.current);
},
[],
);
const scrollToRailItem = useCallback(
(item: PreviewRailItem) => {
const viewport = viewportRef.current;
const target = railTargetsRef.current.get(item.id);
if (!viewport || !target) return;
const lastItem = railItems.at(-1)?.id === item.id;
setActiveRailId(item.id);
if (lastItem) {
setFollowing(true);
scrollToEnd(reduce || !smooth ? "auto" : "smooth");
return;
}
setFollowing(false);
programmaticScrollRef.current = true;
const viewportRect = viewport.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
const top =
viewport.scrollTop +
targetRect.top -
viewportRect.top -
(viewport.clientHeight - targetRect.height) / 2;
const behavior = reduce || !smooth ? "auto" : "smooth";
if (typeof viewport.scrollTo === "function") {
viewport.scrollTo({ top, behavior });
} else {
viewport.scrollTop = top;
}
if (scrollTimerRef.current) window.clearTimeout(scrollTimerRef.current);
scrollTimerRef.current = window.setTimeout(() => {
programmaticScrollRef.current = false;
}, behavior === "smooth" ? 320 : 0);
},
[railItems, reduce, scrollToEnd, setFollowing, smooth],
);
const viewport = (
<section
ref={setViewportRef}
aria-label={label}
{...restViewportProps}
onScroll={(event) => {
handleScroll();
onViewportScroll?.(event);
}}
onWheel={(event) => {
leaveLiveEdge();
onViewportWheel?.(event);
}}
onTouchStart={(event) => {
leaveLiveEdge();
onViewportTouchStart?.(event);
}}
onKeyDown={(event) => {
if (["ArrowUp", "PageUp", "Home"].includes(event.key)) {
leaveLiveEdge();
}
onViewportKeyDown?.(event);
}}
className={cn(
"h-full overflow-y-auto overscroll-contain outline-none [overflow-anchor:none] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
navigation === "rail"
? "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
: "[scrollbar-gutter:stable]",
viewportClassName,
navigation === "rail" && railOverflowing && "pr-10",
)}
>
<div
ref={contentRef}
role="log"
aria-live="polite"
aria-relevant="additions text"
aria-busy={busy}
className={contentClassName}
{...contentProps}
>
{children}
</div>
</section>
);
return (
<div
data-slot="message-scroller"
className={cn("min-h-0", className)}
{...props}
>
{navigation === "rail" ? (
<PreviewRail
items={railOverflowing ? railItems : []}
label={navigationLabel}
activeId={activeRailId}
onItemSelect={scrollToRailItem}
previewSide="before"
highlightActive
itemSize={14}
className="h-full min-h-0 overflow-hidden"
previewContainerClassName="right-8 left-3"
previewClassName="mr-1 w-64 max-w-full [&_[data-slot=preview-rail-card]]:h-20 [&_[data-slot=preview-rail-card]]:overflow-hidden [&_[data-slot=preview-rail-card]]:p-3 [&_[data-slot=preview-rail-title]]:line-clamp-1 [&_[data-slot=preview-rail-title]]:text-xs [&_[data-slot=preview-rail-title]]:leading-4 [&_[data-slot=preview-rail-description]]:line-clamp-2 [&_[data-slot=preview-rail-description]]:text-xs [&_[data-slot=preview-rail-description]]:leading-4"
railClassName={cn(
"absolute inset-y-3 right-1 w-7 content-center py-1 [&_[data-slot=preview-rail-item]]:w-7 [&_[data-slot=preview-rail-item]]:justify-end [&_[data-slot=preview-rail-tick]]:h-px [&_[data-slot=preview-rail-tick]]:w-4 [&_[data-slot=preview-rail-tick]]:origin-right",
railOverflowing
? "pointer-events-auto opacity-100"
: "pointer-events-none opacity-0",
railClassName,
)}
>
{viewport}
</PreviewRail>
) : (
viewport
)}
</div>
);
}
components/agents/prompt-input.tsx
"use client";
// beui.dev/components/agents/chat-app
import { ArrowUp, Plus, Square } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
type FormEvent,
type KeyboardEvent,
type ReactNode,
type TextareaHTMLAttributes,
useCallback,
useEffect,
useLayoutEffect,
useRef,
useState,
} from "react";
import { Button } from "@/components/motion/button";
import {
MorphPopover,
MorphPopoverContent,
MorphPopoverTrigger,
} from "@/components/motion/popover-morph";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
} from "@/components/motion/select";
import { SPRING_SWAP } from "@/lib/ease";
import { cn } from "@/lib/utils";
export interface PromptModel {
value: string;
label: ReactNode;
icon?: ReactNode;
disabled?: boolean;
}
export interface PromptAction {
value: string;
label: ReactNode;
description?: ReactNode;
icon?: ReactNode;
disabled?: boolean;
}
export interface PromptInputProps extends Omit<
TextareaHTMLAttributes<HTMLTextAreaElement>,
"value" | "defaultValue" | "onChange" | "onSubmit" | "children"
> {
value?: string;
defaultValue?: string;
onValueChange?: (value: string) => void;
models?: PromptModel[];
model?: string;
defaultModel?: string;
onModelChange?: (model: string) => void;
actions?: PromptAction[];
onAction?: (action: string) => void;
onSubmit?: (value: string, model?: string) => void | Promise<void>;
loading?: boolean;
onStop?: () => void;
minRows?: number;
maxRows?: number;
leadingAction?: ReactNode;
className?: string;
}
export function PromptInput({
value,
defaultValue = "",
onValueChange,
models = [],
model,
defaultModel,
onModelChange,
actions = [],
onAction,
onSubmit,
loading = false,
onStop,
minRows = 2,
maxRows = 8,
leadingAction,
className,
disabled,
placeholder = "Ask the agent to do something…",
"aria-label": ariaLabel = "Prompt",
onKeyDown,
...textareaProps
}: PromptInputProps) {
const reduce = useReducedMotion() ?? false;
const textareaRef = useRef<HTMLTextAreaElement>(null);
const measurementRef = useRef<HTMLDivElement>(null);
const [internalValue, setInternalValue] = useState(defaultValue);
const [internalModel, setInternalModel] = useState(
defaultModel ?? models[0]?.value,
);
const [actionsOpen, setActionsOpen] = useState(false);
const currentValue = value ?? internalValue;
const currentModelValue = model ?? internalModel;
const currentModel = models.find(
(option) => option.value === currentModelValue,
);
const canSubmit = Boolean(currentValue.trim()) && !disabled && !loading;
const resizeTextarea = useCallback(() => {
const textarea = textareaRef.current;
const measurement = measurementRef.current;
if (!textarea || !measurement || textarea.value !== currentValue) return;
const lineHeight = 24;
const nextHeight = Math.min(
Math.max(measurement.scrollHeight, minRows * lineHeight),
maxRows * lineHeight,
);
const height = `${nextHeight}px`;
if (textarea.style.height !== height) textarea.style.height = height;
}, [currentValue, maxRows, minRows]);
useLayoutEffect(() => {
resizeTextarea();
}, [resizeTextarea]);
useEffect(() => {
const textarea = textareaRef.current;
if (!textarea || typeof ResizeObserver === "undefined") return;
const observer = new ResizeObserver(resizeTextarea);
observer.observe(textarea);
return () => observer.disconnect();
}, [resizeTextarea]);
const setValue = (next: string) => {
if (value === undefined) setInternalValue(next);
onValueChange?.(next);
};
const setModel = (next: string) => {
if (model === undefined) setInternalModel(next);
onModelChange?.(next);
};
const submit = (event?: FormEvent) => {
event?.preventDefault();
const prompt = currentValue.trim();
if (!prompt || disabled || loading) return;
onSubmit?.(prompt, currentModelValue);
if (value === undefined) setInternalValue("");
textareaRef.current?.focus({ preventScroll: true });
};
const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
onKeyDown?.(event);
if (
event.defaultPrevented ||
event.key !== "Enter" ||
event.shiftKey ||
event.nativeEvent.isComposing
) {
return;
}
event.preventDefault();
submit();
};
return (
<form
onSubmit={submit}
className={cn(
"relative w-full rounded-2xl border border-border/80 bg-background p-2 transition-colors focus-within:border-foreground/25",
disabled && "opacity-60",
className,
)}
>
<div
ref={measurementRef}
aria-hidden="true"
className="pointer-events-none invisible absolute inset-x-2 top-0 whitespace-pre-wrap px-2 text-sm leading-6 [overflow-wrap:break-word]"
>
{`${currentValue}\u200b`}
</div>
<textarea
ref={textareaRef}
value={currentValue}
disabled={disabled}
placeholder={placeholder}
aria-label={ariaLabel}
rows={minRows}
{...textareaProps}
onChange={(event) => setValue(event.target.value)}
onKeyDown={handleKeyDown}
className="scrollbar-hide block w-full resize-none overflow-y-auto bg-transparent px-2 pt-1.5 text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground/55"
/>
<div className="mt-1 flex min-h-8 items-center gap-1">
{actions.length ? (
<MorphPopover open={actionsOpen} onOpenChange={setActionsOpen}>
<MorphPopoverTrigger>
<Button
type="button"
variant="ghost"
size="icon"
disabled={disabled || loading}
aria-label="Add to prompt"
className="size-8 rounded-full"
>
<motion.span
aria-hidden="true"
animate={{ rotate: actionsOpen ? 45 : 0 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
>
<Plus className="size-4" />
</motion.span>
</Button>
</MorphPopoverTrigger>
<MorphPopoverContent
side="top"
align="start"
sideOffset={8}
radius={12}
className="w-56 p-1.5"
>
{actions.map((action) => (
<button
key={action.value}
type="button"
disabled={action.disabled}
onClick={() => {
onAction?.(action.value);
setActionsOpen(false);
}}
className="flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left outline-none transition-colors hover:bg-muted focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-50"
>
{action.icon ? (
<span className="mt-0.5 grid size-5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4">
{action.icon}
</span>
) : null}
<span className="min-w-0">
<span className="block text-sm text-foreground">
{action.label}
</span>
{action.description ? (
<span className="mt-0.5 block text-xs leading-4 text-muted-foreground">
{action.description}
</span>
) : null}
</span>
</button>
))}
</MorphPopoverContent>
</MorphPopover>
) : null}
{leadingAction}
{models.length ? (
<Select
value={currentModelValue}
onValueChange={setModel}
disabled={disabled || loading}
className="min-w-0"
>
<SelectTrigger className="h-8 w-auto max-w-52 rounded-xl border-0 bg-transparent px-2 py-0 text-xs hover:bg-muted focus-visible:ring-2">
<span className="flex min-w-0 items-center gap-1.5">
{currentModel?.icon ? (
<span className="grid size-4 shrink-0 place-items-center text-muted-foreground [&_svg]:size-3.5">
{currentModel.icon}
</span>
) : null}
<span className="truncate text-muted-foreground">
{currentModel?.label ?? "Choose model"}
</span>
</span>
</SelectTrigger>
<SelectContent className="right-auto w-52 shadow-none">
{models.map((option) => (
<SelectItem
key={option.value}
value={option.value}
disabled={option.disabled}
className="py-2"
>
<span className="flex min-w-0 items-center gap-2">
{option.icon ? (
<span className="grid size-5 shrink-0 place-items-center text-muted-foreground [&_svg]:size-4">
{option.icon}
</span>
) : null}
<span className="min-w-0 truncate text-sm text-foreground">
{option.label}
</span>
</span>
</SelectItem>
))}
</SelectContent>
</Select>
) : null}
<Button
type={loading ? "button" : "submit"}
size="icon"
disabled={loading ? !onStop : !canSubmit}
aria-label={loading ? "Stop generating" : "Send prompt"}
onClick={loading ? onStop : undefined}
className="ml-auto size-8 rounded-full"
>
<AnimatePresence initial={false} mode="popLayout">
<motion.span
key={loading ? "stop" : "send"}
initial={reduce ? { opacity: 1 } : { opacity: 0, y: 3, scale: 0.8 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={reduce ? { opacity: 0 } : { opacity: 0, y: -3, scale: 0.8 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
className="grid place-items-center"
>
{loading ? (
<Square className="size-3 fill-current" />
) : (
<ArrowUp className="size-4" />
)}
</motion.span>
</AnimatePresence>
</Button>
</div>
</form>
);
}
components/agents/streaming-response.tsx
"use client";
// beui.dev/components/agents/chat-app
import {
Check,
ChevronDown,
Copy,
RotateCcw,
ThumbsDown,
ThumbsUp,
} from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
type ReactNode,
useCallback,
useEffect,
useId,
useRef,
useState,
} from "react";
import {
type CitationItem,
CitationList,
CitationStack,
} from "@/components/agents/citations";
import { AgentDisclosure } from "@/components/agents/agent-disclosure";
import { EASE_OUT, SPRING_PRESS, SPRING_SWAP } from "@/lib/ease";
import { cn } from "@/lib/utils";
export type StreamingResponseStatus = "streaming" | "complete" | "error";
export type StreamingResponseFeedback = "up" | "down" | null;
export interface StreamingResponseProps {
/** Rendered response content. Pass plain text or the output of a Markdown renderer. */
children: ReactNode;
status?: StreamingResponseStatus;
/** Plain-text value copied by the built-in copy action. */
copyText?: string;
/** Overrides the built-in clipboard action. */
onCopy?: () => void | Promise<void>;
onRetry?: () => void;
/** Optional sources shown as a compact footer disclosure after streaming. */
sources?: CitationItem[];
sourcesOpen?: boolean;
defaultSourcesOpen?: boolean;
onSourcesOpenChange?: (open: boolean) => void;
sourceIdPrefix?: string;
feedback?: StreamingResponseFeedback;
defaultFeedback?: StreamingResponseFeedback;
onFeedbackChange?: (feedback: StreamingResponseFeedback) => void;
/** Set false when a surrounding conversation log announces streamed text. */
announce?: boolean;
/** Hides the built-in completion actions without changing response status. */
showActions?: boolean;
className?: string;
contentClassName?: string;
actionsClassName?: string;
}
function ResponseAction({
label,
active = false,
onClick,
children,
}: {
label: string;
active?: boolean;
onClick: () => void;
children: ReactNode;
}) {
const reduce = useReducedMotion() ?? false;
return (
<motion.button
type="button"
aria-label={label}
title={label}
aria-pressed={label === "Helpful" || label === "Not helpful" ? active : undefined}
onClick={onClick}
whileTap={reduce ? undefined : { scale: 0.9 }}
transition={SPRING_PRESS}
className={cn(
"grid size-7 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
active && "bg-muted text-foreground",
)}
>
{children}
</motion.button>
);
}
export function StreamingResponse({
children,
status = "streaming",
copyText,
onCopy,
onRetry,
sources = [],
sourcesOpen,
defaultSourcesOpen = false,
onSourcesOpenChange,
sourceIdPrefix,
feedback,
defaultFeedback = null,
onFeedbackChange,
announce = true,
showActions = true,
className,
contentClassName,
actionsClassName,
}: StreamingResponseProps) {
const reduce = useReducedMotion() ?? false;
const baseId = useId();
const [copied, setCopied] = useState(false);
const [internalFeedback, setInternalFeedback] =
useState<StreamingResponseFeedback>(defaultFeedback);
const [internalSourcesOpen, setInternalSourcesOpen] =
useState(defaultSourcesOpen);
const copyTimer = useRef<number | undefined>(undefined);
const currentFeedback = feedback ?? internalFeedback;
const currentSourcesOpen = sourcesOpen ?? internalSourcesOpen;
const streaming = status === "streaming";
const complete = status === "complete";
const canCopy = Boolean(copyText || onCopy);
const hasSources = sources.length > 0;
const shouldShowActions =
showActions && !streaming && (canCopy || onRetry || complete || hasSources);
const sourcesContentId = `${baseId}-sources`;
const resolvedSourcePrefix =
sourceIdPrefix ?? `response-source-${baseId.replace(/:/g, "")}`;
useEffect(
() => () => {
if (copyTimer.current) window.clearTimeout(copyTimer.current);
},
[],
);
const handleCopy = useCallback(async () => {
if (onCopy) await onCopy();
else if (copyText) await navigator.clipboard?.writeText(copyText);
setCopied(true);
if (copyTimer.current) window.clearTimeout(copyTimer.current);
copyTimer.current = window.setTimeout(() => setCopied(false), 1600);
}, [copyText, onCopy]);
const setFeedback = (next: Exclude<StreamingResponseFeedback, null>) => {
const value = currentFeedback === next ? null : next;
if (feedback === undefined) setInternalFeedback(value);
onFeedbackChange?.(value);
};
const setSourcesOpen = useCallback(
(next: boolean) => {
if (sourcesOpen === undefined) setInternalSourcesOpen(next);
onSourcesOpenChange?.(next);
},
[onSourcesOpenChange, sourcesOpen],
);
return (
<div
data-state={status}
aria-busy={streaming}
className={cn("w-full", className)}
>
<div
aria-live={announce ? "polite" : "off"}
className={cn(
"text-sm leading-6 text-foreground/90 [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-4 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_ol]:my-3 [&_ol]:list-decimal [&_ol]:space-y-1 [&_ol]:pl-5 [&_p+p]:mt-3 [&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted/45 [&_pre]:p-3 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_ul]:my-3 [&_ul]:list-disc [&_ul]:space-y-1 [&_ul]:pl-5",
contentClassName,
)}
>
{children}
</div>
<AnimatePresence initial={false}>
{shouldShowActions ? (
<motion.div
initial={reduce ? { opacity: 0 } : { opacity: 0, y: 4 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
transition={{ duration: reduce ? 0.12 : 0.22, ease: EASE_OUT }}
className="mt-3"
>
<div className={cn("flex items-center gap-0.5", actionsClassName)}>
{canCopy ? (
<ResponseAction
label={copied ? "Copied" : "Copy response"}
onClick={handleCopy}
>
{copied ? (
<Check className="size-3.5" />
) : (
<Copy className="size-3.5" />
)}
</ResponseAction>
) : null}
{onRetry ? (
<ResponseAction label="Retry response" onClick={onRetry}>
<RotateCcw className="size-3.5" />
</ResponseAction>
) : null}
{complete ? (
<>
<ResponseAction
label="Helpful"
active={currentFeedback === "up"}
onClick={() => setFeedback("up")}
>
<ThumbsUp className="size-3.5" />
</ResponseAction>
<ResponseAction
label="Not helpful"
active={currentFeedback === "down"}
onClick={() => setFeedback("down")}
>
<ThumbsDown className="size-3.5" />
</ResponseAction>
</>
) : null}
{hasSources ? (
<button
type="button"
aria-expanded={currentSourcesOpen}
aria-controls={sourcesContentId}
onClick={() => setSourcesOpen(!currentSourcesOpen)}
className="group ml-1 inline-flex min-h-7 items-center gap-2 rounded-md px-1.5 text-xs text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
>
<CitationStack citations={sources} />
<span className="tabular-nums">
{sources.length} {sources.length === 1 ? "source" : "sources"}
</span>
<motion.span
aria-hidden="true"
animate={{ rotate: currentSourcesOpen ? 180 : 0 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
className="text-muted-foreground/50 group-hover:text-muted-foreground"
>
<ChevronDown className="size-3" />
</motion.span>
</button>
) : null}
</div>
{hasSources ? (
<AgentDisclosure
id={sourcesContentId}
open={currentSourcesOpen}
>
<CitationList
citations={sources}
idPrefix={resolvedSourcePrefix}
className="mt-2 rounded-xl bg-muted p-2"
/>
</AgentDisclosure>
) : null}
</motion.div>
) : null}
</AnimatePresence>
</div>
);
}
components/agents/todo-list.tsx
"use client";
// beui.dev/components/agents/chat-app
import { ChevronDown, ListTodo } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
type ReactNode,
useCallback,
useEffect,
useId,
useLayoutEffect,
useRef,
useState,
} from "react";
import { ActionSwapRollText } from "@/components/motion/action-swap-roll";
import { AgentDisclosure } from "@/components/agents/agent-disclosure";
import {
EASE_OUT,
SPRING_LAYOUT,
SPRING_SWAP,
} from "@/lib/ease";
import { cn } from "@/lib/utils";
export type TodoItemStatus =
| "pending"
| "in-progress"
| "completed"
| "cancelled";
export interface TodoItem {
id: string;
title: ReactNode;
status?: TodoItemStatus;
progress?: number;
detail?: ReactNode;
}
export interface TodoListProps {
items: TodoItem[];
title?: ReactNode;
open?: boolean;
defaultOpen?: boolean;
onOpenChange?: (open: boolean) => void;
collapseOnComplete?: boolean;
maxHeight?: number;
className?: string;
}
function statusLabel(status: TodoItemStatus) {
if (status === "in-progress") return "In progress";
if (status === "completed") return "Completed";
if (status === "cancelled") return "Cancelled";
return "Pending";
}
function TodoHeaderIcon({ complete }: { complete: boolean }) {
const reduce = useReducedMotion() ?? false;
return (
<span
aria-hidden="true"
className="relative grid size-6 shrink-0 place-items-center"
>
<AnimatePresence initial={false} mode="popLayout">
{complete ? (
<motion.svg
key="complete"
viewBox="0 0 24 24"
initial={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.72 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
className="absolute size-5.5 overflow-visible text-emerald-500"
>
<circle cx="12" cy="12" r="9" fill="currentColor" />
<motion.path
d="M7.5 12.25 10.5 15.25 16.75 8.75"
fill="none"
stroke="white"
strokeWidth="2.25"
strokeLinecap="round"
strokeLinejoin="round"
initial={reduce ? { pathLength: 1 } : { pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={
reduce ? { duration: 0 } : { duration: 0.24, ease: EASE_OUT }
}
/>
</motion.svg>
) : (
<motion.span
key="todo"
initial={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.72 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
className="absolute grid place-items-center text-muted-foreground"
>
<ListTodo className="size-4" />
</motion.span>
)}
</AnimatePresence>
</span>
);
}
function TodoStatusIcon({
status,
progress,
}: {
status: TodoItemStatus;
progress?: number;
}) {
const reduce = useReducedMotion() ?? false;
const normalizedProgress =
progress === undefined ? 0.68 : Math.min(100, Math.max(0, progress)) / 100;
return (
<motion.svg
aria-hidden="true"
viewBox="0 0 24 24"
initial={false}
className={cn(
"mx-0.5 size-5 shrink-0 overflow-visible text-muted-foreground",
status === "in-progress" && "text-foreground",
status === "cancelled" && "text-rose-600 dark:text-rose-400",
)}
>
<motion.circle
cx="12"
cy="12"
r="9"
fill="currentColor"
stroke="currentColor"
strokeWidth="1.5"
strokeDasharray={status === "pending" ? "2 3" : undefined}
strokeLinecap="round"
initial={false}
animate={{ fillOpacity: status === "completed" ? 0.06 : 0 }}
transition={reduce ? { duration: 0 } : { duration: 0.18, ease: EASE_OUT }}
className={cn(status === "in-progress" && "opacity-20")}
/>
<motion.circle
cx="12"
cy="12"
r="9"
pathLength="1"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
initial={false}
animate={{
pathLength: status === "in-progress" ? normalizedProgress : 0,
opacity: status === "in-progress" ? 1 : 0,
rotate:
status === "in-progress" && progress === undefined && !reduce
? 360
: -90,
}}
transition={
status === "in-progress" && progress === undefined && !reduce
? { rotate: { duration: 1.1, repeat: Infinity, ease: "linear" } }
: reduce
? { duration: 0 }
: SPRING_LAYOUT
}
style={{ transformOrigin: "12px 12px" }}
/>
<motion.path
d="M7.5 12.25 10.5 15.25 16.75 8.75"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
initial={false}
animate={{
pathLength: status === "completed" ? 1 : 0,
opacity: status === "completed" ? 1 : 0,
}}
transition={reduce ? { duration: 0 } : { duration: 0.24, ease: EASE_OUT }}
/>
<motion.path
d="M8.5 8.5 15.5 15.5M15.5 8.5 8.5 15.5"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
initial={false}
animate={{
pathLength: status === "cancelled" ? 1 : 0,
opacity: status === "cancelled" ? 1 : 0,
}}
transition={reduce ? { duration: 0 } : { duration: 0.2, ease: EASE_OUT }}
/>
</motion.svg>
);
}
export function TodoList({
items,
title = "To-dos",
open,
defaultOpen = true,
onOpenChange,
collapseOnComplete = true,
maxHeight = 248,
className,
}: TodoListProps) {
const reduce = useReducedMotion() ?? false;
const baseId = useId();
const triggerId = `${baseId}-trigger`;
const contentId = `${baseId}-content`;
const viewportRef = useRef<HTMLDivElement>(null);
const previousComplete = useRef(false);
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const currentOpen = open ?? internalOpen;
const completed = items.filter((item) => item.status === "completed").length;
const allComplete = items.length > 0 && completed === items.length;
const itemCount = items.length;
const setOpen = useCallback(
(next: boolean) => {
if (open === undefined) setInternalOpen(next);
onOpenChange?.(next);
},
[onOpenChange, open],
);
useEffect(() => {
if (previousComplete.current && !allComplete) {
setOpen(true);
}
if (!previousComplete.current && allComplete && collapseOnComplete) {
setOpen(false);
}
previousComplete.current = allComplete;
}, [allComplete, collapseOnComplete, setOpen]);
useLayoutEffect(() => {
const viewport = viewportRef.current;
if (!viewport || itemCount === 0) return;
const frame = requestAnimationFrame(() => {
if (viewport.scrollHeight <= viewport.clientHeight) return;
if (typeof viewport.scrollTo === "function") {
viewport.scrollTo({
top: viewport.scrollHeight,
behavior: reduce ? "auto" : "smooth",
});
} else {
viewport.scrollTop = viewport.scrollHeight;
}
});
return () => cancelAnimationFrame(frame);
}, [itemCount, reduce]);
return (
<section
aria-label="Agent task list"
className={cn(
"w-full overflow-hidden rounded-2xl border border-border/70",
className,
)}
>
<button
id={triggerId}
type="button"
aria-expanded={currentOpen}
aria-controls={contentId}
onClick={() => setOpen(!currentOpen)}
className="group flex h-11 w-full items-center gap-2.5 rounded-2xl px-3.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
<TodoHeaderIcon complete={allComplete} />
<h3 className="min-w-0 flex-1 truncate text-sm font-medium text-foreground/90">
{title}
</h3>
<span
className={cn(
"shrink-0 text-xs font-medium tabular-nums text-muted-foreground",
allComplete && "text-emerald-600 dark:text-emerald-400",
)}
>
<span className="sr-only">
{completed} of {items.length} tasks completed
</span>
<span aria-hidden="true" className="inline-flex">
<ActionSwapRollText value={String(completed)}>
{completed}
</ActionSwapRollText>
<span>/</span>
<span>{items.length}</span>
</span>
</span>
<motion.span
aria-hidden="true"
animate={{ rotate: currentOpen ? 180 : 0 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
className="text-muted-foreground/50 transition-colors group-hover:text-muted-foreground"
>
<ChevronDown className="size-3.5" />
</motion.span>
</button>
<AgentDisclosure
id={contentId}
role="region"
aria-labelledby={triggerId}
open={currentOpen}
>
<div
ref={viewportRef}
className="scrollbar-hide overflow-y-auto px-2 pb-2"
style={{ maxHeight }}
>
{items.length ? (
<ol aria-live="polite" className="space-y-0">
<AnimatePresence initial={false} mode="popLayout">
{items.map((item) => {
const status = item.status ?? "pending";
return (
<motion.li
layout="position"
key={item.id}
initial={reduce ? { opacity: 1 } : { opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
exit={reduce ? { opacity: 0 } : { opacity: 0, y: -3 }}
transition={
reduce
? { duration: 0 }
: {
opacity: { duration: 0.18, ease: EASE_OUT },
y: SPRING_LAYOUT,
layout: SPRING_LAYOUT,
}
}
className="flex min-h-9 items-center gap-2.5 rounded-xl px-1.5 py-1"
>
<TodoStatusIcon status={status} progress={item.progress} />
<span className="sr-only">{statusLabel(status)}: </span>
<span
className={cn(
"min-w-0 flex-1 truncate text-sm leading-5",
status === "pending" && "text-muted-foreground/65",
status === "in-progress" && "text-foreground",
status === "completed" && "text-muted-foreground/60",
status === "cancelled" && "text-muted-foreground/55",
)}
>
<span className="relative inline-block max-w-full">
{item.title}
<motion.span
aria-hidden="true"
initial={false}
animate={{
scaleX: status === "completed" ? 1 : 0,
opacity: status === "completed" ? 1 : 0,
}}
transition={
reduce
? { duration: 0 }
: { duration: 0.28, ease: EASE_OUT, delay: 0.06 }
}
className="absolute inset-x-0 top-1/2 h-px origin-left bg-current"
/>
</span>
</span>
{item.detail ? (
<span className="shrink-0 text-sm text-muted-foreground/55">
{item.detail}
</span>
) : null}
</motion.li>
);
})}
</AnimatePresence>
</ol>
) : (
<p className="px-1.5 py-2 text-sm text-muted-foreground">
No tasks yet
</p>
)}
</div>
</AgentDisclosure>
</section>
);
}
components/agents/tool-approval.tsx
"use client";
// beui.dev/components/agents/chat-app
import {
Check,
ChevronDown,
CircleAlert,
LoaderCircle,
ShieldCheck,
X,
} from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
type ReactNode,
useCallback,
useEffect,
useId,
useRef,
useState,
} from "react";
import {
AgentCode,
type AgentCodeLanguage,
} from "@/components/agents/agent-code";
import { AgentDisclosure } from "@/components/agents/agent-disclosure";
import { EASE_OUT, SPRING_PRESS, SPRING_SWAP } from "@/lib/ease";
import { cn } from "@/lib/utils";
export type ToolApprovalStatus =
| "pending"
| "approving"
| "approved"
| "denied"
| "running"
| "complete"
| "error";
export interface ToolApprovalParameter {
id: string;
label: ReactNode;
value: ReactNode;
}
export interface ToolApprovalCodeProps {
code: string;
language?: AgentCodeLanguage;
className?: string;
}
export interface ToolApprovalProps {
tool: ReactNode;
title?: ReactNode;
description?: ReactNode;
parameters?: ToolApprovalParameter[];
status?: ToolApprovalStatus;
open?: boolean;
defaultOpen?: boolean;
onOpenChange?: (open: boolean) => void;
onApprove?: () => void;
onAlwaysAllow?: () => void;
onDeny?: () => void;
className?: string;
}
function getStatusCopy(status: ToolApprovalStatus) {
if (status === "approving") return "Approving";
if (status === "approved") return "Approved";
if (status === "denied") return "Denied";
if (status === "running") return "Running";
if (status === "complete") return "Completed";
if (status === "error") return "Failed";
return "Approval required";
}
function getStatusBadgeClass(status: ToolApprovalStatus) {
if (status === "pending") {
return "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400";
}
if (status === "approving" || status === "running") {
return "border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400";
}
if (status === "approved" || status === "complete") {
return "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400";
}
return "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400";
}
export function ToolApprovalCode({
code,
language = "bash",
className,
}: ToolApprovalCodeProps) {
return (
<AgentCode
code={code}
language={language}
className={cn(
// Parameter values sit in a narrow grid column with nowhere to scroll
// on touch, so they wrap instead of clipping (as ToolResultOutput does).
"whitespace-pre-wrap break-words rounded-lg border border-border/50 bg-muted/30 px-2.5 py-2",
className,
)}
/>
);
}
export function ToolApproval({
tool,
title = "Allow this tool to run?",
description,
parameters = [],
status = "pending",
open,
defaultOpen = false,
onOpenChange,
onApprove,
onAlwaysAllow,
onDeny,
className,
}: ToolApprovalProps) {
const reduce = useReducedMotion() ?? false;
const baseId = useId();
const detailsId = `${baseId}-details`;
const previousStatus = useRef(status);
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const currentOpen = open ?? internalOpen;
const setOpen = useCallback(
(next: boolean) => {
if (open === undefined) setInternalOpen(next);
onOpenChange?.(next);
},
[onOpenChange, open],
);
const busy = status === "approving" || status === "running";
const pending = status === "pending";
const error = status === "error";
useEffect(() => {
if (previousStatus.current === "pending" && status !== "pending") {
setOpen(false);
}
previousStatus.current = status;
}, [setOpen, status]);
return (
<div
data-state={status}
aria-busy={busy}
className={cn(
"w-full overflow-hidden rounded-2xl border border-border/60 bg-muted/20 text-sm",
className,
)}
>
<div className="flex items-start gap-3 p-4">
<span
aria-hidden="true"
className={cn(
"mt-0.5 grid size-8 shrink-0 place-items-center rounded-xl border border-border/60 bg-background text-muted-foreground",
error && "text-destructive",
)}
>
{busy ? (
<LoaderCircle className={cn("size-4", !reduce && "animate-spin")} />
) : error ? (
<CircleAlert className="size-4" />
) : status === "denied" ? (
<X className="size-4" />
) : status === "approved" || status === "complete" ? (
<Check className="size-4" />
) : (
<ShieldCheck className="size-4" />
)}
</span>
<div className="min-w-0 flex-1">
<div className="flex min-w-0 items-start justify-between gap-3">
<div className="min-w-0">
<div className="font-medium text-foreground">{title}</div>
<div className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
{tool}
</div>
</div>
<span
className={cn(
"shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-medium transition-colors",
getStatusBadgeClass(status),
)}
>
{getStatusCopy(status)}
</span>
</div>
{description ? (
<p className="mt-2 leading-5 text-muted-foreground">{description}</p>
) : null}
{parameters.length ? (
<button
type="button"
aria-expanded={currentOpen}
aria-controls={detailsId}
onClick={() => setOpen(!currentOpen)}
className="mt-2 inline-flex items-center gap-1 rounded-md text-xs font-medium text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
>
View details
<motion.span
aria-hidden="true"
animate={{ rotate: currentOpen ? 180 : 0 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
>
<ChevronDown className="size-3.5" />
</motion.span>
</button>
) : null}
</div>
</div>
<AgentDisclosure
id={detailsId}
open={currentOpen}
>
<dl className="mx-4 mb-4 grid gap-2 rounded-xl border border-border/50 bg-background/70 p-3">
{parameters.map((parameter) => (
<div
key={parameter.id}
className="grid grid-cols-[minmax(0,7rem)_minmax(0,1fr)] items-center gap-3 text-xs"
>
<dt className="text-muted-foreground">{parameter.label}</dt>
<dd className="min-w-0 break-words font-mono text-foreground/85">
{parameter.value}
</dd>
</div>
))}
</dl>
</AgentDisclosure>
<AnimatePresence initial={false}>
{pending ? (
<motion.div
initial={reduce ? { opacity: 0 } : { opacity: 0, y: 4 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
transition={{ duration: reduce ? 0.12 : 0.22, ease: EASE_OUT }}
className="flex flex-wrap items-center gap-2 border-t border-border/60 px-4 py-3"
>
<motion.button
type="button"
onClick={onApprove}
whileTap={reduce ? undefined : { scale: 0.97 }}
transition={SPRING_PRESS}
className="rounded-xl bg-foreground px-3 py-1.5 text-xs font-medium text-background outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
>
Allow once
</motion.button>
{onAlwaysAllow ? (
<motion.button
type="button"
onClick={onAlwaysAllow}
whileTap={reduce ? undefined : { scale: 0.97 }}
transition={SPRING_PRESS}
className="rounded-xl border border-border/60 bg-background px-3 py-1.5 text-xs font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
>
Always allow
</motion.button>
) : null}
<button
type="button"
onClick={onDeny}
className="rounded-xl px-3 py-1.5 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
>
Deny
</button>
</motion.div>
) : null}
</AnimatePresence>
</div>
);
}
components/agents/tool-result.tsx
"use client";
// beui.dev/components/agents/chat-app
import {
Ban,
Braces,
Check,
ChevronDown,
CircleCheck,
CircleX,
Copy,
LoaderCircle,
RotateCcw,
SquareTerminal,
Wrench,
} from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import {
type ReactNode,
useCallback,
useEffect,
useId,
useLayoutEffect,
useRef,
useState,
} from "react";
import {
AgentCode,
type AgentCodeLanguage,
} from "@/components/agents/agent-code";
import { ActionSwapRollText } from "@/components/motion/action-swap-roll";
import { AgentDisclosure } from "@/components/agents/agent-disclosure";
import { SPRING_PRESS, SPRING_SWAP } from "@/lib/ease";
import { cn } from "@/lib/utils";
export type ToolResultStatus = "running" | "success" | "error" | "cancelled";
export type ToolResultKind = "terminal" | "request" | "custom";
export interface ToolResultProps {
tool: ReactNode;
title: ReactNode;
children: ReactNode;
status?: ToolResultStatus;
kind?: ToolResultKind;
meta?: ReactNode;
icon?: ReactNode;
open?: boolean;
defaultOpen?: boolean;
onOpenChange?: (open: boolean) => void;
collapseOnComplete?: boolean;
maxHeight?: number;
copyText?: string;
onCopy?: () => void | Promise<void>;
onRetry?: () => void;
className?: string;
contentClassName?: string;
}
export interface ToolResultOutputProps {
children: string;
language?: AgentCodeLanguage;
className?: string;
}
function getStatusLabel(status: ToolResultStatus) {
if (status === "running") return "Running";
if (status === "success") return "Completed";
if (status === "error") return "Failed";
return "Cancelled";
}
function getSwapKey(value: ReactNode, fallback: string) {
return typeof value === "string" || typeof value === "number"
? String(value)
: fallback;
}
function getStatusClass(status: ToolResultStatus) {
if (status === "running") {
return "text-blue-600 dark:text-blue-400";
}
if (status === "success") {
return "text-emerald-600 dark:text-emerald-400";
}
if (status === "error") {
return "text-rose-600 dark:text-rose-400";
}
return "text-muted-foreground";
}
function KindIcon({ kind }: { kind: ToolResultKind }) {
if (kind === "terminal") return <SquareTerminal className="size-4" />;
if (kind === "request") return <Braces className="size-4" />;
return <Wrench className="size-4" />;
}
function StatusIcon({
status,
reduce,
}: {
status: ToolResultStatus;
reduce: boolean;
}) {
if (status === "running") {
return <LoaderCircle className={cn("size-3", !reduce && "animate-spin")} />;
}
if (status === "success") return <CircleCheck className="size-3" />;
if (status === "error") return <CircleX className="size-3" />;
return <Ban className="size-3" />;
}
function ToolResultAction({
label,
onClick,
children,
}: {
label: string;
onClick: () => void;
children: ReactNode;
}) {
const reduce = useReducedMotion() ?? false;
return (
<motion.button
type="button"
aria-label={label}
title={label}
onClick={onClick}
whileTap={reduce ? undefined : { scale: 0.9 }}
transition={SPRING_PRESS}
className="grid size-7 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
>
{children}
</motion.button>
);
}
export function ToolResultOutput({
children,
language = "bash",
className,
}: ToolResultOutputProps) {
return (
<AgentCode
code={children}
language={language}
className={cn(
"whitespace-pre-wrap break-words text-foreground/80",
className,
)}
/>
);
}
export function ToolResult({
tool,
title,
children,
status = "running",
kind = "custom",
meta,
icon,
open,
defaultOpen = true,
onOpenChange,
collapseOnComplete = true,
maxHeight = 220,
copyText,
onCopy,
onRetry,
className,
contentClassName,
}: ToolResultProps) {
const reduce = useReducedMotion() ?? false;
const baseId = useId();
const triggerId = `${baseId}-trigger`;
const contentId = `${baseId}-content`;
const viewportRef = useRef<HTMLDivElement>(null);
const previousStatus = useRef(status);
const copyTimer = useRef<number | undefined>(undefined);
const [copied, setCopied] = useState(false);
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const currentOpen = open ?? internalOpen;
const running = status === "running";
const canCopy = Boolean(copyText || onCopy);
const titleKey = getSwapKey(title, status);
const metaKey = getSwapKey(meta, `${status}-meta`);
const toolKey = getSwapKey(tool, `${status}-tool`);
const statusLabel = getStatusLabel(status);
const setOpen = useCallback(
(next: boolean) => {
if (open === undefined) setInternalOpen(next);
onOpenChange?.(next);
},
[onOpenChange, open],
);
useEffect(() => {
if (previousStatus.current !== "running" && status === "running") {
setOpen(true);
}
if (
previousStatus.current === "running" &&
status !== "running" &&
collapseOnComplete
) {
setOpen(false);
}
previousStatus.current = status;
}, [collapseOnComplete, setOpen, status]);
useEffect(
() => () => {
if (copyTimer.current) window.clearTimeout(copyTimer.current);
},
[],
);
useLayoutEffect(() => {
const viewport = viewportRef.current;
if (!viewport || !currentOpen || !running) return;
const frame = requestAnimationFrame(() => {
if (typeof viewport.scrollTo === "function") {
viewport.scrollTo({
top: viewport.scrollHeight,
behavior: reduce ? "auto" : "smooth",
});
} else {
viewport.scrollTop = viewport.scrollHeight;
}
});
return () => cancelAnimationFrame(frame);
});
const handleCopy = useCallback(async () => {
if (onCopy) await onCopy();
else if (copyText) await navigator.clipboard?.writeText(copyText);
setCopied(true);
if (copyTimer.current) window.clearTimeout(copyTimer.current);
copyTimer.current = window.setTimeout(() => setCopied(false), 1600);
}, [copyText, onCopy]);
return (
<div
data-state={status}
aria-busy={running}
className={cn("w-full text-sm", className)}
>
<button
id={triggerId}
type="button"
aria-expanded={currentOpen}
aria-controls={contentId}
onClick={() => setOpen(!currentOpen)}
className="group flex min-h-9 w-full items-center gap-2 rounded-md py-1 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
>
<span
aria-hidden="true"
className="grid size-4 shrink-0 place-items-center text-muted-foreground"
>
{icon ?? <KindIcon kind={kind} />}
</span>
<span className="flex min-w-0 flex-1 items-baseline gap-2">
<span className="min-w-0 truncate font-medium text-foreground/90">
<ActionSwapRollText value={titleKey}>
{title}
</ActionSwapRollText>
</span>
{meta ? (
<span className="shrink-0 text-xs text-muted-foreground/60">
<ActionSwapRollText value={metaKey}>
{meta}
</ActionSwapRollText>
</span>
) : null}
<span className="min-w-0 truncate font-mono text-[11px] text-muted-foreground/55">
<ActionSwapRollText value={toolKey}>
{tool}
</ActionSwapRollText>
</span>
</span>
<span
className={cn(
"inline-flex shrink-0 items-center gap-1 text-[11px] font-medium",
getStatusClass(status),
)}
>
<StatusIcon status={status} reduce={reduce} />
<ActionSwapRollText value={status}>{statusLabel}</ActionSwapRollText>
</span>
<motion.span
aria-hidden="true"
animate={{ rotate: currentOpen ? 180 : 0 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
className="shrink-0 text-muted-foreground/50 transition-colors group-hover:text-muted-foreground"
>
<ChevronDown className="size-3.5" />
</motion.span>
</button>
<AgentDisclosure
id={contentId}
role="region"
aria-labelledby={triggerId}
open={currentOpen}
>
<div className="pl-6 pt-1.5">
<div className="overflow-hidden rounded-xl bg-muted/80">
<div
ref={viewportRef}
role="log"
aria-live="polite"
className="scrollbar-hide overflow-y-auto"
style={{ maxHeight }}
>
<div className={cn("p-3", contentClassName)}>{children}</div>
</div>
{canCopy || onRetry ? (
<div className="flex items-center gap-0.5 px-2 pb-1.5">
{canCopy ? (
<ToolResultAction
label={copied ? "Copied" : "Copy result"}
onClick={handleCopy}
>
{copied ? (
<Check className="size-3.5" />
) : (
<Copy className="size-3.5" />
)}
</ToolResultAction>
) : null}
{onRetry ? (
<ToolResultAction label="Run again" onClick={onRetry}>
<RotateCcw className="size-3.5" />
</ToolResultAction>
) : null}
<span className="ml-auto text-[11px] text-muted-foreground/55">
<ActionSwapRollText value={status}>
{statusLabel}
</ActionSwapRollText>
</span>
</div>
) : null}
</div>
</div>
</AgentDisclosure>
</div>
);
}
components/motion/animated-sidebar.tsx
"use client";
import { ChevronRight } from "lucide-react";
import {
AnimatePresence,
type HTMLMotionProps,
motion,
useReducedMotion,
type Variants,
} from "motion/react";
import {
type ButtonHTMLAttributes,
type CSSProperties,
createContext,
forwardRef,
type HTMLAttributes,
type ReactNode,
useCallback,
useContext,
useEffect,
useId,
useRef,
useState,
useSyncExternalStore,
} from "react";
import { createPortal } from "react-dom";
import { SharedLayoutBg } from "@/components/motion/shared-layout-bg";
import {
EASE_DRAWER,
EASE_OUT,
SPRING_LAYOUT,
SPRING_PRESS,
} from "@/lib/ease";
import { cn } from "@/lib/utils";
type SidebarState = "expanded" | "collapsed";
type SidebarSide = "left" | "right";
type SidebarVariant = "sidebar" | "floating" | "inset";
type SidebarCollapsible = "offcanvas" | "icon" | "none";
const MOBILE_QUERY = "(max-width: 767px)";
const SIDEBAR_KEYBOARD_SHORTCUT = "b";
const PANEL_TRANSITION = {
duration: 0.36,
ease: EASE_DRAWER,
} as const;
// The desktop rail settles at a hard zero-width boundary. Keep the spring
// critically damped so it cannot overshoot, pause against that boundary, and
// then snap back during the final frame.
const SIDEBAR_MORPH_TRANSITION = {
type: "spring",
stiffness: 380,
damping: 35,
mass: 0.75,
} as const;
const LABEL_ENTER_TRANSITION = {
duration: 0.2,
delay: 0.08,
ease: EASE_OUT,
} as const;
const LABEL_EXIT_TRANSITION = {
duration: 0.12,
ease: EASE_OUT,
} as const;
const SUBMENU_TRANSITION = {
duration: 0.18,
ease: EASE_OUT,
} as const;
const SUBMENU_VARIANTS: Variants = {
closed: {
opacity: 0,
clipPath: "inset(0 0 100% 0 round 8px)",
transition: {
duration: 0.14,
ease: EASE_OUT,
staggerChildren: 0.025,
staggerDirection: -1,
},
},
open: {
opacity: 1,
clipPath: "inset(0 0 0% 0 round 8px)",
transition: {
duration: 0.2,
delayChildren: 0.035,
ease: EASE_OUT,
staggerChildren: 0.045,
},
},
};
const SUBMENU_ITEM_VARIANTS: Variants = {
closed: {
opacity: 0,
y: -6,
filter: "blur(3px)",
},
open: {
opacity: 1,
y: 0,
filter: "blur(0px)",
transition: SUBMENU_TRANSITION,
},
};
const REDUCED_TRANSITION = {
duration: 0.16,
ease: EASE_OUT,
} as const;
const FOCUSABLE_SELECTOR = [
"a[href]",
"button:not([disabled])",
"input:not([disabled])",
"select:not([disabled])",
"textarea:not([disabled])",
"[tabindex]:not([tabindex='-1'])",
].join(",");
function subscribeToMobileQuery(callback: () => void) {
const query = window.matchMedia(MOBILE_QUERY);
query.addEventListener("change", callback);
return () => query.removeEventListener("change", callback);
}
function getMobileSnapshot() {
return window.matchMedia(MOBILE_QUERY).matches;
}
function getServerMobileSnapshot() {
return false;
}
function useIsMobile() {
return useSyncExternalStore(
subscribeToMobileQuery,
getMobileSnapshot,
getServerMobileSnapshot,
);
}
interface AnimatedSidebarContextValue {
isMobile: boolean;
layoutId: string;
open: boolean;
openMobile: boolean;
reduce: boolean;
setOpen: (open: boolean) => void;
setOpenMobile: (open: boolean) => void;
state: SidebarState;
toggleSidebar: () => void;
triggerRef: React.RefObject<HTMLButtonElement | null>;
}
const AnimatedSidebarContext =
createContext<AnimatedSidebarContextValue | null>(null);
interface AnimatedSidebarPanelContextValue {
collapsed: boolean;
collapsible: SidebarCollapsible;
side: SidebarSide;
}
const AnimatedSidebarPanelContext =
createContext<AnimatedSidebarPanelContextValue | null>(null);
export function useAnimatedSidebar() {
const context = useContext(AnimatedSidebarContext);
if (!context) {
throw new Error(
"useAnimatedSidebar must be used inside AnimatedSidebarProvider.",
);
}
return context;
}
function useAnimatedSidebarPanel() {
const context = useContext(AnimatedSidebarPanelContext);
if (!context) {
throw new Error(
"Animated Sidebar parts must be used inside AnimatedSidebar.",
);
}
return context;
}
type SidebarProviderStyle = CSSProperties & {
"--sidebar-width"?: string;
"--sidebar-width-icon"?: string;
"--sidebar-width-mobile"?: string;
};
export interface AnimatedSidebarProviderProps
extends HTMLAttributes<HTMLDivElement> {
open?: boolean;
defaultOpen?: boolean;
onOpenChange?: (open: boolean) => void;
openMobile?: boolean;
defaultOpenMobile?: boolean;
onOpenMobileChange?: (open: boolean) => void;
style?: SidebarProviderStyle;
}
export function AnimatedSidebarProvider({
children,
open,
defaultOpen = true,
onOpenChange,
openMobile,
defaultOpenMobile = false,
onOpenMobileChange,
className,
style,
...props
}: AnimatedSidebarProviderProps) {
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const [internalOpenMobile, setInternalOpenMobile] =
useState(defaultOpenMobile);
const isMobile = useIsMobile();
const reduce = useReducedMotion() ?? false;
const generatedId = useId();
const triggerRef = useRef<HTMLButtonElement>(null);
const desktopOpen = open ?? internalOpen;
const mobileOpen = openMobile ?? internalOpenMobile;
const setOpen = useCallback(
(nextOpen: boolean) => {
if (open === undefined) setInternalOpen(nextOpen);
onOpenChange?.(nextOpen);
},
[onOpenChange, open],
);
const setOpenMobile = useCallback(
(nextOpen: boolean) => {
if (openMobile === undefined) setInternalOpenMobile(nextOpen);
onOpenMobileChange?.(nextOpen);
},
[onOpenMobileChange, openMobile],
);
const toggleSidebar = useCallback(() => {
if (isMobile) setOpenMobile(!mobileOpen);
else setOpen(!desktopOpen);
}, [desktopOpen, isMobile, mobileOpen, setOpen, setOpenMobile]);
useEffect(() => {
const handleShortcut = (event: KeyboardEvent) => {
if (
event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&
(event.metaKey || event.ctrlKey)
) {
event.preventDefault();
toggleSidebar();
}
};
window.addEventListener("keydown", handleShortcut);
return () => window.removeEventListener("keydown", handleShortcut);
}, [toggleSidebar]);
return (
<AnimatedSidebarContext.Provider
value={{
isMobile,
layoutId: `${generatedId}-active`,
open: desktopOpen,
openMobile: mobileOpen,
reduce,
setOpen,
setOpenMobile,
state: desktopOpen ? "expanded" : "collapsed",
toggleSidebar,
triggerRef,
}}
>
<div
{...props}
data-slot="sidebar-wrapper"
data-state={desktopOpen ? "expanded" : "collapsed"}
style={{
"--sidebar-width": "16rem",
"--sidebar-width-icon": "4.25rem",
"--sidebar-width-mobile": "18rem",
...style,
}}
className={cn(
"group/sidebar-wrapper flex min-h-svh w-full min-w-0",
className,
)}
>
{children}
</div>
</AnimatedSidebarContext.Provider>
);
}
function MobileSidebar({
ariaLabel,
children,
className,
side,
}: {
ariaLabel: string;
children: ReactNode;
className?: string;
side: SidebarSide;
}) {
const context = useAnimatedSidebar();
const panelRef = useRef<HTMLDivElement>(null);
const [mounted, setMounted] = useState(false);
// The sheet is mounted for as long as the viewport is mobile, so it hides
// itself while closed rather than sitting there transparent and interactive.
// Opening shows it in the same commit that starts the slide — a delayed show
// would run the focus effect below against a still-hidden panel, and focus()
// on a hidden element is ignored. Closing waits for the slide to finish, and
// the panel's own exit tells us when that is: no duration to keep in sync.
const [hidden, setHidden] = useState(!context.openMobile);
// The completion callback fires for the open slide too, and it reads state
// from whenever motion settles: a ref keeps it on the current one.
const openMobileRef = useRef(context.openMobile);
useEffect(() => setMounted(true), []);
useEffect(() => {
openMobileRef.current = context.openMobile;
if (context.openMobile) setHidden(false);
}, [context.openMobile]);
useEffect(() => {
if (!context.openMobile) return;
const body = document.body;
const scrollY = window.scrollY;
const previousBodyStyles = {
left: body.style.left,
overflow: body.style.overflow,
position: body.style.position,
right: body.style.right,
top: body.style.top,
};
body.style.position = "fixed";
body.style.top = `-${scrollY}px`;
body.style.left = "0";
body.style.right = "0";
body.style.overflow = "hidden";
const focusFrame = requestAnimationFrame(() => {
const firstFocusable =
panelRef.current?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
(firstFocusable ?? panelRef.current)?.focus({ preventScroll: true });
});
return () => {
cancelAnimationFrame(focusFrame);
body.style.position = previousBodyStyles.position;
body.style.top = previousBodyStyles.top;
body.style.left = previousBodyStyles.left;
body.style.right = previousBodyStyles.right;
body.style.overflow = previousBodyStyles.overflow;
window.scrollTo(0, scrollY);
context.triggerRef.current?.focus({ preventScroll: true });
};
}, [context.openMobile, context.triggerRef]);
if (!mounted) return null;
// This container groups the sheet for hiding and the z-index and carries no
// box: both children are `fixed` and resolve against the viewport themselves.
// The scrim spans the viewport edges but paints a colour, and the panel is
// inset off one side and paints its own surface, so no layer here is a
// transparent edge-spanning one.
return createPortal(
<div
className={cn(
"pointer-events-none fixed left-0 top-0 z-50 size-0 md:hidden",
hidden && !context.openMobile ? "invisible" : "visible",
)}
>
<motion.button
type="button"
aria-label="Close sidebar"
tabIndex={context.openMobile ? 0 : -1}
initial={false}
animate={{ opacity: context.openMobile ? 1 : 0 }}
transition={
context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION
}
onClick={() => context.setOpenMobile(false)}
className={cn(
"fixed inset-0 bg-black/40",
context.openMobile
? "pointer-events-auto"
: "pointer-events-none",
)}
/>
<motion.div
ref={panelRef}
role="dialog"
aria-modal="true"
aria-label={ariaLabel}
aria-hidden={!context.openMobile}
inert={!context.openMobile}
tabIndex={-1}
data-mobile="true"
data-state={context.openMobile ? "expanded" : "collapsed"}
data-side={side}
initial={false}
animate={{
opacity: context.reduce
? context.openMobile
? 1
: 0
: 1,
x: context.reduce
? 0
: context.openMobile
? "0%"
: side === "left"
? "-100%"
: "100%",
}}
transition={
context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION
}
onAnimationComplete={() => {
if (!openMobileRef.current) setHidden(true);
}}
onKeyDown={(event) => {
if (event.key === "Escape") {
event.preventDefault();
context.setOpenMobile(false);
return;
}
if (event.key !== "Tab") return;
const focusable = panelRef.current
? Array.from(
panelRef.current.querySelectorAll<HTMLElement>(
FOCUSABLE_SELECTOR,
),
)
: [];
if (focusable.length === 0) {
event.preventDefault();
panelRef.current?.focus();
return;
}
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (event.shiftKey && document.activeElement === first) {
event.preventDefault();
last.focus();
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault();
first.focus();
}
}}
className={cn(
"pointer-events-auto fixed inset-y-0 flex h-dvh w-(--sidebar-width-mobile) max-w-[88vw] flex-col overflow-hidden",
"border-border bg-background shadow-2xl will-change-transform",
side === "left" ? "left-0 border-r" : "right-0 border-l",
!context.openMobile && "pointer-events-none",
className,
)}
>
<AnimatedSidebarPanelContext.Provider
value={{ collapsed: false, collapsible: "none", side }}
>
{children}
</AnimatedSidebarPanelContext.Provider>
</motion.div>
</div>,
document.body,
);
}
export interface AnimatedSidebarProps
extends Omit<HTMLMotionProps<"aside">, "children"> {
children?: ReactNode;
side?: SidebarSide;
variant?: SidebarVariant;
collapsible?: SidebarCollapsible;
ariaLabel?: string;
panelClassName?: string;
}
export const AnimatedSidebar = forwardRef<HTMLElement, AnimatedSidebarProps>(
function AnimatedSidebar(
{
side = "left",
variant = "sidebar",
collapsible = "icon",
ariaLabel = "Sidebar",
children,
className,
panelClassName,
style,
...props
},
forwardedRef,
) {
const context = useAnimatedSidebar();
const collapsed = collapsible !== "none" && !context.open;
const offcanvas = collapsed && collapsible === "offcanvas";
const width = offcanvas
? "0px"
: collapsed
? "var(--sidebar-width-icon)"
: "var(--sidebar-width)";
if (context.isMobile) {
return (
<MobileSidebar
ariaLabel={ariaLabel}
className={className}
side={side}
>
{children}
</MobileSidebar>
);
}
return (
<motion.aside
{...props}
ref={forwardedRef}
initial={false}
aria-label={ariaLabel}
data-slot="sidebar"
data-state={collapsed ? "collapsed" : "expanded"}
data-collapsible={collapsible}
data-variant={variant}
data-side={side}
animate={{ width }}
transition={
context.reduce ? { duration: 0 } : SIDEBAR_MORPH_TRANSITION
}
style={style}
className={cn(
"group/sidebar relative hidden h-auto shrink-0 md:block will-change-[width]",
"peer",
side === "right" && "order-last",
className,
)}
>
<motion.div
initial={false}
animate={{
opacity: offcanvas ? 0 : 1,
x: offcanvas ? (side === "left" ? "-100%" : "100%") : "0%",
}}
transition={
context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION
}
className={cn(
"sticky top-0 flex h-svh w-full flex-col overflow-hidden bg-background",
collapsible === "offcanvas" && "w-[var(--sidebar-width)]",
variant === "sidebar" &&
(side === "left" ? "border-border border-r" : "border-border border-l"),
variant === "floating" &&
"m-2 h-[calc(100svh-1rem)] rounded-2xl border border-border shadow-sm",
variant === "inset" && "m-2 h-[calc(100svh-1rem)] rounded-2xl",
panelClassName,
)}
>
<AnimatedSidebarPanelContext.Provider
value={{ collapsed, collapsible, side }}
>
{children}
</AnimatedSidebarPanelContext.Provider>
</motion.div>
</motion.aside>
);
},
);
export interface AnimatedSidebarTriggerProps
extends ButtonHTMLAttributes<HTMLButtonElement> {}
export const AnimatedSidebarTrigger = forwardRef<
HTMLButtonElement,
AnimatedSidebarTriggerProps
>(function AnimatedSidebarTrigger(
{ className, onClick, type = "button", ...props },
forwardedRef,
) {
const context = useAnimatedSidebar();
const expanded = context.isMobile ? context.openMobile : context.open;
return (
<button
{...props}
ref={(node) => {
context.triggerRef.current = node;
if (typeof forwardedRef === "function") forwardedRef(node);
else if (forwardedRef) forwardedRef.current = node;
}}
type={type}
aria-label={props["aria-label"] ?? "Toggle sidebar"}
aria-expanded={expanded}
data-slot="sidebar-trigger"
data-state={expanded ? "expanded" : "collapsed"}
onClick={(event) => {
onClick?.(event);
if (!event.defaultPrevented) context.toggleSidebar();
}}
className={cn(
"inline-flex size-10 shrink-0 items-center justify-center rounded-xl outline-none",
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
className,
)}
/>
);
});
export interface AnimatedSidebarCloseProps
extends ButtonHTMLAttributes<HTMLButtonElement> {}
export const AnimatedSidebarClose = forwardRef<
HTMLButtonElement,
AnimatedSidebarCloseProps
>(function AnimatedSidebarClose(
{ className, onClick, type = "button", ...props },
forwardedRef,
) {
const context = useAnimatedSidebar();
return (
<button
{...props}
ref={forwardedRef}
type={type}
aria-label={props["aria-label"] ?? "Close sidebar"}
onClick={(event) => {
onClick?.(event);
if (event.defaultPrevented) return;
if (context.isMobile) context.setOpenMobile(false);
else context.setOpen(false);
}}
className={cn(
"inline-flex size-10 shrink-0 items-center justify-center rounded-xl outline-none",
"focus-visible:ring-2 focus-visible:ring-ring",
className,
)}
/>
);
});
export interface AnimatedSidebarRailProps
extends ButtonHTMLAttributes<HTMLButtonElement> {}
export const AnimatedSidebarRail = forwardRef<
HTMLButtonElement,
AnimatedSidebarRailProps
>(function AnimatedSidebarRail(
{ className, onClick, type = "button", ...props },
forwardedRef,
) {
const context = useAnimatedSidebar();
const panel = useAnimatedSidebarPanel();
return (
<button
{...props}
ref={forwardedRef}
type={type}
data-side={panel.side}
aria-label={props["aria-label"] ?? "Toggle sidebar"}
title="Toggle sidebar"
tabIndex={-1}
onClick={(event) => {
onClick?.(event);
if (!event.defaultPrevented) context.toggleSidebar();
}}
className={cn(
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 outline-none md:block",
"after:absolute after:inset-y-0 after:left-1/2 after:w-px after:bg-transparent after:transition-colors hover:after:bg-border",
"data-[side=right]:right-0 data-[side=right]:translate-x-1/2 data-[side=left]:left-full",
className,
)}
/>
);
});
export interface AnimatedSidebarInsetProps
extends HTMLMotionProps<"main"> {}
export const AnimatedSidebarInset = forwardRef<
HTMLElement,
AnimatedSidebarInsetProps
>(function AnimatedSidebarInset({ className, ...props }, forwardedRef) {
return (
<motion.main
{...props}
ref={forwardedRef}
data-slot="sidebar-inset"
className={cn(
"relative flex min-h-svh min-w-0 flex-1 flex-col bg-background",
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:shadow-sm",
className,
)}
/>
);
});
export const AnimatedSidebarHeader = forwardRef<
HTMLDivElement,
HTMLAttributes<HTMLDivElement>
>(function AnimatedSidebarHeader({ className, ...props }, forwardedRef) {
return (
<div
{...props}
ref={forwardedRef}
data-slot="sidebar-header"
className={cn("flex shrink-0 flex-col gap-2 p-3", className)}
/>
);
});
export const AnimatedSidebarContent = forwardRef<
HTMLDivElement,
HTMLAttributes<HTMLDivElement>
>(function AnimatedSidebarContent({ className, ...props }, forwardedRef) {
return (
<div
{...props}
ref={forwardedRef}
data-slot="sidebar-content"
className={cn(
"flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden overscroll-contain px-2 py-2",
className,
)}
/>
);
});
export const AnimatedSidebarFooter = forwardRef<
HTMLDivElement,
HTMLAttributes<HTMLDivElement>
>(function AnimatedSidebarFooter({ className, ...props }, forwardedRef) {
return (
<div
{...props}
ref={forwardedRef}
data-slot="sidebar-footer"
className={cn(
"flex shrink-0 flex-col gap-2 border-border border-t p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
className,
)}
/>
);
});
export const AnimatedSidebarGroup = forwardRef<
HTMLDivElement,
HTMLAttributes<HTMLDivElement>
>(function AnimatedSidebarGroup({ className, ...props }, forwardedRef) {
return (
<div
{...props}
ref={forwardedRef}
data-slot="sidebar-group"
className={cn("flex w-full min-w-0 flex-col px-1 py-1.5", className)}
/>
);
});
export const AnimatedSidebarGroupLabel = forwardRef<
HTMLDivElement,
HTMLAttributes<HTMLDivElement>
>(function AnimatedSidebarGroupLabel(
{ children, className, ...props },
forwardedRef,
) {
const { collapsed } = useAnimatedSidebarPanel();
return (
<div
{...props}
ref={forwardedRef}
aria-hidden={collapsed}
data-slot="sidebar-group-label"
className={cn(
"mb-1 h-7 overflow-hidden px-2 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground transition-opacity",
collapsed ? "opacity-0" : "opacity-100",
className,
)}
>
{children}
</div>
);
});
export const AnimatedSidebarGroupContent = forwardRef<
HTMLDivElement,
HTMLAttributes<HTMLDivElement>
>(function AnimatedSidebarGroupContent(
{ className, ...props },
forwardedRef,
) {
return (
<div
{...props}
ref={forwardedRef}
data-slot="sidebar-group-content"
className={cn("w-full min-w-0", className)}
/>
);
});
export const AnimatedSidebarMenu = forwardRef<
HTMLUListElement,
HTMLAttributes<HTMLUListElement>
>(function AnimatedSidebarMenu(
{ children, className, ...props },
forwardedRef,
) {
return (
<SharedLayoutBg
{...props}
ref={forwardedRef as React.Ref<HTMLElement>}
as="ul"
inset={0}
pillClassName="rounded-xl bg-muted/70"
pillContainerClassName="inset-y-auto top-0 h-9"
data-slot="sidebar-menu"
className={cn("flex w-full min-w-0 list-none flex-col gap-0.5", className)}
>
{children}
</SharedLayoutBg>
);
});
export const AnimatedSidebarMenuItem = forwardRef<
HTMLLIElement,
HTMLMotionProps<"li">
>(function AnimatedSidebarMenuItem({ className, ...props }, forwardedRef) {
return (
<motion.li
{...props}
ref={forwardedRef}
layout="position"
transition={SPRING_LAYOUT}
data-slot="sidebar-menu-item"
className={cn("relative", className)}
/>
);
});
export interface AnimatedSidebarMenuSubProps
extends Omit<HTMLMotionProps<"ul">, "children"> {
open: boolean;
children?: ReactNode;
}
export const AnimatedSidebarMenuSub = forwardRef<
HTMLUListElement,
AnimatedSidebarMenuSubProps
>(function AnimatedSidebarMenuSub(
{ open, children, className, ...props },
forwardedRef,
) {
const context = useAnimatedSidebar();
const panel = useAnimatedSidebarPanel();
return (
<AnimatePresence initial={false} mode="popLayout">
{open && !panel.collapsed ? (
<motion.ul
{...props}
ref={forwardedRef}
key="sidebar-submenu"
variants={context.reduce ? undefined : SUBMENU_VARIANTS}
initial={context.reduce ? false : "closed"}
animate={context.reduce ? { opacity: 1 } : "open"}
exit={context.reduce ? { opacity: 0 } : "closed"}
transition={context.reduce ? { duration: 0.12 } : undefined}
data-slot="sidebar-menu-sub"
className={cn(
"relative mt-1 ml-5 flex min-w-0 flex-col gap-0.5 border-border border-l pl-3",
className,
)}
>
{children}
</motion.ul>
) : null}
</AnimatePresence>
);
});
export const AnimatedSidebarMenuSubItem = forwardRef<
HTMLLIElement,
HTMLMotionProps<"li">
>(function AnimatedSidebarMenuSubItem(
{ className, ...props },
forwardedRef,
) {
return (
<motion.li
{...props}
ref={forwardedRef}
variants={SUBMENU_ITEM_VARIANTS}
data-slot="sidebar-menu-sub-item"
className={cn("relative min-w-0", className)}
/>
);
});
export interface AnimatedSidebarMenuSubButtonProps {
children: ReactNode;
icon?: ReactNode;
href?: string;
isActive?: boolean;
disabled?: boolean;
closeOnSelect?: boolean;
target?: "_blank" | "_self" | "_parent" | "_top";
rel?: string;
onSelect?: () => void;
className?: string;
}
export function AnimatedSidebarMenuSubButton({
children,
icon,
href,
isActive = false,
disabled = false,
closeOnSelect = true,
target,
rel,
onSelect,
className,
}: AnimatedSidebarMenuSubButtonProps) {
const context = useAnimatedSidebar();
const select = (
event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
) => {
if (disabled) {
event.preventDefault();
return;
}
onSelect?.();
if (context.isMobile && closeOnSelect) context.setOpenMobile(false);
};
const content = (
<>
<span
aria-hidden="true"
className="grid size-4 shrink-0 place-items-center"
>
{icon ?? <span className="size-1 rounded-full bg-current" />}
</span>
<span className="min-w-0 flex-1 truncate">{children}</span>
</>
);
const interactiveClassName = cn(
"flex min-h-8 w-full min-w-0 items-center gap-2 rounded-lg px-2 text-left text-xs outline-none",
"text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
"focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring",
isActive && "bg-muted/70 text-foreground",
disabled && "cursor-not-allowed opacity-40",
className,
);
return href ? (
<motion.a
href={href}
target={target}
rel={
rel ??
(target === "_blank" ? "noreferrer noopener" : undefined)
}
aria-current={isActive ? "page" : undefined}
aria-disabled={disabled || undefined}
tabIndex={disabled ? -1 : undefined}
onClick={select}
whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
transition={SPRING_PRESS}
className={interactiveClassName}
>
{content}
</motion.a>
) : (
<motion.button
type="button"
disabled={disabled}
aria-current={isActive ? "page" : undefined}
onClick={select}
whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
transition={SPRING_PRESS}
className={interactiveClassName}
>
{content}
</motion.button>
);
}
export interface AnimatedSidebarMenuButtonProps {
children: ReactNode;
icon?: ReactNode;
badge?: ReactNode;
href?: string;
isActive?: boolean;
ariaExpanded?: boolean;
disabled?: boolean;
closeOnSelect?: boolean;
target?: "_blank" | "_self" | "_parent" | "_top";
rel?: string;
onSelect?: () => void;
className?: string;
}
export function AnimatedSidebarMenuButton({
children,
icon,
badge,
href,
isActive = false,
ariaExpanded,
disabled = false,
closeOnSelect,
target,
rel,
onSelect,
className,
}: AnimatedSidebarMenuButtonProps) {
const context = useAnimatedSidebar();
const panel = useAnimatedSidebarPanel();
const textLabel = typeof children === "string" ? children : undefined;
const select = (
event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
) => {
if (disabled) {
event.preventDefault();
return;
}
onSelect?.();
const shouldCloseOnSelect =
closeOnSelect ?? ariaExpanded === undefined;
if (context.isMobile && shouldCloseOnSelect) {
context.setOpenMobile(false);
}
// A submenu cannot render in the icon rail, so opening one from there
// leaves its children unreachable — a pointer can still fall back to the
// rail or the shortcut, a finger has nothing. Selecting a group unfolds
// the panel that is about to hold it.
if (ariaExpanded !== undefined && panel.collapsed && !context.isMobile) {
context.setOpen(true);
}
};
const content = (
<>
{isActive ? (
<motion.span
layoutId={context.layoutId}
transition={context.reduce ? { duration: 0 } : SPRING_LAYOUT}
className="absolute inset-0 rounded-xl bg-muted"
/>
) : null}
{icon ? (
<span
aria-hidden="true"
className="relative z-10 grid size-5 shrink-0 place-items-center"
>
{icon}
</span>
) : null}
<motion.span
initial={false}
animate={{
opacity: panel.collapsed ? 0 : 1,
x: panel.collapsed ? -4 : 0,
}}
transition={
context.reduce
? REDUCED_TRANSITION
: panel.collapsed
? LABEL_EXIT_TRANSITION
: LABEL_ENTER_TRANSITION
}
aria-hidden={panel.collapsed}
className={cn(
"relative z-10 min-w-0 flex-1 truncate",
panel.collapsed && "pointer-events-none",
)}
>
{children}
</motion.span>
{badge && !panel.collapsed ? (
<span className="relative z-10 shrink-0 text-xs text-muted-foreground">
{badge}
</span>
) : null}
{ariaExpanded !== undefined ? (
<motion.span
aria-hidden="true"
initial={false}
animate={{
opacity: panel.collapsed ? 0 : 1,
rotate: ariaExpanded ? 90 : 0,
x: panel.collapsed ? 4 : 0,
}}
transition={context.reduce ? { duration: 0 } : SPRING_LAYOUT}
className="relative z-10 grid size-4 shrink-0 place-items-center text-muted-foreground"
>
<ChevronRight className="size-3.5" />
</motion.span>
) : null}
</>
);
const interactiveClassName = cn(
"relative flex min-h-9 w-full min-w-0 items-center gap-2.5 overflow-hidden rounded-xl px-3 text-left text-sm font-medium outline-none",
"text-muted-foreground transition-colors hover:text-foreground",
"focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring",
isActive && "text-foreground",
disabled && "cursor-not-allowed opacity-40",
className,
);
return href ? (
<motion.a
href={href}
target={target}
rel={
rel ??
(target === "_blank" ? "noreferrer noopener" : undefined)
}
aria-current={isActive ? "page" : undefined}
aria-expanded={ariaExpanded}
aria-disabled={disabled || undefined}
aria-label={panel.collapsed ? textLabel : undefined}
title={panel.collapsed ? textLabel : undefined}
tabIndex={disabled ? -1 : undefined}
onClick={select}
whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
transition={SPRING_PRESS}
className={interactiveClassName}
>
{content}
</motion.a>
) : (
<motion.button
type="button"
disabled={disabled}
aria-current={isActive ? "page" : undefined}
aria-expanded={ariaExpanded}
aria-label={panel.collapsed ? textLabel : undefined}
title={panel.collapsed ? textLabel : undefined}
onClick={select}
whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
transition={SPRING_PRESS}
className={interactiveClassName}
>
{content}
</motion.button>
);
}
lib/utils.ts
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
components/agents/agent-activity/activity-row.tsx
import {
Check,
Circle,
FileText,
Globe2,
ImageIcon,
MessageSquare,
PencilLine,
Search,
Sparkles,
SquareTerminal,
Wrench,
} from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
import { cn } from "@/lib/utils";
import type {
AgentActivityItem,
AgentActivitySearch,
AgentActivityStep,
AgentActivityText,
AgentActivityTool,
AgentActivityTrace,
AgentSearchResult,
} from "./types";
function StepRow({ item }: { item: AgentActivityStep }) {
const state = item.status ?? "complete";
return (
<div className="flex min-h-7 items-start gap-2.5 rounded-md px-1.5 py-1">
<span
aria-hidden="true"
className="mt-0.5 grid size-4 shrink-0 place-items-center text-muted-foreground/70"
>
{state === "complete" ? (
<Check className="size-4" strokeWidth={1.8} />
) : state === "active" ? (
<span className="relative grid size-3 place-items-center">
<motion.span
className="absolute inset-0 rounded-full bg-foreground/10"
animate={{ opacity: [0.35, 0.8, 0.35] }}
transition={{ duration: 1.5, repeat: Number.POSITIVE_INFINITY }}
/>
<span className="size-1.5 rounded-full bg-foreground/60" />
</span>
) : (
<Circle className="size-3" strokeWidth={1.5} />
)}
</span>
<span
className={cn(
"min-w-0 flex-1 leading-5",
state === "pending" ? "text-muted-foreground/55" : "text-foreground/90",
)}
>
{item.label}
</span>
{item.meta ? (
<span className="shrink-0 leading-5 text-muted-foreground/55">
{item.meta}
</span>
) : null}
</div>
);
}
function TextRow({ item }: { item: AgentActivityText }) {
return (
<div className="rounded-md px-1.5 py-1 leading-5 text-muted-foreground">
{item.content}
</div>
);
}
function SearchResultRow({
result,
}: {
result: AgentSearchResult;
}) {
const content = (
<>
<span
aria-hidden="true"
className="grid size-5 shrink-0 place-items-center text-muted-foreground"
>
{result.icon ?? <Globe2 className="size-3" strokeWidth={2} />}
</span>
<span className="min-w-0 truncate font-medium text-foreground/90">
{result.title}
</span>
{result.domain ? (
<span className="min-w-0 truncate text-muted-foreground/55">
{result.domain}
</span>
) : null}
</>
);
const className = cn(
"flex min-h-7 items-center gap-2 rounded-md px-1.5 py-1 text-left outline-none transition-colors",
result.url && "focus-visible:ring-2 focus-visible:ring-ring",
);
return result.url ? (
<a href={result.url} className={className}>
{content}
</a>
) : (
<div className={className}>{content}</div>
);
}
function SearchRow({ item }: { item: AgentActivitySearch }) {
const reduce = useReducedMotion() ?? false;
const enter = reduce ? { opacity: 1 } : { opacity: 0, y: 6 };
const visible = { opacity: 1, y: 0 };
const exit = reduce ? { opacity: 0 } : { opacity: 0, y: -3 };
const transition = reduce
? { duration: 0 }
: {
opacity: { duration: 0.18, ease: EASE_OUT },
y: SPRING_LAYOUT,
layout: SPRING_LAYOUT,
};
return (
<div className="space-y-0.5">
<div className="flex min-h-7 items-center gap-2.5 rounded-md px-1.5 py-1 text-muted-foreground">
<Search aria-hidden="true" className="size-4 shrink-0" strokeWidth={1.7} />
<span className="min-w-0 truncate">{item.query}</span>
</div>
{item.results?.length ? (
<div className="space-y-0.5 pl-4">
<AnimatePresence initial mode="popLayout">
{item.results.map((result) => (
<motion.div
layout="position"
key={result.id}
initial={enter}
animate={visible}
exit={exit}
transition={transition}
>
<SearchResultRow result={result} />
</motion.div>
))}
</AnimatePresence>
</div>
) : null}
<AnimatePresence initial>
{item.moreCount ? (
<motion.div
key="more-results"
initial={enter}
animate={visible}
exit={exit}
transition={transition}
className="px-1.5 py-1 pl-8 text-muted-foreground/55"
>
+{item.moreCount} more
</motion.div>
) : null}
</AnimatePresence>
</div>
);
}
function ActionIcon({ action }: { action: string }) {
if (action === "read") return <FileText className="size-4" />;
if (action === "edit" || action === "write") {
return <PencilLine className="size-4" />;
}
if (action === "run") return <SquareTerminal className="size-4" />;
return <Wrench className="size-4" />;
}
function ToolRow({ item }: { item: AgentActivityTool }) {
const action = item.action.charAt(0).toUpperCase() + item.action.slice(1);
return (
<div className="flex min-h-8 min-w-0 items-center gap-2.5 rounded-md px-1.5 py-0.5 leading-5">
<span
aria-hidden="true"
className="grid size-4 shrink-0 place-items-center text-muted-foreground/70"
>
<ActionIcon action={item.action} />
</span>
<span className="shrink-0 font-medium text-foreground/90">{action}</span>
<span className="min-w-0 flex-1 truncate rounded-lg bg-muted/80 px-2.5 py-1 font-mono text-xs text-muted-foreground/70">
{item.target}
</span>
{typeof item.additions === "number" || typeof item.deletions === "number" ? (
<span className="flex shrink-0 items-center gap-2 font-mono tabular-nums">
{typeof item.additions === "number" ? (
<span className="text-emerald-500">+{item.additions}</span>
) : null}
{typeof item.deletions === "number" ? (
<span className="text-rose-500">−{item.deletions}</span>
) : null}
</span>
) : null}
</div>
);
}
function TraceIcon({ kind }: { kind: AgentActivityTrace["kind"] }) {
if (kind === "thinking") return <Sparkles className="size-4" />;
if (kind === "message") return <MessageSquare className="size-4" />;
if (kind === "write") return <PencilLine className="size-4" />;
if (kind === "run") return <SquareTerminal className="size-4" />;
if (kind === "read") return <ImageIcon className="size-4" />;
return <Wrench className="size-4" />;
}
function TraceRow({ item }: { item: AgentActivityTrace }) {
return (
<div className="grid min-h-8 grid-cols-[1rem_auto_minmax(0,1fr)] items-center gap-2.5 rounded-md px-1.5 py-0.5">
<span
aria-hidden="true"
className="grid size-4 place-items-center text-muted-foreground/70"
>
{item.icon ?? <TraceIcon kind={item.kind} />}
</span>
<span className="font-medium text-foreground/90">{item.label}</span>
{item.detail ? (
<span className="min-w-0 truncate rounded-lg bg-muted/80 px-2.5 py-1 font-mono text-xs text-muted-foreground/70">
{item.detail}
</span>
) : (
<span />
)}
</div>
);
}
export function ActivityRow({ item }: { item: AgentActivityItem }) {
if (item.type === "text") return <TextRow item={item} />;
if (item.type === "search") return <SearchRow item={item} />;
if (item.type === "tool") return <ToolRow item={item} />;
if (item.type === "trace") return <TraceRow item={item} />;
return <StepRow item={item} />;
}
components/agents/agent-activity/types.ts
import type { ReactNode } from "react";
export type AgentActivityStatus = "working" | "complete";
export type AgentStepStatus = "pending" | "active" | "complete";
export interface AgentActivityStep {
id: string;
type: "step";
label: ReactNode;
status?: AgentStepStatus;
meta?: ReactNode;
}
export interface AgentActivityText {
id: string;
type: "text";
content: ReactNode;
}
export interface AgentSearchResult {
id: string;
title: ReactNode;
domain?: ReactNode;
url?: string;
icon?: ReactNode;
}
export interface AgentActivitySearch {
id: string;
type: "search";
query: ReactNode;
results?: AgentSearchResult[];
moreCount?: number;
}
export interface AgentActivityTool {
id: string;
type: "tool";
action: "read" | "edit" | "run" | (string & {});
target: ReactNode;
additions?: number;
deletions?: number;
}
export type AgentTraceKind =
| "thinking"
| "message"
| "write"
| "run"
| "read"
| (string & {});
export interface AgentActivityTrace {
id: string;
type: "trace";
kind: AgentTraceKind;
label: ReactNode;
detail?: ReactNode;
icon?: ReactNode;
}
export type AgentActivityItem =
| AgentActivityStep
| AgentActivityText
| AgentActivitySearch
| AgentActivityTool
| AgentActivityTrace;
export type AgentActivityContentType = AgentActivityItem["type"] | "mixed";
export interface AgentActivityProps {
/** Chronological activity entries. Append or update items as events stream. */
items: AgentActivityItem[];
/** Expected activity kind before the first streamed item arrives. */
contentType?: AgentActivityContentType;
/** Current run phase. Active runs always stay expanded. */
status?: AgentActivityStatus;
/** Elapsed run time, in seconds. Used by the step-only summary. */
duration?: number;
/** Controlled expanded state used after the run completes. */
open?: boolean;
/** Initial expanded state used after the run completes. */
defaultOpen?: boolean;
/** Called when the completed activity disclosure changes state. */
onOpenChange?: (open: boolean) => void;
/** Collapse the disclosure when status changes from working to complete. */
collapseOnComplete?: boolean;
/** Optional label shown while the run is active. */
activeLabel?: ReactNode;
/** Optional completed summary. Derived from the item types by default. */
summary?: ReactNode;
/** Optional renderer for the contents of the active status row. */
renderWorkingStatus?: (context: {
label: ReactNode;
duration: number;
}) => ReactNode;
/** Optional renderer for the contents before the built-in disclosure chevron. */
renderCompletedStatus?: (context: {
summary: ReactNode;
duration: number;
}) => ReactNode;
/** Maximum visible activity height before the stream begins gliding. */
maxHeight?: number;
className?: string;
contentClassName?: string;
}
components/agents/agent-disclosure.tsx
"use client";
import { motion, type HTMLMotionProps, useReducedMotion } from "motion/react";
import type { CSSProperties } from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";
export interface AgentDisclosureProps
extends Omit<HTMLMotionProps<"div">, "animate" | "initial"> {
open: boolean;
openHeight?: CSSProperties["height"];
}
/** Shared transform-only reveal for collapsible agent content. */
export function AgentDisclosure({
open,
openHeight = "auto",
className,
style,
transition,
...props
}: AgentDisclosureProps) {
const reduce = useReducedMotion() ?? false;
return (
<motion.div
{...props}
aria-hidden={!open}
inert={!open}
initial={false}
animate={
reduce
? { opacity: open ? 1 : 0 }
: {
opacity: open ? 1 : 0,
clipPath: open ? "inset(0 0 0% 0)" : "inset(0 0 100% 0)",
y: open ? 0 : -4,
}
}
transition={
transition ?? {
duration: reduce ? 0 : open ? 0.22 : 0.14,
ease: EASE_OUT,
}
}
className={cn("overflow-hidden", className)}
style={{
...style,
height: open ? openHeight : 0,
pointerEvents: open ? undefined : "none",
transformOrigin: "top",
}}
/>
);
}
lib/ease.ts
// Shared motion tokens. Easing curves mirror the CSS custom properties in
// globals.css; springs are the canonical physics used across components.
// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.
export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;
/** CSS string form of EASE_OUT for inline style transitions. */
export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";
/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
type: "spring",
stiffness: 500,
damping: 30,
mass: 0.6,
} as const;
/** Content swaps — label/icon slots trading places inside a control. */
export const SPRING_SWAP = {
type: "spring",
stiffness: 460,
damping: 30,
mass: 0.55,
} as const;
/** Overlay panel entrances — modals and sheets summoned by pointer. */
export const SPRING_PANEL = {
type: "spring",
stiffness: 420,
damping: 40,
mass: 0.5,
} as const;
/** Shared-layout glides — pills, indicators and panels morphing between positions. */
export const SPRING_LAYOUT = {
type: "spring",
stiffness: 360,
damping: 32,
mass: 0.6,
} as const;
/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
export const SPRING_MOUSE = {
stiffness: 200,
damping: 15,
mass: 0.3,
} as const;
/** Dragged handles and fills (sliders) — critically damped `useSpring` config,
* so the value follows the pointer butterily and never rebounds off an end. */
export const SPRING_GLIDE = {
stiffness: 700,
damping: 50,
mass: 0.5,
} as const;
components/motion/popover-morph.tsx
"use client";
import {
AnimatePresence,
animate,
motion,
useMotionValue,
usePresence,
useReducedMotion,
useTransform,
} from "motion/react";
import {
cloneElement,
createContext,
isValidElement,
type ReactElement,
type ReactNode,
type Ref,
useCallback,
useContext,
useEffect,
useId,
useLayoutEffect,
useMemo,
useRef,
useState,
} from "react";
import { createPortal } from "react-dom";
import { usePopoverPortalPosition } from "@/components/motion/popover-position";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";
type Side = "top" | "bottom";
type Align = "start" | "end";
type MorphContextValue = {
open: boolean;
setOpen: (open: boolean) => void;
toggle: () => void;
triggerId: string;
contentId: string;
/** The element the panel measures against — see `registerTrigger`. */
triggerRef: React.MutableRefObject<HTMLElement | null>;
registerTrigger: (node: HTMLElement | null) => void;
contentRef: React.MutableRefObject<HTMLDivElement | null>;
};
const MorphContext = createContext<MorphContextValue | null>(null);
function useMorphContext(component: string) {
const ctx = useContext(MorphContext);
if (!ctx) throw new Error(`${component} must be used within <MorphPopover>`);
return ctx;
}
export interface MorphPopoverProps {
children: ReactNode;
/** Controlled open state. */
open?: boolean;
/** Uncontrolled initial open state. */
defaultOpen?: boolean;
onOpenChange?: (open: boolean) => void;
className?: string;
}
/**
* A popover whose full-size panel reveals from the corner nearest the trigger
* on one spring, then retraces the same clip on close. Content and surface
* edges keep their size throughout. Closes on outside pointer / Escape.
* Controlled or uncontrolled.
*/
export function MorphPopover({
children,
open: controlledOpen,
defaultOpen = false,
onOpenChange,
className,
}: MorphPopoverProps) {
const baseId = useId();
const [root, setRoot] = useState<HTMLDivElement | null>(null);
const [trigger, setTrigger] = useState<HTMLElement | null>(null);
const contentRef = useRef<HTMLDivElement | null>(null);
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const controlled = controlledOpen !== undefined;
const open = controlled ? controlledOpen : internalOpen;
const setOpen = useCallback(
(next: boolean) => {
if (!controlled) setInternalOpen(next);
onOpenChange?.(next);
},
[controlled, onOpenChange],
);
const toggle = useCallback(() => setOpen(!open), [setOpen, open]);
// A trigger normally registers itself through MorphPopoverTrigger. It can't
// when something else already clones the element — a Tooltip wrapping the
// button, say — and an unregistered trigger leaves the panel with nothing to
// measure against, so it renders permanently invisible. The root boxes the
// trigger exactly (the content portals out of it), so it stands in until a
// real trigger registers, and stands in again if that one unmounts. Both are
// state, so a trigger arriving while the panel is open re-anchors it.
const anchorRef = useMemo<React.MutableRefObject<HTMLElement | null>>(
() => ({ current: trigger ?? root }),
[root, trigger],
);
// The panel is a `role="dialog"` and goes inert the moment it closes, so
// focus cannot be left sitting inside it: a dismissal hands it back to the
// trigger, the way the ARIA dialog pattern asks. A pointer dismissal takes
// the focus onward itself when it lands on something focusable — this only
// catches the case where it would otherwise be stranded. When no trigger has
// registered, the root anchor stands in only if it can actually hold focus;
// there is nowhere better than where the keyboard already is, so leave it.
const close = useCallback(() => {
setOpen(false);
const focused = document.activeElement;
const inPanel =
focused instanceof HTMLElement && contentRef.current?.contains(focused);
if (!inPanel) return;
const restore = trigger ?? (root && root.tabIndex >= 0 ? root : null);
restore?.focus();
}, [root, setOpen, trigger]);
useEffect(() => {
if (!open) return;
const onKey = (e: KeyboardEvent) => e.key === "Escape" && close();
const onPointer = (e: PointerEvent) => {
const target = e.target as Node;
if (
root &&
!root.contains(target) &&
!contentRef.current?.contains(target)
)
close();
};
window.addEventListener("keydown", onKey);
window.addEventListener("pointerdown", onPointer);
return () => {
window.removeEventListener("keydown", onKey);
window.removeEventListener("pointerdown", onPointer);
};
}, [open, root, close]);
const ctx = useMemo<MorphContextValue>(
() => ({
open,
setOpen,
toggle,
triggerId: `${baseId}-trigger`,
contentId: `${baseId}-content`,
triggerRef: anchorRef,
registerTrigger: setTrigger,
contentRef,
}),
[open, setOpen, toggle, baseId, anchorRef],
);
return (
<MorphContext.Provider value={ctx}>
<div ref={setRoot} className={cn("relative inline-flex", className)}>
{children}
</div>
</MorphContext.Provider>
);
}
export interface MorphPopoverTriggerProps {
children: ReactElement;
}
function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {
return (node: T | null) => {
for (const ref of refs) {
if (typeof ref === "function") ref(node);
else if (ref && typeof ref === "object")
(ref as React.MutableRefObject<T | null>).current = node;
}
};
}
/** Wraps a single element, toggling the popover on click. */
export function MorphPopoverTrigger({ children }: MorphPopoverTriggerProps) {
const ctx = useMorphContext("MorphPopoverTrigger");
const child = children as ReactElement<Record<string, unknown>>;
const childOnClick = child?.props?.onClick as
| ((e: unknown) => void)
| undefined;
const childRef = (child?.props as { ref?: Ref<HTMLElement> } | undefined)
?.ref;
// Register once per actual ref change, not once per open-state render.
const mergedRef = useMemo(
() => mergeRefs(childRef, ctx.registerTrigger),
[childRef, ctx.registerTrigger],
);
if (!isValidElement(children)) return children;
return cloneElement(child, {
id: ctx.triggerId,
ref: mergedRef,
onClick: (e: unknown) => {
childOnClick?.(e);
ctx.toggle();
},
"aria-haspopup": "dialog",
"aria-expanded": ctx.open,
"aria-controls": ctx.open ? ctx.contentId : undefined,
});
}
// Full-distance clip travel needs a shorter curve than SPRING_PANEL's slow
// overdamped tail. A non-bouncing spring reaches its rest within 260 ms.
const MORPH_ENTER = { type: "spring", duration: 0.26, bounce: 0 } as const;
const MORPH_EXIT = { duration: 0.2, ease: EASE_OUT } as const;
// Keep the panel and content at their final size. An inset clip reveals the
// nearest corner without scaling borders, shadows or keyboard-focus geometry.
// A full-size clip keeps content at its final coordinates without box-to-box
// scale correction. One progress value keeps clip and opacity synchronized;
// clip-path and the shadow may paint, so this is not a compositor-only morph.
function clipAt(side: Side, align: Align, radius: number, inset: number) {
return `inset(${side === "top" ? inset : 0}% ${align === "start" ? inset : 0}% ${side === "bottom" ? inset : 0}% ${align === "end" ? inset : 0}% round ${radius}px)`;
}
export interface MorphPopoverContentProps {
children: ReactNode;
side?: Side;
align?: Align;
/** Gap between trigger and panel, in px. Default 8. */
sideOffset?: number;
/** Panel corner radius, in px. Default 16. */
radius?: number;
/** Draw the surface shadow. Default true. */
shadow?: boolean;
/** Runs after the portalled surface is positioned and visible. */
onOpenAutoFocus?: (content: HTMLDivElement) => void;
className?: string;
}
export function MorphPopoverContent(props: MorphPopoverContentProps) {
const ctx = useMorphContext("MorphPopoverContent");
const [portalReady, setPortalReady] = useState(false);
useEffect(() => setPortalReady(true), []);
if (!portalReady) return null;
return createPortal(
<AnimatePresence>
{ctx.open && <MorphPopoverSurface {...props} />}
</AnimatePresence>,
document.body,
);
}
// Measurement belongs to the mounted portal session: reopening must not start
// an entrance at the previous session's coordinates before measuring this one.
function MorphPopoverSurface({
children,
side = "bottom",
align = "end",
sideOffset = 8,
radius = 16,
shadow = true,
onOpenAutoFocus,
className,
}: MorphPopoverContentProps) {
const ctx = useMorphContext("MorphPopoverContent");
const reduce = useReducedMotion() ?? false;
const [isPresent, safeToRemove] = usePresence();
const layout = usePopoverPortalPosition(
ctx.triggerRef,
ctx.contentRef,
isPresent,
);
const preferredLeft = layout
? align === "end"
? layout.trigger.left + layout.trigger.width - layout.content.width
: layout.trigger.left
: 0;
// Keep larger compositions, such as calendars, inside the viewport. Prefer
// the requested side, then use the roomier side when it cannot fit there.
const gutter = 12;
const below = layout
? Math.max(
0,
window.innerHeight -
layout.trigger.top -
layout.trigger.height -
sideOffset -
gutter,
)
: 0;
const above = layout
? Math.max(0, layout.trigger.top - sideOffset - gutter)
: 0;
const requestedSpace = side === "bottom" ? below : above;
const otherSpace = side === "bottom" ? above : below;
const resolvedSide =
layout &&
layout.content.height > requestedSpace &&
otherSpace > requestedSpace
? side === "bottom"
? "top"
: "bottom"
: side;
const availableHeight = resolvedSide === "bottom" ? below : above;
const left = layout
? Math.max(
gutter,
Math.min(
preferredLeft,
window.innerWidth - layout.content.width - gutter,
),
)
: 0;
const top = layout
? resolvedSide === "bottom"
? layout.trigger.top + layout.trigger.height + sideOffset
: Math.max(
gutter,
layout.trigger.top - layout.content.height - sideOffset,
)
: 0;
const progress = useMotionValue(0);
const clipPath = useTransform(progress, (p) =>
clipAt(resolvedSide, align, radius, 92 * (1 - p)),
);
const surfaceOpacity = useTransform(progress, [0, 0.15], [0, 1]);
// Reduced motion has no travel, so a short fade carries the whole entrance
// and exit on its own.
const fade = useMotionValue(reduce ? 0 : 1);
const ready = layout !== null;
const focusedOnOpen = useRef(false);
useEffect(() => {
if (
!ready ||
!isPresent ||
focusedOnOpen.current ||
!ctx.contentRef.current
)
return;
focusedOnOpen.current = true;
onOpenAutoFocus?.(ctx.contentRef.current);
}, [ready, isPresent, ctx.contentRef, onOpenAutoFocus]);
// `safeToRemove` is a new function on every render: AnimatePresence
// rebuilds its context each time its parent renders. Read it through a ref
// so a render during the exit (a consumer's state change, a list streaming
// in) does not restart the exit from where it got to — restarted every
// render, it would close in ever smaller steps and never report completion,
// leaving an inert, invisible panel mounted for good.
const safeToRemoveRef = useRef(safeToRemove);
useLayoutEffect(() => {
safeToRemoveRef.current = safeToRemove;
});
useEffect(() => {
if (!ready) {
if (!isPresent) safeToRemoveRef.current?.();
return;
}
const settle = () => {
if (!isPresent) safeToRemoveRef.current?.();
};
if (reduce) {
progress.jump(1);
const animation = animate(fade, isPresent ? 1 : 0, {
duration: 0.12,
onComplete: settle,
});
return () => animation.stop();
}
const animation = animate(progress, isPresent ? 1 : 0, {
...(isPresent ? MORPH_ENTER : MORPH_EXIT),
onComplete: settle,
});
return () => animation.stop();
}, [fade, progress, ready, isPresent, reduce]);
return (
<motion.div
data-morph-popover-portal=""
inert={!isPresent}
style={{
left,
top,
opacity: reduce ? fade : surfaceOpacity,
pointerEvents: isPresent ? "auto" : "none",
visibility: layout ? "visible" : "hidden",
}}
// A drop-shadow follows the clipped surface; box-shadow would be cut
// off by its own clip. Caller surface classes retain their old target.
className={cn(
"fixed z-[9999]",
shadow && "[filter:drop-shadow(0_10px_18px_rgba(0,0,0,0.14))]",
)}
>
<motion.div
ref={ctx.contentRef}
id={ctx.contentId}
role="dialog"
aria-labelledby={ctx.triggerId}
style={{
clipPath: reduce ? undefined : clipPath,
borderRadius: radius,
maxHeight: layout ? availableHeight : undefined,
overflowX: "hidden",
overflowY: "auto",
}}
className={cn(
"overflow-hidden border border-border bg-background",
className,
)}
>
{children}
</motion.div>
</motion.div>
);
}
lib/hooks/use-touch-capable.ts
"use client";
import { useEffect, useState } from "react";
/**
* Returns true on devices that can be touched, whatever else they claim.
*
* This is not the inverse of `useHoverCapable`: iPadOS Safari browses
* desktop-class and answers `(hover: hover) and (pointer: fine)` with true
* while a finger is the only input there is, so anything that treats
* hover-capable as "no touch here" strands every iPad. Gate the *touch path*
* of an interaction on this hook and leave hover-only polish on
* `useHoverCapable`, so a component that opens on hover also opens on tap.
*/
export function useTouchCapable() {
const [canTouch, setCanTouch] = useState(false);
useEffect(() => {
if (typeof window === "undefined") return;
const mq = window.matchMedia?.("(any-pointer: coarse)");
// iPadOS disguises its pointer media queries; maxTouchPoints it reports
// honestly, which is what makes it the standard iPad tell.
const update = () =>
setCanTouch(Boolean(mq?.matches) || navigator.maxTouchPoints > 0);
update();
mq?.addEventListener?.("change", update);
return () => mq?.removeEventListener?.("change", update);
}, []);
return canTouch;
}
components/agents/approval-card/types.ts
import type { ReactNode } from "react";
export type ApprovalCardStatus =
| "pending"
| "submitting"
| "approved"
| "rejected"
| "changes-requested"
| "answered";
export interface ApprovalCardOption {
value: string;
label: string;
/** Plain supporting text rendered under the label. */
description?: string;
disabled?: boolean;
}
export interface ApprovalCardQuestion {
id: string;
title: ReactNode;
description?: ReactNode;
options?: ApprovalCardOption[];
multiple?: boolean;
autoAdvance?: boolean;
allowCustom?: boolean;
customPlaceholder?: string;
}
export interface ApprovalCardAnswer {
selected: string[];
custom?: string;
}
export type ApprovalCardAnswers = Record<string, ApprovalCardAnswer>;
export interface ApprovalCardProps {
title?: ReactNode;
description?: ReactNode;
children?: ReactNode;
questions?: ApprovalCardQuestion[];
status?: ApprovalCardStatus;
answers?: ApprovalCardAnswers;
defaultAnswers?: ApprovalCardAnswers;
onAnswersChange?: (answers: ApprovalCardAnswers) => void;
step?: number;
defaultStep?: number;
onStepChange?: (step: number) => void;
onSubmit?: (answers: ApprovalCardAnswers) => void;
onApprove?: () => void;
onReject?: () => void;
onRequestChanges?: () => void;
onDismiss?: () => void;
approveLabel?: ReactNode;
submitLabel?: ReactNode;
result?: ReactNode;
className?: string;
}
components/motion/action-swap-roll.tsx
"use client";
import {
ActionSwapButton,
ActionSwapIcon,
ActionSwapText,
type ActionSwapButtonProps,
type ActionSwapIconProps,
type ActionSwapTextProps,
} from "./action-swap";
export type {
ActionSwapButtonSize,
ActionSwapButtonVariant,
ActionSwapItem,
} from "./action-swap";
export type ActionSwapRollButtonProps = Omit<ActionSwapButtonProps, "animation">;
export type ActionSwapRollTextProps = Omit<ActionSwapTextProps, "animation">;
export type ActionSwapRollIconProps = Omit<ActionSwapIconProps, "animation">;
export function ActionSwapRollButton(props: ActionSwapRollButtonProps) {
return <ActionSwapButton {...props} animation="roll" />;
}
export function ActionSwapRollText(props: ActionSwapRollTextProps) {
return <ActionSwapText {...props} animation="roll" />;
}
export function ActionSwapRollIcon(props: ActionSwapRollIconProps) {
return <ActionSwapIcon {...props} animation="roll" />;
}
components/motion/button/index.tsx
export type {
ButtonLinkProps,
ButtonProps,
ButtonSize,
ButtonVariant,
} from "./base";
export { Button, ButtonLink } from "./base";
export type { MagneticButtonProps } from "./magnetic";
export { MagneticButton } from "./magnetic";
export type { MetallicButtonProps } from "./metallic";
export { MetallicButton } from "./metallic";
export type { ButtonState, StatefulButtonProps } from "./stateful";
export { StatefulButton } from "./stateful";
components/motion/checkbox.tsx
"use client";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useId } from "react";
import { EASE_OUT, SPRING_PRESS } from "@/lib/ease";
import { cn } from "@/lib/utils";
const CHECK_PATH = "M5 13l4 4L19 7";
const INDETERMINATE_PATH = "M6 12h12";
export interface CheckboxProps {
checked: boolean;
onCheckedChange: (checked: boolean) => void;
disabled?: boolean;
indeterminate?: boolean;
label?: string;
/** Supporting text under the label, announced as the description rather than the name. */
description?: string;
className?: string;
id?: string;
"aria-label"?: string;
/** Associates an external message (e.g. a form error) with the control. */
"aria-describedby"?: string;
}
export function Checkbox({
checked,
onCheckedChange,
disabled,
indeterminate,
label,
description,
className,
id: idProp,
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedBy,
}: CheckboxProps) {
const autoId = useId();
const id = idProp ?? autoId;
const reduce = useReducedMotion();
const showMark = checked || indeterminate;
const path = indeterminate ? INDETERMINATE_PATH : CHECK_PATH;
const descriptionId = description ? `${id}-description` : undefined;
// The wrapping <label> would fold the description into the name, so name from the label text alone.
const labelId = description && label && !ariaLabel ? `${id}-label` : undefined;
const describedBy =
[ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || undefined;
return (
<label
htmlFor={id}
className={cn(
"inline-flex gap-3",
description ? "items-start" : "items-center",
disabled ? "cursor-not-allowed" : "cursor-pointer",
className,
)}
>
<motion.button
id={id}
type="button"
role="checkbox"
aria-checked={indeterminate ? "mixed" : checked}
aria-label={ariaLabel}
aria-labelledby={labelId}
aria-describedby={describedBy}
disabled={disabled}
onClick={() => !disabled && onCheckedChange(!checked)}
whileTap={reduce || disabled ? undefined : { scale: 0.92 }}
transition={SPRING_PRESS}
data-state={
checked ? "checked" : indeterminate ? "indeterminate" : "unchecked"
}
className={cn(
"inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 outline-none transition-colors duration-200",
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
"disabled:cursor-not-allowed disabled:opacity-60",
showMark
? "border-primary bg-primary text-primary-foreground"
: "border-muted-foreground/50 bg-background hover:border-muted-foreground",
)}
>
<AnimatePresence initial={false}>
{showMark ? (
<motion.svg
key={indeterminate ? "indeterminate" : "checked"}
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={3}
strokeLinecap="round"
strokeLinejoin="round"
initial={reduce ? { opacity: 1 } : { opacity: 0, scale: 0.5 }}
animate={reduce ? { opacity: 1 } : { opacity: 1, scale: 1 }}
exit={
reduce
? { opacity: 0 }
: { opacity: 0, scale: 0.5, filter: "blur(4px)" }
}
transition={
reduce ? { duration: 0 } : { duration: 0.16, ease: EASE_OUT }
}
aria-hidden
>
<title>{indeterminate ? "Partially selected" : "Selected"}</title>
<motion.path
d={path}
initial={reduce ? { pathLength: 1 } : { pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={
reduce
? { duration: 0 }
: {
duration: indeterminate ? 0.2 : 0.3,
ease: EASE_OUT,
delay: 0.04,
}
}
/>
</motion.svg>
) : null}
</AnimatePresence>
</motion.button>
{label || description ? (
<span className={cn("flex min-w-0 flex-col gap-0.5 select-none", disabled && "opacity-60")}>
{label ? (
<span
id={labelId}
// Geist sits low in a 20px line; a 16px line lifts the text onto the control.
className={cn("text-sm text-foreground", description && "leading-4")}
>
{label}
</span>
) : null}
{description ? (
<span id={descriptionId} className="text-xs text-muted-foreground">
{description}
</span>
) : null}
</span>
) : null}
</label>
);
}
components/motion/input.tsx
"use client";
import {
AnimatePresence,
animate,
motion,
useReducedMotion,
} from "motion/react";
import {
forwardRef,
useEffect,
useId,
useRef,
useState,
type InputHTMLAttributes,
type ReactNode,
} from "react";
import { cn } from "@/lib/utils";
export type InputClassNames = {
root?: string;
label?: string;
field?: string;
input?: string;
leftIcon?: string;
rightIcon?: string;
successIcon?: string;
errorMessage?: string;
};
export interface InputProps extends Omit<
InputHTMLAttributes<HTMLInputElement>,
"value" | "defaultValue" | "onChange"
> {
label?: string;
value?: string;
defaultValue?: string;
onChange?: (value: string) => void;
/** Truthy error triggers a shake, red border and (if a string) a message. */
error?: string | boolean;
/** Reserve one message line so validation does not shift nearby content. */
reserveErrorLine?: boolean;
success?: boolean;
leftIcon?: ReactNode;
rightIcon?: ReactNode;
className?: string;
classNames?: InputClassNames;
}
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
{
label,
value: valueProp,
defaultValue,
onChange,
onFocus,
onBlur,
error,
reserveErrorLine = false,
success,
leftIcon,
rightIcon,
className,
classNames,
disabled,
id: idProp,
type,
...rest
},
ref,
) {
const reactId = useId();
const id = idProp ?? reactId;
const reduce = useReducedMotion();
const controlled = valueProp !== undefined;
const [internal, setInternal] = useState(defaultValue ?? "");
const value = controlled ? (valueProp ?? "") : internal;
const [focused, setFocused] = useState(false);
const fieldRef = useRef<HTMLDivElement>(null);
const hasError = Boolean(error);
const errorMessage = typeof error === "string" ? error : null;
// Right edge shows the success check, otherwise the caller's right icon.
const rightSlot = success ? null : rightIcon;
// Shake the field when an error appears.
useEffect(() => {
if (!fieldRef.current || reduce || !hasError) return;
animate(
fieldRef.current,
{ x: [0, -6, 6, -4, 4, -2, 0] },
{ duration: 0.45 },
);
}, [hasError, reduce]);
const handleChange = (next: string) => {
if (!controlled) setInternal(next);
onChange?.(next);
};
return (
<div
className={cn("flex flex-col gap-1.5", className, classNames?.root)}
>
{label ? (
<label
htmlFor={id}
className={cn(
"px-1 text-sm font-medium text-foreground",
classNames?.label,
)}
>
{label}
</label>
) : null}
<div
ref={fieldRef}
data-state={
hasError
? "error"
: success
? "success"
: focused
? "focused"
: "idle"
}
className={cn(
"relative h-11 overflow-hidden rounded-full border transition-colors duration-200",
"border-border",
focused && !hasError && "border-foreground/40 ring-2 ring-ring/40",
hasError && "border-destructive ring-2 ring-destructive/25",
disabled && "opacity-60",
classNames?.field,
)}
>
{leftIcon ? (
<span
className={cn(
"pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-muted-foreground [&_svg]:h-4 [&_svg]:w-4",
classNames?.leftIcon,
)}
>
{leftIcon}
</span>
) : null}
<input
ref={ref}
id={id}
type={type}
value={value}
disabled={disabled}
aria-invalid={hasError || undefined}
aria-describedby={errorMessage ? `${id}-error` : undefined}
{...rest}
onChange={(e) => handleChange(e.target.value)}
onFocus={(event) => {
setFocused(true);
onFocus?.(event);
}}
onBlur={(event) => {
setFocused(false);
onBlur?.(event);
}}
className={cn(
"peer h-full w-full bg-transparent text-base leading-6 text-foreground caret-foreground outline-none",
"placeholder:text-muted-foreground/60",
leftIcon ? "pl-10" : "pl-3.5",
rightSlot || success ? "pr-10" : "pr-3.5",
disabled && "cursor-not-allowed",
classNames?.input,
)}
/>
{success ? (
<motion.svg
viewBox="0 0 24 24"
fill="none"
className={cn(
"absolute right-3.5 top-1/2 h-5 w-5 -translate-y-1/2 text-(--color-success)",
classNames?.successIcon,
)}
>
<motion.path
d="M5 12.5l4.5 4.5L19 7.5"
stroke="currentColor"
strokeWidth={2.5}
strokeLinecap="round"
strokeLinejoin="round"
initial={reduce ? { pathLength: 1 } : { pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 0.35, ease: "easeOut" }}
/>
</motion.svg>
) : rightSlot ? (
<span
className={cn(
"absolute right-0 top-0 flex h-full items-center text-muted-foreground [&_button]:grid [&_button]:size-11 [&_button]:place-items-center [&_svg]:h-4 [&_svg]:w-4",
classNames?.rightIcon,
)}
>
{rightSlot}
</span>
) : null}
</div>
<div className={reserveErrorLine ? "min-h-4" : "contents"}>
<AnimatePresence initial={false}>
{errorMessage ? (
<motion.p
id={`${id}-error`}
role="alert"
initial={
reduce
? { opacity: 0 }
: { opacity: 0, y: -4, filter: "blur(4px)" }
}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
exit={
reduce
? { opacity: 0 }
: { opacity: 0, y: -4, filter: "blur(4px)" }
}
transition={{ duration: 0.2 }}
className={cn(
"px-1 text-xs text-destructive",
classNames?.errorMessage,
)}
>
{errorMessage}
</motion.p>
) : null}
</AnimatePresence>
</div>
</div>
);
});
components/motion/radio.tsx
"use client";
import { motion, MotionConfig, useReducedMotion } from "motion/react";
import {
createContext,
useCallback,
useContext,
useId,
useMemo,
useState,
type ReactNode,
} from "react";
import { SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease";
import { cn } from "@/lib/utils";
type RadioCtx = {
value: string;
setValue: (value: string) => void;
layoutId: string;
};
const RadioCtx = createContext<RadioCtx | null>(null);
function useRadioGroup() {
const ctx = useContext(RadioCtx);
if (!ctx) {
throw new Error("RadioGroupItem must be used inside <RadioGroup>");
}
return ctx;
}
export interface RadioGroupProps {
value?: string;
defaultValue?: string;
onValueChange?: (value: string) => void;
children: ReactNode;
className?: string;
orientation?: "vertical" | "horizontal";
}
export function RadioGroup({
value,
defaultValue = "",
onValueChange,
children,
className,
orientation = "vertical",
}: RadioGroupProps) {
const [internal, setInternal] = useState(defaultValue);
const layoutId = useId();
const reduce = useReducedMotion();
const controlled = value !== undefined;
const current = controlled ? value : internal;
const setValue = useCallback(
(next: string) => {
if (!controlled) setInternal(next);
onValueChange?.(next);
},
[controlled, onValueChange],
);
const contextValue = useMemo(
() => ({ value: current, setValue, layoutId }),
[current, layoutId, setValue],
);
return (
<MotionConfig transition={reduce ? { duration: 0 } : SPRING_LAYOUT}>
<RadioCtx.Provider value={contextValue}>
<div
role="radiogroup"
className={cn(
"flex gap-3",
orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
className,
)}
>
{children}
</div>
</RadioCtx.Provider>
</MotionConfig>
);
}
export interface RadioGroupItemProps {
value: string;
label?: string;
/** Supporting text under the label, announced as the description rather than the name. */
description?: string;
disabled?: boolean;
className?: string;
id?: string;
}
export function RadioGroupItem({
value,
label,
description,
disabled,
className,
id: idProp,
}: RadioGroupItemProps) {
const { value: groupValue, setValue, layoutId } = useRadioGroup();
const autoId = useId();
const id = idProp ?? autoId;
const reduce = useReducedMotion();
const selected = groupValue === value;
const descriptionId = description ? `${id}-description` : undefined;
// The wrapping <label> would fold the description into the name, so name from the label text alone.
const labelId = description && label ? `${id}-label` : undefined;
return (
<label
htmlFor={id}
className={cn(
"inline-flex gap-3",
description ? "items-start" : "items-center",
disabled ? "cursor-not-allowed" : "cursor-pointer",
className,
)}
>
<motion.button
id={id}
type="button"
role="radio"
aria-checked={selected}
aria-labelledby={labelId}
aria-describedby={descriptionId}
disabled={disabled}
onClick={() => !disabled && setValue(value)}
whileTap={reduce || disabled ? undefined : { scale: 0.92 }}
transition={SPRING_PRESS}
data-state={selected ? "checked" : "unchecked"}
className={cn(
"relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 outline-none transition-colors duration-200",
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
"disabled:cursor-not-allowed disabled:opacity-60",
selected
? "border-primary"
: "border-muted-foreground/50 hover:border-muted-foreground",
)}
>
{selected ? (
<motion.span
layoutId={layoutId}
className="absolute inset-1 rounded-full bg-primary"
transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
/>
) : null}
</motion.button>
{label || description ? (
<span className={cn("flex min-w-0 flex-col gap-0.5 select-none", disabled && "opacity-60")}>
{label ? (
<span
id={labelId}
// Geist sits low in a 20px line; a 16px line lifts the text onto the control.
className={cn("text-sm text-foreground", description && "leading-4")}
>
{label}
</span>
) : null}
{description ? (
<span id={descriptionId} className="text-xs text-muted-foreground">
{description}
</span>
) : null}
</span>
) : null}
</label>
);
}
components/agents/agent-code.tsx
"use client";
import {
type CSSProperties,
Fragment,
useEffect,
useState,
} from "react";
import { createHighlighter, type Highlighter } from "shiki";
import { cn } from "@/lib/utils";
export type AgentCodeLanguage =
| "bash"
| "diff"
| "json"
| "text"
| "tsx"
| "typescript";
export interface AgentCodeToken {
content: string;
offset: number;
light?: string;
dark?: string;
}
export type AgentCodeTokenLines = AgentCodeToken[][];
export interface AgentCodeProps {
code: string;
language?: AgentCodeLanguage;
className?: string;
}
export interface AgentCodeLineProps {
code: string;
tokens?: AgentCodeToken[];
className?: string;
}
const LIGHT_THEME = "github-light-high-contrast";
const DARK_THEME = "github-dark-high-contrast";
let agentCodeHighlighter: Promise<Highlighter> | null = null;
const tokenCache = new Map<string, AgentCodeTokenLines>();
function getAgentCodeHighlighter() {
if (!agentCodeHighlighter) {
agentCodeHighlighter = createHighlighter({
themes: [LIGHT_THEME, DARK_THEME],
langs: ["bash", "diff", "json", "tsx", "typescript"],
});
}
return agentCodeHighlighter;
}
function tokenCacheKey(code: string, language: AgentCodeLanguage) {
return `${language}\u0000${code}`;
}
export function useAgentCodeTokens(
code: string,
language: AgentCodeLanguage,
) {
const key = tokenCacheKey(code, language);
const cached = tokenCache.get(key);
const [result, setResult] = useState<{
key: string;
code: string;
language: AgentCodeLanguage;
lines: AgentCodeTokenLines;
} | null>(cached ? { key, code, language, lines: cached } : null);
useEffect(() => {
const current = tokenCache.get(key);
if (current) {
setResult({ key, code, language, lines: current });
return;
}
let cancelled = false;
getAgentCodeHighlighter().then((highlighter) => {
if (cancelled) return;
const lines = highlighter
.codeToTokensWithThemes(code, {
lang: language,
themes: {
light: LIGHT_THEME,
dark: DARK_THEME,
},
})
.map((line) =>
line.map((token) => ({
content: token.content,
offset: token.offset,
light: token.variants.light?.color,
dark: token.variants.dark?.color,
})),
);
tokenCache.set(key, lines);
setResult({ key, code, language, lines });
});
return () => {
cancelled = true;
};
}, [code, key, language]);
if (result?.key === key) return result.lines;
if (result?.language === language && code.startsWith(result.code)) {
return result.lines;
}
return null;
}
export function AgentCodeLine({
code,
tokens,
className,
}: AgentCodeLineProps) {
return (
<span className={className}>
{tokens
? tokens.map((token) => (
<span
key={`${token.offset}-${token.content}`}
style={
{
"--agent-code-light": token.light ?? "currentColor",
"--agent-code-dark": token.dark ?? token.light ?? "currentColor",
} as CSSProperties
}
className="text-[var(--agent-code-light)] dark:text-[var(--agent-code-dark)]"
>
{token.content}
</span>
))
: code}
</span>
);
}
export function AgentCode({
code,
language = "bash",
className,
}: AgentCodeProps) {
const tokens = useAgentCodeTokens(code, language);
let offset = 0;
const lines = code.split("\n").map((content) => {
const line = { content, offset };
offset += content.length + 1;
return line;
});
return (
<pre
className={cn(
"m-0 overflow-x-auto whitespace-pre font-mono text-xs leading-5 text-foreground/85",
className,
)}
>
<code>
{lines.map((line, index) => (
<Fragment key={line.offset}>
<AgentCodeLine code={line.content} tokens={tokens?.[index]} />
{index < lines.length - 1 ? "\n" : null}
</Fragment>
))}
</code>
</pre>
);
}
lib/hooks/use-hover-capable.ts
"use client";
import { useEffect, useState } from "react";
/**
* Returns true only on devices that have a true hover (mouse / trackpad).
* Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere
* — gate hover-only effects (scale lifts, magnetic pulls) behind this.
*/
export function useHoverCapable() {
const [canHover, setCanHover] = useState(false);
useEffect(() => {
if (typeof window === "undefined" || !window.matchMedia) return;
const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
const update = () => setCanHover(mq.matches);
update();
mq.addEventListener?.("change", update);
return () => mq.removeEventListener?.("change", update);
}, []);
return canHover;
}
components/motion/text-shimmer.tsx
import { cn } from "@/lib/utils";
import type { ElementType, ReactNode } from "react";
import {
TEXT_SHIMMER_CLASS_NAME,
TEXT_SHIMMER_KEYFRAMES,
textShimmerStyle,
} from "@/lib/text-shimmer";
export interface TextShimmerProps {
children: ReactNode;
as?: ElementType;
duration?: number;
className?: string;
}
export function TextShimmer({ children, as: Comp = "span", duration = 2.5, className }: TextShimmerProps) {
return (
<>
<style>
{TEXT_SHIMMER_KEYFRAMES}
</style>
<Comp
style={textShimmerStyle(duration)}
className={cn(
"inline-block",
TEXT_SHIMMER_CLASS_NAME,
className,
)}
>
{children}
</Comp>
</>
);
}
components/agents/message-context.tsx
"use client";
import { createContext } from "react";
export type MessageSide = "start" | "end";
export const MessageSideContext = createContext<MessageSide | undefined>(
undefined,
);
components/motion/preview-rail.tsx
"use client";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
type MouseEvent,
type PointerEvent,
type ReactNode,
useCallback,
useId,
useRef,
useState,
} from "react";
import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
import { useDismiss } from "@/lib/hooks/use-dismiss";
import { useHoverGesture } from "@/lib/hooks/use-hover-gesture";
import { useTapGesture } from "@/lib/hooks/use-tap-gesture";
import { cn } from "@/lib/utils";
export interface PreviewRailItem {
id: string;
label: string;
ariaLabel?: string;
description?: ReactNode;
href?: string;
target?: "_blank" | "_self" | "_parent" | "_top";
rel?: string;
}
export interface PreviewRailProps {
items: PreviewRailItem[];
label?: string;
orientation?: "vertical" | "horizontal";
activeId?: string;
defaultActiveId?: string;
onActiveChange?: (id: string) => void;
onItemSelect?: (item: PreviewRailItem) => void;
renderPreview?: (item: PreviewRailItem) => ReactNode;
showPreview?: boolean;
previewSide?: "before" | "after";
highlightActive?: boolean;
itemSize?: number;
children?: ReactNode;
className?: string;
railClassName?: string;
previewContainerClassName?: string;
previewClassName?: string;
}
function DefaultPreview({ item }: { item: PreviewRailItem }) {
return (
<div
data-slot="preview-rail-card"
className="rounded-2xl border border-border bg-card p-4 shadow-sm"
>
<p
data-slot="preview-rail-title"
className="font-medium text-card-foreground"
>
{item.label}
</p>
{item.description ? (
<div
data-slot="preview-rail-description"
className="mt-1 text-sm leading-6 text-muted-foreground"
>
{item.description}
</div>
) : null}
</div>
);
}
export function PreviewRail({
items,
label = "Section navigation",
orientation = "vertical",
activeId,
defaultActiveId,
onActiveChange,
onItemSelect,
renderPreview,
showPreview = true,
previewSide = "after",
highlightActive = false,
itemSize = 24,
children,
className,
railClassName,
previewContainerClassName,
previewClassName,
}: PreviewRailProps) {
const uid = useId();
const reduce = useReducedMotion();
const rootRef = useRef<HTMLDivElement>(null);
const [internalActiveId, setInternalActiveId] = useState(
defaultActiveId ?? items[0]?.id ?? "",
);
const [hoveredId, setHoveredId] = useState<string | null>(null);
// A finger cannot hover, so a tap lights the tick instead. Kept apart from
// the hovered one: they end in different ways, and a stray mouse move must
// not clear a tick the keyboard or a tap chose.
const [pinnedId, setPinnedId] = useState<string | null>(null);
const [focusedId, setFocusedId] = useState<string | null>(null);
// A click carries no pointerType, so the pointerdown before it is what says
// whether the activation was a tap. Keyboard activation has none at all.
const tap = useTapGesture<boolean>();
const hover = useHoverGesture();
const clearPinned = useCallback(() => setPinnedId(null), []);
// The next tap outside the rail stands in for the pointer leaving it. The
// card is a preview, so that tap passes through to whatever it landed on.
useDismiss(pinnedId !== null, clearPinned, rootRef);
const requestedActiveId = activeId ?? internalActiveId;
const selectedId = items.some((item) => item.id === requestedActiveId)
? requestedActiveId
: (items[0]?.id ?? "");
const displayedId = hoveredId ?? pinnedId ?? focusedId ?? "";
const highlightedId = displayedId || (highlightActive ? selectedId : "");
const displayedIndex = items.findIndex((item) => item.id === highlightedId);
const rowTemplate = items.length
? `repeat(${items.length}, ${itemSize}px)`
: undefined;
const isHorizontal = orientation === "horizontal";
const selectItem = (id: string) => {
if (activeId === undefined) setInternalActiveId(id);
onActiveChange?.(id);
};
return (
<motion.div
layoutRoot
ref={rootRef}
onBlur={(event) => {
// Both tick sources leave with the focus: a tap does not always land
// focus, but when it does, tabbing away must not strand the card.
if (!event.currentTarget.contains(event.relatedTarget)) {
setFocusedId(null);
setPinnedId(null);
}
}}
className={cn(
"isolate relative flex w-full overflow-visible",
isHorizontal
? "min-h-64 flex-col items-center justify-center"
: "min-h-80",
className,
)}
>
<nav
aria-label={label}
onPointerLeave={(event) => {
// A touch pointer leaves on lift, which would clear the tick the tap
// just chose — that one is cleared by the outside tap instead.
if (hover.leave(event)) setHoveredId(null);
}}
style={
isHorizontal
? { gridTemplateColumns: rowTemplate }
: { gridTemplateRows: rowTemplate }
}
className={cn(
"relative z-10 grid shrink-0",
isHorizontal
? "h-12 w-fit max-w-full self-center justify-center"
: "w-12 content-center",
railClassName,
)}
>
{items.map((item, index) => {
const selected = item.id === selectedId;
const highlighted = item.id === highlightedId;
const distance =
displayedIndex < 0 ? Number.POSITIVE_INFINITY : Math.abs(index - displayedIndex);
const scale = highlighted
? 1
: distance === 1
? 0.68
: distance === 2
? 0.44
: 0.25;
const itemContent = (
<>
<motion.span
data-slot="preview-rail-tick"
aria-hidden="true"
animate={isHorizontal ? { scaleY: scale } : { scaleX: scale }}
transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
className={cn(
"block bg-current",
isHorizontal
? "h-12 w-0.5 origin-bottom"
: "h-0.5 w-12 origin-left",
highlighted ? "text-foreground" : undefined,
)}
/>
</>
);
const sharedClassName = cn(
"relative flex text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
isHorizontal
? "h-12 w-6 items-end justify-center"
: "h-6 w-12 items-center",
);
const sharedStyle = isHorizontal
? { width: itemSize }
: { height: itemSize };
const handlePointerEnter = (event: PointerEvent<HTMLElement>) => {
if (hover.enter(event)) setHoveredId(item.id);
};
const handlePointerDown = (event: PointerEvent<HTMLElement>) => {
tap.start(event, pinnedId === item.id);
setFocusedId(null);
};
// A gesture the platform takes away sends no click, and a key press
// starts an activation that never had a pointer behind it: either
// one leaves a record the next click would read as a tap of its own.
const dropGesture = () => tap.drop();
const handleFocus = (currentTarget: HTMLElement) => {
if (currentTarget.matches(":focus-visible")) {
setFocusedId(item.id);
}
};
const handleSelect = (event: MouseEvent<HTMLElement>) => {
const gesture = tap.take();
const tapped =
gesture !== null && gesture.pointerType !== "mouse";
if (tapped) {
// A link would otherwise show its preview and leave the page in
// the same tap, so the card is never read: the first tap lights
// the tick, the second follows the link.
if (item.href && !gesture.state) {
event.preventDefault();
setPinnedId(item.id);
return;
}
setPinnedId(item.id);
}
selectItem(item.id);
onItemSelect?.(item);
};
return item.href ? (
<a
key={item.id}
data-slot="preview-rail-item"
href={item.href}
target={item.target}
rel={
item.rel ??
(item.target === "_blank" ? "noreferrer noopener" : undefined)
}
aria-label={item.ariaLabel ?? item.label}
aria-current={selected ? "page" : undefined}
onPointerEnter={handlePointerEnter}
onPointerDown={handlePointerDown}
onPointerCancel={dropGesture}
onKeyDown={dropGesture}
onFocus={(event) => handleFocus(event.currentTarget)}
onClick={handleSelect}
style={sharedStyle}
className={sharedClassName}
>
{itemContent}
</a>
) : (
<button
key={item.id}
data-slot="preview-rail-item"
type="button"
aria-label={item.ariaLabel ?? item.label}
aria-current={selected ? "location" : undefined}
onPointerEnter={handlePointerEnter}
onPointerDown={handlePointerDown}
onPointerCancel={dropGesture}
onKeyDown={dropGesture}
onFocus={(event) => handleFocus(event.currentTarget)}
onClick={handleSelect}
style={sharedStyle}
className={sharedClassName}
>
{itemContent}
</button>
);
})}
</nav>
{showPreview ? (
<div
aria-hidden="true"
style={
isHorizontal
? { gridTemplateColumns: rowTemplate }
: { gridTemplateRows: rowTemplate }
}
className={cn(
"pointer-events-none absolute z-50 grid",
isHorizontal
? "top-1/2 left-1/2 h-5 w-fit max-w-full -translate-x-1/2 -translate-y-1/2 justify-center"
: previewSide === "before"
? "inset-y-0 right-16 left-4 content-center"
: "inset-y-0 right-4 left-16 content-center",
previewContainerClassName,
)}
>
{items.map((item) => (
<div
key={item.id}
style={
isHorizontal ? { width: itemSize } : { height: itemSize }
}
className={cn(
"relative flex items-center",
isHorizontal ? "justify-center" : undefined,
)}
>
{item.id === displayedId ? (
<div
className={cn(
isHorizontal
? "absolute bottom-12 left-1/2 w-72 -translate-x-1/2"
: cn(
"w-full max-w-sm",
previewSide === "before" && "ml-auto",
),
previewClassName,
)}
>
<motion.div
layoutId={`preview-rail-card-${uid}`}
transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
>
<AnimatePresence mode="wait" initial={false}>
<motion.div
key={item.id}
initial={
reduce
? { opacity: 0 }
: { opacity: 0, y: 4, filter: "blur(6px)" }
}
animate={
reduce
? { opacity: 1 }
: { opacity: 1, y: 0, filter: "blur(0px)" }
}
exit={
reduce
? { opacity: 0 }
: {
opacity: 0,
y: -2,
filter: "blur(4px)",
transition: {
duration: 0.12,
ease: EASE_OUT,
},
}
}
transition={{
duration: reduce ? 0 : 0.18,
ease: EASE_OUT,
}}
>
{renderPreview ? (
renderPreview(item)
) : (
<DefaultPreview item={item} />
)}
</motion.div>
</AnimatePresence>
</motion.div>
</div>
) : null}
</div>
))}
</div>
) : null}
{children ? (
<div className="min-h-0 min-w-0 flex-1">{children}</div>
) : null}
</motion.div>
);
}
components/motion/select.tsx
"use client";
import { Check, ChevronDown } from "lucide-react";
import {
animate,
type MotionValue,
motion,
useMotionValue,
useMotionValueEvent,
useReducedMotion,
useTransform,
type Variants,
} from "motion/react";
import {
createContext,
type ReactNode,
useCallback,
useContext,
useEffect,
useId,
useLayoutEffect,
useMemo,
useRef,
useState,
} from "react";
import { EASE_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";
// One progress value drives the surface, gap, corners and chevron. This short
// spring suits the full reveal distance; each reader clamps its small internal
// overshoot, so all visible endpoints settle together. Rows share a short
// reveal so long lists have no late entries.
const UNFOLD_SPRING = {
type: "spring",
visualDuration: 0.2,
bounce: 0.12,
} as const;
// Exits are faster than entrances: the panel folds back on a short ease.
const UNFOLD_EXIT = { duration: 0.2, ease: EASE_OUT } as const;
const RADIUS = 12;
// How far the open panel sits from the trigger once it has pulled away.
const GAP = 8;
// The surface starts as a thin lip flush against the trigger's edge.
const LIP = 8;
const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
const ITEM_VARIANTS: Variants = {
// A shared short reveal keeps late rows in long, scrolled lists ready with
// the surface. Per-index staggering can delay visible rows by over a second.
hidden: { opacity: 0, y: -4, transition: { duration: 0.08, ease: EASE_OUT } },
show: { opacity: 1, y: 0, transition: { duration: 0.12, ease: EASE_OUT } },
};
type Placement = "bottom" | "top";
interface SelectContextValue {
value: string | undefined;
open: boolean;
setOpen: (open: boolean) => void;
select: (value: string) => void;
register: (value: string, label: string) => void;
unregister: (value: string) => void;
labelFor: (value: string | undefined) => string | undefined;
reduce: boolean;
progress: MotionValue<number>;
triggerId: string;
listId: string;
disabled: boolean;
placement: Placement;
setPlacement: (p: Placement) => void;
}
const SelectContext = createContext<SelectContextValue | null>(null);
function useSelectContext(component: string) {
const ctx = useContext(SelectContext);
if (!ctx) throw new Error(`${component} must be used within <Select>`);
return ctx;
}
export interface SelectProps {
value?: string;
defaultValue?: string;
onValueChange?: (value: string) => void;
/**
* Controlled open state of the panel. A layout that stacks selects can hold
* this to keep exactly one panel open — the panel is absolutely positioned
* inside its field, so two open at once paint over each other's options.
*/
open?: boolean;
/** Uncontrolled initial open state. Default false. */
defaultOpen?: boolean;
/**
* Fires whenever the panel opens or closes. The panel is absolutely
* positioned inside the field, so a layout that stacks selects has to know
* which one is open to paint it above its neighbours.
*/
onOpenChange?: (open: boolean) => void;
disabled?: boolean;
className?: string;
children: ReactNode;
}
export function Select({
value,
defaultValue,
onValueChange,
open: openProp,
defaultOpen = false,
onOpenChange,
disabled = false,
className,
children,
}: SelectProps) {
const reduce = useReducedMotion() ?? false;
const baseId = useId();
const rootRef = useRef<HTMLDivElement>(null);
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const [internal, setInternal] = useState(defaultValue);
const [labels, setLabels] = useState<Map<string, string>>(new Map());
const [placement, setPlacement] = useState<Placement>("bottom");
const controlled = value !== undefined;
const current = controlled ? value : internal;
const openControlled = openProp !== undefined;
const open = openControlled ? openProp : internalOpen;
const progress = useMotionValue(open ? 1 : 0);
const setOpen = useCallback(
(next: boolean) => {
if (!openControlled) setInternalOpen(next);
onOpenChange?.(next);
},
[onOpenChange, openControlled],
);
const select = useCallback(
(next: string) => {
if (!controlled) setInternal(next);
onValueChange?.(next);
setOpen(false);
},
[controlled, onValueChange, setOpen],
);
const register = useCallback((v: string, label: string) => {
setLabels((m) => (m.get(v) === label ? m : new Map(m).set(v, label)));
}, []);
const unregister = useCallback((v: string) => {
setLabels((m) => {
if (!m.has(v)) return m;
const next = new Map(m);
next.delete(v);
return next;
});
}, []);
// Reduced motion has no travel, so the progress only carries a short fade.
useEffect(() => {
const animation = animate(
progress,
open ? 1 : 0,
reduce ? { duration: 0.12 } : open ? UNFOLD_SPRING : UNFOLD_EXIT,
);
return () => animation.stop();
}, [open, progress, reduce]);
// close on outside pointer / escape
useEffect(() => {
if (!open) return;
const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
const onPointer = (e: PointerEvent) => {
if (rootRef.current && !rootRef.current.contains(e.target as Node))
setOpen(false);
};
window.addEventListener("keydown", onKey);
window.addEventListener("pointerdown", onPointer);
return () => {
window.removeEventListener("keydown", onKey);
window.removeEventListener("pointerdown", onPointer);
};
}, [open, setOpen]);
const ctx = useMemo<SelectContextValue>(
() => ({
value: current,
open,
setOpen,
select,
register,
unregister,
labelFor: (v) => (v === undefined ? undefined : labels.get(v)),
reduce,
progress,
triggerId: `${baseId}-trigger`,
listId: `${baseId}-list`,
disabled,
placement,
setPlacement,
}),
[
current,
open,
setOpen,
select,
register,
unregister,
labels,
reduce,
progress,
baseId,
disabled,
placement,
],
);
return (
<SelectContext.Provider value={ctx}>
<div ref={rootRef} className={cn("relative", className)}>
{children}
</div>
</SelectContext.Provider>
);
}
export interface SelectTriggerProps {
className?: string;
children: ReactNode;
}
export function SelectTrigger({ className, children }: SelectTriggerProps) {
const ctx = useSelectContext("SelectTrigger");
const isTop = ctx.placement === "top";
// The edge facing the panel flattens while the panel is attached to it and
// rounds back as the panel pulls away — the two pinch apart — on the same
// curve the panel moves on. The far edge stays rounded.
const nearRadius = useTransform(
ctx.progress,
[0, 0.2, 0.4, 1],
[RADIUS, 0, 0, RADIUS],
);
const rotate = useTransform(ctx.progress, (p) =>
ctx.reduce ? (ctx.open ? 180 : 0) : Math.min(1, Math.max(0, p)) * 180,
);
return (
<motion.button
type="button"
id={ctx.triggerId}
disabled={ctx.disabled}
aria-haspopup="listbox"
aria-expanded={ctx.open}
aria-controls={ctx.listId}
onClick={() => ctx.setOpen(!ctx.open)}
style={{
borderTopLeftRadius: ctx.reduce || !isTop ? RADIUS : nearRadius,
borderTopRightRadius: ctx.reduce || !isTop ? RADIUS : nearRadius,
borderBottomLeftRadius: ctx.reduce || isTop ? RADIUS : nearRadius,
borderBottomRightRadius: ctx.reduce || isTop ? RADIUS : nearRadius,
}}
className={cn(
"relative z-10 flex w-full items-center justify-between gap-2 border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition-colors",
"hover:border-(--color-border-strong) focus-visible:ring-2 focus-visible:ring-foreground/20",
"disabled:pointer-events-none disabled:opacity-50",
className,
)}
>
{children}
<motion.span
aria-hidden
style={{ rotate }}
className="text-muted-foreground"
>
<ChevronDown className="h-4 w-4" />
</motion.span>
</motion.button>
);
}
export interface SelectValueProps {
placeholder?: string;
className?: string;
}
export function SelectValue({ placeholder, className }: SelectValueProps) {
const ctx = useSelectContext("SelectValue");
const label = ctx.labelFor(ctx.value);
return (
<span
className={cn(label ? "text-foreground" : "text-muted-foreground", className)}
>
{label ?? placeholder ?? "Select"}
</span>
);
}
export interface SelectContentProps {
className?: string;
children: ReactNode;
}
export function SelectContent({ className, children }: SelectContentProps) {
const ctx = useSelectContext("SelectContent");
const panelRef = useRef<HTMLDivElement>(null);
const [height, setHeight] = useState(0);
const { open, progress, reduce, setPlacement } = ctx;
// Keep descendants laid out while hidden: display:none resets nested
// scrollers in Chromium. Collapse only the hidden outer footprint after
// exit so it cannot extend page scrolling. Opening restores the full box
// before measurement or focus; neither layout change is animated.
const [exiting, setExiting] = useState(false);
const [wasOpen, setWasOpen] = useState(open);
if (open !== wasOpen) {
setWasOpen(open);
if (!open) setExiting(true);
}
const present = open || exiting;
useMotionValueEvent(progress, "animationComplete", () => {
if (progress.get() === 0) setExiting(false);
});
useLayoutEffect(() => {
const node = panelRef.current;
if (!node || !present) return;
const measure = () => setHeight(node.offsetHeight);
measure();
const observer = new ResizeObserver(measure);
observer.observe(node);
return () => observer.disconnect();
}, [present]);
// On open, flip upward when there isn't room below and there's more above.
useLayoutEffect(() => {
if (!open) return;
const trigger = document.getElementById(ctx.triggerId);
const node = panelRef.current;
if (!trigger || !node) return;
const rect = trigger.getBoundingClientRect();
const h = node.offsetHeight;
const below = window.innerHeight - rect.bottom;
const above = rect.top;
setPlacement(below < h + 16 && above > below ? "top" : "bottom");
}, [open, ctx.triggerId, setPlacement]);
const isTop = ctx.placement === "top";
// Reveal a full-size panel from its near edge. No ancestor scales the list,
// so rows, borders and shadow keep their natural thickness. The clip and
// corner writes can paint; only the gap uses a transform. All read one
// progress value, with no animated layout properties.
const ready = height > 0 && !reduce;
const fromY = ready ? (isTop ? GAP : -GAP) : 0;
const detach = useTransform(progress, [0.4, 1], [0, 1]);
const y = useTransform(detach, (d) => lerp(fromY, 0, d));
const nearRadius = useTransform(detach, (d) => (ready ? RADIUS * d : RADIUS));
const borderRadius = useTransform(nearRadius, (near) =>
isTop
? `${RADIUS}px ${RADIUS}px ${near}px ${near}px`
: `${near}px ${near}px ${RADIUS}px ${RADIUS}px`,
);
const clipPath = useTransform([progress, nearRadius], ([p, near]: number[]) => {
if (!ready) return "none";
// Clamp overshoot so the clip never extends into the trigger or exposes
// overflowing children. At rest remove it so the native shadow is whole.
const reveal = Math.min(1, Math.max(0, p));
if (reveal === 1) return "none";
const hidden = Math.max(0, (height - LIP) * (1 - reveal));
const inset = isTop ? `${hidden}px 0 0 0` : `0 0 ${hidden}px 0`;
const corners = isTop
? `${RADIUS}px ${RADIUS}px ${near}px ${near}px`
: `${near}px ${near}px ${RADIUS}px ${RADIUS}px`;
return `inset(${inset} round ${corners})`;
});
// The surface materialises over its first frames rather than popping in as
// a lip; with reduced motion the fade is the whole entrance.
const opacity = useTransform(progress, reduce ? [0, 1] : [0, 0.12], [0, 1]);
return (
<motion.div
ref={panelRef}
id={ctx.listId}
role="listbox"
aria-labelledby={ctx.triggerId}
aria-hidden={!open}
inert={!open}
style={{
visibility: present ? undefined : "hidden",
maxHeight: present ? undefined : 0,
borderWidth: present ? undefined : 0,
y,
clipPath,
borderRadius,
opacity,
pointerEvents: open ? "auto" : "none",
marginTop: isTop ? 0 : GAP,
marginBottom: isTop ? GAP : 0,
}}
// flush against the trigger, then separates into its own rounded pill;
// sits above or below depending on available space
className={cn(
"absolute left-0 right-0 z-20 overflow-hidden border border-border bg-background shadow-lg",
isTop ? "bottom-full" : "top-full",
className,
)}
>
<motion.div
initial={false}
animate={open ? "show" : "hidden"}
className="p-1"
>
{children}
</motion.div>
</motion.div>
);
}
export interface SelectItemProps {
value: string;
disabled?: boolean;
className?: string;
children: ReactNode;
}
export function SelectItem({
value,
disabled = false,
className,
children,
}: SelectItemProps) {
const ctx = useSelectContext("SelectItem");
const selected = ctx.value === value;
const label = typeof children === "string" ? children : value;
useLayoutEffect(() => {
ctx.register(value, label);
return () => ctx.unregister(value);
}, [ctx.register, ctx.unregister, value, label]);
return (
<motion.div variants={ctx.reduce ? undefined : ITEM_VARIANTS}>
<button
type="button"
role="option"
aria-selected={selected}
disabled={disabled}
onClick={() => ctx.select(value)}
className={cn(
"flex w-full items-center justify-between gap-2 rounded-lg px-2.5 py-1.5 text-left text-sm outline-none transition-colors",
selected
? "bg-muted text-foreground"
: "text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:bg-muted",
"disabled:pointer-events-none disabled:opacity-50",
className,
)}
>
{children}
{selected ? <Check className="h-3.5 w-3.5 shrink-0" /> : null}
</button>
</motion.div>
);
}
components/agents/citations.tsx
"use client";
import { BookOpenText, ChevronDown, ExternalLink, Globe2 } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
type ReactNode,
useCallback,
useId,
useState,
} from "react";
import { AgentDisclosure } from "@/components/agents/agent-disclosure";
import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "@/lib/ease";
import { useFavicon } from "@/lib/hooks/use-favicon";
import { cn } from "@/lib/utils";
export interface CitationItem {
id: string;
title: ReactNode;
domain?: ReactNode;
url?: string;
/**
* Replaces the URL favicon, e.g. a document icon for non-web sources. An svg
* child is sized to match the favicon; falsy values fall back to the favicon.
*/
icon?: ReactNode;
}
export interface CitationsProps {
citations: CitationItem[];
title?: ReactNode;
open?: boolean;
defaultOpen?: boolean;
onOpenChange?: (open: boolean) => void;
idPrefix?: string;
className?: string;
}
export interface CitationProps {
citationId: string;
index: number;
/** Must match the related Citations idPrefix. */
idPrefix: string;
/**
* Accessible name for the marker. Defaults to `View citation {index}`. Include
* the index so voice control users can say the number they see.
*/
label?: string;
className?: string;
}
export interface CitationListProps {
citations: CitationItem[];
idPrefix?: string;
className?: string;
}
export interface CitationStackProps {
citations: CitationItem[];
limit?: number;
className?: string;
}
function citationTargetId(prefix: string, citationId: string) {
return `${prefix}-${citationId.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
}
export function Citation({
citationId,
index,
idPrefix,
label,
className,
}: CitationProps) {
return (
<a
href={`#${citationTargetId(idPrefix, citationId)}`}
aria-label={label ?? `View citation ${index}`}
className={cn(
"mx-0.5 inline-flex min-w-4 -translate-y-0.5 items-center justify-center rounded-md bg-muted/60 px-1 py-0.5 text-[10px] font-semibold leading-none text-muted-foreground no-underline outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
className,
)}
>
{index}
</a>
);
}
export function CitationFavicon({
url,
icon,
className,
}: {
url?: string;
/** Drawn instead of the favicon when truthy. */
icon?: ReactNode;
className?: string;
}) {
const favicon = useFavicon(icon ? undefined : url);
return (
<span
aria-hidden="true"
className={cn(
"grid size-5 shrink-0 place-items-center text-muted-foreground [&>svg]:size-3.5",
className,
)}
>
{icon ? (
icon
) : favicon.src ? (
// biome-ignore lint/performance/noImgElement: Dynamic cross-site favicons keep this framework-agnostic registry component portable.
<img
ref={favicon.ref}
src={favicon.src}
alt=""
width={16}
height={16}
referrerPolicy="no-referrer"
className="size-4 rounded-sm object-contain"
/>
) : (
<Globe2 className="size-3.5" />
)}
</span>
);
}
export function CitationStack({
citations,
limit = 3,
className,
}: CitationStackProps) {
return (
<span
aria-hidden="true"
className={cn("flex -space-x-1.5", className)}
>
{citations.slice(0, limit).map((citation) => (
<CitationFavicon
key={citation.id}
url={citation.url}
icon={citation.icon}
className="size-6 rounded-full bg-background ring-2 ring-background"
/>
))}
</span>
);
}
function CitationRow({
citation,
index,
idPrefix,
}: {
citation: CitationItem;
index: number;
idPrefix: string;
}) {
const content = (
<>
<CitationFavicon url={citation.url} icon={citation.icon} />
<span className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2 gap-y-0.5">
<span className="truncate text-sm font-medium text-foreground/80 transition-colors group-hover/citation:text-foreground">
{citation.title}
</span>
{citation.domain ? (
<span className="min-w-0 truncate text-xs text-muted-foreground/60">
{citation.domain}
</span>
) : null}
</span>
<span className="flex shrink-0 items-center gap-1.5">
<span className="grid size-5 place-items-center rounded-md bg-foreground/[0.05] text-[10px] font-semibold tabular-nums text-muted-foreground">
{index}
</span>
{citation.url ? (
<ExternalLink className="size-3.5 text-muted-foreground/40 transition-colors group-hover/citation:text-muted-foreground" />
) : null}
</span>
</>
);
const className =
"group/citation flex items-center gap-2 rounded-md px-1.5 py-1 outline-none focus-visible:ring-2 focus-visible:ring-ring";
const id = citationTargetId(idPrefix, citation.id);
return citation.url ? (
<a
id={id}
href={citation.url}
target="_blank"
rel="noreferrer noopener"
className={className}
>
{content}
</a>
) : (
<div id={id} className={className}>
{content}
</div>
);
}
export function CitationList({
citations,
idPrefix,
className,
}: CitationListProps) {
const reduce = useReducedMotion() ?? false;
const baseId = useId();
const resolvedPrefix =
idPrefix ?? `citation-list-${baseId.replace(/:/g, "")}`;
return (
<div className={cn("grid gap-0.5", className)}>
<AnimatePresence mode="popLayout">
{citations.map((citation, index) => (
<motion.div
layout="position"
key={citation.id}
initial={reduce ? { opacity: 1 } : { opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
exit={reduce ? { opacity: 0 } : { opacity: 0, y: -3 }}
transition={
reduce
? { duration: 0 }
: {
opacity: { duration: 0.18, ease: EASE_OUT },
y: SPRING_LAYOUT,
layout: SPRING_LAYOUT,
}
}
>
<CitationRow
citation={citation}
index={index + 1}
idPrefix={resolvedPrefix}
/>
</motion.div>
))}
</AnimatePresence>
</div>
);
}
export function Citations({
citations,
title = "Sources",
open,
defaultOpen = false,
onOpenChange,
idPrefix,
className,
}: CitationsProps) {
const reduce = useReducedMotion() ?? false;
const baseId = useId();
const contentId = `${baseId}-content`;
const resolvedPrefix =
idPrefix ?? `citation-${baseId.replace(/:/g, "")}`;
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const currentOpen = open ?? internalOpen;
const setOpen = useCallback(
(next: boolean) => {
if (open === undefined) setInternalOpen(next);
onOpenChange?.(next);
},
[onOpenChange, open],
);
return (
<div className={cn("w-full text-sm", className)}>
<button
type="button"
aria-expanded={currentOpen}
aria-controls={contentId}
onClick={() => setOpen(!currentOpen)}
className="group -ml-1 flex min-h-8 items-center gap-2 rounded-lg px-1 text-left text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
>
<BookOpenText className="size-4" />
<span className="font-medium">{title}</span>
<span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold tabular-nums">
{citations.length}
</span>
<motion.span
aria-hidden="true"
animate={{ rotate: currentOpen ? 180 : 0 }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
className="text-muted-foreground/60"
>
<ChevronDown className="size-3.5" />
</motion.span>
</button>
<AgentDisclosure
id={contentId}
open={currentOpen}
>
<CitationList
citations={citations}
idPrefix={resolvedPrefix}
className="mt-1"
/>
</AgentDisclosure>
</div>
);
}
components/motion/shared-layout-bg.tsx
"use client";
import {
AnimatePresence,
type HTMLMotionProps,
motion,
useReducedMotion,
type Variants,
} from "motion/react";
import {
Children,
cloneElement,
forwardRef,
type HTMLAttributes,
isValidElement,
type MouseEvent,
type ReactElement,
type ReactNode,
type Ref,
useId,
useState,
} from "react";
import { SPRING_LAYOUT } from "@/lib/ease";
import { cn } from "@/lib/utils";
export interface SharedLayoutBgProps
extends Omit<HTMLAttributes<HTMLElement>, "children"> {
children: ReactNode;
/** Semantic container used for the children. */
as?: "div" | "ul";
/** Tailwind class applied to the moving pill. Defaults to a subtle foreground tint. */
pillClassName?: string;
/** Horizontal inset of the pill relative to each row (px). Default 20. */
inset?: number;
/** Optional positioning override for the pill wrapper inside each item. */
pillContainerClassName?: string;
}
const variants: Variants = {
initial: { opacity: 0, filter: "blur(6px)" },
animate: { opacity: 1, filter: "blur(0px)" },
exit: (isActive: boolean) =>
!isActive ? { opacity: 0, filter: "blur(6px)" } : {},
};
const reducedVariants: Variants = {
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: (isActive: boolean) => (!isActive ? { opacity: 0 } : {}),
};
export const SharedLayoutBg = forwardRef<HTMLElement, SharedLayoutBgProps>(
function SharedLayoutBg(
{
children,
as = "div",
className,
onMouseLeave,
pillClassName,
pillContainerClassName,
inset = 20,
...props
},
forwardedRef,
) {
const [activeId, setActiveId] = useState<string | null>(null);
const uid = useId();
const reduce = useReducedMotion();
const renderedChildren = Children.toArray(children)
.filter(isValidElement)
.map((child, index) => {
const el = child as ReactElement<{
className?: string;
onMouseEnter?: () => void;
children?: ReactNode;
}>;
const childKey = el.key ? String(el.key) : `item-${index}`;
return cloneElement(
el,
{
key: childKey,
className: cn("relative", el.props.className),
onMouseEnter: () => {
el.props.onMouseEnter?.();
setActiveId(childKey);
},
},
<>
<AnimatePresence custom={activeId !== null}>
{activeId !== null ? (
<motion.div
variants={reduce ? reducedVariants : variants}
initial="initial"
animate="animate"
exit="exit"
custom={activeId !== null}
className={cn(
"pointer-events-none absolute inset-y-0",
pillContainerClassName,
)}
style={{ left: -inset, right: -inset }}
>
{activeId === childKey ? (
<motion.div
layoutId={`shared-bg-${uid}`}
transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
className={cn(
"pointer-events-none h-full w-full rounded-2xl bg-muted/80",
pillClassName,
)}
/>
) : null}
</motion.div>
) : null}
</AnimatePresence>
<div className="relative z-10">{el.props.children}</div>
</>,
);
});
const handleMouseLeave = (event: MouseEvent<HTMLElement>) => {
setActiveId(null);
onMouseLeave?.(event);
};
// layoutRoot scopes the pill's layout projection to this list, so fixed or
// scrolled ancestors can't smear scroll offsets into its movement.
return as === "ul" ? (
<motion.ul
{...(props as HTMLMotionProps<"ul">)}
ref={forwardedRef as Ref<HTMLUListElement>}
layoutRoot
onMouseLeave={handleMouseLeave}
className={cn("flex w-full flex-col", className)}
>
{renderedChildren}
</motion.ul>
) : (
<motion.div
{...(props as HTMLMotionProps<"div">)}
ref={forwardedRef as Ref<HTMLDivElement>}
layoutRoot
onMouseLeave={handleMouseLeave}
className={cn("flex w-full flex-col", className)}
>
{renderedChildren}
</motion.div>
);
},
);
components/motion/popover-position.ts
"use client";
import {
type MutableRefObject,
useCallback,
useLayoutEffect,
useState,
} from "react";
export type PortalLayout = {
trigger: {
left: number;
top: number;
width: number;
height: number;
};
content: {
width: number;
height: number;
};
};
function sameLayout(a: PortalLayout | null, b: PortalLayout) {
return (
a?.trigger.left === b.trigger.left &&
a.trigger.top === b.trigger.top &&
a.trigger.width === b.trigger.width &&
a.trigger.height === b.trigger.height &&
a.content.width === b.content.width &&
a.content.height === b.content.height
);
}
/** Measures a trigger and portalled panel in viewport coordinates. */
export function usePopoverPortalPosition<
TriggerElement extends HTMLElement,
ContentElement extends HTMLElement,
>(
triggerRef: MutableRefObject<TriggerElement | null>,
contentRef: MutableRefObject<ContentElement | null>,
active: boolean,
) {
const [layout, setLayout] = useState<PortalLayout | null>(null);
const update = useCallback(() => {
const trigger = triggerRef.current;
const content = contentRef.current;
if (!trigger || !content) return;
const rect = trigger.getBoundingClientRect();
const next: PortalLayout = {
trigger: {
left: rect.left,
top: rect.top,
width: rect.width,
height: rect.height,
},
content: {
width: content.offsetWidth,
height: content.offsetHeight,
},
};
setLayout((current) => (sameLayout(current, next) ? current : next));
}, [contentRef, triggerRef]);
useLayoutEffect(() => {
update();
if (!active) return;
const trigger = triggerRef.current;
const content = contentRef.current;
const observer = new ResizeObserver(update);
if (trigger) observer.observe(trigger);
if (content) observer.observe(content);
window.addEventListener("scroll", update, true);
window.addEventListener("resize", update);
return () => {
observer.disconnect();
window.removeEventListener("scroll", update, true);
window.removeEventListener("resize", update);
};
}, [active, contentRef, triggerRef, update]);
return layout;
}
components/motion/action-swap.tsx
"use client";
import { AnimatePresence, type HTMLMotionProps, motion, useReducedMotion, type Variants } from "motion/react";
import type { ReactNode } from "react";
import { useState } from "react";
import { EASE_OUT, SPRING_PRESS, SPRING_SWAP } from "@/lib/ease";
import { cn } from "@/lib/utils";
export type ActionSwapItem = {
id: string;
label: ReactNode;
icon?: ReactNode;
ariaLabel?: string;
};
export type ActionSwapButtonVariant = "primary" | "secondary" | "outline" | "ghost";
export type ActionSwapButtonSize = "sm" | "md" | "lg" | "icon";
export type ActionSwapAnimation = "blur" | "roll" | "cascade";
/** Animations with a single-element variant set (cascade animates per letter). */
type CoreAnimation = "blur" | "roll";
export interface ActionSwapButtonProps extends Omit<
HTMLMotionProps<"button">,
"children" | "onChange"
> {
items: ActionSwapItem[];
value?: string;
defaultValue?: string;
onValueChange?: (value: string, item: ActionSwapItem) => void;
variant?: ActionSwapButtonVariant;
size?: ActionSwapButtonSize;
animation?: ActionSwapAnimation;
iconOnly?: boolean;
cycle?: boolean;
}
export interface ActionSwapTextProps {
value: string;
children: ReactNode;
animation?: ActionSwapAnimation;
className?: string;
}
export interface ActionSwapIconProps {
value: string;
children: ReactNode;
animation?: ActionSwapAnimation;
className?: string;
}
const BLUR_TRANSITION = { duration: 0.2, ease: "easeInOut" } as const;
const ROLL_TRANSITION = SPRING_SWAP;
const ROLL_EXIT_TRANSITION = { duration: 0.14, ease: EASE_OUT } as const;
const SWAP_BLUR = "blur(8px)";
const ROLL_BLUR = "blur(3px)";
// Cascade rolls the label one letter at a time, left to right. The leaving
// and landing strings overlap as independent layers (no shared cells), so
// proportional glyph widths never jitter. Exits cascade at half the enter
// stagger so the tail of the old label lingers briefly.
const CASCADE_STAGGER = 0.025;
const CASCADE_LETTER_VARIANTS: Variants = {
initial: { opacity: 0, y: "105%", filter: ROLL_BLUR },
animate: (delay: number = 0) => ({
opacity: 1,
y: "0%",
filter: "blur(0px)",
transition: { ...SPRING_SWAP, delay },
}),
exit: (delay: number = 0) => ({
opacity: 0,
y: "-105%",
filter: ROLL_BLUR,
transition: { duration: 0.16, ease: EASE_OUT, delay: delay * 0.5 },
}),
};
const TEXT_VARIANTS: Record<CoreAnimation, Variants> = {
blur: {
initial: { opacity: 0, scale: 0.94, filter: SWAP_BLUR },
animate: {
opacity: 1,
scale: 1,
filter: "blur(0px)",
transition: BLUR_TRANSITION,
},
exit: {
opacity: 0,
scale: 0.94,
filter: SWAP_BLUR,
transition: BLUR_TRANSITION,
},
},
roll: {
initial: { opacity: 0, y: "90%", filter: ROLL_BLUR },
animate: {
opacity: 1,
y: "0%",
filter: "blur(0px)",
transition: ROLL_TRANSITION,
},
exit: {
opacity: 0,
y: "-90%",
filter: ROLL_BLUR,
transition: ROLL_EXIT_TRANSITION,
},
},
};
const ICON_VARIANTS: Record<CoreAnimation, Variants> = {
blur: {
initial: { opacity: 0, scale: 0.25, filter: SWAP_BLUR },
animate: {
opacity: 1,
scale: 1,
filter: "blur(0px)",
transition: BLUR_TRANSITION,
},
exit: {
opacity: 0,
scale: 0.25,
filter: SWAP_BLUR,
transition: BLUR_TRANSITION,
},
},
roll: {
initial: { opacity: 0, y: 12, filter: ROLL_BLUR },
animate: {
opacity: 1,
y: 0,
filter: "blur(0px)",
transition: ROLL_TRANSITION,
},
exit: {
opacity: 0,
y: -12,
filter: ROLL_BLUR,
transition: ROLL_EXIT_TRANSITION,
},
},
};
const VARIANT_CLASS: Record<ActionSwapButtonVariant, string> = {
primary: "bg-primary text-primary-foreground hover:bg-primary/90",
secondary: "border border-border bg-card text-foreground hover:border-border",
outline: "border border-border bg-transparent text-foreground hover:bg-muted/60",
ghost: "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
};
const SIZE_CLASS: Record<ActionSwapButtonSize, string> = {
sm: "h-8 gap-1.5 rounded-full px-3 text-xs",
md: "h-10 gap-2 rounded-full px-4 text-sm",
lg: "h-12 gap-2.5 rounded-full px-5 text-base",
icon: "h-10 w-10 rounded-full",
};
export function ActionSwapText({
value,
children,
animation = "blur",
className,
}: ActionSwapTextProps) {
const reduce = useReducedMotion();
// Cascade needs a plain string to split into letters; non-string content
// and reduced motion fall back to the closest single-element animation.
const label = typeof children === "string" ? children : null;
const cascade = animation === "cascade" && label !== null && !reduce;
const coreAnimation: CoreAnimation =
animation === "cascade" ? "roll" : animation;
return (
<span
className={cn(
"relative -my-[0.08em] inline-block max-w-full whitespace-nowrap py-[0.08em] align-bottom",
className,
)}
style={{
clipPath: "inset(0 -999px)",
WebkitClipPath: "inset(0 -999px)",
}}
>
<span
aria-hidden
className="invisible inline-block whitespace-nowrap"
>
{cascade
? label.split("").map((char, index) => (
<span
// biome-ignore lint/suspicious/noArrayIndexKey: position is the slot identity.
key={index}
className="inline-block whitespace-pre"
>
{char}
</span>
))
: children}
</span>
{cascade ? (
<>
{/* Letters are decorative fragments; readers get the whole label. */}
<span className="sr-only">{label}</span>
<AnimatePresence initial={false}>
<motion.span
key={`cascade-${value}`}
aria-hidden
initial="initial"
animate="animate"
exit="exit"
className="absolute left-0 top-[0.08em] inline-block whitespace-pre"
>
{label.split("").map((char, i) => (
<motion.span
// biome-ignore lint/suspicious/noArrayIndexKey: position is the slot identity — the letter at a position is exactly what rolls.
key={i}
custom={i * CASCADE_STAGGER}
variants={CASCADE_LETTER_VARIANTS}
// Own states: a label that swaps away and straight back
// re-enters mid-exit, and only owned targets are restored.
initial="initial"
animate="animate"
exit="exit"
className="inline-block whitespace-pre will-change-[opacity,filter,transform]"
>
{char}
</motion.span>
))}
</motion.span>
</AnimatePresence>
</>
) : (
<AnimatePresence initial={false}>
<motion.span
key={`${animation}-${value}`}
variants={TEXT_VARIANTS[coreAnimation]}
initial={reduce ? false : "initial"}
animate={reduce ? { opacity: 1, filter: "blur(0px)", scale: 1, y: 0 } : "animate"}
exit={reduce ? undefined : "exit"}
// Truncation lives on the layer that holds the text — the layer
// moves as a whole, so clipping it never eats the roll.
className="absolute left-0 top-[0.08em] inline-block max-w-full truncate will-change-[opacity,filter,transform]"
>
{children}
</motion.span>
</AnimatePresence>
)}
</span>
);
}
export function ActionSwapIcon({
value,
children,
animation = "blur",
className,
}: ActionSwapIconProps) {
const reduce = useReducedMotion();
// Icons are single elements — cascade maps to its closest motion, roll.
const coreAnimation: CoreAnimation =
animation === "cascade" ? "roll" : animation;
return (
<span className={cn("relative inline-grid shrink-0 place-items-center overflow-hidden", className)}>
<AnimatePresence mode="popLayout" initial={false}>
<motion.span
key={`${animation}-${value}`}
aria-hidden
variants={ICON_VARIANTS[coreAnimation]}
initial={reduce ? false : "initial"}
animate={reduce ? { opacity: 1, filter: "blur(0px)", scale: 1, y: 0 } : "animate"}
exit={reduce ? undefined : "exit"}
className="col-start-1 row-start-1 inline-flex items-center justify-center will-change-[opacity,filter,transform]"
>
{children}
</motion.span>
</AnimatePresence>
</span>
);
}
export function ActionSwapButton({
items,
value,
defaultValue,
onValueChange,
variant = "secondary",
size = "md",
animation = "blur",
iconOnly = size === "icon",
cycle = true,
className,
disabled,
onClick,
...rest
}: ActionSwapButtonProps) {
const reduce = useReducedMotion();
const [internalValue, setInternalValue] = useState(defaultValue ?? items[0]?.id);
const currentValue = value ?? internalValue;
const activeIndex = Math.max(0, items.findIndex((item) => item.id === currentValue));
const activeItem = items[activeIndex] ?? items[0];
const hasIcon = items.some((item) => item.icon);
const nextItem = cycle && items.length > 0 ? items[(activeIndex + 1) % items.length] : undefined;
if (!activeItem) return null;
const accessibleLabel = activeItem.ariaLabel ?? (iconOnly && typeof activeItem.label === "string" ? activeItem.label : undefined);
return (
<motion.button
type="button"
disabled={disabled}
whileTap={reduce || disabled ? undefined : { scale: 0.97 }}
transition={SPRING_PRESS}
className={cn(
"inline-flex items-center justify-center overflow-hidden font-medium transition-colors",
"disabled:pointer-events-none disabled:opacity-50",
VARIANT_CLASS[variant],
SIZE_CLASS[size],
className,
)}
aria-label={accessibleLabel}
onClick={(event) => {
onClick?.(event);
if (event.defaultPrevented || disabled || !cycle || !nextItem) return;
if (value === undefined) setInternalValue(nextItem.id);
onValueChange?.(nextItem.id, nextItem);
}}
{...rest}
>
{hasIcon ? (
<ActionSwapIcon value={activeItem.id} animation={animation} className="h-4 w-4">
{activeItem.icon ?? null}
</ActionSwapIcon>
) : null}
{!iconOnly ? (
<ActionSwapText value={activeItem.id} animation={animation}>
{activeItem.label}
</ActionSwapText>
) : null}
</motion.button>
);
}
components/motion/button/base.tsx
"use client";
import {
AnimatePresence,
type HTMLMotionProps,
motion,
useReducedMotion,
} from "motion/react";
import {
forwardRef,
type PointerEvent,
type ReactNode,
useCallback,
useRef,
useState,
} from "react";
import { EASE_OUT, SPRING_PRESS } from "@/lib/ease";
import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
import { cn } from "@/lib/utils";
export type ButtonVariant = "primary" | "secondary" | "ghost" | "outline";
export type ButtonSize = "sm" | "md" | "lg" | "icon";
export interface ButtonProps extends Omit<
HTMLMotionProps<"button">,
"children"
> {
variant?: ButtonVariant;
size?: ButtonSize;
pressScale?: number;
/** Spawn a Material-style ripple from the press point. Off by default. */
ripple?: boolean;
children?: ReactNode;
}
export interface ButtonLinkProps extends Omit<
HTMLMotionProps<"a">,
"children"
> {
variant?: ButtonVariant;
size?: ButtonSize;
pressScale?: number;
children?: ReactNode;
}
type Ripple = { id: number; x: number; y: number; size: number };
const VARIANT_CLASS: Record<ButtonVariant, string> = {
primary: "bg-primary text-primary-foreground hover:bg-primary/90",
secondary: "border border-border bg-card text-foreground hover:border-border",
ghost: "text-muted-foreground hover:text-foreground hover:bg-muted/60",
outline:
"border border-border bg-transparent text-foreground hover:bg-muted/60",
};
const SIZE_CLASS: Record<ButtonSize, string> = {
sm: "h-8 px-3 text-xs gap-1.5 rounded-full",
md: "h-10 px-5 text-sm gap-2 rounded-full",
lg: "h-12 px-6 text-base gap-2 rounded-full",
icon: "h-8 w-8 rounded-lg",
};
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
function Button(
{
variant = "primary",
size = "md",
pressScale = 0.93,
ripple = false,
className,
children,
onPointerDown,
...rest
},
ref,
) {
const reduce = useReducedMotion();
const canHover = useHoverCapable();
const [ripples, setRipples] = useState<Ripple[]>([]);
const nextId = useRef(0);
const handlePointerDown = useCallback(
(event: PointerEvent<HTMLButtonElement>) => {
if (ripple && !reduce) {
const rect = event.currentTarget.getBoundingClientRect();
const size = Math.max(rect.width, rect.height) * 2;
const id = nextId.current++;
setRipples((prev) => [
...prev,
{
id,
x: event.clientX - rect.left,
y: event.clientY - rect.top,
size,
},
]);
}
onPointerDown?.(event);
},
[ripple, reduce, onPointerDown],
);
return (
<motion.button
ref={ref}
type="button"
whileTap={reduce ? undefined : { scale: pressScale }}
whileHover={reduce || !canHover ? undefined : { scale: 1.02 }}
transition={SPRING_PRESS}
onPointerDown={handlePointerDown}
className={cn(
"inline-flex items-center justify-center font-medium select-none",
"transition-colors",
"disabled:pointer-events-none disabled:opacity-50",
ripple && "relative overflow-hidden",
VARIANT_CLASS[variant],
SIZE_CLASS[size],
className,
)}
{...rest}
>
{ripple && !reduce ? (
<span className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
<AnimatePresence>
{ripples.map((r) => (
<motion.span
key={r.id}
className="absolute rounded-full bg-current"
style={{
left: r.x,
top: r.y,
width: r.size,
height: r.size,
x: "-50%",
y: "-50%",
}}
initial={{ scale: 0.05, opacity: 0.3 }}
animate={{ scale: 1, opacity: 0 }}
exit={{ opacity: 0 }}
transition={{ duration: 1.6, ease: EASE_OUT }}
onAnimationComplete={() =>
setRipples((prev) => prev.filter((x) => x.id !== r.id))
}
/>
))}
</AnimatePresence>
</span>
) : null}
{children}
</motion.button>
);
},
);
export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
function ButtonLink(
{
variant = "primary",
size = "md",
pressScale = 0.93,
className,
children,
...rest
},
ref,
) {
const reduce = useReducedMotion();
const canHover = useHoverCapable();
return (
<motion.a
ref={ref}
whileTap={reduce ? undefined : { scale: pressScale }}
whileHover={reduce || !canHover ? undefined : { scale: 1.02 }}
transition={SPRING_PRESS}
className={cn(
"inline-flex items-center justify-center font-medium select-none",
"transition-colors",
VARIANT_CLASS[variant],
SIZE_CLASS[size],
className,
)}
{...rest}
>
{children}
</motion.a>
);
},
);
components/motion/button/magnetic.tsx
"use client";
import { forwardRef } from "react";
import { Magnetic } from "../magnetic";
import { Button, type ButtonProps } from "./base";
export interface MagneticButtonProps extends ButtonProps {
/** Magnetic pull strength. Default 0.25. */
strength?: number;
/** Class applied to the magnetic wrapper. */
magneticClassName?: string;
}
export const MagneticButton = forwardRef<HTMLButtonElement, MagneticButtonProps>(function MagneticButton(
{ strength = 0.25, magneticClassName, children, ...rest },
ref,
) {
return (
<Magnetic strength={strength} className={magneticClassName}>
<Button ref={ref} {...rest}>
{children}
</Button>
</Magnetic>
);
});
components/motion/button/metallic.tsx
"use client";
import { motion, useReducedMotion } from "motion/react";
import { forwardRef, useState } from "react";
import { EASE_IN_OUT } from "@/lib/ease";
import { cn } from "@/lib/utils";
import { Button, type ButtonProps } from "./base";
export interface MetallicButtonProps extends Omit<
ButtonProps,
"ripple" | "variant"
> {
/** Stops the traveling reflection while preserving the chrome rim. */
paused?: boolean;
}
// The rim and highlight drift separately so the material stays quiet and reflective.
const SILVER_DRIFT = {
duration: 8,
ease: EASE_IN_OUT,
repeat: Infinity,
};
const CHROME_SHIMMER = {
duration: 2.4,
ease: EASE_IN_OUT,
};
export const MetallicButton = forwardRef<
HTMLButtonElement,
MetallicButtonProps
>(function MetallicButton(
{
size = "md",
paused = false,
className,
children,
onHoverStart,
onHoverEnd,
...rest
},
ref,
) {
const reduce = useReducedMotion();
const still = paused || Boolean(reduce);
const [hovered, setHovered] = useState(false);
return (
<Button
ref={ref}
variant="ghost"
size={size}
onHoverStart={(event, info) => {
setHovered(true);
onHoverStart?.(event, info);
}}
onHoverEnd={(event, info) => {
setHovered(false);
onHoverEnd?.(event, info);
}}
className={cn(
"group relative isolate overflow-hidden border-0 bg-transparent text-foreground",
"hover:bg-transparent hover:text-foreground",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"shadow-[0_8px_22px_rgba(0,0,0,0.16)]",
size === "icon" && "rounded-full",
className,
)}
{...rest}
>
<motion.span
aria-hidden="true"
className="pointer-events-none absolute inset-y-0 left-[-18%] z-0 w-[136%] rounded-[inherit] bg-[linear-gradient(105deg,#111_0%,#737373_14%,#fafafa_26%,#525252_38%,#0a0a0a_50%,#a3a3a3_64%,#fff_75%,#404040_87%,#111_100%)]"
animate={still ? undefined : { x: ["0%", "13%", "0%"] }}
transition={still ? undefined : SILVER_DRIFT}
/>
<motion.span
aria-hidden="true"
className="pointer-events-none absolute inset-y-0 left-[-58%] z-[1] w-[52%] -skew-x-12 bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.5)_48%,transparent)] opacity-50 blur-[3px] mix-blend-screen"
animate={still ? undefined : { x: hovered ? "310%" : "0%" }}
transition={still ? undefined : CHROME_SHIMMER}
/>
<span
aria-hidden="true"
className="pointer-events-none absolute inset-[2px] z-[2] rounded-[inherit] bg-background transition-colors group-hover:bg-muted/40"
/>
<span
aria-hidden="true"
className="pointer-events-none absolute inset-[2px] z-[3] rounded-[inherit] shadow-[inset_0_1px_0_rgba(255,255,255,0.28),inset_0_-1px_0_rgba(0,0,0,0.16)]"
/>
<span className="relative z-10 inline-flex items-center justify-center gap-2">
{children}
</span>
</Button>
);
});
components/motion/button/stateful.tsx
"use client";
import { Check, Loader2, X } from "lucide-react";
import {
AnimatePresence,
motion,
useReducedMotion,
type Variants,
} from "motion/react";
import {
forwardRef,
type ReactNode,
useLayoutEffect,
useRef,
useState,
} from "react";
import { EASE_OUT, SPRING_SWAP } from "@/lib/ease";
import { Button, type ButtonProps } from "./base";
export type ButtonState = "idle" | "loading" | "success" | "error";
export interface StatefulButtonProps extends Omit<ButtonProps, "children"> {
state?: ButtonState;
children: ReactNode;
loadingText?: ReactNode;
successText?: ReactNode;
errorText?: ReactNode;
icon?: ReactNode;
}
const CASCADE_STAGGER = 0.025;
const ROLL_BLUR = "blur(6px)";
const CASCADE_LETTER_VARIANTS: Variants = {
initial: { opacity: 0, y: "105%", filter: ROLL_BLUR },
animate: (delay: number = 0) => ({
opacity: 1,
y: "0%",
filter: "blur(0px)",
transition: { ...SPRING_SWAP, delay },
}),
exit: (delay: number = 0) => ({
opacity: 0,
y: "-105%",
filter: ROLL_BLUR,
transition: { duration: 0.16, ease: EASE_OUT, delay: delay * 0.5 },
}),
};
const ICON_VARIANTS: Variants = {
// Width collapses too, so the icon adds/removes its own space smoothly
// instead of popping the row width in a single frame.
initial: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR },
animate: {
opacity: 1,
width: "1.5rem",
scale: 1,
filter: "blur(0px)",
transition: SPRING_SWAP,
},
exit: {
opacity: 0,
width: 0,
scale: 0.7,
filter: ROLL_BLUR,
transition: { duration: 0.16, ease: EASE_OUT },
},
};
function IconSlot({ keyId, children }: { keyId: string; children: ReactNode }) {
const reduce = useReducedMotion();
return (
<motion.span
key={keyId}
variants={ICON_VARIANTS}
initial={reduce ? { opacity: 0 } : "initial"}
animate={reduce ? { opacity: 1 } : "animate"}
exit={reduce ? { opacity: 0 } : "exit"}
transition={reduce ? { duration: 0.15 } : undefined}
className="inline-grid shrink-0 place-items-center overflow-hidden"
>
{children}
</motion.span>
);
}
function TextSlot({
value,
children,
}: {
value: string;
children: ReactNode;
}) {
const reduce = useReducedMotion();
const measureRef = useRef<HTMLSpanElement>(null);
const [width, setWidth] = useState<number>();
const label = typeof children === "string" ? children : null;
const cascade = label !== null && !reduce;
// Measure strings with the same per-letter layout as the cascade. Measuring
// the whole string preserves kerning, which can make it narrower than the
// inline-block letters and clip the final glyph during the width animation.
useLayoutEffect(() => {
const nextWidth = measureRef.current?.offsetWidth;
if (!nextWidth) return;
setWidth((current) => (current === nextWidth ? current : nextWidth));
});
return (
<motion.span
initial={false}
animate={{ width }}
transition={reduce ? { duration: 0 } : SPRING_SWAP}
className="relative inline-block overflow-hidden whitespace-nowrap align-bottom"
>
<span
ref={measureRef}
aria-hidden
className="invisible inline-block whitespace-nowrap"
>
{cascade
? label.split("").map((char, index) => (
<span
// biome-ignore lint/suspicious/noArrayIndexKey: position is the slot identity.
key={index}
className="inline-block whitespace-pre"
>
{char}
</span>
))
: children}
</span>
{cascade ? (
<>
<span className="sr-only">{label}</span>
<AnimatePresence initial={false}>
<motion.span
key={`cascade-${value}`}
aria-hidden
initial="initial"
animate="animate"
exit="exit"
className="absolute left-0 top-0 inline-block whitespace-pre"
>
{label.split("").map((char, index) => (
<motion.span
// biome-ignore lint/suspicious/noArrayIndexKey: position is the slot identity.
key={index}
custom={index * CASCADE_STAGGER}
variants={CASCADE_LETTER_VARIANTS}
// Own states: a label that swaps away and straight back
// re-enters mid-exit, and only owned targets are restored.
initial="initial"
animate="animate"
exit="exit"
className="inline-block whitespace-pre will-change-[opacity,filter,transform]"
>
{char}
</motion.span>
))}
</motion.span>
</AnimatePresence>
</>
) : (
<AnimatePresence initial={false}>
<motion.span
key={`text-${value}`}
initial={reduce ? { opacity: 0 } : { opacity: 0, y: 14, filter: ROLL_BLUR }}
animate={reduce ? { opacity: 1 } : { opacity: 1, y: 0, filter: "blur(0px)" }}
exit={reduce ? { opacity: 0 } : { opacity: 0, y: -14, filter: ROLL_BLUR }}
transition={reduce ? { duration: 0.15 } : SPRING_SWAP}
className="absolute left-0 top-0 inline-block will-change-[opacity,filter,transform]"
>
{children}
</motion.span>
</AnimatePresence>
)}
</motion.span>
);
}
export const StatefulButton = forwardRef<HTMLButtonElement, StatefulButtonProps>(function StatefulButton(
{
state = "idle",
children,
loadingText = "Loading",
successText = "Done",
errorText = "Try again",
icon,
disabled,
...rest
},
ref,
) {
const isBusy = state === "loading";
const stateText =
state === "loading"
? loadingText
: state === "success"
? successText
: state === "error"
? errorText
: children;
const textKey =
typeof stateText === "string" ? `${state}-${stateText}` : state;
return (
<Button ref={ref} disabled={disabled || isBusy} aria-busy={isBusy} whileHover={undefined} {...rest}>
<span
aria-live="polite"
className="relative inline-flex items-center justify-center overflow-hidden"
>
<AnimatePresence initial={false}>
{state === "loading" ? (
<IconSlot keyId="loading-icon">
<Loader2 className="h-4 w-4 animate-spin" />
</IconSlot>
) : null}
{state === "success" ? (
<IconSlot keyId="success-icon">
<Check className="h-4 w-4" />
</IconSlot>
) : null}
{state === "error" ? (
<IconSlot keyId="error-icon">
<X className="h-4 w-4" />
</IconSlot>
) : null}
</AnimatePresence>
<TextSlot value={textKey}>{stateText}</TextSlot>
<AnimatePresence initial={false}>
{state === "idle" && icon ? (
<IconSlot keyId="idle-icon">{icon}</IconSlot>
) : null}
</AnimatePresence>
</span>
</Button>
);
});
lib/text-shimmer.ts
import type { CSSProperties } from "react";
// The reduced-motion rule travels with the component. app/globals.css calms CSS
// animation globally, but the registry bundles imports only, so an installed
// copy never receives that reset.
//
// `!important` because the sweep is an inline style, which outranks a plain rule
// in a media query. It selects a marker class carried by TEXT_SHIMMER_CLASS_NAME
// so it also reaches consumers that build their own span out of these exports.
export const TEXT_SHIMMER_KEYFRAMES =
"@keyframes beui-text-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}" +
"@media (prefers-reduced-motion: reduce){.beui-text-shimmer{animation:none !important}}";
export const TEXT_SHIMMER_CLASS_NAME =
"beui-text-shimmer bg-[length:200%_100%] bg-clip-text text-transparent bg-[linear-gradient(110deg,var(--muted-foreground)_30%,var(--foreground)_50%,var(--muted-foreground)_70%)]";
export function textShimmerStyle(duration: number): CSSProperties {
return {
animation: `beui-text-shimmer ${duration}s linear infinite`,
};
}
lib/hooks/use-dismiss.ts
"use client";
import { type RefObject, useEffect } from "react";
/**
* What the dismissing gesture does to the control it landed on.
*
* `"pass-through"` is the platform norm (native popover light-dismiss): the
* tap closes the overlay *and* activates whatever was under it. Use
* `"consume"` where the open overlay sits over or beside controls that would
* be costly to trigger by accident — the dismissal then swallows the
* activation too, so the gesture only closes.
*/
export type DismissBehavior = "pass-through" | "consume";
export interface DismissOptions {
/** Default `"pass-through"`. */
behavior?: DismissBehavior;
/** Dismiss on Escape as well. Default true. */
escape?: boolean;
/** Return true for an outside target that should *not* dismiss. Must be stable. */
ignore?: (target: Element) => boolean;
}
/**
* What every currently open dismiss scope counts as inside itself. A consumed
* dismissal reads this to tell a stray gesture from one that belongs to an
* overlay in front of it: overlays have no shared z-order to consult, but the
* one the gesture landed in has said as much by registering it.
*/
const openScopes = new Set<(target: Element) => boolean>();
function claimedByAnotherScope(
self: (target: Element) => boolean,
target: Element,
) {
for (const scope of openScopes) {
if (scope !== self && scope(target)) return true;
}
return false;
}
// preventDefault on pointerdown does not suppress the click that follows, so
// consuming a gesture means swallowing that click itself. The swallower
// deliberately outlives the effect that installed it — the dismissal it
// belongs to has already unmounted or re-rendered by the time the click lands.
// It releases on that click, or on the next gesture if the pointer is dragged
// away and no click ever arrives, so it can never eat a later one. A keydown
// releases it too: a gesture that ends with neither a click nor a cancel would
// otherwise leave it armed, and the click Enter synthesizes on some focused
// control is not the one this dismissal was owed.
function consumeActivation(source: Event) {
const swallow = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
release();
};
const restart = (event: Event) => {
if (event !== source) release();
};
const release = () => {
window.removeEventListener("click", swallow, true);
window.removeEventListener("pointerdown", restart, true);
window.removeEventListener("pointercancel", restart, true);
window.removeEventListener("keydown", release, true);
};
window.addEventListener("click", swallow, true);
window.addEventListener("pointerdown", restart, true);
window.addEventListener("pointercancel", restart, true);
window.addEventListener("keydown", release, true);
}
/**
* Close an open overlay on Escape or a pointerdown outside `ref`. Pass `null`
* for `ref` when what counts as inside isn't one element, and say so with
* `ignore` instead.
*
* The pointerdown listener is capture-phase: a bubble-phase one is blinded by
* any handler in between that stops propagation, and an overlay cannot know
* what it is layered over. `onDismiss` and `ignore` must be stable (wrap in
* useCallback) so the listeners aren't re-bound every render while open.
*/
export function useDismiss(
open: boolean,
onDismiss: () => void,
ref: RefObject<HTMLElement | SVGElement | null> | null,
{
behavior = "pass-through",
escape: dismissOnEscape = true,
ignore,
}: DismissOptions = {},
) {
useEffect(() => {
if (!open) return;
const inside = (target: Element) =>
Boolean(ref?.current?.contains(target)) || Boolean(ignore?.(target));
const onKey = (event: KeyboardEvent) => {
if (dismissOnEscape && event.key === "Escape") onDismiss();
};
const onPointer = (event: PointerEvent) => {
const target = event.target as Element | null;
if (!target || inside(target)) return;
// Outside this overlay, but inside one that is also open: the gesture is
// that overlay's to answer, and swallowing its click from behind would
// cost the user the control they actually aimed at.
if (behavior === "consume" && !claimedByAnotherScope(inside, target)) {
consumeActivation(event);
}
onDismiss();
};
openScopes.add(inside);
window.addEventListener("keydown", onKey);
window.addEventListener("pointerdown", onPointer, true);
return () => {
openScopes.delete(inside);
window.removeEventListener("keydown", onKey);
window.removeEventListener("pointerdown", onPointer, true);
};
}, [open, onDismiss, ref, behavior, dismissOnEscape, ignore]);
}
lib/hooks/use-hover-gesture.ts
"use client";
import { useMemo, useRef } from "react";
import { isHoveringPointer } from "@/lib/touch";
interface BoundaryEvent {
pointerId: number;
pointerType: string;
buttons: number;
}
export interface HoverGesture {
/** True when this enter starts a hover: the pointer arrived resting, not pressing. */
enter: (event: BoundaryEvent) => boolean;
/** True when this leave ends a hover that entered as one. */
leave: (event: BoundaryEvent) => boolean;
}
/**
* Pairs a surface's enter with its leave, per pointer.
*
* `isHoveringPointer` answers the question the *enter* asks — is this pointer
* resting on the surface or pressing it — and both boundary cases go wrong if
* the leave is asked the same question again:
*
* - A pen with no hover never rests. It arrives in contact, taps, and the spec
* then requires its boundary events after `pointerup`, so the leave carries
* `buttons: 0` and reads as a mouse gliding off. Hover teardown then undid
* the tap — the panel the pen had just opened closed under it.
* - A mouse pressed on the surface and dragged off leaves with `buttons: 1`.
* Skipping teardown there strands the surface open: the release happens
* outside, and no second leave ever comes.
*
* So the state a hover holds is released by the pointer that took it, whatever
* the buttons say at the boundary, and a pointer that arrived in contact never
* took it in the first place. Contact is the exception tracked here, not
* hover: a leave from a pointer this surface never saw enter — mounted under
* the cursor, say — still counts, since the alternative is state with no way
* out.
*/
export function useHoverGesture(): HoverGesture {
const contact = useRef(new Set<number>());
return useMemo(
() => ({
enter: (event) => {
if (isHoveringPointer(event)) {
contact.current.delete(event.pointerId);
return true;
}
contact.current.add(event.pointerId);
return false;
},
leave: (event) => {
const arrivedInContact = contact.current.delete(event.pointerId);
return !arrivedInContact && event.pointerType !== "touch";
},
}),
[],
);
}
lib/hooks/use-tap-gesture.ts
"use client";
import { useMemo, useRef } from "react";
/** What a pointerdown recorded, read back by the click that ends its gesture. */
export interface TapRecord<S> {
/** Which input started the gesture. */
pointerType: string;
/** What the surface was showing when it started. */
state: S;
}
export interface TapGesture<S> {
/** Record the gesture a pointerdown starts, with the state it starts in. */
start: (event: { pointerType: string }, state: S) => void;
/** Read the record and clear it. `null` when no pointer is behind this click. */
take: () => TapRecord<S> | null;
/** Drop the record: this gesture will never spend it on a click. */
drop: () => void;
}
/**
* The pointer gesture behind a click, recorded where the click cannot report
* it. A `click` carries no `pointerType` in the engines that matter, so the
* `pointerdown` before it is the only thing that says which input activated
* the control — and whether one did at all, since keyboard activation
* synthesizes a click with no pointer behind it.
*
* State goes in with the record because a click reports that no better: a
* browser that focuses a control on contact can open the very panel the tap
* was meant to open, and reading "is it open" at click time then undoes it.
* What the gesture started against is what it acts on.
*
* The record is spent by one click and dropped by everything else, because a
* record that outlives its gesture is worse than none:
*
* - A scroll or an OS gesture takes the touch away — `pointercancel`, no click
* ever — and the finger would sit in the record until some later click.
* - That later click is often `Enter` on a keyboard, which arrives with no
* pointerdown of its own and would inherit the abandoned finger. A keydown
* is the start of a keyboard activation and never part of a tap, so it drops
* the record too.
*
* Both ends have to be wired by the surface: `drop` on `onPointerCancel` and
* on `onKeyDown`.
*/
export function useTapGesture<S>(): TapGesture<S> {
const record = useRef<TapRecord<S> | null>(null);
return useMemo(
() => ({
start: (event, state) => {
record.current = { pointerType: event.pointerType, state };
},
take: () => {
const spent = record.current;
record.current = null;
return spent;
},
drop: () => {
record.current = null;
},
}),
[],
);
}
lib/hooks/use-favicon.ts
"use client";
import { useCallback, useState } from "react";
import { getFaviconUrl } from "@/lib/favicon";
/**
* Resolves a site favicon and drops it once it is known to be unusable, so
* callers can draw their own glyph instead of a broken image. Plenty of sites
* answer `/favicon.ico` with a 403 or 404, and `onError` is not enough to catch
* it: an image the browser starts loading from server-rendered HTML usually
* fails before React attaches a handler, and that event is never replayed.
* `decode()` settles on the image's final state instead of relying on an event
* firing at the right moment.
*/
export function useFavicon(url?: string) {
const resolved = url ? getFaviconUrl(url) : null;
const [failedSrc, setFailedSrc] = useState<string | null>(null);
const src = resolved && resolved !== failedSrc ? resolved : null;
const ref = useCallback(
(img: HTMLImageElement | null) => {
if (!img || !src) return;
let released = false;
img.decode().catch(() => {
if (!released) setFailedSrc(src);
});
// The node is going away or the source changed; a late rejection then
// describes an image we are no longer showing.
return () => {
released = true;
};
},
[src],
);
return { src, ref };
}
components/motion/magnetic.tsx
"use client";
import { motion, useMotionValue, useReducedMotion, useSpring } from "motion/react";
import { useRef, type ReactNode } from "react";
import { SPRING_MOUSE } from "@/lib/ease";
import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
import { cn } from "@/lib/utils";
export interface MagneticProps {
children: ReactNode;
strength?: number;
className?: string;
}
export function Magnetic({ children, strength = 0.35, className }: MagneticProps) {
const ref = useRef<HTMLDivElement>(null);
const reduce = useReducedMotion();
const canHover = useHoverCapable();
// Decorative cursor-follow: skip on touch (phantom hover) and reduced motion.
const enabled = !reduce && canHover;
const x = useMotionValue(0);
const y = useMotionValue(0);
const sx = useSpring(x, SPRING_MOUSE);
const sy = useSpring(y, SPRING_MOUSE);
const onMove = (e: React.MouseEvent<HTMLDivElement>) => {
const el = ref.current;
if (!el || !enabled) return;
const rect = el.getBoundingClientRect();
x.set((e.clientX - rect.left - rect.width / 2) * strength);
y.set((e.clientY - rect.top - rect.height / 2) * strength);
};
const onLeave = () => {
x.set(0);
y.set(0);
};
return (
<motion.div
ref={ref}
onMouseMove={onMove}
onMouseLeave={onLeave}
style={{ x: sx, y: sy }}
className={cn("inline-block", className)}
>
{children}
</motion.div>
);
}
lib/touch.ts
// Shared touch primitives. iOS and iPadOS run their own gestures on top of the
// page — the long-press selection callout and the selection it drags in with
// it — and they win: once the platform claims a touch it cancels ours
// mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own
// their gesture have to opt out.
//
// What the two classes below cover, precisely:
// - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only:
// it is not a property other engines have, so it is inert everywhere else.
// - `user-select: none` stops the long-press selection on every engine,
// Android included, and stops a drag from painting a selection under the
// cursor. It is inherited, so it reaches every descendant — which is why the
// two classes differ only in whether they apply it unconditionally.
// What neither covers:
// - Chrome for Android's long-press menu on a link or an image. No CSS
// suppresses it; a gesture surface that wraps one needs its own
// `onContextMenu` with `preventDefault()`.
// - The native drag of an `<img>` or `<a>` descendant. `-webkit-user-drag` is
// not inherited and plain divs and buttons are not drag sources, so setting
// it on the surface does nothing — the child itself needs `draggable={false}`.
/**
* Classes for a surface that *is* the control: a thumb, a drum, a stage, a
* handle, a hold button. Selection is suppressed on every input, because a
* drag that highlights the control's own label is wrong on a mouse too.
* Compose with `touch-none` when the surface also owns the scroll axis — leave
* it off when the page must still scroll from there.
*/
export const TOUCH_GESTURE_CLASS = "select-none [-webkit-touch-callout:none]";
/**
* The same opt-out for a gesture surface that wraps content the consumer owns:
* a scroller, a context-menu trigger, a sheet header, a list row. Selection is
* suppressed only where the platform runs its own press gestures — a coarse
* pointer — so a mouse user can still select and copy that content. If the
* gesture itself would paint a selection under the cursor, add `select-none`
* for the duration of the gesture rather than reaching for
* `TOUCH_GESTURE_CLASS`.
*
* `pointer: coarse` describes the *primary* pointer and nothing else, so a
* hybrid machine reads it wrong in both directions: a tablet with a mouse
* plugged in keeps touch as primary and loses mouse selection, and a laptop
* with a touchscreen keeps the mouse as primary and leaves selection live
* under a finger. No media query can answer per interaction — the query is
* about the device, and the question is about the gesture in progress. The
* default stays here because it is right on the machines that are one thing or
* the other, and losing a selection is a nuisance; where the miss costs a
* *gesture* instead, the surface pairs it with `holdSelection` on the press.
*/
export const TOUCH_GESTURE_CONTENT_CLASS =
"[-webkit-touch-callout:none] pointer-coarse:select-none";
/**
* Suppress selection on `element` for as long as a gesture is running on it,
* whatever the primary pointer of the machine happens to be. Returns the
* release. Inline, so it wins over the class above and is gone again the
* moment the gesture ends.
*
* For the press gestures a native selection would otherwise steal — a
* long-press that opens a menu. Elsewhere prefer the classes: a surface that
* takes selection away for the whole session is a surface whose text nobody
* can copy.
*/
export function holdSelection(element: HTMLElement) {
element.style.setProperty("user-select", "none");
element.style.setProperty("-webkit-user-select", "none");
return () => {
element.style.removeProperty("user-select");
element.style.removeProperty("-webkit-user-select");
};
}
/**
* Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer
* is already gone by the time the handler runs — routine on iOS, where the
* system can claim the touch first — and an uncaught throw takes the rest of
* the handler, the gesture included, down with it. Touch pointers carry
* implicit capture anyway, so losing it is never fatal.
*/
export function capturePointer(element: Element, pointerId: number) {
try {
element.setPointerCapture(pointerId);
} catch {
// Pointer is no longer active — implicit capture still applies on touch.
}
}
/** Release a capture taken with `capturePointer`, ignoring a stale pointer. */
export function releasePointer(element: Element, pointerId: number) {
try {
if (element.hasPointerCapture(pointerId)) {
element.releasePointerCapture(pointerId);
}
} catch {
// Capture was already dropped by the browser.
}
}
/**
* Whether this event came from a pointer that is *hovering*: not a touch, and
* not currently pressed. Which input the user is holding right now is not
* something a device capability can answer — a touchscreen laptop hovers and
* taps, and iPadOS reports a fine hovering pointer for a finger — so both
* paths stay live and each handler branches on the event it was given.
*
* A pen resting on the glass is making contact, not hovering: `buttons` is the
* tell, and it sends a pen tap down the same route a finger takes.
*
* This answers what an *enter* asks. A leave is the other half of a pair and
* has to be read against the enter that started it — `useHoverGesture` in
* `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it
* rather than asking this question twice.
*/
export const isHoveringPointer = (event: {
pointerType: string;
buttons: number;
}) => event.pointerType !== "touch" && event.buttons === 0;
lib/favicon.ts
/** Resolve a website URL to its conventional root favicon location. */
export function getFaviconUrl(value: string) {
try {
return new URL("/favicon.ico", value).toString();
} catch {
return null;
}
}