ai-schadcn-chat 0.1.0

package/dist/components/chat/AgentManager.js

@@ -0,0 +1,110 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AgentManager — a dialog to create, read, update, and delete switchable
+ * assistant "agents". Built-in agents are read-only (but can be duplicated);
+ * user agents persist to localStorage via `lib/agents`. Picking an agent
+ * calls `onApply`, which the header maps onto the live chat config.
+ */
+import { ArrowLeft, Check, Copy, Pencil, Plus, Trash2, } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../ui/dialog.js";
+import { Button } from "../ui/button.js";
+import { Input, Textarea } from "../ui/input.js";
+import { Label } from "../ui/label.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../ui/select.js";
+import { Badge } from "../ui/badge.js";
+import { deleteAgent as removeAgent, duplicateAgent, listAgents, saveAgent, } from "../../lib/agents.js";
+import { cn } from "../../lib/utils.js";
+const TONES = [
+    "friendly",
+    "professional",
+    "casual",
+    "concise",
+    "playful",
+    "academic",
+];
+const EMPTY_DRAFT = {
+    name: "",
+    description: "",
+    icon: "🤖",
+    systemPrompt: "",
+    tone: "friendly",
+    suggestions: "",
+};
+function toDraft(a) {
+    return {
+        id: a.id,
+        name: a.name,
+        description: a.description ?? "",
+        icon: a.icon ?? "🤖",
+        systemPrompt: a.systemPrompt,
+        tone: a.tone ?? "friendly",
+        suggestions: (a.suggestions ?? []).join("\n"),
+    };
+}
+export function AgentManager({ open, onOpenChange, activeAgentId, onApply, startInCreate = false, }) {
+    const [agents, setAgents] = useState([]);
+    const [view, setView] = useState("list");
+    const [draft, setDraft] = useState(EMPTY_DRAFT);
+    const refresh = () => setAgents(listAgents());
+    useEffect(() => {
+        if (open) {
+            refresh();
+            setView(startInCreate ? "edit" : "list");
+            setDraft(EMPTY_DRAFT);
+        }
+    }, [open, startInCreate]);
+    const startCreate = () => {
+        setDraft(EMPTY_DRAFT);
+        setView("edit");
+    };
+    const startEdit = (a) => {
+        setDraft(toDraft(a));
+        setView("edit");
+    };
+    const canSave = draft.name.trim().length > 0 && draft.systemPrompt.trim().length > 0;
+    const onSave = () => {
+        if (!canSave)
+            return;
+        const saved = saveAgent({
+            id: draft.id,
+            name: draft.name,
+            description: draft.description,
+            icon: draft.icon,
+            systemPrompt: draft.systemPrompt,
+            tone: draft.tone,
+            suggestions: draft.suggestions.split("\n"),
+        });
+        refresh();
+        onApply(saved);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { className: "max-w-lg gap-0 overflow-hidden p-0", children: view === "list" ? (_jsx(ListView, { agents: agents, activeAgentId: activeAgentId, onCreate: startCreate, onEdit: startEdit, onApply: (a) => {
+                    onApply(a);
+                    onOpenChange(false);
+                }, onDuplicate: (id) => {
+                    duplicateAgent(id);
+                    refresh();
+                }, onDelete: (id) => {
+                    removeAgent(id);
+                    refresh();
+                } })) : (_jsx(EditView, { draft: draft, setDraft: setDraft, canSave: canSave, onBack: () => setView("list"), onSave: onSave })) }) }));
+}
+function ListView({ agents, activeAgentId, onCreate, onEdit, onApply, onDuplicate, onDelete, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { className: "border-b border-border/60 p-5 pb-4", children: [_jsx(DialogTitle, { children: "Agents" }), _jsx(DialogDescription, { children: "Switch, create, edit, or remove your assistant agents." })] }), _jsx("div", { className: "max-h-[55vh] space-y-1.5 overflow-y-auto p-3 scrollbar-thin", children: agents.map((a) => {
+                    const active = a.id === activeAgentId;
+                    return (_jsxs("div", { className: cn("group/agent flex items-center gap-3 rounded-xl border p-2.5 transition-colors", active
+                            ? "border-primary/40 bg-primary/5"
+                            : "border-border/60 hover:bg-accent/50"), children: [_jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-muted text-lg", children: a.icon ?? "🤖" }), _jsxs(Button, { type: "button", variant: "ghost", onClick: () => onApply(a), className: "h-auto min-w-0 flex-1 flex-col items-stretch justify-start gap-0 p-0 text-left hover:bg-transparent", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "truncate text-sm font-medium", children: a.name }), active && (_jsx(Check, { className: "size-3.5 shrink-0 text-primary" })), a.builtIn && (_jsx(Badge, { variant: "secondary", className: "text-[9px]", children: "built-in" }))] }), a.description && (_jsx("span", { className: "block truncate text-xs font-normal text-muted-foreground", children: a.description }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover/agent:opacity-100 focus-within:opacity-100", children: [_jsx(IconBtn, { label: "Duplicate", onClick: () => onDuplicate(a.id), children: _jsx(Copy, { className: "size-3.5" }) }), !a.builtIn && (_jsxs(_Fragment, { children: [_jsx(IconBtn, { label: "Edit", onClick: () => onEdit(a), children: _jsx(Pencil, { className: "size-3.5" }) }), _jsx(IconBtn, { label: "Delete", destructive: true, onClick: () => onDelete(a.id), children: _jsx(Trash2, { className: "size-3.5" }) })] }))] })] }, a.id));
+                }) }), _jsx(DialogFooter, { className: "border-t border-border/60 p-4", children: _jsxs(Button, { onClick: onCreate, className: "w-full gap-2 sm:w-auto", children: [_jsx(Plus, { className: "size-4" }), "New agent"] }) })] }));
+}
+function EditView({ draft, setDraft, canSave, onBack, onSave, }) {
+    const set = (k, v) => setDraft({ ...draft, [k]: v });
+    return (_jsxs(_Fragment, { children: [_jsx(DialogHeader, { className: "border-b border-border/60 p-5 pb-4", children: _jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: onBack, "aria-label": "Back to list", className: "text-muted-foreground hover:text-foreground", children: _jsx(ArrowLeft, { className: "size-4" }) }), draft.id ? "Edit agent" : "New agent"] }) }), _jsxs("div", { className: "max-h-[55vh] space-y-4 overflow-y-auto p-5 scrollbar-thin", children: [_jsxs("div", { className: "flex gap-3", children: [_jsx(Field, { label: "Icon", className: "w-20", children: _jsx(Input, { value: draft.icon, onChange: (e) => set("icon", e.target.value.slice(0, 2)), className: "text-center text-lg", maxLength: 2 }) }), _jsx(Field, { label: "Name", className: "flex-1", children: _jsx(Input, { value: draft.name, onChange: (e) => set("name", e.target.value), placeholder: "e.g. SQL expert" }) })] }), _jsx(Field, { label: "Description", children: _jsx(Input, { value: draft.description, onChange: (e) => set("description", e.target.value), placeholder: "One-line summary (optional)" }) }), _jsx(Field, { label: "System prompt", children: _jsx(Textarea, { value: draft.systemPrompt, onChange: (e) => set("systemPrompt", e.target.value), placeholder: "You are a helpful assistant that\u2026", className: "min-h-28 resize-y" }) }), _jsx(Field, { label: "Tone", children: _jsxs(Select, { value: draft.tone, onValueChange: (v) => set("tone", v), children: [_jsx(SelectTrigger, { className: "capitalize", children: _jsx(SelectValue, { placeholder: "Select a tone" }) }), _jsx(SelectContent, { children: TONES.map((t) => (_jsx(SelectItem, { value: t, className: "capitalize", children: t }, t))) })] }) }), _jsx(Field, { label: "Starter suggestions", hint: "one per line", children: _jsx(Textarea, { value: draft.suggestions, onChange: (e) => set("suggestions", e.target.value), placeholder: "Explain a concept\nReview my code", className: "min-h-20 resize-y" }) })] }), _jsxs(DialogFooter, { className: "gap-2 border-t border-border/60 p-4", children: [_jsx(Button, { variant: "ghost", onClick: onBack, children: "Cancel" }), _jsxs(Button, { onClick: onSave, disabled: !canSave, className: "gap-2", children: [_jsx(Check, { className: "size-4" }), "Save & use"] })] })] }));
+}
+function Field({ label, hint, className, children, }) {
+    return (_jsxs("div", { className: cn("space-y-1.5", className), children: [_jsxs(Label, { className: "flex items-center gap-1.5 text-xs font-medium text-muted-foreground", children: [label, hint && _jsxs("span", { className: "text-muted-foreground/60", children: ["\u00B7 ", hint] })] }), children] }));
+}
+function IconBtn({ label, destructive, onClick, children, }) {
+    return (_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": label, onClick: onClick, className: cn("text-muted-foreground hover:bg-foreground/10", destructive ? "hover:text-destructive" : "hover:text-foreground"), children: children }));
+}

package/dist/components/chat/Attachment.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Attachment — sourced from `apps/v4/styles/radix-rhea/ui/attachment.tsx` in
+ * the official `shadcn-ui/ui` repo (https://github.com/shadcn-ui/ui).
+ *
+ * Source paths in the original module were remapped:
+ *   - `@/lib/utils`                          → `../../lib/utils.js`
+ *   - `radix-ui` (Slot.Root)                 → `@radix-ui/react-slot`
+ *   - `@/styles/radix-rhea/ui/button`        → `../ui/button.js`
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Button } from "../ui/button.js";
+declare const attachmentVariants: (props?: ({
+    size?: "default" | "sm" | "xs" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done";
+}): React.JSX.Element;
+declare const attachmentMediaVariants: (props?: ({
+    variant?: "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): React.JSX.Element;
+declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentAction({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AttachmentTrigger({ className, asChild, type, ...props }: React.ComponentProps<"button"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Attachment, AttachmentGroup, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger, };
+//# sourceMappingURL=Attachment.d.ts.map

package/dist/components/chat/Attachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attachment.d.ts","sourceRoot":"","sources":["../../../src/components/chat/Attachment.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,QAAA,MAAM,kBAAkB;;;8EAgBvB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAc,EACd,IAAgB,EAChB,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAC5B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;CAChE,qBAaF;AAED,QAAA,MAAM,uBAAuB;;8EAc5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,OAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,qBAS5E;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW9B;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAY9B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAO,EACP,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,qBAUrC;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAe,EACf,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,qBAWA;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW5E;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,CAAC"}

package/dist/components/chat/Attachment.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+const attachmentVariants = cva("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-2xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/30 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed", {
+    variants: {
+        size: {
+            default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+            sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+            xs: "gap-1.5 rounded-xl text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+        },
+        orientation: {
+            horizontal: "min-w-40 items-center",
+            vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+        },
+    },
+});
+function Attachment({ className, state = "done", size = "default", orientation = "horizontal", ...props }) {
+    const resolvedOrientation = orientation ?? "horizontal";
+    return (_jsx("div", { "data-slot": "attachment", "data-state": state, "data-size": size, "data-orientation": resolvedOrientation, className: cn(attachmentVariants({ size, orientation }), className), ...props }));
+}
+const attachmentMediaVariants = cva("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
+    variants: {
+        variant: {
+            icon: "",
+            image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
+        },
+    },
+    defaultVariants: {
+        variant: "icon",
+    },
+});
+function AttachmentMedia({ className, variant = "icon", ...props }) {
+    return (_jsx("div", { "data-slot": "attachment-media", "data-variant": variant, className: cn(attachmentMediaVariants({ variant }), className), ...props }));
+}
+function AttachmentContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "attachment-content", className: cn("max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", className), ...props }));
+}
+function AttachmentTitle({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "attachment-title", className: cn("block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer", className), ...props }));
+}
+function AttachmentDescription({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "attachment-description", className: cn("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80", "max-w-full", className), ...props }));
+}
+function AttachmentActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "attachment-actions", className: cn("relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1", className), ...props }));
+}
+function AttachmentAction({ className, variant, size = "icon-sm", ...props }) {
+    return (_jsx(Button, { "data-slot": "attachment-action", variant: variant ?? "ghost", size: size, className: cn(className), ...props }));
+}
+function AttachmentTrigger({ className, asChild = false, type, ...props }) {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { "data-slot": "attachment-trigger", type: asChild ? undefined : (type ?? "button"), className: cn("absolute inset-0 z-10 outline-none", className), ...props }));
+}
+function AttachmentGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "attachment-group", className: cn("flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className), ...props }));
+}
+export { Attachment, AttachmentGroup, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger, };

