@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/assistant-ui/elements/mermaid-diagram.js

@@ -0,0 +1,258 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Maximize2, Minus, Plus, RotateCcw, X } from "lucide-react";
+import { createPortal } from "react-dom";
+import { renderMermaidSVG } from "beautiful-mermaid";
+//#region src/components/assistant-ui/elements/mermaid-diagram.tsx
+var mermaid_diagram_exports = /* @__PURE__ */ __exportAll({
+	MermaidDiagram: () => MermaidDiagram,
+	MermaidZoom: () => MermaidZoom
+});
+const MIN_SCALE = .5;
+const MAX_SCALE = 4;
+function MermaidZoom({ svg, children }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [transform, setTransform] = useState({
+		x: 0,
+		y: 0,
+		scale: 1
+	});
+	const triggerRef = useRef(null);
+	const closeRef = useRef(null);
+	const overlayRef = useRef(null);
+	const viewportRef = useRef(null);
+	const drag = useRef(null);
+	const transformRef = useRef(transform);
+	transformRef.current = transform;
+	const zoomSvg = useMemo(() => svg.replace(/id="([^"]+)"/g, "id=\"$1-zoom\"").replace(/url\(#([^)]+)\)/g, "url(#$1-zoom)").replace(/(href|xlink:href)="#([^"]+)"/g, "$1=\"#$2-zoom\""), [svg]);
+	const handleClose = useCallback(() => {
+		setIsOpen(false);
+		setTransform({
+			x: 0,
+			y: 0,
+			scale: 1
+		});
+		triggerRef.current?.focus();
+	}, []);
+	useEffect(() => {
+		if (!isOpen) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				handleClose();
+				return;
+			}
+			if (e.key !== "Tab") return;
+			const focusables = overlayRef.current?.querySelectorAll("a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])");
+			const first = focusables?.[0];
+			const last = focusables?.[focusables.length - 1];
+			if (!first || !last) return;
+			if (e.shiftKey && document.activeElement === first) {
+				e.preventDefault();
+				last.focus();
+			} else if (!e.shiftKey && document.activeElement === last) {
+				e.preventDefault();
+				first.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [isOpen, handleClose]);
+	useEffect(() => {
+		if (!isOpen) return;
+		const originalOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = originalOverflow;
+		};
+	}, [isOpen]);
+	useEffect(() => {
+		if (isOpen) closeRef.current?.focus();
+	}, [isOpen]);
+	const zoomBy = useCallback((factor, cx, cy) => {
+		setTransform((t) => {
+			const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, t.scale * factor));
+			const ratio = scale / t.scale;
+			if (cx === void 0 || cy === void 0) {
+				const viewport = viewportRef.current;
+				cx = (viewport?.clientWidth ?? 0) / 2;
+				cy = (viewport?.clientHeight ?? 0) / 2;
+			}
+			return {
+				scale,
+				x: cx - (cx - t.x) * ratio,
+				y: cy - (cy - t.y) * ratio
+			};
+		});
+	}, []);
+	const onWheel = useCallback((e) => {
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		const rect = viewport.getBoundingClientRect();
+		zoomBy(Math.exp(-e.deltaY * .0015), e.clientX - rect.left, e.clientY - rect.top);
+	}, [zoomBy]);
+	const onPointerDown = useCallback((e) => {
+		e.currentTarget.setPointerCapture(e.pointerId);
+		const t = transformRef.current;
+		drag.current = {
+			startX: e.clientX,
+			startY: e.clientY,
+			originX: t.x,
+			originY: t.y
+		};
+	}, []);
+	const onPointerMove = useCallback((e) => {
+		const d = drag.current;
+		if (!d) return;
+		setTransform((t) => ({
+			...t,
+			x: d.originX + e.clientX - d.startX,
+			y: d.originY + e.clientY - d.startY
+		}));
+	}, []);
+	const onPointerUp = useCallback(() => {
+		drag.current = null;
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "mermaid-zoom-wrap",
+		className: "aui-mermaid-zoom-wrap group/mermaid relative",
+		children: [
+			children,
+			/* @__PURE__ */ jsx("button", {
+				ref: triggerRef,
+				type: "button",
+				"data-slot": "mermaid-zoom-trigger",
+				"aria-label": "Expand diagram",
+				onClick: () => setIsOpen(true),
+				className: "aui-mermaid-zoom-trigger text-muted-foreground hover:text-foreground hover:border-muted-foreground/70 border-border bg-background absolute top-2 right-2 cursor-pointer rounded-md border p-1.5 opacity-0 transition group-hover/mermaid:opacity-100 focus-visible:opacity-100",
+				children: /* @__PURE__ */ jsx(Maximize2, { className: "size-3.5" })
+			}),
+			isOpen && createPortal(/* @__PURE__ */ jsxs("div", {
+				ref: overlayRef,
+				"data-slot": "mermaid-zoom-overlay",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": "Diagram",
+				className: "aui-mermaid-zoom-overlay fade-in animate-in bg-background fixed inset-0 z-50 duration-200",
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: viewportRef,
+					className: "aui-mermaid-zoom-viewport h-full w-full cursor-grab touch-none overflow-hidden active:cursor-grabbing",
+					onWheel,
+					onPointerDown,
+					onPointerMove,
+					onPointerUp,
+					onPointerCancel: onPointerUp,
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": "mermaid-zoom-content",
+						className: "aui-mermaid-zoom-content flex h-full w-full items-center justify-center [&_svg]:max-h-[80vh] [&_svg]:max-w-[90vw]",
+						style: {
+							transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
+							transformOrigin: "0 0"
+						},
+						dangerouslySetInnerHTML: { __html: zoomSvg }
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					"data-slot": "mermaid-zoom-toolbar",
+					className: "aui-mermaid-zoom-toolbar border-border bg-background absolute top-4 right-4 flex items-center gap-1 rounded-lg border p-1",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Zoom in",
+							onClick: () => zoomBy(1.25),
+							className: "text-muted-foreground hover:text-foreground cursor-pointer rounded-sm p-1.5",
+							children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Zoom out",
+							onClick: () => zoomBy(.8),
+							className: "text-muted-foreground hover:text-foreground cursor-pointer rounded-sm p-1.5",
+							children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Reset zoom",
+							onClick: () => setTransform({
+								x: 0,
+								y: 0,
+								scale: 1
+							}),
+							className: "text-muted-foreground hover:text-foreground cursor-pointer rounded-sm p-1.5",
+							children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
+						}),
+						/* @__PURE__ */ jsx("button", {
+							ref: closeRef,
+							type: "button",
+							"aria-label": "Close",
+							onClick: handleClose,
+							className: "text-muted-foreground hover:text-foreground cursor-pointer rounded-sm p-1.5",
+							children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+						})
+					]
+				})]
+			}), document.body)
+		]
+	});
+}
+const MermaidDiagramImpl = ({ code, className, streaming = false }) => {
+	const result = useMemo(() => {
+		if (streaming) return null;
+		try {
+			return {
+				svg: renderMermaidSVG(code, {
+					bg: "var(--background)",
+					fg: "var(--foreground)",
+					muted: "var(--muted-foreground)",
+					border: "var(--border)",
+					accent: "var(--foreground)",
+					transparent: true
+				}),
+				error: null
+			};
+		} catch (err) {
+			return {
+				svg: null,
+				error: err instanceof Error ? err : new Error(String(err))
+			};
+		}
+	}, [streaming, code]);
+	if (!result) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "mermaid-skeleton",
+		role: "status",
+		"aria-label": "Rendering diagram",
+		className: cn("aui-mermaid-skeleton bg-muted flex h-32 animate-pulse items-center justify-center gap-3 rounded-b-lg p-4", className),
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "bg-muted-foreground/20 h-8 w-20 rounded-md" }),
+			/* @__PURE__ */ jsx("div", { className: "bg-muted-foreground/20 h-px w-10" }),
+			/* @__PURE__ */ jsx("div", { className: "bg-muted-foreground/20 h-8 w-20 rounded-md" }),
+			/* @__PURE__ */ jsx("div", { className: "bg-muted-foreground/20 h-px w-10" }),
+			/* @__PURE__ */ jsx("div", { className: "bg-muted-foreground/20 h-8 w-20 rounded-md" })
+		]
+	});
+	if (result.error) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "mermaid-fallback",
+		className: cn("aui-mermaid-fallback bg-muted/75 rounded-b-lg", className),
+		children: [/* @__PURE__ */ jsx("pre", {
+			className: "overflow-x-auto p-4 text-sm",
+			children: code.trim()
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground border-border border-t px-4 py-1.5 text-xs",
+			children: "diagram could not be rendered"
+		})]
+	});
+	return /* @__PURE__ */ jsx(MermaidZoom, {
+		svg: result.svg,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "mermaid-diagram",
+			className: cn("aui-mermaid-diagram bg-muted overflow-x-auto rounded-b-lg p-2 [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-full", className),
+			dangerouslySetInnerHTML: { __html: result.svg }
+		})
+	});
+};
+const MermaidDiagram = memo(MermaidDiagramImpl);
+MermaidDiagram.displayName = "MermaidDiagram";
+MermaidDiagram.Zoom = MermaidZoom;
+//#endregion
+export { MermaidDiagram, MermaidZoom, mermaid_diagram_exports };

