@nocoo/basalt 2.2.0 → 3.0.0

package/dist/components/chat-composer.js

@@ -1,73 +1,139 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
 import { Button as t } from "./button.js";
-import { InputArea as n } from "./input-area.js";
-import { useRef as r, useState as i } from "react";
-import { ArrowUp as a, Square as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useChatComposer as n } from "../viewmodels/use-chat-composer.js";
+import { InputArea as r } from "./input-area.js";
+import { useId as i, useRef as a } from "react";
+import { ArrowUp as o, Paperclip as s, Square as c, X as l } from "lucide-react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/chat-composer.tsx
-function l({ disabled: l = !1, streaming: u = !1, label: d = "Message", placeholder: f, onSend: p, onCancel: m, sendLabel: h = "Send message", cancelLabel: g = "Stop generating", className: _ }) {
-	let [v, y] = i(""), b = r(null), x = r(!1), S = () => {
-		let e = b.current;
-		e && (e.style.height = "0px", e.style.height = `${Math.min(e.scrollHeight, 160)}px`);
-	}, C = () => {
-		let e = v.trim();
-		!e || l || u || (p(e), y(""), requestAnimationFrame(() => {
-			S(), b.current?.focus();
-		}));
+function p({ disabled: p = !1, streaming: m = !1, label: h = "Message", placeholder: g, onSend: _, onCancel: v, sendLabel: y = "Send message", cancelLabel: b = "Stop generating", className: x, value: S, defaultValue: C, onValueChange: w, toolbar: T, attachments: E = [], onRemoveAttachment: D, onFilesSelect: O, accept: k }) {
+	let A = n({
+		value: S,
+		defaultValue: C,
+		onValueChange: w,
+		onSend: _,
+		disabled: p,
+		streaming: m,
+		hasAttachments: E.length > 0
+	}), j = a(null), M = a(null), N = i(), P = a(!1), F = async () => {
+		await A.send() && j.current?.focus();
 	};
-	return /* @__PURE__ */ s("form", {
-		className: e("border-t border-basalt-border/50 bg-basalt-card p-3", _),
+	return /* @__PURE__ */ f("form", {
+		className: e("basalt-ui shrink-0", x),
 		onSubmit: (e) => {
-			e.preventDefault(), C();
+			e.preventDefault(), F();
 		},
-		children: /* @__PURE__ */ c("div", {
-			className: "flex items-end gap-2 rounded-2xl bg-basalt-secondary p-2 ring-1 ring-basalt-border/50",
-			children: [/* @__PURE__ */ s(n, {
-				ref: b,
-				value: v,
-				onChange: (e) => {
-					y(e.target.value), requestAnimationFrame(S);
-				},
-				onCompositionStart: () => {
-					x.current = !0;
-				},
-				onCompositionEnd: () => {
-					x.current = !1;
-				},
-				onKeyDown: (e) => {
-					x.current || e.nativeEvent.isComposing || e.key !== "Enter" || e.shiftKey || (e.preventDefault(), C());
-				},
-				rows: 1,
-				placeholder: f,
-				disabled: l,
-				"aria-label": d,
-				className: "max-h-40 min-h-[40px] flex-1 resize-none border-0 bg-transparent p-2 shadow-none ring-0"
-			}), u ? /* @__PURE__ */ s(t, {
-				type: "button",
-				size: "icon",
-				variant: "secondary",
-				onClick: m,
-				disabled: !m,
-				"aria-label": g,
-				children: /* @__PURE__ */ s(o, {
-					className: "h-3.5 w-3.5 fill-current",
-					strokeWidth: 0
+		children: [/* @__PURE__ */ f("div", {
+			className: "rounded-basalt-lg bg-basalt-control p-basalt-space-lg ring-1 ring-basalt-border focus-within:ring-basalt-ring",
+			children: [
+				E.length > 0 && /* @__PURE__ */ d("ul", {
+					"aria-label": "Attachments",
+					className: "mb-basalt-space-lg flex flex-wrap gap-basalt-space-md",
+					children: E.map((e) => /* @__PURE__ */ f("li", {
+						className: "flex min-w-0 max-w-full items-center gap-basalt-space-sm rounded-basalt-md bg-basalt-secondary py-basalt-space-sm pl-basalt-space-lg pr-basalt-space-sm text-basalt-sm",
+						children: [
+							/* @__PURE__ */ d(s, {
+								"aria-hidden": "true",
+								className: "size-basalt-icon shrink-0"
+							}),
+							/* @__PURE__ */ d("span", {
+								className: "truncate",
+								children: e.name
+							}),
+							D && /* @__PURE__ */ d(t, {
+								type: "button",
+								size: "icon",
+								variant: "ghost",
+								disabled: p || A.pending || m,
+								className: "size-basalt-5",
+								"aria-label": `Remove ${e.name}`,
+								onClick: () => D(e.id),
+								children: /* @__PURE__ */ d(l, {})
+							})
+						]
+					}, e.id))
+				}),
+				/* @__PURE__ */ d(r, {
+					ref: j,
+					value: A.value,
+					onChange: (e) => A.update(e.target.value),
+					onCompositionStart: () => {
+						P.current = !0;
+					},
+					onCompositionEnd: () => {
+						P.current = !1;
+					},
+					onKeyDown: (e) => {
+						P.current || e.nativeEvent.isComposing || e.keyCode === 229 || e.key !== "Enter" || e.shiftKey || (e.preventDefault(), F());
+					},
+					rows: 1,
+					placeholder: g,
+					disabled: p || A.pending,
+					"aria-label": h,
+					"aria-describedby": A.error ? N : void 0,
+					"aria-description": "Enter to send, Shift+Enter for a new line",
+					className: "basalt-chat-input min-h-[calc(1lh+var(--basalt-space-2))] resize-none overflow-y-auto border-0 bg-transparent px-basalt-space-sm py-basalt-space-sm text-basalt-base leading-[var(--basalt-line-body)] shadow-none ring-0 outline-none"
+				}),
+				/* @__PURE__ */ f("div", {
+					className: "mt-basalt-content-gap flex items-center justify-between gap-basalt-content-gap",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex min-w-0 flex-1 flex-wrap items-center gap-basalt-space-sm",
+						children: [O && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("input", {
+							ref: M,
+							type: "file",
+							multiple: !0,
+							accept: k,
+							hidden: !0,
+							onChange: (e) => {
+								O(Array.from(e.target.files ?? [])), e.target.value = "";
+							}
+						}), /* @__PURE__ */ d(t, {
+							type: "button",
+							size: "icon",
+							variant: "ghost",
+							"aria-label": "Attach files",
+							disabled: p || A.pending || m,
+							onClick: () => M.current?.click(),
+							children: /* @__PURE__ */ d(s, {})
+						})] }), /* @__PURE__ */ d("fieldset", {
+							disabled: p || m || A.pending,
+							className: "contents",
+							children: T
+						})]
+					}), m ? /* @__PURE__ */ d(t, {
+						type: "button",
+						size: "icon",
+						variant: "secondary",
+						onClick: v,
+						disabled: p || !v,
+						"aria-label": b,
+						children: /* @__PURE__ */ d(c, {
+							className: "h-basalt-3_5 w-basalt-3_5 fill-current",
+							strokeWidth: 0
+						})
+					}) : /* @__PURE__ */ d(t, {
+						type: "submit",
+						size: "icon",
+						disabled: !A.canSend,
+						loading: A.pending,
+						"aria-label": y,
+						children: /* @__PURE__ */ d(o, {
+							className: "h-basalt-4 w-basalt-4",
+							strokeWidth: 2.25
+						})
+					})]
 				})
-			}) : /* @__PURE__ */ s(t, {
-				type: "submit",
-				size: "icon",
-				disabled: l || !v.trim(),
-				"aria-label": h,
-				children: /* @__PURE__ */ s(a, {
-					className: "h-4 w-4",
-					strokeWidth: 2.25
-				})
-			})]
-		})
+			]
+		}), A.error && /* @__PURE__ */ d("p", {
+			id: N,
+			role: "alert",
+			className: "mt-basalt-content-gap text-basalt-sm text-basalt-danger",
+			children: A.error
+		})]
 	});
 }
 //#endregion