package/dist/components/chat/AttachmentPreview.d.ts

@@ -0,0 +1,8 @@
+import type { AttachmentMeta } from "../../types/chat.js";
+export interface AttachmentPreviewProps {
+    att: AttachmentMeta;
+    state?: "idle" | "uploading" | "processing" | "error" | "done";
+    onRemove?: () => void;
+}
+export declare function AttachmentPreview({ att, state, onRemove, }: AttachmentPreviewProps): import("react").JSX.Element;
+//# sourceMappingURL=AttachmentPreview.d.ts.map

package/dist/components/chat/AttachmentPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentPreview.d.ts","sourceRoot":"","sources":["../../../src/components/chat/AttachmentPreview.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAmB1D,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,cAAc,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,EACH,KAAc,EACd,QAAQ,GACT,EAAE,sBAAsB,+BAuCxB"}

package/dist/components/chat/AttachmentPreview.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AttachmentPreview — a single attachment chip built on the official shadcn
+ * `Attachment` block. Renders an image thumbnail (`AttachmentMedia
+ * variant="image"`) for image files and a type-specific icon otherwise.
+ *
+ * Used by both the composer (with a remove action) and the message list
+ * (read-only). The `state` prop drives the official component's visuals —
+ * `uploading`/`processing` trigger the shimmer on the title.
+ */
+import { File as FileIcon, FileCode, FileJson, FileText, FileType, X, } from "lucide-react";
+import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, } from "./Attachment.js";
+import { formatBytes } from "../../lib/utils.js";
+function iconFor(mime) {
+    if (mime === "application/pdf")
+        return FileType;
+    if (mime === "application/json")
+        return FileJson;
+    if (mime.startsWith("text/csv") || mime === "text/csv")
+        return FileCode;
+    if (mime.startsWith("text/"))
+        return FileText;
+    return FileIcon;
+}
+function shortType(mime) {
+    if (!mime || mime === "application/octet-stream")
+        return "file";
+    if (mime.startsWith("image/"))
+        return mime.slice(6).toUpperCase();
+    if (mime === "application/pdf")
+        return "PDF";
+    if (mime === "application/json")
+        return "JSON";
+    if (mime.startsWith("text/"))
+        return mime.slice(5).toUpperCase();
+    return mime;
+}
+export function AttachmentPreview({ att, state = "done", onRemove, }) {
+    const mime = att.mimeType ?? att.mime ?? "";
+    const isImage = mime.startsWith("image/") && Boolean(att.dataUrl);
+    const Icon = iconFor(mime);
+    return (_jsxs(Attachment, { size: "default", state: state, className: "w-56 max-w-full bg-background/60", children: [isImage ? (_jsx(AttachmentMedia, { variant: "image", className: "size-11 rounded-lg ring-1 ring-border/60", children: _jsx("img", { src: att.dataUrl, alt: att.name, loading: "lazy" }) })) : (_jsx(AttachmentMedia, { className: "size-11 rounded-lg text-primary", children: _jsx(Icon, { className: "size-5" }) })), _jsxs(AttachmentContent, { children: [_jsx(AttachmentTitle, { children: att.name }), _jsxs(AttachmentDescription, { children: [formatBytes(att.size), " \u00B7 ", shortType(mime)] })] }), onRemove && (_jsx(AttachmentActions, { children: _jsx(AttachmentAction, { "aria-label": "Remove attachment", onClick: onRemove, children: _jsx(X, { className: "size-3.5" }) }) }))] }));
+}