package/dist/components/assistant-ui/elements/message-actions.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+declare namespace message_actions_d_exports {
+  export { MessageActions, MessageActionsProps, Reaction };
+}
+export type Reaction = "up" | "down" | null;
+export interface MessageActionsProps extends Omit<ComponentProps<"div">, "children"> {
+  copied: boolean;
+  reaction: Reaction;
+  regenerating: boolean;
+  onCopy: () => void;
+  onReactionChange: (reaction: Reaction) => void;
+  onRegenerate: () => void;
+  onMore: () => void;
+}
+export declare function MessageActions({ copied, reaction, regenerating, onCopy, onReactionChange, onRegenerate, onMore, className, ...props }: MessageActionsProps): import("react").JSX.Element;
+//#endregion
+export { message_actions_d_exports };

package/dist/components/assistant-ui/elements/message-actions.js

@@ -0,0 +1,57 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { ghostButton, iconSwap, iconSwapIn, iconSwapOut } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon, EllipsisIcon, RefreshCwIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/message-actions.tsx
+var message_actions_exports = /* @__PURE__ */ __exportAll({ MessageActions: () => MessageActions });
+function MessageActions({ copied, reaction, regenerating, onCopy, onReactionChange, onRegenerate, onMore, className, ...props }) {
+	const buttonClassName = cn(ghostButton, "size-7");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-actions",
+		className: cn("flex items-center gap-1", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-label": copied ? "Copied response" : "Copy response",
+				onClick: onCopy,
+				className: cn(buttonClassName, "grid place-items-center", copied && "text-success"),
+				children: [/* @__PURE__ */ jsx(CopyIcon, { className: cn(iconSwap, "size-3.5", copied ? iconSwapOut : iconSwapIn) }), /* @__PURE__ */ jsx(CheckIcon, { className: cn(iconSwap, "size-3.5", copied ? iconSwapIn : iconSwapOut) })]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Mark response helpful",
+				"aria-pressed": reaction === "up",
+				onClick: () => onReactionChange(reaction === "up" ? null : "up"),
+				className: cn(buttonClassName, reaction === "up" && "bg-foreground/[0.06] text-foreground/90 dark:bg-foreground/[0.09]"),
+				children: /* @__PURE__ */ jsx(ThumbsUpIcon, { className: "size-3.5" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Mark response unhelpful",
+				"aria-pressed": reaction === "down",
+				onClick: () => onReactionChange(reaction === "down" ? null : "down"),
+				className: cn(buttonClassName, reaction === "down" && "bg-foreground/[0.06] text-foreground/90 dark:bg-foreground/[0.09]"),
+				children: /* @__PURE__ */ jsx(ThumbsDownIcon, { className: "size-3.5" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Regenerate response",
+				onClick: onRegenerate,
+				className: buttonClassName,
+				children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-3.5", regenerating && "animate-spin motion-reduce:animate-none") })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "More response actions",
+				onClick: onMore,
+				className: buttonClassName,
+				children: /* @__PURE__ */ jsx(EllipsisIcon, { className: "size-3.5" })
+			})
+		]
+	});
+}
+//#endregion
+export { MessageActions, message_actions_exports };

