@devalok/shilp-sutra 0.56.0 → 0.59.0

package/dist/_chunks/chat.js

@@ -1,296 +1,313 @@
 "use client";
-import { IconProvider as e } from "../ui/icon-context.js";
-import { motionProps as t, springs as n, tweens as r } from "../ui/lib/motion.js";
-import { cn as i } from "../ui/lib/utils.js";
-import { Spinner as a } from "../ui/spinner.js";
-import { Icon as o } from "../ui/icon.js";
-import { Avatar as s, AvatarFallback as c, AvatarImage as l } from "../ui/avatar.js";
-import { normalizeIcon as u } from "./normalize-icon.js";
-import { Button as d } from "../ui/button.js";
-import { Textarea as f } from "../ui/textarea.js";
-import { Tooltip as p, TooltipContent as m, TooltipTrigger as h } from "../ui/tooltip.js";
-import { MENTION_TOKEN_CLASS as g } from "./mention.js";
-import * as _ from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { IconAlertCircle as b, IconSend as x, IconSquare as S, IconTrash as C } from "@tabler/icons-react";
-import { AnimatePresence as w, motion as T } from "framer-motion";
+import { motionProps as e, springs as t, tweens as n } from "../ui/lib/motion.js";
+import { MotionPreference as r } from "./motion-preference.js";
+import { IconProvider as i } from "../ui/icon-context.js";
+import { cn as a } from "../ui/lib/utils.js";
+import { Spinner as o } from "../ui/spinner.js";
+import { Icon as s } from "../ui/icon.js";
+import { Avatar as c, AvatarFallback as l, AvatarImage as u } from "../ui/avatar.js";
+import { normalizeIcon as d } from "./normalize-icon.js";
+import { Button as f } from "../ui/button.js";
+import { Textarea as p } from "../ui/textarea.js";
+import { Tooltip as m, TooltipContent as h, TooltipTrigger as g } from "../ui/tooltip.js";
+import { MENTION_TOKEN_CLASS as _ } from "./mention.js";
+import * as v from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { IconAlertCircle as x, IconSend as S, IconSquare as C, IconTrash as w } from "@tabler/icons-react";
+import { AnimatePresence as T, motion as E } from "framer-motion";
 //#region src/ui/chat/date-separator.tsx