package/dist/components/chat/ChatComposer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Re-export of `MessageInput` to preserve the historical `ChatComposer`
+ * import path. The composer has been re-implemented on top of the
+ * official shadcn `Attachment` block (see `./MessageInput.tsx`).
+ *
+ * The `ChatComposer` interface intentionally matches what the original
+ * composer exposed: callers can keep using `<ChatComposer />` with no
+ * changes.
+ */
+export { MessageInput as ChatComposer, type MessageInputProps as ChatComposerProps, } from "./MessageInput.js";
+//# sourceMappingURL=ChatComposer.d.ts.map

package/dist/components/chat/ChatComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatComposer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EACL,YAAY,IAAI,YAAY,EAC5B,KAAK,iBAAiB,IAAI,iBAAiB,GAC5C,MAAM,mBAAmB,CAAC"}

package/dist/components/chat/ChatComposer.js

@@ -0,0 +1,10 @@
+/**
+ * Re-export of `MessageInput` to preserve the historical `ChatComposer`
+ * import path. The composer has been re-implemented on top of the
+ * official shadcn `Attachment` block (see `./MessageInput.tsx`).
+ *
+ * The `ChatComposer` interface intentionally matches what the original
+ * composer exposed: callers can keep using `<ChatComposer />` with no
+ * changes.
+ */
+export { MessageInput as ChatComposer, } from "./MessageInput.js";