-export { l as ChatComposer };
+export { p as ChatComposer };
 
 //# sourceMappingURL=chat-composer.js.map

package/dist/components/chat-composer.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-composer.js","names":["ChatComposer","value","setValue","useState","ref","useRef","composingRef","resize","el","submit","text","disabled","streaming","onSend","cn","className","event","InputArea","label","Button","onCancel","cancelLabel","Square","sendLabel","ArrowUp"],"sources":["../../src/components/chat-composer.tsx"],"sourcesContent":["import { ArrowUp, Square } from \"lucide-react\";\nimport { type FormEvent, type KeyboardEvent, useRef, useState } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\nimport { InputArea } from \"./input-area\";\n\nexport interface ChatComposerProps {\n\t/**\n\t * Disable the field and send.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Replace send with stop. When streaming is true, the stop button renders and triggers onCancel.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Field accessible name.\n\t * @default \"Message\"\n\t */\n\tlabel?: string;\n\t/**\n\t * Placeholder when empty.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Called with trimmed text on send. Operates on internal draft state and does not wait for a Promise (caller manages asynchronous errors).\n\t */\n\tonSend: (text: string) => void;\n\t/**\n\t * Called when the stop control is pressed while streaming is active.\n\t */\n\tonCancel?: () => void;\n\t/**\n\t * Send control accessible name.\n\t * @default \"Send message\"\n\t */\n\tsendLabel?: string;\n\t/**\n\t * Stop control accessible name.\n\t * @default \"Stop generating\"\n\t */\n\tcancelLabel?: string;\n\t/**\n\t * Optional class name applied to the form container.\n\t * Component manages internal draft/height state and does not forward native form rest attributes or ref.\n\t */\n\tclassName?: string;\n}\n\nexport function ChatComposer({\n\tdisabled = false,\n\tstreaming = false,\n\tlabel = \"Message\",\n\tplaceholder,\n\tonSend,\n\tonCancel,\n\tsendLabel = \"Send message\",\n\tcancelLabel = \"Stop generating\",\n\tclassName,\n}: ChatComposerProps) {\n\tconst [value, setValue] = useState(\"\");\n\tconst ref = useRef<HTMLTextAreaElement>(null);\n\tconst composingRef = useRef(false);\n\n\tconst resize = () => {\n\t\tconst el = ref.current;\n\t\tif (!el) {\n\t\t\treturn;\n\t\t}\n\t\tel.style.height = \"0px\";\n\t\tel.style.height = `${Math.min(el.scrollHeight, 160)}px`;\n\t};\n\n\tconst submit = () => {\n\t\tconst text = value.trim();\n\t\tif (!text || disabled || streaming) {\n\t\t\treturn;\n\t\t}\n\t\tonSend(text);\n\t\tsetValue(\"\");\n\t\trequestAnimationFrame(() => {\n\t\t\tresize();\n\t\t\tref.current?.focus();\n\t\t});\n\t};\n\n\tconst onSubmit = (event: FormEvent) => {\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\tconst onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n\t\tif (composingRef.current || event.nativeEvent.isComposing) {\n\t\t\treturn;\n\t\t}\n\t\tif (event.key !== \"Enter\" || event.shiftKey) {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tsubmit();\n\t};\n\n\treturn (\n\t\t<form\n\t\t\tclassName={cn(\"border-t border-basalt-border/50 bg-basalt-card p-3\", className)}\n\t\t\tonSubmit={onSubmit}\n\t\t>\n\t\t\t<div className=\"flex items-end gap-2 rounded-2xl bg-basalt-secondary p-2 ring-1 ring-basalt-border/50\">\n\t\t\t\t<InputArea\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\tsetValue(event.target.value);\n\t\t\t\t\t\trequestAnimationFrame(resize);\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionStart={() => {\n\t\t\t\t\t\tcomposingRef.current = true;\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionEnd={() => {\n\t\t\t\t\t\tcomposingRef.current = false;\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\trows={1}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\tclassName=\"max-h-40 min-h-[40px] flex-1 resize-none border-0 bg-transparent p-2 shadow-none ring-0\"\n\t\t\t\t/>\n\t\t\t\t{streaming ? (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\tdisabled={!onCancel}\n\t\t\t\t\t\taria-label={cancelLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Square className=\"h-3.5 w-3.5 fill-current\" strokeWidth={0} />\n\t\t\t\t\t</Button>\n\t\t\t\t) : (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tdisabled={disabled || !value.trim()}\n\t\t\t\t\t\taria-label={sendLabel}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ArrowUp className=\"h-4 w-4\" strokeWidth={2.25} />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</form>\n\t);\n}\n"],"mappings":";;;;;;;;AAmDA,SAAgBA,EAAa,EAC5B,cAAW,IACX,eAAY,IACZ,WAAQ,WACR,gBACA,WACA,aACA,eAAY,gBACZ,iBAAc,mBACd,gBACqB;CACrB,IAAM,CAACC,GAAOC,KAAYC,EAAS,EAAE,GAC/BC,IAAMC,EAA4B,IAAI,GACtCC,IAAeD,EAAO,EAAK,GAE3BE,UAAe;EACpB,IAAMC,IAAKJ,EAAI;EACf,AAAKI,MAGL,EAAG,MAAM,SAAS,OAClB,EAAG,MAAM,SAAS,GAAG,KAAK,IAAIA,EAAG,cAAc,GAAG,EAAE;CACrD,GAEMC,UAAe;EACpB,IAAMC,IAAOT,EAAM,KAAK;EACxB,AAAI,CAACS,KAAQC,KAAYC,MAGzBC,EAAOH,CAAI,GACXR,EAAS,EAAE,GACX,4BAA4B;GAE3B,AADAK,EAAO,GACPH,EAAI,SAAS,MAAM;EACpB,CAAC;CACF;CAkBA,OACC,kBAAC,QAAD;EACC,WAAWU,EAAG,uDAAuDC,CAAS;EACpE,WAnBM,MAAqB;GAEtC,AADAC,EAAM,eAAe,GACrBP,EAAO;EACR;EAkBE,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAACQ,GAAD;IACM;IACE;IACP,WAAW,MAAU;KAEpB,AADAf,EAASc,EAAM,OAAO,KAAK,GAC3B,sBAAsBT,CAAM;IAC7B;IACA,0BAA0B;KACzB,EAAa,UAAU;IACxB;IACA,wBAAwB;KACvB,EAAa,UAAU;IACxB;IACW,YA9BI,MAA8C;KAChE,AAAID,EAAa,WAAWU,EAAM,YAAY,eAG1CA,EAAM,QAAQ,WAAWA,EAAM,aAGnCA,EAAM,eAAe,GACrBP,EAAO;IACR;IAsBI,MAAM;IACO;IACH;IACV,cAAYS;IACZ,WAAU;GACV,CAAA,GACAN,IACA,kBAACO,GAAD;IACC,MAAK;IACL,MAAK;IACL,SAAQ;IACR,SAASC;IACT,UAAU,CAACA;IACX,cAAYC;IAEZ,UAAA,kBAACC,GAAD;KAAQ,WAAU;KAA2B,aAAa;IAAI,CAAA;GACvD,CAAA,IAER,kBAACH,GAAD;IACC,MAAK;IACL,MAAK;IACL,UAAUR,KAAY,CAACV,EAAM,KAAK;IAClC,cAAYsB;IAEZ,UAAA,kBAACC,GAAD;KAAS,WAAU;KAAU,aAAa;IAAO,CAAA;GAC1C,CAAA,CAEL;;CACA,CAAA;AAER"}
+{"version":3,"file":"chat-composer.js","names":["_Fragment","Fragment$1","ChatComposer","vm","useChatComposer","attachments","ref","useRef","fileInput","errorId","useId","composingRef","submit","cn","className","event","Paperclip","file","onRemoveAttachment","Button","disabled","streaming","X","InputArea","label","onFilesSelect","toolbar","onCancel","cancelLabel","Square","sendLabel","ArrowUp"],"sources":["../../src/components/chat-composer.tsx"],"sourcesContent":["import { ArrowUp, Paperclip, Square, X } from \"lucide-react\";\nimport { type FormEvent, type KeyboardEvent, type ReactNode, useId, useRef } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { useChatComposer } from \"../viewmodels/use-chat-composer\";\nimport { Button } from \"./button\";\nimport { InputArea } from \"./input-area\";\n\nexport interface ChatComposerProps {\n\t/** Controlled draft; keep one draft per conversation in the application. */\n\tvalue?: string;\n\t/** Initial draft when uncontrolled. */\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\t/** Model, tool and context controls arranged before Send. */\n\ttoolbar?: ReactNode;\n\t/** Caller-owned attachments; this component never uploads files. */\n\tattachments?: readonly ChatComposerAttachment[];\n\tonRemoveAttachment?: (id: string) => void;\n\t/** Local file selection callback. File validation/upload belong to the application. */\n\tonFilesSelect?: (files: File[]) => void;\n\taccept?: string;\n\t/**\n\t * Disable the field and send.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Replace send with stop. When streaming is true, the stop button renders and triggers onCancel.\n\t * @default false\n\t */\n\tstreaming?: boolean;\n\t/**\n\t * Field accessible name.\n\t * @default \"Message\"\n\t */\n\tlabel?: string;\n\t/**\n\t * Placeholder when empty.\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Called with trimmed text. Async failure preserves draft and attachments for retry.\n\t */\n\tonSend: (text: string) => void | Promise<void>;\n\t/**\n\t * Called when the stop control is pressed while streaming is active.\n\t */\n\tonCancel?: () => void;\n\t/**\n\t * Send control accessible name.\n\t * @default \"Send message\"\n\t */\n\tsendLabel?: string;\n\t/**\n\t * Stop control accessible name.\n\t * @default \"Stop generating\"\n\t */\n\tcancelLabel?: string;\n\t/**\n\t * Optional class name applied to the form container.\n\t * Component manages internal draft/height state and does not forward native form rest attributes or ref.\n\t */\n\tclassName?: string;\n}\n\nexport type ChatComposerAttachment = { id: string; name: string };\n\nexport function ChatComposer({\n\tdisabled = false,\n\tstreaming = false,\n\tlabel = \"Message\",\n\tplaceholder,\n\tonSend,\n\tonCancel,\n\tsendLabel = \"Send message\",\n\tcancelLabel = \"Stop generating\",\n\tclassName,\n\tvalue,\n\tdefaultValue,\n\tonValueChange,\n\ttoolbar,\n\tattachments = [],\n\tonRemoveAttachment,\n\tonFilesSelect,\n\taccept,\n}: ChatComposerProps) {\n\tconst vm = useChatComposer({\n\t\tvalue,\n\t\tdefaultValue,\n\t\tonValueChange,\n\t\tonSend,\n\t\tdisabled,\n\t\tstreaming,\n\t\thasAttachments: attachments.length > 0,\n\t});\n\tconst ref = useRef<HTMLTextAreaElement>(null);\n\tconst fileInput = useRef<HTMLInputElement>(null);\n\tconst errorId = useId();\n\tconst composingRef = useRef(false);\n\tconst submit = async () => {\n\t\tif (await vm.send()) ref.current?.focus();\n\t};\n\n\tconst onSubmit = (event: FormEvent) => {\n\t\tevent.preventDefault();\n\t\tvoid submit();\n\t};\n\n\tconst onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n\t\tif (composingRef.current || event.nativeEvent.isComposing || event.keyCode === 229) {\n\t\t\treturn;\n\t\t}\n\t\tif (event.key !== \"Enter\" || event.shiftKey) {\n\t\t\treturn;\n\t\t}\n\t\tevent.preventDefault();\n\t\tvoid submit();\n\t};\n\n\treturn (\n\t\t<form className={cn(\"basalt-ui shrink-0\", className)} onSubmit={onSubmit}>\n\t\t\t<div className=\"rounded-basalt-lg bg-basalt-control p-basalt-space-lg ring-1 ring-basalt-border focus-within:ring-basalt-ring\">\n\t\t\t\t{attachments.length > 0 && (\n\t\t\t\t\t<ul\n\t\t\t\t\t\taria-label=\"Attachments\"\n\t\t\t\t\t\tclassName=\"mb-basalt-space-lg flex flex-wrap gap-basalt-space-md\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{attachments.map((file) => (\n\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\tkey={file.id}\n\t\t\t\t\t\t\t\tclassName=\"flex min-w-0 max-w-full items-center gap-basalt-space-sm rounded-basalt-md bg-basalt-secondary py-basalt-space-sm pl-basalt-space-lg pr-basalt-space-sm text-basalt-sm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Paperclip aria-hidden=\"true\" className=\"size-basalt-icon shrink-0\" />\n\t\t\t\t\t\t\t\t<span className=\"truncate\">{file.name}</span>\n\t\t\t\t\t\t\t\t{onRemoveAttachment && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tdisabled={disabled || vm.pending || streaming}\n\t\t\t\t\t\t\t\t\t\tclassName=\"size-basalt-5\"\n\t\t\t\t\t\t\t\t\t\taria-label={`Remove ${file.name}`}\n\t\t\t\t\t\t\t\t\t\tonClick={() => onRemoveAttachment(file.id)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<X />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t)}\n\t\t\t\t<InputArea\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvalue={vm.value}\n\t\t\t\t\tonChange={(event) => vm.update(event.target.value)}\n\t\t\t\t\tonCompositionStart={() => {\n\t\t\t\t\t\tcomposingRef.current = true;\n\t\t\t\t\t}}\n\t\t\t\t\tonCompositionEnd={() => {\n\t\t\t\t\t\tcomposingRef.current = false;\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDown={onKeyDown}\n\t\t\t\t\trows={1}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tdisabled={disabled || vm.pending}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\taria-describedby={vm.error ? errorId : undefined}\n\t\t\t\t\taria-description=\"Enter to send, Shift+Enter for a new line\"\n\t\t\t\t\tclassName=\"basalt-chat-input min-h-[calc(1lh+var(--basalt-space-2))] resize-none overflow-y-auto border-0 bg-transparent px-basalt-space-sm py-basalt-space-sm text-basalt-base leading-[var(--basalt-line-body)] shadow-none ring-0 outline-none\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"mt-basalt-content-gap flex items-center justify-between gap-basalt-content-gap\">\n\t\t\t\t\t<div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-basalt-space-sm\">\n\t\t\t\t\t\t{onFilesSelect && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tref={fileInput}\n\t\t\t\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\t\t\t\tmultiple\n\t\t\t\t\t\t\t\t\taccept={accept}\n\t\t\t\t\t\t\t\t\thidden\n\t\t\t\t\t\t\t\t\tonChange={(event) => {\n\t\t\t\t\t\t\t\t\t\tonFilesSelect(Array.from(event.target.files ?? []));\n\t\t\t\t\t\t\t\t\t\tevent.target.value = \"\";\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\taria-label=\"Attach files\"\n\t\t\t\t\t\t\t\t\tdisabled={disabled || vm.pending || streaming}\n\t\t\t\t\t\t\t\t\tonClick={() => fileInput.current?.click()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Paperclip />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<fieldset disabled={disabled || streaming || vm.pending} className=\"contents\">\n\t\t\t\t\t\t\t{toolbar}\n\t\t\t\t\t\t</fieldset>\n\t\t\t\t\t</div>\n\t\t\t\t\t{streaming ? (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\tdisabled={disabled || !onCancel}\n\t\t\t\t\t\t\taria-label={cancelLabel}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Square className=\"h-basalt-3_5 w-basalt-3_5 fill-current\" strokeWidth={0} />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\tdisabled={!vm.canSend}\n\t\t\t\t\t\t\tloading={vm.pending}\n\t\t\t\t\t\t\taria-label={sendLabel}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ArrowUp className=\"h-basalt-4 w-basalt-4\" strokeWidth={2.25} />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{vm.error && (\n\t\t\t\t<p\n\t\t\t\t\tid={errorId}\n\t\t\t\t\trole=\"alert\"\n\t\t\t\t\tclassName=\"mt-basalt-content-gap text-basalt-sm text-basalt-danger\"\n\t\t\t\t>\n\t\t\t\t\t{vm.error}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</form>\n\t);\n}\n"],"mappings":"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"}