package/dist/components/assistant-ui/elements/message-attachment.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from "react";
+declare namespace message_attachment_d_exports {
+  export { MessageAttachmentItem, MessageAttachments };
+}
+export interface MessageAttachmentItem {
+  id: string;
+  name: string;
+  size: string;
+  kind: "image" | "document" | "file";
+  pages?: number;
+  swatch?: string;
+}
+export declare function MessageAttachments({ attachments, onOpen, className, ...props }: Omit<ComponentProps<"div">, "children" | "attachments" | "onOpen"> & {
+  attachments: readonly MessageAttachmentItem[];
+  onOpen?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { message_attachment_d_exports };

package/dist/components/assistant-ui/elements/message-attachment.js

@@ -0,0 +1,58 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, mono } from "./surfaces.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FileTextIcon, PaperclipIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/message-attachment.tsx
+var message_attachment_exports = /* @__PURE__ */ __exportAll({ MessageAttachments: () => MessageAttachments });
+function MessageAttachments({ attachments, onOpen, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-attachments",
+		className: cn("flex w-full max-w-sm flex-col gap-1.5", className),
+		...props,
+		children: attachments.map((item) => {
+			const content = item.kind === "image" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn("size-12 shrink-0 rounded-xl bg-cover bg-center transition-transform duration-300 motion-reduce:transition-none", onOpen && "group-hover:scale-[1.04]"),
+				style: {
+					backgroundImage: item.swatch,
+					backgroundColor: "var(--color-foreground)"
+				}
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-foreground/90 truncate text-[13.5px]",
+					children: item.name
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn(mono, "text-muted-foreground"),
+					children: item.size
+				})]
+			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "bg-background/70 text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-lg",
+				children: item.kind === "document" ? /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-3.5" })
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-foreground/90 truncate text-[13.5px]",
+					children: item.name
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-muted-foreground"),
+					children: [item.size, item.pages !== void 0 && ` · ${item.pages} pages`]
+				})]
+			})] });
+			const className = cn(field, "fade-in animate-in fill-mode-both flex w-full items-center gap-2.5 rounded-2xl px-3 py-2 text-start duration-300", item.kind === "image" && onOpen && "group", onOpen && "transition-colors hover:bg-foreground/[0.07] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50");
+			return onOpen ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onOpen(item.id),
+				className,
+				children: content
+			}, item.id) : /* @__PURE__ */ jsx("div", {
+				className,
+				children: content
+			}, item.id);
+		})
+	});
+}
+//#endregion
+export { MessageAttachments, message_attachment_exports };