package/dist/components/chat/ChatHeader.d.ts

@@ -0,0 +1,5 @@
+export interface ChatHeaderProps {
+    className?: string;
+}
+export declare function ChatHeader({ className }: ChatHeaderProps): import("react").JSX.Element;
+//# sourceMappingURL=ChatHeader.d.ts.map

package/dist/components/chat/ChatHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatHeader.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatHeader.tsx"],"names":[],"mappings":"AA8CA,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,EAAE,eAAe,+BAkZxD"}

package/dist/components/chat/ChatHeader.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chat header — brand mark, title/subtitle, and the control cluster
+ * (personality, context documents, conversation history, theme toggle,
+ * overflow). Rendered on a translucent, blurred bar that floats above the
+ * message stream.
+ */
+import { Check, ChevronDown, FileText, History, MessageSquarePlus, MoreHorizontal, Plus, Settings2, Sparkles, Trash2, Wrench, } from "lucide-react";
+import { useState } from "react";
+import { useChat } from "../../hooks/useChat.js";
+import { getActiveAgentId, listAgents, setActiveAgentId, } from "../../lib/agents.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "../ui/tooltip.js";
+import { AgentManager } from "./AgentManager.js";
+import { ThemeToggle } from "./ThemeToggle.js";
+import { cn } from "../../lib/utils.js";
+export function ChatHeader({ className }) {
+    const chat = useChat();
+    const cfg = chat.config;
+    const ui = cfg.ui ?? {};
+    const [agentsOpen, setAgentsOpen] = useState(false);
+    const [docsOpen, setDocsOpen] = useState(false);
+    const [managerOpen, setManagerOpen] = useState(false);
+    const [managerCreate, setManagerCreate] = useState(false);
+    const [activeAgentId, setActiveAgent] = useState(() => getActiveAgentId());
+    const agents = listAgents();
+    const activeAgent = agents.find((a) => a.id === activeAgentId) ??
+        agents.find((a) => a.name === cfg.personality?.name);
+    // ui.* visibility flags the user can toggle from the playground form.
+    // Default every chip to visible so out-of-the-box behaviour matches the
+    // previous always-render header. Setting any of these to false hides the
+    // corresponding control cluster; the brand mark, new-chat button, theme
+    // toggle, and overflow menu stay always-on.
+    const showModelSelector = ui.showModelSelector ?? true;
+    const showDocumentPicker = ui.showDocumentPicker ?? true;
+    const showToolCalls = ui.showToolCalls ?? true;
+    const enableConversationHistory = ui.enableConversationHistory ?? true;
+    const applyAgent = (agent) => {
+        chat.updateConfig({
+            systemPrompt: agent.systemPrompt,
+            personality: {
+                ...cfg.personality,
+                name: agent.name,
+                tone: agent.tone,
+                avatar: agent.icon,
+                ...(agent.locale ? { locale: agent.locale } : {}),
+            },
+            ui: {
+                ...ui,
+                title: agent.name,
+                ...(agent.suggestions && agent.suggestions.length > 0
+                    ? { suggestions: agent.suggestions }
+                    : {}),
+            },
+        });
+        setActiveAgentId(agent.id);
+        setActiveAgent(agent.id);
+        setAgentsOpen(false);
+    };
+    const openManager = (create) => {
+        setManagerCreate(create);
+        setManagerOpen(true);
+        setAgentsOpen(false);
+    };
+    const toggleDoc = (doc) => {
+        const current = cfg.documents ?? [];
+        const next = current.find((d) => d.id === doc.id)
+            ? current.filter((d) => d.id !== doc.id)
+            : [...current, doc];
+        chat.updateConfig({ documents: next });
+    };
+    const builtInDocs = [
+        {
+            id: "built-in:web",
+            name: "Web search guidance",
+            description: "Cites sources and flags primary vs. aggregated info.",
+            alwaysOn: false,
+            body: "When unsure, prefer citing authoritative web sources and link to them. Distinguish between primary sources and aggregators.",
+        },
+        {
+            id: "built-in:code",
+            name: "Code reviewer",
+            description: "Checks bugs, security, perf, readability & test coverage.",
+            alwaysOn: false,
+            body: "When reviewing code, point out: 1) correctness bugs, 2) security implications, 3) performance, 4) readability, 5) test coverage. Suggest minimal patches.",
+        },
+        {
+            id: "built-in:sql",
+            name: "SQL guardrails",
+            description: "Blocks unsafe SQL; requires WHERE clauses & parameters.",
+            alwaysOn: false,
+            body: "Never write destructive SQL without a WHERE clause. Prefer parameterized queries. Always state the table schema when joining.",
+        },
+    ];
+    const docCount = cfg.documents?.length ?? 0;
+    const conversations = chat.listConversationsMeta();
+    return (_jsxs("header", { className: cn("relative z-20 flex items-center justify-between gap-2 border-b border-border/60 bg-background/70 px-3 py-2.5 backdrop-blur-xl supports-[backdrop-filter]:bg-background/55 sm:px-4", className), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { className: "relative grid size-9 shrink-0 place-items-center rounded-xl grad-primary text-primary-foreground shadow-sm glow-primary", children: activeAgent?.icon ? (_jsx("span", { className: "text-lg leading-none", children: activeAgent.icon })) : (_jsx(Sparkles, { className: "size-[18px]" })) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-semibold tracking-tight", children: ui.title ?? "Assistant" }), _jsxs("p", { className: "flex items-center gap-1.5 truncate text-xs text-muted-foreground", children: [_jsx("span", { className: "inline-block size-1.5 shrink-0 rounded-full bg-success shadow-[0_0_6px_currentColor]" }), _jsx("span", { className: "truncate", children: ui.subtitle ?? (cfg.model.label || cfg.model.id || "Ready") })] })] })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [showModelSelector && (_jsxs(DropdownMenu, { open: agentsOpen, onOpenChange: setAgentsOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "hidden h-8 max-w-[180px] gap-1.5 rounded-lg px-2.5 text-xs font-medium text-muted-foreground hover:text-foreground sm:inline-flex", children: [_jsx("span", { className: "text-sm leading-none", children: activeAgent?.icon ?? "✨" }), _jsx("span", { className: "truncate", children: activeAgent?.name ?? cfg.personality?.name ?? "Agent" }), _jsx(ChevronDown, { className: "size-3 shrink-0 opacity-50" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [_jsx(DropdownMenuLabel, { children: "Agents" }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: agents.map((a) => (_jsxs(DropdownMenuItem, { onClick: () => applyAgent(a), className: "gap-2", children: [_jsx("span", { className: "text-base leading-none", children: a.icon ?? "🤖" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: a.name }), a.id === activeAgent?.id && (_jsx(Check, { className: "size-3.5 shrink-0 text-primary" }))] }, a.id))) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => openManager(true), children: [_jsx(Plus, { className: "size-3.5" }), "New agent"] }), _jsxs(DropdownMenuItem, { onClick: () => openManager(false), children: [_jsx(Settings2, { className: "size-3.5" }), "Manage agents\u2026"] })] })] })), showDocumentPicker && (_jsxs(DropdownMenu, { open: docsOpen, onOpenChange: setDocsOpen, children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 gap-1.5 rounded-lg px-2.5 text-xs font-medium text-muted-foreground hover:text-foreground", children: [_jsx(FileText, { className: "size-3.5" }), _jsx("span", { className: "hidden sm:inline", children: "Docs" }), docCount > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-0.5 h-4 min-w-4 justify-center rounded-full px-1 text-[9px] tabular-nums", children: docCount }))] }) }) }), _jsx(TooltipContent, { children: "Context documents \u2014 extra instructions prepended to the model's system prompt" })] }), _jsxs(DropdownMenuContent, { align: "end", className: "w-72", children: [_jsx(DropdownMenuLabel, { children: "Context documents" }), builtInDocs.map((d) => {
+                                        const active = (cfg.documents ?? []).some((x) => x.id === d.id);
+                                        return (_jsx(DropdownMenuItem, { onClick: () => toggleDoc(d), className: "items-start gap-2", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-2 truncate", children: [d.name, active && (_jsx(Badge, { variant: "secondary", className: "ml-auto text-[9px]", children: "on" }))] }), d.description && (_jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: d.description }))] }) }, d.id));
+                                    }), _jsx(DropdownMenuSeparator, {}), _jsx("p", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: "Toggle a doc to prepend it to the model's context." })] })] })), _jsx("span", { className: "mx-1 hidden h-5 w-px bg-border/70 sm:block" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", className: "rounded-lg text-muted-foreground hover:text-foreground", "aria-label": "New chat", onClick: () => chat.newConversation(), children: _jsx(MessageSquarePlus, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: "New chat" })] }), enableConversationHistory && (_jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", className: "rounded-lg text-muted-foreground hover:text-foreground", "aria-label": "Conversation history", children: _jsx(History, { className: "size-4" }) }) }) }), _jsx(TooltipContent, { children: "History" })] }), _jsxs(DropdownMenuContent, { align: "end", className: "w-72", children: [_jsx(DropdownMenuLabel, { children: "Conversation history" }), _jsx(DropdownMenuSeparator, {}), conversations.length === 0 ? (_jsxs("p", { className: "px-2 py-6 text-center text-xs text-muted-foreground", children: ["No conversations yet.", _jsx("br", {}), "Send a message to start one."] })) : (_jsx("div", { className: "max-h-72 overflow-y-auto", children: conversations.map((c) => {
+                                            const active = c.id === chat.conversationId;
+                                            return (_jsxs("div", { className: cn("group/conv flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors", active ? "bg-accent" : "hover:bg-accent/60"), children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: () => chat.setConversationId(c.id), className: "h-auto min-w-0 flex-1 justify-start gap-2 p-0 text-left font-normal hover:bg-transparent", children: [active ? (_jsx(Check, { className: "size-3.5 shrink-0 text-primary" })) : (_jsx("span", { className: "size-3.5 shrink-0" })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-medium", children: c.title }), _jsxs("span", { className: "block truncate text-[11px] text-muted-foreground", children: [c.messageCount, " msg", c.updatedAt ? ` · ${relativeTime(c.updatedAt)}` : ""] })] })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Delete conversation", onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            chat.deleteConversation(c.id);
+                                                        }, className: "size-7 shrink-0 text-muted-foreground opacity-0 transition-opacity hover:bg-foreground/10 hover:text-destructive group-hover/conv:opacity-100", children: _jsx(Trash2, { className: "size-3.5" }) })] }, c.id));
+                                        }) }))] })] })), _jsx(ThemeToggle, { className: "rounded-lg text-muted-foreground hover:text-foreground" }), showToolCalls && chat.getActiveToolCallCount() > 0 && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "inline-flex h-7 items-center gap-1 rounded-lg border border-border/60 bg-card/60 px-2 text-xs font-medium text-muted-foreground", "aria-label": `${chat.getActiveToolCallCount()} tool calls in progress`, children: [_jsx(Wrench, { className: "size-3.5 animate-pulse" }), _jsx("span", { className: "font-mono", children: chat.getActiveToolCallCount() })] }) }), _jsxs(TooltipContent, { children: [chat.getActiveToolCallCount(), " tool call", chat.getActiveToolCallCount() === 1 ? "" : "s", " in progress"] })] })), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", className: "rounded-lg text-muted-foreground hover:text-foreground", "aria-label": "More", children: _jsx(MoreHorizontal, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => openManager(false), children: [_jsx(Settings2, { className: "size-3.5" }), "Manage agents\u2026"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => chat.clear(), className: "text-destructive focus:text-destructive", children: [_jsx(Trash2, { className: "size-3.5" }), "Clear this conversation"] })] })] })] }), _jsx(AgentManager, { open: managerOpen, onOpenChange: setManagerOpen, activeAgentId: activeAgent?.id ?? null, onApply: applyAgent, startInCreate: managerCreate })] }));
+}
+function relativeTime(ts) {
+    const diff = Date.now() - ts;
+    const min = Math.round(diff / 60000);
+    if (min < 1)
+        return "just now";
+    if (min < 60)
+        return `${min}m ago`;
+    const hr = Math.round(min / 60);
+    if (hr < 24)
+        return `${hr}h ago`;
+    const day = Math.round(hr / 24);
+    if (day < 7)
+        return `${day}d ago`;
+    try {
+        return new Date(ts).toLocaleDateString(undefined, {
+            month: "short",
+            day: "numeric",
+        });
+    }
+    catch {
+        return "";
+    }
+}