-function E(e) {
-	let t = /* @__PURE__ */ new Date(), n = new Date(t.getFullYear(), t.getMonth(), t.getDate()), r = new Date(e.getFullYear(), e.getMonth(), e.getDate()), i = n.getTime() - r.getTime(), a = Math.round(i / (1e3 * 60 * 60 * 24));
-	if (a === 0) return "Today";
-	if (a === 1) return "Yesterday";
-	let o = e.toLocaleString("en-US", { month: "short" }), s = e.getDate();
-	return e.getFullYear() === t.getFullYear() ? `${o} ${s}` : `${o} ${s}, ${e.getFullYear()}`;
+function D(e, t) {
+	let n = new Intl.DateTimeFormat("en-US", {
+		timeZone: t,
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit"
+	}).formatToParts(e), r = (e) => Number(n.find((t) => t.type === e)?.value);
+	return {
+		year: r("year"),
+		month: r("month"),
+		day: r("day")
+	};
 }
-function D({ date: e, format: t, className: n }) {
-	let r = typeof e == "string" ? new Date(e) : e, a = t ? t(r) : E(r);
-	return /* @__PURE__ */ y("div", {
-		className: i("flex items-center gap-ds-03 py-ds-03", n),
+function O(e, t, n) {
+	let r = D(/* @__PURE__ */ new Date(), n), i = D(e, n), a = Date.UTC(r.year, r.month - 1, r.day), o = Date.UTC(i.year, i.month - 1, i.day), s = Math.round((a - o) / (1e3 * 60 * 60 * 24));
+	if (s === 0) return "Today";
+	if (s === 1) return "Yesterday";
+	let c = e.toLocaleString(t, {
+		month: "short",
+		timeZone: n
+	});
+	return i.year === r.year ? `${c} ${i.day}` : `${c} ${i.day}, ${i.year}`;
+}
+function k({ date: e, format: t, className: n, locale: r = "en-US", timeZone: i }) {
+	let o = typeof e == "string" ? new Date(e) : e, s = t ? t(o) : O(o, r, i);
+	return /* @__PURE__ */ b("div", {
+		className: a("flex items-center gap-ds-03 py-ds-03", n),
 		children: [
-			/* @__PURE__ */ v("div", { className: "flex-1 border-t border-surface-border-subtle" }),
-			/* @__PURE__ */ v("span", {
-				className: "text-label-xs font-medium text-surface-fg-subtle/50 uppercase tracking-wider",
-				children: a
+			/* @__PURE__ */ y("div", { className: "flex-1 border-t border-surface-border-subtle" }),
+			/* @__PURE__ */ y("span", {
+				className: "text-label-xs font-medium text-surface-fg-subtle uppercase tracking-wider",
+				children: s
 			}),
-			/* @__PURE__ */ v("div", { className: "flex-1 border-t border-surface-border-subtle" })
+			/* @__PURE__ */ y("div", { className: "flex-1 border-t border-surface-border-subtle" })
 		]
 	});
 }
-D.displayName = "DateSeparator";
+k.displayName = "DateSeparator";
 //#endregion
 //#region src/ui/chat/message.tsx
-var O = _.createContext({
+var A = v.createContext({
 	variant: "flat",
 	placement: "start",
 	grouped: !1
 });
-function k() {
-	return _.useContext(O);
+function j() {
+	return v.useContext(A);
 }
-var A = _.forwardRef(({ children: e, variant: r = "flat", placement: a = "start", highlight: s, grouped: c = !1, deleted: l = !1, deletedText: u = "This message was deleted", className: d, ...f }, p) => {
-	let m = _.useMemo(() => ({
-		variant: r,
-		placement: a,
-		grouped: c,
-		highlight: s
+var M = v.forwardRef(({ children: n, variant: i = "flat", placement: o = "start", highlight: c, grouped: l = !1, deleted: u = !1, deletedText: d = "This message was deleted", className: f, ...p }, m) => {
+	let h = v.useMemo(() => ({
+		variant: i,
+		placement: o,
+		grouped: l,
+		highlight: c
 	}), [
-		r,
-		a,
-		c,
-		s
+		i,
+		o,
+		l,
+		c
 	]);
-	return l ? /* @__PURE__ */ y(T.div, {
-		ref: p,
+	return u ? /* @__PURE__ */ y(r, { children: /* @__PURE__ */ b(E.div, {
+		ref: m,
 		initial: { y: 8 },
 		animate: {
 			opacity: 1,
 			y: 0
 		},
-		transition: n.snappy,
-		className: i("flex items-center gap-ds-02 py-ds-02 text-caption text-surface-fg-subtle/50 italic", d),
-		...t(f),
-		children: [/* @__PURE__ */ v(o, {
-			icon: C,
+		transition: t.snappy,
+		className: a("flex items-center gap-ds-02 py-ds-02 text-caption text-surface-fg-subtle italic", f),
+		...e(p),
+		children: [/* @__PURE__ */ y(s, {
+			icon: w,
 			size: "xs"
-		}), u]
-	}) : r === "bubble" ? /* @__PURE__ */ v(O.Provider, {
-		value: m,
-		children: /* @__PURE__ */ v(T.div, {
-			ref: p,
-			"data-highlight": s,
+		}), d]
+	}) }) : i === "bubble" ? /* @__PURE__ */ y(r, { children: /* @__PURE__ */ y(A.Provider, {
+		value: h,
+		children: /* @__PURE__ */ y(E.div, {
+			ref: m,
+			"data-highlight": c,
 			initial: { y: 8 },
 			animate: {
 				opacity: 1,
 				y: 0
 			},
-			transition: n.snappy,
-			className: i("group/message relative flex", a === "end" ? "justify-end" : "justify-start", g, s === "internal" && "bg-warning-2/50 rounded-control-inner", d),
-			...t(f),
-			children: /* @__PURE__ */ v("div", {
-				className: i("max-w-[85%] rounded-bubble px-ds-04 py-ds-03", a === "end" ? "bg-accent-3 text-surface-fg" : "bg-surface-raised text-surface-fg"),
-				children: e
+			transition: t.snappy,
+			className: a("group/message relative flex", o === "end" ? "justify-end" : "justify-start", _, c === "internal" && "bg-warning-2/50 rounded-control-inner", f),
+			...e(p),
+			children: /* @__PURE__ */ y("div", {
+				className: a("max-w-[85%] rounded-bubble px-ds-04 py-ds-03", o === "end" ? "bg-accent-3 text-surface-fg" : "bg-surface-panel text-surface-fg"),
+				children: n
 			})
 		})
-	}) : /* @__PURE__ */ v(O.Provider, {
-		value: m,
-		children: /* @__PURE__ */ v(T.div, {
-			ref: p,
-			"data-highlight": s,
+	}) }) : /* @__PURE__ */ y(r, { children: /* @__PURE__ */ y(A.Provider, {
+		value: h,
+		children: /* @__PURE__ */ y(E.div, {
+			ref: m,
+			"data-highlight": c,
 			initial: { y: 8 },
 			animate: {
 				opacity: 1,
 				y: 0
 			},
-			transition: n.snappy,
-			className: i("group/message relative flex gap-ds-04", c && "-mt-ds-01", g, s === "internal" && "bg-warning-2/50 rounded-control-inner", d),
-			...t(f),
-			children: e
+			transition: t.snappy,
+			className: a("group/message relative flex gap-ds-04", l && "-mt-ds-01", _, c === "internal" && "bg-warning-2/50 rounded-control-inner", f),
+			...e(p),
+			children: n
 		})
-	});
+	}) });
 });
-A.displayName = "Message";
-function j({ src: t, fallback: n, icon: r, size: a = "md", children: o }) {
-	let { grouped: d } = k(), f = a === "sm" ? "w-5" : "w-6";
-	return d ? /* @__PURE__ */ v("div", { className: i(f, a === "sm" ? "h-5" : "h-6", "shrink-0") }) : o ? /* @__PURE__ */ v("div", {
-		className: i(f, "shrink-0 flex items-start"),
+M.displayName = "Message";
+function N({ src: e, fallback: t, icon: n, size: r = "md", children: o }) {
+	let { grouped: s } = j(), f = r === "sm" ? "w-5" : "w-6";
+	return s ? /* @__PURE__ */ y("div", { className: a(f, r === "sm" ? "h-5" : "h-6", "shrink-0") }) : o ? /* @__PURE__ */ y("div", {
+		className: a(f, "shrink-0 flex items-start"),
 		children: o
-	}) : r ? /* @__PURE__ */ v("div", {
-		className: i(f, a === "sm" ? "h-5" : "h-6", "shrink-0 flex items-center justify-center rounded-pill bg-surface-raised-hover"),
-		children: /* @__PURE__ */ v(e, {
-			size: a === "sm" ? "xs" : "sm",
-			children: u(r)
+	}) : n ? /* @__PURE__ */ y("div", {
+		className: a(f, r === "sm" ? "h-5" : "h-6", "shrink-0 flex items-center justify-center rounded-pill bg-surface-panel-hover"),
+		children: /* @__PURE__ */ y(i, {
+			size: r === "sm" ? "xs" : "sm",
+			children: d(n)
 		})
-	}) : /* @__PURE__ */ v("div", {
-		className: i(f, "shrink-0"),
-		children: /* @__PURE__ */ y(s, {
-			size: a === "sm" ? "xs" : "sm",
-			children: [t && /* @__PURE__ */ v(l, {
-				src: t,
-				alt: n ?? ""
-			}), /* @__PURE__ */ v(c, { children: n ?? "" })]
+	}) : /* @__PURE__ */ y("div", {
+		className: a(f, "shrink-0"),
+		children: /* @__PURE__ */ b(c, {
+			size: r === "sm" ? "xs" : "sm",
+			children: [e && /* @__PURE__ */ y(u, {
+				src: e,
+				alt: t ?? ""
+			}), /* @__PURE__ */ y(l, { children: t ?? "" })]
 		})
 	});
 }
-j.displayName = "Message.Avatar";
-function M({ children: e, className: t, ...n }) {
-	return /* @__PURE__ */ v("div", {
-		className: i("min-w-0 flex-1 flex flex-col gap-ds-02", t),
+N.displayName = "Message.Avatar";
+function P({ children: e, className: t, ...n }) {
+	return /* @__PURE__ */ y("div", {
+		className: a("min-w-0 flex-1 flex flex-col gap-ds-02", t),
 		...n,
 		children: e
 	});
 }
-M.displayName = "Message.Content";
-function N(e) {
+P.displayName = "Message.Content";
+function F(e) {
 	return e.toLocaleTimeString("en-US", {
 		hour: "numeric",
 		minute: "2-digit"
 	});
 }
-function P({ name: e, badge: t, timestamp: n, formattedTimestamp: r, timestampFormat: i = N }) {
-	let { grouped: a } = k();
+function I({ name: e, badge: t, timestamp: n, formattedTimestamp: r, timestampFormat: i = F }) {
+	let { grouped: a } = j();
 	if (a) return null;
 	let o = r ?? (n ? i(n) : void 0);
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ b("div", {
 		className: "flex items-baseline gap-ds-02",
 		children: [
-			/* @__PURE__ */ v("span", {
+			/* @__PURE__ */ y("span", {
 				className: "font-semibold text-body-md text-surface-fg",
 				children: e
 			}),
 			t,
-			o && /* @__PURE__ */ v("span", {
-				className: "text-body-sm text-surface-fg-subtle/50",
+			o && /* @__PURE__ */ y("span", {
+				className: "text-body-sm text-surface-fg-subtle",
 				children: o
 			})
 		]
 	});
 }
-P.displayName = "Message.Author";
-function F({ children: e, className: t, ...n }) {
-	return /* @__PURE__ */ v("div", {
-		className: i("text-body-md leading-relaxed text-surface-fg whitespace-pre-wrap", t),
+I.displayName = "Message.Author";
+function L({ children: e, className: t, ...n }) {
+	return /* @__PURE__ */ y("div", {
+		className: a("text-body-md leading-relaxed text-surface-fg whitespace-pre-wrap", t),
 		...n,
 		children: e
 	});
 }
-F.displayName = "Message.Body";
-function I({ content: e, onSave: t, onCancel: n, canEdit: r = !1, renderContent: a }) {
-	let [o, s] = _.useState(!1), [c, l] = _.useState(e), u = _.useRef(null);
-	_.useEffect(() => {
+L.displayName = "Message.Body";
+function R({ content: e, onSave: t, onCancel: n, canEdit: r = !1, renderContent: i }) {
+	let [o, s] = v.useState(!1), [c, l] = v.useState(e), u = v.useRef(null);
+	v.useEffect(() => {
 		o && u.current && (u.current.focus(), u.current.select());
 	}, [o]);
-	let d = _.useCallback(() => {
+	let d = v.useCallback(() => {
 		r && (l(e), s(!0));
-	}, [r, e]), p = _.useCallback(() => {
+	}, [r, e]), f = v.useCallback(() => {
 		let n = c.trim();
 		n && n !== e && t(n), s(!1);
 	}, [
 		c,
 		e,
 		t
-	]), m = _.useCallback(() => {
+	]), m = v.useCallback(() => {
 		s(!1), l(e), n?.();
-	}, [e, n]), h = _.useCallback((e) => {
-		e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), p()) : e.key === "Escape" && (e.preventDefault(), m());
-	}, [p, m]);
-	return o ? /* @__PURE__ */ y("div", {
+	}, [e, n]), h = v.useCallback((e) => {
+		e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), f()) : e.key === "Escape" && (e.preventDefault(), m());
+	}, [f, m]);
+	return o ? /* @__PURE__ */ b("div", {
 		className: "text-body-md leading-relaxed",
-		children: [/* @__PURE__ */ v(f, {
+		children: [/* @__PURE__ */ y(p, {
 			ref: u,
 			value: c,
 			onChange: (e) => l(e.target.value),
 			onKeyDown: h,
-			onBlur: p,
-			className: "resize-none rounded-control-inner bg-surface-raised-hover px-ds-02 py-ds-01 text-body-md leading-relaxed",
+			onBlur: f,
+			className: "resize-none rounded-control-inner bg-surface-panel-hover px-ds-02 py-ds-01 text-body-md leading-relaxed",
 			rows: 2
-		}), /* @__PURE__ */ v("div", {
-			className: "mt-ds-01 text-caption text-surface-fg-subtle/50",
+		}), /* @__PURE__ */ y("div", {
+			className: "mt-ds-01 text-caption text-surface-fg-subtle",
 			children: "Enter to save · Escape to cancel"
 		})]
-	}) : /* @__PURE__ */ v("div", {
-		className: i("text-body-md leading-relaxed text-surface-fg whitespace-pre-wrap", r && "cursor-pointer hover:bg-surface-raised-hover rounded-control-inner transition-colors"),
+	}) : /* @__PURE__ */ y("div", {
+		className: a("text-body-md leading-relaxed text-surface-fg whitespace-pre-wrap", r && "cursor-pointer hover:bg-surface-panel-hover rounded-control-inner transition-colors"),
 		onClick: d,
 		role: r ? "button" : void 0,
 		tabIndex: r ? 0 : void 0,
 		onKeyDown: r ? (e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), d());
 		} : void 0,
-		children: a ? a(e) : e
+		children: i ? i(e) : e
 	});
 }
-I.displayName = "Message.EditableBody";
-function L({ reactions: e, onReact: t }) {
-	return e.length === 0 ? null : /* @__PURE__ */ v("div", {
+R.displayName = "Message.EditableBody";
+function z({ reactions: e, onReact: t }) {
+	return e.length === 0 ? null : /* @__PURE__ */ y("div", {
 		className: "flex flex-wrap gap-ds-02 mt-ds-03",
-		children: e.map((e) => /* @__PURE__ */ y("button", {
+		children: e.map((e) => /* @__PURE__ */ b("button", {
 			type: "button",
 			onClick: () => t(e.emoji),
 			"aria-label": `${e.emoji} ${e.count} reaction${e.count === 1 ? "" : "s"}${e.reacted ? ", you reacted" : ""}`,
-			className: i("inline-flex items-center gap-ds-01 rounded-pill px-ds-02 py-ds-01 text-body-xs transition-colors", e.reacted ? "bg-accent-3 ring-1 ring-accent-6" : "bg-surface-raised-hover hover:bg-surface-raised-active"),
-			children: [/* @__PURE__ */ v("span", { children: e.emoji }), /* @__PURE__ */ v("span", { children: e.count })]
+			className: a("inline-flex items-center gap-ds-01 rounded-pill px-ds-02 py-ds-01 text-body-xs transition-colors", e.reacted ? "bg-accent-4 ring-1 ring-accent-6" : "bg-surface-panel-hover hover:bg-surface-panel-active"),
+			children: [/* @__PURE__ */ y("span", { children: e.emoji }), /* @__PURE__ */ y("span", { children: e.count })]
 		}, e.emoji))
 	});
 }
-L.displayName = "Message.Reactions";
-function R({ children: e, delay: t = 100 }) {
-	return /* @__PURE__ */ v("div", {
-		className: i("absolute -top-2 right-0 z-10", "flex items-center gap-ds-01 rounded-control bg-surface-raised px-ds-01 py-ds-01 shadow-raised", "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 transition-opacity duration-150"),
+z.displayName = "Message.Reactions";
+function B({ children: e, delay: t = 100 }) {
+	return /* @__PURE__ */ y("div", {
+		className: a("absolute -top-2 right-0 z-10", "flex items-center gap-ds-01 rounded-control bg-surface-panel px-ds-01 py-ds-01 shadow-raised", "opacity-0 group-hover/message:opacity-100 group-focus-within/message:opacity-100 transition-opacity duration-150"),
 		style: { transitionDelay: `${t}ms` },
 		children: e
 	});
 }
-R.displayName = "Message.Actions";
-function z({ icon: t, label: n, onClick: r, variant: a = "default" }) {
-	return /* @__PURE__ */ y(p, { children: [/* @__PURE__ */ v(h, {
+B.displayName = "Message.Actions";
+function V({ icon: e, label: t, onClick: n, variant: r = "default" }) {
+	return /* @__PURE__ */ b(m, { children: [/* @__PURE__ */ y(g, {
 		asChild: !0,
-		children: /* @__PURE__ */ v("button", {
+		children: /* @__PURE__ */ y("button", {
 			type: "button",
-			onClick: r,
-			"aria-label": n,
-			className: i("p-ds-02 rounded-control-inner transition-colors", a === "default" && "text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-raised-hover", a === "danger" && "text-surface-fg-subtle hover:text-error-11 hover:bg-surface-raised-hover"),
-			children: /* @__PURE__ */ v(e, {
+			onClick: n,
+			"aria-label": t,
+			className: a("p-ds-02 rounded-control-inner transition-colors", r === "default" && "text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-panel-hover", r === "danger" && "text-surface-fg-subtle hover:text-error-11 hover:bg-surface-panel-hover"),
+			children: /* @__PURE__ */ y(i, {
 				size: "xs",
-				children: u(t)
+				children: d(e)
 			})
 		})
-	}), /* @__PURE__ */ v(m, { children: n })] });
+	}), /* @__PURE__ */ y(h, { children: t })] });
 }
-z.displayName = "Message.Action";
-var B = Object.assign(A, {
-	Avatar: j,
-	Content: M,
-	Author: P,
-	Body: F,
-	EditableBody: I,
-	Reactions: L,
-	Actions: R,
-	Action: z
-}), V = _.forwardRef(({ onSubmit: e, placeholder: t = "Type a message...", disabled: n = !1, isStreaming: r = !1, onCancel: a, leadingSlot: s, trailingSlot: c, disclaimer: l, sendIcon: u, className: f, ...p }, m) => {
-	let [h, g] = _.useState(""), b = _.useRef(null), C = _.useCallback(() => {
-		let e = b.current;
+V.displayName = "Message.Action";
+var H = Object.assign(M, {
+	Avatar: N,
+	Content: P,
+	Author: I,
+	Body: L,
+	EditableBody: R,
+	Reactions: z,
+	Actions: B,
+	Action: V
+}), U = v.forwardRef(({ onSubmit: e, placeholder: t = "Type a message...", disabled: n = !1, isStreaming: r = !1, onCancel: i, leadingSlot: o, trailingSlot: c, disclaimer: l, sendIcon: u, className: d, ...p }, m) => {
+	let [h, g] = v.useState(""), _ = v.useRef(null), x = v.useCallback(() => {
+		let e = _.current;
 		e && (e.style.height = "auto", e.style.height = `${Math.min(e.scrollHeight, 160)}px`);
-	}, []), w = _.useCallback((e) => {
-		g(e.target.value), C();
-	}, [C]), T = _.useCallback(() => {
+	}, []), w = v.useCallback((e) => {
+		g(e.target.value), x();
+	}, [x]), T = v.useCallback(() => {
 		let t = h.trim();
-		!t || r || (e(t), g(""), b.current && (b.current.style.height = "auto"));
+		!t || r || (e(t), g(""), _.current && (_.current.style.height = "auto"));
 	}, [
 		h,
 		r,
 		e
-	]), E = _.useCallback((e) => {
+	]), E = v.useCallback((e) => {
 		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), r || T());
 	}, [r, T]), D = h.trim().length === 0;
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ b("div", {
 		ref: m,
-		className: i("border-t border-surface-border-subtle px-ds-05 py-ds-04", f),
+		className: a("border-t border-surface-border-subtle px-ds-05 py-ds-04", d),
 		...p,
-		children: [/* @__PURE__ */ y("div", {
-			className: "flex items-end gap-ds-02 rounded-overlay-lg border border-surface-border bg-surface-base p-ds-03",
+		children: [/* @__PURE__ */ b("div", {
+			className: "flex items-end gap-ds-02 rounded-overlay-lg border border-surface-border-interactive bg-surface-panel-hover p-ds-03",
 			children: [
-				s,
-				/* @__PURE__ */ v("textarea", {
-					ref: b,
+				o,
+				/* @__PURE__ */ y("textarea", {
+					ref: _,
 					value: h,
 					onChange: w,
 					onKeyDown: E,
@@ -298,78 +315,78 @@ var B = Object.assign(A, {
 					"aria-label": t || "Type a message",
 					disabled: n,
 					rows: 1,
-					className: "flex-1 resize-none bg-transparent px-ds-02 py-ds-01 text-body-sm text-surface-fg placeholder:text-surface-fg-subtle/50 focus:outline-hidden disabled:opacity-50",
+					className: "flex-1 resize-none bg-transparent px-ds-02 py-ds-01 text-body-sm text-surface-fg placeholder:text-surface-fg-muted focus:outline-hidden disabled:opacity-50",
 					style: { maxHeight: 160 }
 				}),
-				r ? /* @__PURE__ */ v(d, {
+				r ? /* @__PURE__ */ y(f, {
 					variant: "ghost",
 					size: "icon-sm",
 					color: "error",
-					onClick: a,
+					onClick: i,
 					"aria-label": "Stop",
-					children: /* @__PURE__ */ v(o, {
-						icon: S,
+					children: /* @__PURE__ */ y(s, {
+						icon: C,
 						size: "sm"
 					})
-				}) : /* @__PURE__ */ v(d, {
+				}) : /* @__PURE__ */ y(f, {
 					variant: "ghost",
 					size: "icon-sm",
 					onClick: T,
 					disabled: D || n,
 					"aria-label": "Send",
-					children: u ?? /* @__PURE__ */ v(o, {
-						icon: x,
+					children: u ?? /* @__PURE__ */ y(s, {
+						icon: S,
 						size: "sm"
 					})
 				}),
 				c
 			]
-		}), l && /* @__PURE__ */ v("p", {
-			className: "mt-ds-02 text-center text-caption text-surface-fg-subtle/50",
+		}), l && /* @__PURE__ */ y("p", {
+			className: "mt-ds-02 text-center text-caption text-surface-fg-subtle",
 			children: l
 		})]
 	});
 });
-V.displayName = "MessageInput";
+U.displayName = "MessageInput";
 //#endregion
 //#region src/ui/chat/message-list.tsx
-var H = _.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: n = 0, onScrollToBottom: o, onLoadMore: s, loadingMore: c = !1, emptySlot: l, scrollToBottomSlot: u, headerSlot: d, className: f, ...p }, m) => {
-	let h = _.useRef(null), g = _.useRef(!0), [b, x] = _.useState(!0), S = _.useRef(!1), C = _.useRef(0), E = _.Children.count(e) === 0 && !c, D = _.useCallback(() => {
-		let e = h.current;
+var W = v.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: i = 0, onScrollToBottom: s, onLoadMore: c, loadingMore: l = !1, emptySlot: u, scrollToBottomSlot: d, headerSlot: f, className: p, ...m }, h) => {
+	let g = v.useRef(null), _ = v.useRef(!0), [x, S] = v.useState(!0), C = v.useRef(!1), w = v.useRef(0), D = v.Children.count(e) === 0 && !l, O = v.useCallback(() => {
+		let e = g.current;
 		if (!e) return;
 		let t = e.scrollHeight - e.scrollTop - e.clientHeight < 40;
-		g.current = t, x(t), e.scrollTop < 100 && s && !S.current && (S.current = !0, C.current = e.scrollHeight, s());
-	}, [s]);
-	_.useLayoutEffect(() => {
-		let e = h.current;
+		_.current = t, S(t), e.scrollTop < 100 && c && !C.current && (C.current = !0, w.current = e.scrollHeight, c());
+	}, [c]);
+	v.useLayoutEffect(() => {
+		let e = g.current;
 		if (e) {
-			if (S.current) {
-				e.scrollTop = e.scrollHeight - C.current, S.current = !1;
+			if (C.current) {
+				e.scrollTop = e.scrollHeight - w.current, C.current = !1;
 				return;
 			}
-			t && g.current && e.scrollTo({
+			t && _.current && e.scrollTo({
 				top: e.scrollHeight,
 				behavior: "smooth"
 			});
 		}
-	}, [e, t]), _.useEffect(() => {
-		c || (S.current = !1);
-	}, [c]);
-	let O = n > 0 && !b, k = _.useCallback(() => {
-		let e = h.current;
+	}, [e, t]), v.useEffect(() => {
+		l || (C.current = !1);
+	}, [l]);
+	let k = i > 0 && !x, A = v.useCallback(() => {
+		let e = g.current;
 		e && e.scrollTo({
 			top: e.scrollHeight,
 			behavior: "smooth"
-		}), o?.();
-	}, [o]);
-	return /* @__PURE__ */ y("div", {
-		ref: m,
-		className: i("relative flex flex-1 flex-col overflow-hidden", f),
-		...p,
+		}), s?.();
+	}, [s]);
+	return /* @__PURE__ */ y(r, { children: /* @__PURE__ */ b("div", {
+		ref: h,
+		className: a("relative flex flex-1 flex-col overflow-hidden", p),
+		...m,
 		children: [
-			d,
-			/* @__PURE__ */ y("div", {
-				ref: h,
+			f,
+			/* @__PURE__ */ b("div", {
+				ref: g,
 				role: "log",
 				"aria-live": "polite",
 				"aria-relevant": "additions",
@@ -378,19 +395,19 @@ var H = _.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: n = 0,
 					scrollbarWidth: "thin",
 					scrollbarColor: "var(--color-surface-border) transparent"
 				},
-				onScroll: D,
-				children: [c && /* @__PURE__ */ v("div", {
+				onScroll: O,
+				children: [l && /* @__PURE__ */ y("div", {
 					className: "flex justify-center py-ds-03",
-					children: /* @__PURE__ */ v(a, { size: "sm" })
-				}), E ? l : /* @__PURE__ */ v("div", {
+					children: /* @__PURE__ */ y(o, { size: "sm" })
+				}), D ? u : /* @__PURE__ */ y("div", {
 					className: "flex flex-col gap-ds-04",
-					children: /* @__PURE__ */ v(w, {
+					children: /* @__PURE__ */ y(T, {
 						initial: !1,
 						children: e
 					})
 				})]
 			}),
-			/* @__PURE__ */ v(w, { children: O && /* @__PURE__ */ y(T.button, {
+			/* @__PURE__ */ y(T, { children: k && /* @__PURE__ */ b(E.button, {
 				initial: {
 					opacity: 0,
 					y: 10
@@ -403,84 +420,84 @@ var H = _.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: n = 0,
 					opacity: 0,
 					y: 10
 				},
-				transition: r.fade,
-				onClick: k,
+				transition: n.fade,
+				onClick: A,
 				className: "absolute bottom-ds-04 left-1/2 z-10 -translate-x-1/2 rounded-pill bg-accent-9 px-ds-04 py-ds-02 text-body-xs font-medium text-accent-fg shadow-raised transition-colors hover:bg-accent-10",
-				children: [n, " new"]
+				children: [i, " new"]
 			}) })
 		]
-	});
+	}) });
 });
-H.displayName = "MessageList";
+W.displayName = "MessageList";
 //#endregion
 //#region src/ui/chat/system-message.tsx
-function U(e) {
+function G(e) {
 	return new Date(e).toLocaleTimeString("en-US", {
 		hour: "numeric",
 		minute: "2-digit"
 	});
 }
-var W = _.forwardRef(({ icon: t, timestamp: n, variant: r = "event", children: a, className: s, ...c }, l) => r === "alert" ? /* @__PURE__ */ v("div", {
+var K = v.forwardRef(({ icon: e, timestamp: t, variant: n = "event", children: r, className: o, ...c }, l) => n === "alert" ? /* @__PURE__ */ y("div", {
 	ref: l,
 	role: "alert",
-	className: i("flex justify-center", s),
+	className: a("flex justify-center", o),
 	...c,
-	children: /* @__PURE__ */ y("div", {
+	children: /* @__PURE__ */ b("div", {
 		className: "flex items-center gap-ds-03 rounded-surface bg-error-3 px-ds-04 py-ds-03",
 		children: [
-			/* @__PURE__ */ v(e, {
+			/* @__PURE__ */ y(i, {
 				size: "sm",
-				children: u(t) ?? /* @__PURE__ */ v(o, { icon: b })
+				children: d(e) ?? /* @__PURE__ */ y(s, { icon: x })
 			}),
-			/* @__PURE__ */ v("span", {
+			/* @__PURE__ */ y("span", {
 				className: "text-body-sm text-error-11",
-				children: a
+				children: r
 			}),
-			n && /* @__PURE__ */ v("span", {
+			t && /* @__PURE__ */ y("span", {
 				className: "text-body-sm text-error-11/60",
-				children: U(n)
+				children: G(t)
 			})
 		]
 	})
-}) : /* @__PURE__ */ y("div", {
+}) : /* @__PURE__ */ b("div", {
 	ref: l,
-	className: i("flex items-center gap-ds-02 rounded-control-inner bg-surface-raised-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-body-sm text-surface-fg-subtle/60", s),
+	className: a("flex items-center gap-ds-02 rounded-control-inner bg-surface-panel-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-body-sm text-surface-fg-subtle", o),
 	...c,
 	children: [
-		/* @__PURE__ */ v(e, {
+		/* @__PURE__ */ y(i, {
 			size: "xs",
-			children: u(t)
+			children: d(e)
 		}),
-		/* @__PURE__ */ v("span", {
+		/* @__PURE__ */ y("span", {
 			className: "flex-1",
-			children: a
+			children: r
 		}),
-		n && /* @__PURE__ */ v("span", { children: U(n) })
+		t && /* @__PURE__ */ y("span", { children: G(t) })
 	]
 }));
-W.displayName = "SystemMessage";
+K.displayName = "SystemMessage";
 //#endregion
 //#region src/ui/chat/typing-indicator.tsx
-function G(e) {
+function q(e) {
 	return e.length === 1 ? `${e[0].name} is typing...` : e.length === 2 ? `${e[0].name} and ${e[1].name} are typing...` : "Several people are typing...";
 }
-function K({ users: e, className: t }) {
-	return /* @__PURE__ */ v("div", {
-		className: i("min-h-ds-06 px-ds-05", t),
+function J({ users: e, className: t }) {
+	return /* @__PURE__ */ y(r, { children: /* @__PURE__ */ y("div", {
+		className: a("min-h-ds-06 px-ds-05", t),
 		role: "status",
 		"aria-live": "polite",
-		children: /* @__PURE__ */ v(w, { children: e.length > 0 && /* @__PURE__ */ y(T.div, {
+		children: /* @__PURE__ */ y(T, { children: e.length > 0 && /* @__PURE__ */ b(E.div, {
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
 			exit: { opacity: 0 },
 			className: "flex items-center gap-ds-02 text-caption text-surface-fg-subtle",
-			children: [/* @__PURE__ */ v("span", {
+			children: [/* @__PURE__ */ y("span", {
 				className: "flex items-center gap-ds-01",
 				children: [
 					0,
 					1,
 					2
-				].map((e) => /* @__PURE__ */ v(T.span, {
+				].map((e) => /* @__PURE__ */ y(E.span, {
 					className: "h-1 w-1 rounded-pill bg-surface-fg-subtle",
 					animate: { y: [
 						0,
@@ -493,26 +510,26 @@ function K({ users: e, className: t }) {
 						delay: e * .15
 					}
 				}, e))
-			}), /* @__PURE__ */ v("span", { children: G(e) })]
+			}), /* @__PURE__ */ y("span", { children: q(e) })]
 		}) })
-	});
+	}) });
 }
-K.displayName = "TypingIndicator";
+J.displayName = "TypingIndicator";
 //#endregion
 //#region src/ui/chat/unread-separator.tsx
-function q({ label: e = "NEW", count: t, className: n }) {
-	return /* @__PURE__ */ y("div", {
-		className: i("relative flex items-center py-ds-02", n),
+function Y({ label: e = "NEW", count: t, className: n }) {
+	return /* @__PURE__ */ b("div", {
+		className: a("relative flex items-center py-ds-02", n),
 		children: [
-			/* @__PURE__ */ v("div", { className: "flex-1 border-t-2 border-accent-7" }),
-			/* @__PURE__ */ v("span", {
+			/* @__PURE__ */ y("div", { className: "flex-1 border-t-2 border-accent-7" }),
+			/* @__PURE__ */ y("span", {
 				className: "px-ds-03 text-body-xs font-semibold text-accent-11",
 				children: t ? `${t} ${e}` : e
 			}),
-			/* @__PURE__ */ v("div", { className: "flex-1 border-t-2 border-accent-7" })
+			/* @__PURE__ */ y("div", { className: "flex-1 border-t-2 border-accent-7" })
 		]
 	});
 }
-q.displayName = "UnreadSeparator";
+Y.displayName = "UnreadSeparator";
 //#endregion
-export { D as DateSeparator, B as Message, V as MessageInput, H as MessageList, W as SystemMessage, K as TypingIndicator, q as UnreadSeparator, k as useMessageContext };
+export { k as DateSeparator, H as Message, U as MessageInput, W as MessageList, K as SystemMessage, J as TypingIndicator, Y as UnreadSeparator, j as useMessageContext };