package/dist/components/assistant-ui/elements/message-branches.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from "react";
+declare namespace message_branches_d_exports {
+  export { MessageBranches, MessageBranchesProps };
+}
+export interface MessageBranchesProps extends Omit<ComponentProps<"div">, "children"> {
+  variants: readonly string[];
+  index: number;
+  onIndexChange: (index: number) => void;
+}
+export declare function MessageBranches({ variants, index, onIndexChange, className, ...props }: MessageBranchesProps): import("react").JSX.Element;
+//#endregion
+export { message_branches_d_exports };

package/dist/components/assistant-ui/elements/message-branches.js

@@ -0,0 +1,55 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/message-branches.tsx
+var message_branches_exports = /* @__PURE__ */ __exportAll({ MessageBranches: () => MessageBranches });
+function MessageBranches({ variants, index, onIndexChange, className, ...props }) {
+	const message = variants[index] ?? variants[0] ?? "";
+	const hasNavigation = variants.length > 1;
+	const goPrevious = () => {
+		if (!hasNavigation) return;
+		onIndexChange(index === 0 ? variants.length - 1 : index - 1);
+	};
+	const goNext = () => {
+		if (!hasNavigation) return;
+		onIndexChange(index === variants.length - 1 ? 0 : index + 1);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-branches",
+		className: cn("flex max-w-sm flex-col gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "fade-in slide-in-from-bottom-1 animate-in text-foreground/90 min-h-[4.25rem] text-sm leading-relaxed duration-300 motion-reduce:animate-none",
+			children: message
+		}, index), hasNavigation && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Show previous response",
+					disabled: !hasNavigation,
+					onClick: goPrevious,
+					className: cn("flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]", "size-6"),
+					children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-3.5" })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground px-1 tabular-nums"),
+					children: variants.length === 0 ? "0 / 0" : `${index + 1} / ${variants.length}`
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Show next response",
+					disabled: !hasNavigation,
+					onClick: goNext,
+					className: cn("flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]", "size-6"),
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { MessageBranches, message_branches_exports };