package/dist/components/chat/ChatPanel.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The full chat panel — header + virtualized message list + composer.
+ * Drop this into any layout and you get a complete chat experience.
+ */
+import type { CSSProperties, ReactNode } from "react";
+import type { ChatConfig } from "../../types/chat.js";
+export interface ChatPanelProps {
+    /** Inline config. Mutate at runtime via `useChat().updateConfig`. */
+    config: ChatConfig;
+    /** Layout. `panel` (default) is a card; `floating` is a fixed corner widget. */
+    layout?: "panel" | "floating" | "fullpage";
+    /** Override the default header render. */
+    renderHeader?: () => ReactNode;
+    /** Override the default footer render (above the composer). */
+    renderFooter?: () => ReactNode;
+    /** Extra className on the outer container. */
+    className?: string;
+    /** Extra className on the inner content wrapper of both the message list
+     *  and composer (merged over the default `max-w-3xl` via tailwind-merge).
+     *  Use this to let the conversation use more horizontal space in wide
+     *  layouts, e.g. `contentClassName="max-w-5xl"`. */
+    contentClassName?: string;
+    /** Extra style. */
+    style?: CSSProperties;
+    /** Hide the header entirely. */
+    hideHeader?: boolean;
+    /** Hide the composer entirely (render a read-only viewer). */
+    hideComposer?: boolean;
+}
+/**
+ * One-shot: ChatProvider + TooltipProvider + layout shell + Header +
+ * MessageList + Composer. For full control, compose the primitives
+ * yourself and only wrap with <ChatProvider config={…} />.
+ */
+export declare function ChatPanel(props: ChatPanelProps): ReactNode;
+//# sourceMappingURL=ChatPanel.d.ts.map