package/dist/components/chat-header.js

@@ -5,25 +5,25 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/chat-header.tsx
 function i({ title: i, subtitle: a, leading: o, children: s, className: c, ...l }) {
 	return /* @__PURE__ */ r("header", {
-		className: e(t, "flex items-center justify-between gap-2 border-b border-basalt-border/50 px-3 py-2.5", c),
+		className: e(t, "flex items-center justify-between gap-basalt-content-gap border-b border-basalt-border/50 px-basalt-panel-x py-basalt-panel-y leading-[var(--basalt-line-body)]", c),
 		...l,
 		children: [/* @__PURE__ */ r("div", {
-			className: "flex min-w-0 items-center gap-2",
+			className: "flex min-w-0 items-center gap-basalt-content-gap",
 			children: [o ? /* @__PURE__ */ n("span", {
-				className: "flex h-8 w-8 items-center justify-center",
+				className: "flex h-basalt-8 w-basalt-8 items-center justify-center",
 				children: o
 			}) : null, /* @__PURE__ */ r("div", {
 				className: "min-w-0",
 				children: [/* @__PURE__ */ n("p", {
-					className: "truncate text-sm font-semibold tracking-tight",
+					className: "truncate text-basalt-base font-semibold tracking-tight",
 					children: i
 				}), a ? /* @__PURE__ */ n("p", {
-					className: "truncate text-[11px] text-basalt-muted-foreground",
+					className: "truncate text-basalt-xs text-basalt-muted-foreground",
 					children: a
 				}) : null]
 			})]
 		}), s ? /* @__PURE__ */ n("div", {
-			className: "flex items-center gap-1",
+			className: "flex items-center gap-basalt-space-sm",
 			children: s
 		}) : null]
 	});

package/dist/components/chat-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-header.js","names":["ChatHeader","props","cn","BASALT_UI_CLASS","className","leading","title","subtitle","children"],"sources":["../../src/components/chat-header.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport interface ChatHeaderProps\n\textends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"children\" | \"className\"> {\n\t/**\n\t * Conversation title.\n\t */\n\ttitle: ReactNode;\n\t/**\n\t * Secondary line under the title.\n\t */\n\tsubtitle?: ReactNode;\n\t/**\n\t * Leading mark, usually an icon.\n\t */\n\tleading?: ReactNode;\n\t/**\n\t * Trailing actions.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Optional class name applied to the header element.\n\t * Component inherits native header HTMLAttributes on the root element but does not forward ref.\n\t */\n\tclassName?: string;\n}\n\nexport function ChatHeader({\n\ttitle,\n\tsubtitle,\n\tleading,\n\tchildren,\n\tclassName,\n\t...props\n}: ChatHeaderProps) {\n\treturn (\n\t\t<header\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex items-center justify-between gap-2 border-b border-basalt-border/50 px-3 py-2.5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex min-w-0 items-center gap-2\">\n\t\t\t\t{leading ? (\n\t\t\t\t\t<span className=\"flex h-8 w-8 items-center justify-center\">{leading}</span>\n\t\t\t\t) : null}\n\t\t\t\t<div className=\"min-w-0\">\n\t\t\t\t\t<p className=\"truncate text-sm font-semibold tracking-tight\">{title}</p>\n\t\t\t\t\t{subtitle ? (\n\t\t\t\t\t\t<p className=\"truncate text-[11px] text-basalt-muted-foreground\">{subtitle}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{children ? <div className=\"flex items-center gap-1\">{children}</div> : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;AA6BA,SAAgBA,EAAW,EAC1B,UACA,aACA,YACA,aACA,cACA,GAAGC,KACgB;CACnB,OACC,kBAAC,UAAD;EACC,WAAWC,EACVC,GACA,wFACAC,CACD;EACA,GAAIH;EANL,UAAA,CAQC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACEI,IACA,kBAAC,QAAD;IAAM,WAAU;IAA4C,UAAAA;GAAc,CAAA,IACvE,MACJ,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,KAAD;KAAG,WAAU;KAAiD,UAAAC;IAAS,CAAA,GACtEC,IACA,kBAAC,KAAD;KAAG,WAAU;KAAqD,UAAAA;IAAY,CAAA,IAC3E,IACA;GACD,CAAA,CAAA;EACJ,CAAA,GAAAC,IAAW,kBAAC,OAAD;GAAK,WAAU;GAA2B;EAAc,CAAA,IAAI,IACjE;;AAEV"}
+{"version":3,"file":"chat-header.js","names":["ChatHeader","props","cn","BASALT_UI_CLASS","className","leading","title","subtitle","children"],"sources":["../../src/components/chat-header.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport interface ChatHeaderProps\n\textends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"children\" | \"className\"> {\n\t/**\n\t * Conversation title.\n\t */\n\ttitle: ReactNode;\n\t/**\n\t * Secondary line under the title.\n\t */\n\tsubtitle?: ReactNode;\n\t/**\n\t * Leading mark, usually an icon.\n\t */\n\tleading?: ReactNode;\n\t/**\n\t * Trailing actions.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Optional class name applied to the header element.\n\t * Component inherits native header HTMLAttributes on the root element but does not forward ref.\n\t */\n\tclassName?: string;\n}\n\nexport function ChatHeader({\n\ttitle,\n\tsubtitle,\n\tleading,\n\tchildren,\n\tclassName,\n\t...props\n}: ChatHeaderProps) {\n\treturn (\n\t\t<header\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex items-center justify-between gap-basalt-content-gap border-b border-basalt-border/50 px-basalt-panel-x py-basalt-panel-y leading-[var(--basalt-line-body)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex min-w-0 items-center gap-basalt-content-gap\">\n\t\t\t\t{leading ? (\n\t\t\t\t\t<span className=\"flex h-basalt-8 w-basalt-8 items-center justify-center\">{leading}</span>\n\t\t\t\t) : null}\n\t\t\t\t<div className=\"min-w-0\">\n\t\t\t\t\t<p className=\"truncate text-basalt-base font-semibold tracking-tight\">{title}</p>\n\t\t\t\t\t{subtitle ? (\n\t\t\t\t\t\t<p className=\"truncate text-basalt-xs text-basalt-muted-foreground\">{subtitle}</p>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{children ? <div className=\"flex items-center gap-basalt-space-sm\">{children}</div> : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;AA6BA,SAAgBA,EAAW,EAC1B,UACA,aACA,YACA,aACA,cACA,GAAGC,KACgB;CACnB,OACC,kBAAC,UAAD;EACC,WAAWC,EACVC,GACA,mKACAC,CACD;EACA,GAAIH;EANL,UAAA,CAQC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACEI,IACA,kBAAC,QAAD;IAAM,WAAU;IAA0D,UAAAA;GAAc,CAAA,IACrF,MACJ,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,KAAD;KAAG,WAAU;KAA0D,UAAAC;IAAS,CAAA,GAC/EC,IACA,kBAAC,KAAD;KAAG,WAAU;KAAwD,UAAAA;IAAY,CAAA,IAC9E,IACA;GACD,CAAA,CAAA;EACJ,CAAA,GAAAC,IAAW,kBAAC,OAAD;GAAK,WAAU;GAAyC;EAAc,CAAA,IAAI,IAC/E;;AAEV"}

package/dist/components/chat-inbox.js

@@ -1,44 +1,48 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { Button as t } from "./button.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useHoverHighlight as t } from "../utils/use-hover-highlight.js";
+import { NAV_ITEM_CLASS as n, NAV_LIST_CLASS as r } from "../utils/navigation.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/chat-inbox.tsx
-function i({ items: i, activeId: a, onSelect: o, className: s, ...c }) {
-	return /* @__PURE__ */ n("nav", {
-		className: e("flex min-h-0 flex-col gap-0.5 overflow-y-auto p-2", s),
-		...c,
-		children: i.map((i) => {
-			let s = i.id === a;
-			return /* @__PURE__ */ r(t, {
+function o({ items: o, activeId: s, onSelect: c, className: l, ...u }) {
+	let d = t();
+	return /* @__PURE__ */ i("nav", {
+		ref: d,
+		className: e(r, "min-h-0 flex-col overflow-y-auto overscroll-y-contain", l),
+		...u,
+		children: o.map((t) => {
+			let r = t.id === s;
+			return /* @__PURE__ */ a("button", {
 				type: "button",
-				variant: "ghost",
-				"aria-current": s ? "true" : void 0,
-				onClick: () => o(i.id),
-				className: e("h-auto w-full justify-start gap-2 rounded-basalt-md px-2 py-2 text-left", s ? "bg-basalt-accent" : ""),
-				children: [i.leading ? /* @__PURE__ */ n("span", {
-					className: "flex h-8 w-8 shrink-0 items-center justify-center",
-					children: i.leading
-				}) : null, /* @__PURE__ */ r("span", {
+				"aria-current": r ? "true" : void 0,
+				"data-basalt-hover-item": "",
+				"data-hover-selected": r,
+				onClick: () => c(t.id),
+				className: e(n, "w-full justify-start"),
+				children: [t.leading ? /* @__PURE__ */ i("span", {
+					className: "flex h-basalt-8 w-basalt-8 shrink-0 items-center justify-center",
+					children: t.leading
+				}) : null, /* @__PURE__ */ a("span", {
 					className: "min-w-0 flex-1",
-					children: [/* @__PURE__ */ r("span", {
-						className: "flex items-baseline justify-between gap-2",
-						children: [/* @__PURE__ */ n("span", {
-							className: "truncate text-sm font-medium text-basalt-foreground",
-							children: i.title
-						}), i.time ? /* @__PURE__ */ n("span", {
-							className: "shrink-0 text-[11px] text-basalt-muted-foreground",
-							children: i.time
+					children: [/* @__PURE__ */ a("span", {
+						className: "flex items-baseline justify-between gap-basalt-row-gap",
+						children: [/* @__PURE__ */ i("span", {
+							className: "truncate text-basalt-base font-medium text-basalt-foreground",
+							children: t.title
+						}), t.time ? /* @__PURE__ */ i("span", {
+							className: "shrink-0 text-basalt-xs text-basalt-muted-foreground",
+							children: t.time
 						}) : null]
-					}), i.preview ? /* @__PURE__ */ n("span", {
-						className: "mt-0.5 block truncate text-xs text-basalt-muted-foreground",
-						children: i.preview
+					}), t.preview ? /* @__PURE__ */ i("span", {
+						className: "mt-basalt-space-xs block truncate text-basalt-sm text-basalt-muted-foreground",
+						children: t.preview
 					}) : null]
 				})]
-			}, i.id);
+			}, t.id);
 		})
 	});
 }
 //#endregion
-export { i as ChatInbox };
+export { o as ChatInbox };
 
 //# sourceMappingURL=chat-inbox.js.map

package/dist/components/chat-inbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-inbox.js","names":["ChatInbox","props","cn","className","items","active","item","activeId","Button","onSelect"],"sources":["../../src/components/chat-inbox.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\n\nexport interface ChatInboxItem {\n\t/** Stable id for selection. */\n\tid: string;\n\t/** Thread title. */\n\ttitle: string;\n\t/** Last-message preview. */\n\tpreview?: string;\n\t/** Timestamp label. */\n\ttime?: string;\n\t/** Optional leading mark. */\n\tleading?: ReactNode;\n}\n\nexport interface ChatInboxProps\n\textends Omit<HTMLAttributes<HTMLElement>, \"onSelect\" | \"className\"> {\n\t/**\n\t * Threads to list ({ id: string, title: string, preview?: string, time?: string, leading?: ReactNode }[]).\n\t */\n\titems: readonly ChatInboxItem[];\n\t/**\n\t * Selected thread id.\n\t */\n\tactiveId?: string;\n\t/**\n\t * Called when a thread is chosen.\n\t */\n\tonSelect: (id: string) => void;\n\t/**\n\t * Optional class name applied to the navigation element.\n\t * Component inherits native nav HTMLAttributes on the root element but does not forward ref.\n\t */\n\tclassName?: string;\n}\n\nexport function ChatInbox({ items, activeId, onSelect, className, ...props }: ChatInboxProps) {\n\treturn (\n\t\t<nav className={cn(\"flex min-h-0 flex-col gap-0.5 overflow-y-auto p-2\", className)} {...props}>\n\t\t\t{items.map((item) => {\n\t\t\t\tconst active = item.id === activeId;\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\taria-current={active ? \"true\" : undefined}\n\t\t\t\t\t\tonClick={() => onSelect(item.id)}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"h-auto w-full justify-start gap-2 rounded-basalt-md px-2 py-2 text-left\",\n\t\t\t\t\t\t\tactive ? \"bg-basalt-accent\" : \"\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.leading ? (\n\t\t\t\t\t\t\t<span className=\"flex h-8 w-8 shrink-0 items-center justify-center\">\n\t\t\t\t\t\t\t\t{item.leading}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<span className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t\t<span className=\"flex items-baseline justify-between gap-2\">\n\t\t\t\t\t\t\t\t<span className=\"truncate text-sm font-medium text-basalt-foreground\">\n\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{item.time ? (\n\t\t\t\t\t\t\t\t\t<span className=\"shrink-0 text-[11px] text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{item.time}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{item.preview ? (\n\t\t\t\t\t\t\t\t<span className=\"mt-0.5 block truncate text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t{item.preview}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t})}\n\t\t</nav>\n\t);\n}\n"],"mappings":";;;;;AAsCA,SAAgBA,EAAU,EAAE,UAAO,aAAU,aAAU,cAAW,GAAGC,KAAyB;CAC7F,OACC,kBAAC,OAAD;EAAK,WAAWC,EAAG,qDAAqDC,CAAS;EAAG,GAAIF;EACtF,UAAAG,EAAM,KAAK,MAAS;GACpB,IAAMC,IAASC,EAAK,OAAOC;GAC3B,OACC,kBAACC,GAAD;IAEC,MAAK;IACL,SAAQ;IACR,gBAAcH,IAAS,SAAS,KAAA;IAChC,eAAeI,EAASH,EAAK,EAAE;IAC/B,WAAWJ,EACV,2EACAG,IAAS,qBAAqB,EAC/B;IATD,UAAA,CAWEC,EAAK,UACL,kBAAC,QAAD;KAAM,WAAU;KACd,UAAAA,EAAK;IACD,CAAA,IACH,MACJ,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACC,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACC,kBAAC,QAAD;OAAM,WAAU;OACd,UAAAA,EAAK;MACD,CAAA,GACLA,EAAK,OACL,kBAAC,QAAD;OAAM,WAAU;OACd,UAAAA,EAAK;MACD,CAAA,IACH,IACC;KACL,CAAA,GAAAA,EAAK,UACL,kBAAC,QAAD;MAAM,WAAU;MACd,UAAAA,EAAK;KACD,CAAA,IACH,IACC;IACC,CAAA,CAAA;GAhCF,GAAAA,EAAK,EAgCH;EAEV,CAAC;CACG,CAAA;AAEP"}
+{"version":3,"file":"chat-inbox.js","names":["ChatInbox","props","highlightRef","useHoverHighlight","cn","NAV_LIST_CLASS","className","items","active","item","activeId","onSelect","NAV_ITEM_CLASS"],"sources":["../../src/components/chat-inbox.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { NAV_ITEM_CLASS, NAV_LIST_CLASS } from \"../utils/navigation\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\n\nexport interface ChatInboxItem {\n\t/** Stable id for selection. */\n\tid: string;\n\t/** Thread title. */\n\ttitle: string;\n\t/** Last-message preview. */\n\tpreview?: string;\n\t/** Timestamp label. */\n\ttime?: string;\n\t/** Optional leading mark. */\n\tleading?: ReactNode;\n}\n\nexport interface ChatInboxProps\n\textends Omit<HTMLAttributes<HTMLElement>, \"onSelect\" | \"className\"> {\n\t/**\n\t * Threads to list ({ id: string, title: string, preview?: string, time?: string, leading?: ReactNode }[]).\n\t */\n\titems: readonly ChatInboxItem[];\n\t/**\n\t * Selected thread id.\n\t */\n\tactiveId?: string;\n\t/**\n\t * Called when a thread is chosen.\n\t */\n\tonSelect: (id: string) => void;\n\t/**\n\t * Optional class name applied to the navigation element.\n\t * Component inherits native nav HTMLAttributes on the root element but does not forward ref.\n\t */\n\tclassName?: string;\n}\n\nexport function ChatInbox({ items, activeId, onSelect, className, ...props }: ChatInboxProps) {\n\tconst highlightRef = useHoverHighlight();\n\treturn (\n\t\t<nav\n\t\t\tref={highlightRef}\n\t\t\tclassName={cn(\n\t\t\t\tNAV_LIST_CLASS,\n\t\t\t\t\"min-h-0 flex-col overflow-y-auto overscroll-y-contain\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{items.map((item) => {\n\t\t\t\tconst active = item.id === activeId;\n\t\t\t\treturn (\n\t\t\t\t\t<button\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\taria-current={active ? \"true\" : undefined}\n\t\t\t\t\t\tdata-basalt-hover-item=\"\"\n\t\t\t\t\t\tdata-hover-selected={active}\n\t\t\t\t\t\tonClick={() => onSelect(item.id)}\n\t\t\t\t\t\tclassName={cn(NAV_ITEM_CLASS, \"w-full justify-start\")}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.leading ? (\n\t\t\t\t\t\t\t<span className=\"flex h-basalt-8 w-basalt-8 shrink-0 items-center justify-center\">\n\t\t\t\t\t\t\t\t{item.leading}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<span className=\"min-w-0 flex-1\">\n\t\t\t\t\t\t\t<span className=\"flex items-baseline justify-between gap-basalt-row-gap\">\n\t\t\t\t\t\t\t\t<span className=\"truncate text-basalt-base font-medium text-basalt-foreground\">\n\t\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{item.time ? (\n\t\t\t\t\t\t\t\t\t<span className=\"shrink-0 text-basalt-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{item.time}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{item.preview ? (\n\t\t\t\t\t\t\t\t<span className=\"mt-basalt-space-xs block truncate text-basalt-sm text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t{item.preview}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t);\n\t\t\t})}\n\t\t</nav>\n\t);\n}\n"],"mappings":";;;;;;AAuCA,SAAgBA,EAAU,EAAE,UAAO,aAAU,aAAU,cAAW,GAAGC,KAAyB;CAC7F,IAAMC,IAAeC,EAAkB;CACvC,OACC,kBAAC,OAAD;EACC,KAAKD;EACL,WAAWE,EACVC,GACA,yDACAC,CACD;EACA,GAAIL;EAEH,UAAAM,EAAM,KAAK,MAAS;GACpB,IAAMC,IAASC,EAAK,OAAOC;GAC3B,OACC,kBAAC,UAAD;IAEC,MAAK;IACL,gBAAcF,IAAS,SAAS,KAAA;IAChC,0BAAuB;IACvB,uBAAqBA;IACrB,eAAeG,EAASF,EAAK,EAAE;IAC/B,WAAWL,EAAGQ,GAAgB,sBAAsB;IAPrD,UAAA,CASEH,EAAK,UACL,kBAAC,QAAD;KAAM,WAAU;KACd,UAAAA,EAAK;IACD,CAAA,IACH,MACJ,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACC,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACC,kBAAC,QAAD;OAAM,WAAU;OACd,UAAAA,EAAK;MACD,CAAA,GACLA,EAAK,OACL,kBAAC,QAAD;OAAM,WAAU;OACd,UAAAA,EAAK;MACD,CAAA,IACH,IACC;KACL,CAAA,GAAAA,EAAK,UACL,kBAAC,QAAD;MAAM,WAAU;MACd,UAAAA,EAAK;KACD,CAAA,IACH,IACC;IACC,CAAA,CAAA;GA9BF,GAAAA,EAAK,EA8BH;EAEV,CAAC;CACG,CAAA;AAEP"}

package/dist/components/chat-markdown.d.ts

@@ -0,0 +1,8 @@
+export interface ChatMarkdownProps {
+    /** Untrusted Markdown. Raw HTML is rendered as text, never injected. */
+    content: string;
+    /** Animate newly appended prose words; disable for static output. */
+    streaming?: boolean;
+    className?: string;
+}
+export declare function ChatMarkdown({ content, streaming, className }: ChatMarkdownProps): import("react").JSX.Element;

package/dist/components/chat-markdown.js

@@ -0,0 +1,122 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { contextSourceHref as t } from "../models/context-cards.js";
+import { CodeHighlighted as n } from "./code.js";
+import { Fragment as r, useMemo as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { decodeHTML as s } from "entities";
+import { marked as c } from "marked";
+//#region src/components/chat-markdown.tsx
+function l(i, c = !1) {
+	return i.map((i, u) => {
+		let d = i, f;
+		switch (d.type) {
+			case "space":
+			case "def": return null;
+			case "heading": {
+				let e = `h${Math.min(6, d.depth + 1)}`;
+				f = /* @__PURE__ */ a(e, {
+					className: "font-semibold text-basalt-lg",
+					children: l(d.tokens, c)
+				});
+				break;
+			}
+			case "paragraph":
+				f = /* @__PURE__ */ a("p", { children: l(d.tokens, c) });
+				break;
+			case "text":
+				f = d.tokens ? l(d.tokens, c) : c ? s(d.text).split(/(\s+)/).map((e, t) => /\S/.test(e) ? /* @__PURE__ */ a("span", {
+					className: "basalt-chat-word",
+					children: e
+				}, t) : e) : s(d.text);
+				break;
+			case "strong":
+				f = /* @__PURE__ */ a("strong", { children: l(d.tokens, c) });
+				break;
+			case "em":
+				f = /* @__PURE__ */ a("em", { children: l(d.tokens, c) });
+				break;
+			case "del":
+				f = /* @__PURE__ */ a("del", { children: l(d.tokens, c) });
+				break;
+			case "codespan":
+				f = /* @__PURE__ */ a("code", {
+					className: "rounded-basalt-sm bg-basalt-accent px-basalt-space-sm py-basalt-space-xs font-mono text-basalt-sm",
+					children: d.text
+				});
+				break;
+			case "code":
+				f = /* @__PURE__ */ a(n, {
+					code: d.text,
+					title: d.lang || "text",
+					lineNumbers: !0
+				});
+				break;
+			case "blockquote":
+				f = /* @__PURE__ */ a("blockquote", {
+					className: "border-l-2 border-basalt-border pl-basalt-space-lg text-basalt-muted-foreground",
+					children: l(d.tokens, c)
+				});
+				break;
+			case "list": {
+				let t = d.ordered ? "ol" : "ul";
+				f = /* @__PURE__ */ a(t, {
+					start: d.ordered ? Number(d.start) || 1 : void 0,
+					className: e("space-y-basalt-space-sm pl-basalt-space-lg", d.ordered ? "list-decimal" : "list-disc"),
+					children: d.items.map((e, t) => /* @__PURE__ */ o("li", { children: [e.task && /* @__PURE__ */ a("span", {
+						"aria-label": e.checked ? "Complete" : "Incomplete",
+						role: "img",
+						children: e.checked ? "☑ " : "☐ "
+					}), l(e.tokens, c)] }, `${u}-${t}`))
+				});
+				break;
+			}
+			case "link":
+			case "image": {
+				let e = t(s(d.href)), n = d.type === "link" ? l(d.tokens, c) : s(d.text);
+				f = e ? /* @__PURE__ */ a("a", {
+					href: e,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: "text-basalt-primary underline underline-offset-4",
+					children: n
+				}) : n;
+				break;
+			}
+			case "table":
+				f = /* @__PURE__ */ a("div", {
+					className: "max-w-full overflow-x-auto",
+					children: /* @__PURE__ */ o("table", {
+						className: "w-full border-collapse text-left text-basalt-sm",
+						children: [/* @__PURE__ */ a("thead", { children: /* @__PURE__ */ a("tr", { children: d.header.map((e, t) => /* @__PURE__ */ a("th", {
+							className: "whitespace-nowrap border-b border-basalt-border px-basalt-space-lg py-basalt-space-md",
+							children: l(e.tokens, c)
+						}, t)) }) }), /* @__PURE__ */ a("tbody", { children: d.rows.map((e, t) => /* @__PURE__ */ a("tr", { children: e.map((e, t) => /* @__PURE__ */ a("td", {
+							className: "border-b border-basalt-border px-basalt-space-lg py-basalt-space-md",
+							children: l(e.tokens, c)
+						}, t)) }, t)) })]
+					})
+				});
+				break;
+			case "br":
+				f = /* @__PURE__ */ a("br", {});
+				break;
+			case "hr":
+				f = /* @__PURE__ */ a("hr", { className: "border-basalt-border" });
+				break;
+			default: f = "text" in d ? String(d.text) : d.raw;
+		}
+		return /* @__PURE__ */ a(r, { children: f }, u);
+	});
+}
+function u({ content: t, streaming: n = !1, className: r }) {
+	let o = i(() => l(c.lexer(t, { gfm: !0 }), n), [t, n]);
+	return /* @__PURE__ */ a("div", {
+		className: e("basalt-ui min-w-0 space-y-basalt-space-lg break-words text-basalt-base leading-[var(--basalt-line-relaxed)] [&_p]:whitespace-pre-wrap", r),
+		children: o
+	});
+}
+//#endregion
+export { u as ChatMarkdown };
+
+//# sourceMappingURL=chat-markdown.js.map

package/dist/components/chat-markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-markdown.js","names":["nodes","tokens","token","raw","node","Heading","streaming","decodeHTML","word","i","CodeHighlighted","List","cn","item","index","href","contextSourceHref","text","cell","row","j","Fragment","ChatMarkdown","rendered","useMemo","marked","content","className"],"sources":["../../src/components/chat-markdown.tsx"],"sourcesContent":["import { decodeHTML } from \"entities\";\nimport { type MarkedToken, marked, type Token } from \"marked\";\nimport { Fragment, type ReactNode, useMemo } from \"react\";\nimport { contextSourceHref } from \"../models/context-cards\";\nimport { cn } from \"../utils/cn\";\nimport { CodeHighlighted } from \"./code\";\n\nexport interface ChatMarkdownProps {\n\t/** Untrusted Markdown. Raw HTML is rendered as text, never injected. */\n\tcontent: string;\n\t/** Animate newly appended prose words; disable for static output. */\n\tstreaming?: boolean;\n\tclassName?: string;\n}\n\nfunction nodes(tokens: readonly Token[], streaming = false): ReactNode {\n\treturn tokens.map((raw, index) => {\n\t\tconst token = raw as MarkedToken;\n\t\tlet node: ReactNode;\n\t\tswitch (token.type) {\n\t\t\tcase \"space\":\n\t\t\tcase \"def\":\n\t\t\t\treturn null;\n\t\t\tcase \"heading\": {\n\t\t\t\tconst Heading = `h${Math.min(6, token.depth + 1)}` as \"h2\";\n\t\t\t\tnode = (\n\t\t\t\t\t<Heading className=\"font-semibold text-basalt-lg\">\n\t\t\t\t\t\t{nodes(token.tokens, streaming)}\n\t\t\t\t\t</Heading>\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"paragraph\":\n\t\t\t\tnode = <p>{nodes(token.tokens, streaming)}</p>;\n\t\t\t\tbreak;\n\t\t\tcase \"text\":\n\t\t\t\tnode = token.tokens\n\t\t\t\t\t? nodes(token.tokens, streaming)\n\t\t\t\t\t: streaming\n\t\t\t\t\t\t? decodeHTML(token.text)\n\t\t\t\t\t\t\t\t.split(/(\\s+)/)\n\t\t\t\t\t\t\t\t.map((word, i) =>\n\t\t\t\t\t\t\t\t\t/\\S/.test(word) ? (\n\t\t\t\t\t\t\t\t\t\t<span key={i} className=\"basalt-chat-word\">\n\t\t\t\t\t\t\t\t\t\t\t{word}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\tword\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t: decodeHTML(token.text);\n\t\t\t\tbreak;\n\t\t\tcase \"strong\":\n\t\t\t\tnode = <strong>{nodes(token.tokens, streaming)}</strong>;\n\t\t\t\tbreak;\n\t\t\tcase \"em\":\n\t\t\t\tnode = <em>{nodes(token.tokens, streaming)}</em>;\n\t\t\t\tbreak;\n\t\t\tcase \"del\":\n\t\t\t\tnode = <del>{nodes(token.tokens, streaming)}</del>;\n\t\t\t\tbreak;\n\t\t\tcase \"codespan\":\n\t\t\t\tnode = (\n\t\t\t\t\t<code className=\"rounded-basalt-sm bg-basalt-accent px-basalt-space-sm py-basalt-space-xs font-mono text-basalt-sm\">\n\t\t\t\t\t\t{token.text}\n\t\t\t\t\t</code>\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\tcase \"code\":\n\t\t\t\tnode = <CodeHighlighted code={token.text} title={token.lang || \"text\"} lineNumbers />;\n\t\t\t\tbreak;\n\t\t\tcase \"blockquote\":\n\t\t\t\tnode = (\n\t\t\t\t\t<blockquote className=\"border-l-2 border-basalt-border pl-basalt-space-lg text-basalt-muted-foreground\">\n\t\t\t\t\t\t{nodes(token.tokens, streaming)}\n\t\t\t\t\t</blockquote>\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\tcase \"list\": {\n\t\t\t\tconst List = token.ordered ? \"ol\" : \"ul\";\n\t\t\t\tnode = (\n\t\t\t\t\t<List\n\t\t\t\t\t\tstart={token.ordered ? Number(token.start) || 1 : undefined}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"space-y-basalt-space-sm pl-basalt-space-lg\",\n\t\t\t\t\t\t\ttoken.ordered ? \"list-decimal\" : \"list-disc\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{token.items.map((item, i) => (\n\t\t\t\t\t\t\t<li key={`${index}-${i}`}>\n\t\t\t\t\t\t\t\t{item.task && (\n\t\t\t\t\t\t\t\t\t<span aria-label={item.checked ? \"Complete\" : \"Incomplete\"} role=\"img\">\n\t\t\t\t\t\t\t\t\t\t{item.checked ? \"☑ \" : \"☐ \"}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{nodes(item.tokens, streaming)}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</List>\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"link\":\n\t\t\tcase \"image\": {\n\t\t\t\tconst href = contextSourceHref(decodeHTML(token.href));\n\t\t\t\tconst text =\n\t\t\t\t\ttoken.type === \"link\" ? nodes(token.tokens, streaming) : decodeHTML(token.text);\n\t\t\t\tnode = href ? (\n\t\t\t\t\t<a\n\t\t\t\t\t\thref={href}\n\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\tclassName=\"text-basalt-primary underline underline-offset-4\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{text}\n\t\t\t\t\t</a>\n\t\t\t\t) : (\n\t\t\t\t\ttext\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"table\":\n\t\t\t\tnode = (\n\t\t\t\t\t<div className=\"max-w-full overflow-x-auto\">\n\t\t\t\t\t\t<table className=\"w-full border-collapse text-left text-basalt-sm\">\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t{token.header.map((cell, i) => (\n\t\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"whitespace-nowrap border-b border-basalt-border px-basalt-space-lg py-basalt-space-md\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{nodes(cell.tokens, streaming)}\n\t\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t{token.rows.map((row, i) => (\n\t\t\t\t\t\t\t\t\t<tr key={i}>\n\t\t\t\t\t\t\t\t\t\t{row.map((cell, j) => (\n\t\t\t\t\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\t\t\t\t\tkey={j}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"border-b border-basalt-border px-basalt-space-lg py-basalt-space-md\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{nodes(cell.tokens, streaming)}\n\t\t\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t</table>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\tcase \"br\":\n\t\t\t\tnode = <br />;\n\t\t\t\tbreak;\n\t\t\tcase \"hr\":\n\t\t\t\tnode = <hr className=\"border-basalt-border\" />;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tnode = \"text\" in token ? String(token.text) : token.raw;\n\t\t}\n\t\treturn <Fragment key={index}>{node}</Fragment>;\n\t});\n}\n\nexport function ChatMarkdown({ content, streaming = false, className }: ChatMarkdownProps) {\n\tconst rendered = useMemo(\n\t\t() => nodes(marked.lexer(content, { gfm: true }), streaming),\n\t\t[content, streaming],\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"basalt-ui min-w-0 space-y-basalt-space-lg break-words text-basalt-base leading-[var(--basalt-line-relaxed)] [&_p]:whitespace-pre-wrap\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{rendered}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;AAeA,SAASA,EAAM,GAA0B,IAAY,IAAkB;CACtE,OAAOC,EAAO,KAAK,GAAK,MAAU;EACjC,IAAMC,IAAQC,GACVC;EACJ,QAAQF,EAAM,MAAd;GACC,KAAK;GACL,KAAK,OACJ,OAAO;GACR,KAAK,WAAW;IACf,IAAMG,IAAU,IAAI,KAAK,IAAI,GAAGH,EAAM,QAAQ,CAAC;IAC/C,IACC,kBAACG,GAAD;KAAS,WAAU;KACjB,UAAAL,EAAME,EAAM,QAAQI,CAAS;IACtB,CAAA;IAEV;GACD;GACA,KAAK;IACJ,IAAO,kBAAC,KAAD,EAAA,UAAIN,EAAME,EAAM,QAAQI,CAAS,EAAK,CAAA;IAC7C;GACD,KAAK;IACJ,IAAOJ,EAAM,SACVF,EAAME,EAAM,QAAQI,CAAS,IAC7BA,IACCC,EAAWL,EAAM,IAAI,CAAC,CACrB,MAAM,OAAO,CAAC,CACd,KAAK,GAAM,MACX,KAAK,KAAKM,CAAI,IACb,kBAAC,QAAD;KAAc,WAAU;KACtB,UAAAA;IACI,GAFKC,CAEL,IAEND,CAEF,IACAD,EAAWL,EAAM,IAAI;IACzB;GACD,KAAK;IACJ,IAAO,kBAAC,UAAD,EAAA,UAASF,EAAME,EAAM,QAAQI,CAAS,EAAU,CAAA;IACvD;GACD,KAAK;IACJ,IAAO,kBAAC,MAAD,EAAA,UAAKN,EAAME,EAAM,QAAQI,CAAS,EAAM,CAAA;IAC/C;GACD,KAAK;IACJ,IAAO,kBAAC,OAAD,EAAA,UAAMN,EAAME,EAAM,QAAQI,CAAS,EAAO,CAAA;IACjD;GACD,KAAK;IACJ,IACC,kBAAC,QAAD;KAAM,WAAU;KACd,UAAAJ,EAAM;IACF,CAAA;IAEP;GACD,KAAK;IACJ,IAAO,kBAACQ,GAAD;KAAiB,MAAMR,EAAM;KAAM,OAAOA,EAAM,QAAQ;KAAQ,aAAA;IAAa,CAAA;IACpF;GACD,KAAK;IACJ,IACC,kBAAC,cAAD;KAAY,WAAU;KACpB,UAAAF,EAAME,EAAM,QAAQI,CAAS;IACnB,CAAA;IAEb;GACD,KAAK,QAAQ;IACZ,IAAMK,IAAOT,EAAM,UAAU,OAAO;IACpC,IACC,kBAACS,GAAD;KACC,OAAOT,EAAM,UAAU,OAAOA,EAAM,KAAK,KAAK,IAAI,KAAA;KAClD,WAAWU,EACV,8CACAV,EAAM,UAAU,iBAAiB,WAClC;KAEC,UAAAA,EAAM,MAAM,KAAK,GAAM,MACvB,kBAAC,MAAD,EAAA,UAAA,CACEW,EAAK,QACL,kBAAC,QAAD;MAAM,cAAYA,EAAK,UAAU,aAAa;MAAc,MAAK;MAC/D,UAAAA,EAAK,UAAU,OAAO;KAClB,CAAA,GAENb,EAAMa,EAAK,QAAQP,CAAS,CAC1B,EAAA,GAPK,GAAGQ,EAAM,GAAGL,GAOjB,CACJ;IACI,CAAA;IAEP;GACD;GACA,KAAK;GACL,KAAK,SAAS;IACb,IAAMM,IAAOC,EAAkBT,EAAWL,EAAM,IAAI,CAAC,GAC/Ce,IACLf,EAAM,SAAS,SAASF,EAAME,EAAM,QAAQI,CAAS,IAAIC,EAAWL,EAAM,IAAI;IAC/E,IAAOa,IACN,kBAAC,KAAD;KACO;KACN,QAAO;KACP,KAAI;KACJ,WAAU;KAET,UAAAE;IACC,CAAA,IAEHA;IAED;GACD;GACA,KAAK;IACJ,IACC,kBAAC,OAAD;KAAK,WAAU;KACd,UAAA,kBAAC,SAAD;MAAO,WAAU;MAAjB,UAAA,CACC,kBAAC,SAAD,EAAA,UACC,kBAAC,MAAD,EAAA,UACEf,EAAM,OAAO,KAAK,GAAM,MACxB,kBAAC,MAAD;OAEC,WAAU;OAET,UAAAF,EAAMkB,EAAK,QAAQZ,CAAS;MAC1B,GAJEG,CAIF,CACJ,EACE,CAAA,EACE,CAAA,GACP,kBAAC,SAAD,EAAA,UACEP,EAAM,KAAK,KAAK,GAAK,MACrB,kBAAC,MAAD,EAAA,UACEiB,EAAI,KAAK,GAAM,MACf,kBAAC,MAAD;OAEC,WAAU;OAET,UAAAnB,EAAMkB,EAAK,QAAQZ,CAAS;MAC1B,GAJEc,CAIF,CACJ,EACE,GATKX,CASL,CACJ,EACK,CAAA,CACD;;IACH,CAAA;IAEN;GACD,KAAK;IACJ,IAAO,kBAAC,MAAD,CAAK,CAAA;IACZ;GACD,KAAK;IACJ,IAAO,kBAAC,MAAD,EAAI,WAAU,uBAAwB,CAAA;IAC7C;GACD,SACC,IAAO,UAAUP,IAAQ,OAAOA,EAAM,IAAI,IAAIA,EAAM;EACtD;EACA,OAAO,kBAACmB,GAAD,EAAA,UAAuBjB,EAAe,GAAvBU,CAAuB;CAC9C,CAAC;AACF;AAEA,SAAgBQ,EAAa,EAAE,YAAS,eAAY,IAAO,gBAAgC;CAC1F,IAAMC,IAAWC,QACVxB,EAAMyB,EAAO,MAAMC,GAAS,EAAE,KAAK,GAAK,CAAC,GAAGpB,CAAS,GAC3D,CAACoB,GAASpB,CAAS,CACpB;CACA,OACC,kBAAC,OAAD;EACC,WAAWM,EACV,yIACAe,CACD;EAEC,UAAAJ;CACG,CAAA;AAEP"}

package/dist/components/chat-message.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export interface ChatMessageProps {
+    variant: "user" | "assistant";
+    content: string;
+    streaming?: boolean;
+    /** Thinking, tool calls and other trace content before the response. */
+    trace?: ReactNode;
+    /** Approval or result content after the response; use sources for citations. */
+    children?: ReactNode;
+    author?: string;
+    onEdit?: () => void;
+    onRegenerate?: () => void;
+    feedback?: "up" | "down";
+    onFeedback?: (value: "up" | "down") => void;
+    /** Compact source disclosure beside message actions. No card wrapper is added. */
+    sources?: readonly {
+        id: string;
+        name: string;
+        type?: string;
+        href?: string;
+    }[];
+    /** Source disclosure label. @default "Sources" */
+    sourcesLabel?: string;
+    className?: string;
+}
+export declare function ChatMessage({ variant, content, streaming, trace, children, author, onEdit, onRegenerate, feedback, onFeedback, className, sources, sourcesLabel, }: ChatMessageProps): import("react").JSX.Element;