package/dist/components/assistant-ui/elements/message-pair.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+declare namespace message_pair_d_exports {
+  export { MessagePair, MessagePairProps };
+}
+export interface MessagePairProps extends Omit<ComponentProps<"div">, "children" | "onCopy"> {
+  userMessage: string;
+  words: readonly string[];
+  visibleWords: number;
+  streaming: boolean;
+  variant?: "bubble" | "flat";
+  onCopy?: () => void;
+  onRegenerate?: () => void;
+}
+export declare function MessagePair({ userMessage, words, visibleWords, streaming, variant, onCopy, onRegenerate, className, ...props }: MessagePairProps): import("react").JSX.Element;
+//#endregion
+export { message_pair_d_exports };

package/dist/components/assistant-ui/elements/message-pair.js

@@ -0,0 +1,63 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { paper } from "./surfaces.js";
+import { take } from "../utils/range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CopyIcon, RefreshCwIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/message-pair.tsx
+var message_pair_exports = /* @__PURE__ */ __exportAll({ MessagePair: () => MessagePair });
+function MessagePair({ userMessage, words, visibleWords, streaming, variant = "bubble", onCopy, onRegenerate, className, ...props }) {
+	const shown = take(words, visibleWords);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-pair",
+		className: cn("flex w-full max-w-sm flex-col gap-5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: cn("max-w-[85%] self-end text-sm", variant === "bubble" ? cn(paper, "rounded-2xl px-3.5 py-2") : "text-foreground/90 text-end"),
+			children: userMessage
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "group/message flex flex-col items-start",
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: "min-h-[4.25rem] text-sm leading-relaxed",
+				children: [
+					shown.map((word, index) => /* @__PURE__ */ jsxs("span", {
+						className: "fade-in animate-in fill-mode-both duration-500 motion-reduce:animate-none",
+						children: [word, " "]
+					}, `${word}-${index}`)),
+					streaming && shown.length === 0 && /* @__PURE__ */ jsxs("span", {
+						role: "status",
+						"aria-label": "Waiting for the reply",
+						className: "inline-flex items-center gap-1 py-2 align-middle",
+						children: [
+							/* @__PURE__ */ jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-muted-foreground motion-reduce:animate-none" }),
+							/* @__PURE__ */ jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-muted-foreground [animation-delay:-0.7s] motion-reduce:animate-none" }),
+							/* @__PURE__ */ jsx("span", { className: "size-1.5 animate-pulse rounded-full bg-muted-foreground [animation-delay:-1.4s] motion-reduce:animate-none" })
+						]
+					}),
+					streaming && shown.length > 0 && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "-mb-0.5 ml-0.5 inline-block h-4 w-0.5 animate-pulse rounded-full bg-foreground motion-reduce:animate-none"
+					})
+				]
+			}), (onCopy || onRegenerate) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1 pt-1 opacity-0 transition-opacity group-focus-within/message:opacity-100 group-hover/message:opacity-100 motion-reduce:transition-none",
+				children: [onCopy && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Copy response",
+					onClick: onCopy,
+					className: cn("flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]", "size-7"),
+					children: /* @__PURE__ */ jsx(CopyIcon, { className: "size-3.5" })
+				}), onRegenerate && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Regenerate response",
+					onClick: onRegenerate,
+					className: cn("flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]", "size-7"),
+					children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: "size-3.5" })
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { MessagePair, message_pair_exports };