package/dist/components/chat/ChatPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatPanel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGtD,MAAM,WAAW,cAAc;IAC7B,qEAAqE;IACrE,MAAM,EAAE,UAAU,CAAC;IACnB,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IAC3C,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAC/B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAC/B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;wDAGoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,CA0C1D"}

package/dist/components/chat/ChatPanel.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TooltipProvider } from "../ui/tooltip.js";
+import { ChatHeader } from "./ChatHeader.js";
+import { ChatComposer } from "./ChatComposer.js";
+import { MessageList } from "./MessageList.js";
+import { cn } from "../../lib/utils.js";
+import { ChatProvider, useOptionalChat } from "./ChatProvider.js";
+/**
+ * One-shot: ChatProvider + TooltipProvider + layout shell + Header +
+ * MessageList + Composer. For full control, compose the primitives
+ * yourself and only wrap with <ChatProvider config={…} />.
+ */
+export function ChatPanel(props) {
+    const { config, layout = "panel", renderHeader, renderFooter, className, contentClassName, style, hideHeader = false, hideComposer = false, } = props;
+    const containerClasses = layout === "floating"
+        ? "fixed bottom-5 right-5 z-40 flex w-[min(420px,calc(100vw-2.5rem))] h-[min(660px,calc(100vh-2.5rem))] flex-col overflow-hidden rounded-2xl surface-elevated app-mesh"
+        : layout === "fullpage"
+            ? "flex h-full w-full flex-col app-mesh"
+            : "flex h-full w-full flex-col overflow-hidden rounded-2xl surface-elevated app-mesh";
+    // If a parent already provided a ChatProvider (we are nested), use it
+    // and skip the internal one — otherwise the form mutates the outer
+    // engine but the header/list/composer inside this panel read from the
+    // inner engine, and the two would silently diverge. When there's no
+    // parent provider we create one so the panel works standalone too.
+    const outer = useOptionalChat();
+    const tree = (_jsx(TooltipProvider, { delayDuration: 200, children: _jsx(ChatSurface, { layout: layout, className: className, style: style, renderHeader: renderHeader, renderFooter: renderFooter, contentClassName: contentClassName, hideHeader: hideHeader, hideComposer: hideComposer }) }));
+    if (outer)
+        return tree;
+    return _jsx(ChatProvider, { config: config, children: tree });
+}
+/**
+ * ChatSurface — the inner panel tree. Reads `useOptionalChat` so it can
+ * apply density/theme/accent/font CSS hooks to its root div based on the
+ * active config. Lives in the same file as ChatPanel because it has no
+ * value as a standalone component.
+ */
+function ChatSurface({ layout, className, style, renderHeader, renderFooter, contentClassName, hideHeader, hideComposer, }) {
+    const chat = useOptionalChat();
+    const ui = chat?.config.ui ?? {};
+    const density = ui.density ?? "comfortable";
+    const theme = ui.theme ?? "system";
+    const accentColor = ui.accentColor ?? "";
+    const fontFamily = ui.fontFamily ?? "";
+    const containerClasses = layout === "floating"
+        ? "fixed bottom-5 right-5 z-40 flex w-[min(420px,calc(100vw-2.5rem))] h-[min(660px,calc(100vh-2.5rem))] flex-col overflow-hidden rounded-2xl surface-elevated app-mesh"
+        : layout === "fullpage"
+            ? "flex h-full w-full flex-col app-mesh"
+            : "flex h-full w-full flex-col overflow-hidden rounded-2xl surface-elevated app-mesh";
+    const inlineVars = {};
+    if (accentColor)
+        inlineVars["--chat-accent"] = accentColor;
+    if (fontFamily)
+        inlineVars["--chat-font-family"] = fontFamily;
+    return (_jsxs("div", { className: cn(containerClasses, className), style: { ...style, ...inlineVars }, "data-density": density, "data-theme": theme, children: [renderHeader ? (renderHeader()) : hideHeader ? null : (_jsx(ChatHeader, {})), _jsx(MessageList, { contentClassName: contentClassName }), renderFooter ? renderFooter() : null, hideComposer ? null : _jsx(ChatComposer, { contentClassName: contentClassName })] }));
+}