package/dist/components/assistant-ui/elements/message-queue.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from "react";
+declare namespace message_queue_d_exports {
+  export { MessageQueue, QueuedMessage };
+}
+export interface QueuedMessage {
+  id: string;
+  text: string;
+}
+export declare function MessageQueue({ running, queued, onCancel, className, ...props }: Omit<ComponentProps<"div">, "children" | "running" | "queued" | "onCancel"> & {
+  running: string;
+  queued: readonly QueuedMessage[];
+  onCancel?: (id: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+export { message_queue_d_exports };

package/dist/components/assistant-ui/elements/message-queue.js

@@ -0,0 +1,70 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, mono, paper } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, XIcon } from "lucide-react";
+//#region src/components/assistant-ui/elements/message-queue.tsx
+var message_queue_exports = /* @__PURE__ */ __exportAll({ MessageQueue: () => MessageQueue });
+function MessageQueue({ running, queued, onCancel, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-queue",
+		className: cn("flex w-full max-w-sm flex-col gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn(paper, "flex items-center gap-2.5 rounded-2xl p-3"),
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "relative flex size-2 shrink-0",
+						children: [/* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-info/60 motion-reduce:hidden" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-2 rounded-full bg-info dark:bg-info" })]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-foreground/90 min-w-0 flex-1 truncate text-[13.5px]",
+						children: running
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn(mono, "text-muted-foreground shrink-0"),
+						children: "running"
+					})
+				]
+			}),
+			queued.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between px-1",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground"),
+					children: [queued.length, " queued"]
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn("font-mono text-[11px] tracking-tight", "text-muted-foreground"),
+					children: "sends when this finishes"
+				})]
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-1.5",
+				children: queued.map((message, index) => /* @__PURE__ */ jsxs("li", {
+					className: cn(field, "fade-in slide-in-from-bottom-1 animate-in fill-mode-both flex items-center gap-2.5 rounded-2xl py-2 pr-2 pl-3 duration-300"),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: cn(mono, "text-muted-foreground w-3 shrink-0 tabular-nums"),
+							children: index + 1
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground min-w-0 flex-1 truncate text-[13.5px]",
+							children: message.text
+						}),
+						/* @__PURE__ */ jsx(ArrowUpIcon, { className: "text-muted-foreground size-3 shrink-0" }),
+						onCancel && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": `Remove "${message.text}" from the queue`,
+							onClick: () => onCancel(message.id),
+							className: cn("flex items-center justify-center rounded-full text-muted-foreground outline-none transition-[background-color,color,scale] duration-150 hover:bg-foreground/[0.06] hover:text-foreground/90 active:scale-[0.96] focus-visible:ring-1 focus-visible:ring-foreground/20 motion-reduce:transition-none dark:hover:bg-foreground/[0.09]", "size-6 shrink-0"),
+							children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
+						})
+					]
+				}, message.id))
+			})
+		]
+	});
+}
+//#endregion
+export { MessageQueue, message_queue_exports };