package/dist/components/chat/ChatProvider.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from "react";
+import type { AttachmentMeta, ChatConfig, ChatMessage, ConversationMeta } from "../../types/chat.js";
+import { ChatEngine as ChatEngineImpl } from "../../lib/chat-engine.js";
+export interface ChatContextValue {
+    engine: ChatEngineImpl;
+    config: ChatConfig;
+    /**
+     * Update the active config. Two overloads:
+     *   - `updateConfig(partial)` — shallow-merge partial into the current config.
+     *   - `updateConfig(updater)` — functional form, receives the current
+     *     config and returns the partial to merge. Use this when the partial
+     *     needs to read the current config (avoids stale-closure bugs in
+     *     long-lived form components).
+     */
+    updateConfig(partial: Partial<ChatConfig>): void;
+    updateConfig(updater: (current: ChatConfig) => Partial<ChatConfig>): void;
+    messages: ChatMessage[];
+    isStreaming: boolean;
+    conversationId: string;
+    setConversationId: (id: string) => void;
+    send: (text: string, attachments?: AttachmentMeta[]) => Promise<void>;
+    sendFiles: (text: string, files: File[]) => Promise<void>;
+    abort: () => void;
+    regenerate: () => Promise<void>;
+    editAndResend: (messageId: string, newContent: string) => Promise<void>;
+    clear: () => void;
+    newConversation: () => string;
+    deleteMessage: (messageId: string) => void;
+    deleteConversation: (id: string) => void;
+    listConversations: () => string[];
+    listConversationsMeta: () => ConversationMeta[];
+    /** Count of in-flight tool calls for the active conversation. */
+    getActiveToolCallCount: () => number;
+}
+export interface ChatProviderProps {
+    config: ChatConfig;
+    children: ReactNode;
+}
+/**
+ * Mount a chat engine for the lifetime of the React subtree. Multiple
+ * ChatProviders can coexist; each gets its own engine. The provider
+ * uses useSyncExternalStore for concurrent-mode-safe subscriptions.
+ */
+export declare function ChatProvider(props: ChatProviderProps): ReactNode;
+/**
+ * Hook to access the chat engine. Throws when used outside a ChatProvider.
+ */
+export declare function useChat(): ChatContextValue;
+/**
+ * Variant of useChat that returns null instead of throwing. Use in
+ * components that may render both inside and outside a provider.
+ */
+export declare function useOptionalChat(): ChatContextValue | null;
+/**
+ * Default config helper for the MiniMax provider.
+ */
+export declare function defaultConfig(overrides?: Partial<ChatConfig>): ChatConfig;
+//# sourceMappingURL=ChatProvider.d.ts.map

package/dist/components/chat/ChatProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatProvider.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,cAAc,EACd,UAAU,EACV,WAAW,EACX,gBAAgB,EACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGxE,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB;;;;;;;OAOG;IACH,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;IACjD,YAAY,CACV,OAAO,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,OAAO,CAAC,UAAU,CAAC,GACpD,IAAI,CAAC;IACR,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,cAAc,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxE,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iBAAiB,EAAE,MAAM,MAAM,EAAE,CAAC;IAClC,qBAAqB,EAAE,MAAM,gBAAgB,EAAE,CAAC;IAChD,iEAAiE;IACjE,sBAAsB,EAAE,MAAM,MAAM,CAAC;CACtC;AAID,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAyJhE;AAED;;GAEG;AACH,wBAAgB,OAAO,IAAI,gBAAgB,CAM1C;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,gBAAgB,GAAG,IAAI,CAEzD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,SAAS,GAAE,OAAO,CAAC,UAAU,CAAM,GAAG,UAAU,CAE7E"}