@devalok/shilp-sutra 0.36.1 → 0.37.0-next.0

package/dist/_chunks/chat.js

@@ -1,119 +1,62 @@
 "use client";
-import { a as e, c as t } from "./framer.js";
-import { motionProps as n, springs as r, tweens as i } from "../ui/lib/motion.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 { Button as d } from "../ui/button.js";
-import { Tooltip as f, TooltipContent as p, TooltipTrigger as m } from "../ui/tooltip.js";
-import * as h from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { IconAlertCircle as v, IconSend as y, IconSquare as b, IconTrash as x } from "@tabler/icons-react";
-//#region src/ui/chat/message-list.tsx
-var S = h.forwardRef(({ children: n, autoScroll: r = !0, newMessageCount: s = 0, onScrollToBottom: c, onLoadMore: l, loadingMore: u = !1, emptySlot: d, scrollToBottomSlot: f, headerSlot: p, className: m, ...v }, y) => {
-	let b = h.useRef(null), x = h.useRef(!0), [S, C] = h.useState(!0), w = h.useRef(!1), T = h.useRef(0), E = h.Children.count(n) === 0 && !u, D = h.useCallback(() => {
-		let e = b.current;
-		if (!e) return;
-		let t = e.scrollHeight - e.scrollTop - e.clientHeight < 40;
-		x.current = t, C(t), e.scrollTop < 100 && l && !w.current && (w.current = !0, T.current = e.scrollHeight, l());
-	}, [l]);
-	h.useLayoutEffect(() => {
-		let e = b.current;
-		if (e) {
-			if (w.current) {
-				e.scrollTop = e.scrollHeight - T.current, w.current = !1;
-				return;
-			}
-			r && x.current && e.scrollTo({
-				top: e.scrollHeight,
-				behavior: "smooth"
-			});
-		}
-	}, [n, r]), h.useEffect(() => {
-		u || (w.current = !1);
-	}, [u]);
-	let O = s > 0 && !S, k = h.useCallback(() => {
-		let e = b.current;
-		e && e.scrollTo({
-			top: e.scrollHeight,
-			behavior: "smooth"
-		}), c?.();
-	}, [c]);
-	return /* @__PURE__ */ _("div", {
-		ref: y,
-		className: a("relative flex flex-1 flex-col overflow-hidden", m),
-		...v,
+import { motionProps as e, springs as t, tweens as n } from "../ui/lib/motion.js";
+import { cn as r } from "../ui/lib/utils.js";
+import { Spinner as i } from "../ui/spinner.js";
+import { Icon as a } from "../ui/icon.js";
+import { Avatar as o, AvatarFallback as s, AvatarImage as c } from "../ui/avatar.js";
+import { Button as l } from "../ui/button.js";
+import { Tooltip as u, TooltipContent as d, TooltipTrigger as f } from "../ui/tooltip.js";
+import * as p from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { IconAlertCircle as g, IconSend as _, IconSquare as v, IconTrash as y } from "@tabler/icons-react";
+import { AnimatePresence as b, motion as x } from "framer-motion";
+//#region src/ui/chat/date-separator.tsx
+function S(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 C({ date: e, format: t, className: n }) {
+	let i = typeof e == "string" ? new Date(e) : e, a = t ? t(i) : S(i);
+	return /* @__PURE__ */ h("div", {
+		className: r("flex items-center gap-ds-03 py-ds-03", n),
 		children: [
-			p,
-			/* @__PURE__ */ _("div", {
-				ref: b,
-				role: "log",
-				"aria-live": "polite",
-				"aria-relevant": "additions",
-				className: "flex-1 overflow-y-auto px-ds-05 py-ds-04",
-				style: {
-					scrollbarWidth: "thin",
-					scrollbarColor: "var(--color-surface-border) transparent"
-				},
-				onScroll: D,
-				children: [u && /* @__PURE__ */ g("div", {
-					className: "flex justify-center py-ds-03",
-					children: /* @__PURE__ */ g(o, { size: "sm" })
-				}), E ? d : /* @__PURE__ */ g("div", {
-					className: "flex flex-col gap-ds-04",
-					children: /* @__PURE__ */ g(t, {
-						initial: !1,
-						children: n
-					})
-				})]
+			/* @__PURE__ */ m("div", { className: "flex-1 border-t border-surface-border-subtle" }),
+			/* @__PURE__ */ m("span", {
+				className: "text-ds-xs font-medium text-surface-fg-subtle/50 uppercase tracking-wider",
+				children: a
 			}),
-			/* @__PURE__ */ g(t, { children: O && /* @__PURE__ */ _(e.button, {
-				initial: {
-					opacity: 0,
-					y: 10
-				},
-				animate: {
-					opacity: 1,
-					y: 0
-				},
-				exit: {
-					opacity: 0,
-					y: 10
-				},
-				transition: i.fade,
-				onClick: k,
-				className: "absolute bottom-ds-04 left-1/2 z-10 -translate-x-1/2 rounded-full bg-accent-9 px-ds-04 py-ds-02 text-ds-xs font-medium text-accent-fg shadow-raised transition-colors hover:bg-accent-10",
-				children: [s, " new"]
-			}) })
+			/* @__PURE__ */ m("div", { className: "flex-1 border-t border-surface-border-subtle" })
 		]
 	});
-});
-S.displayName = "MessageList";
+}
+C.displayName = "DateSeparator";
 //#endregion
 //#region src/ui/chat/message.tsx
-var C = h.createContext({
+var w = p.createContext({
 	variant: "flat",
 	placement: "start",
 	grouped: !1
 });
-function w() {
-	return h.useContext(C);
+function T() {
+	return p.useContext(w);
 }
-var T = h.forwardRef(({ children: t, 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 v = h.useMemo(() => ({
+var E = p.forwardRef(({ children: n, variant: i = "flat", placement: o = "start", highlight: s, grouped: c = !1, deleted: l = !1, deletedText: u = "This message was deleted", className: d, ...f }, g) => {
+	let _ = p.useMemo(() => ({
 		variant: i,
 		placement: o,
-		grouped: l,
-		highlight: c
+		grouped: c,
+		highlight: s
 	}), [
 		i,
 		o,
-		l,
-		c
+		c,
+		s
 	]);
-	return u ? /* @__PURE__ */ _(e.div, {
-		ref: m,
+	return l ? /* @__PURE__ */ h(x.div, {
+		ref: g,
 		initial: {
 			opacity: 0,
 			y: 8
@@ -122,17 +65,17 @@ var T = h.forwardRef(({ children: t, variant: i = "flat", placement: o = "start"
 			opacity: 1,
 			y: 0
 		},
-		transition: r.snappy,
-		className: a("flex items-center gap-ds-02 py-ds-02 text-ds-xs text-surface-fg-subtle/50 italic", f),
-		...n(p),
-		children: [/* @__PURE__ */ g(s, {
-			icon: x,
+		transition: t.snappy,
+		className: r("flex items-center gap-ds-02 py-ds-02 text-ds-xs text-surface-fg-subtle/50 italic", d),
+		...e(f),
+		children: [/* @__PURE__ */ m(a, {
+			icon: y,
 			size: "xs"
-		}), d]
-	}) : i === "bubble" ? /* @__PURE__ */ g(C.Provider, {
-		value: v,
-		children: /* @__PURE__ */ g(e.div, {
-			ref: m,
+		}), u]
+	}) : i === "bubble" ? /* @__PURE__ */ m(w.Provider, {
+		value: _,
+		children: /* @__PURE__ */ m(x.div, {
+			ref: g,
 			initial: {
 				opacity: 0,
 				y: 8
@@ -141,18 +84,18 @@ var T = h.forwardRef(({ children: t, variant: i = "flat", placement: o = "start"
 				opacity: 1,
 				y: 0
 			},
-			transition: r.snappy,
-			className: a("group/message relative flex", o === "end" ? "justify-end" : "justify-start", c === "mention" && "border-l-2 border-l-accent-9 bg-accent-2 pl-ds-03 rounded-ds-sm", c === "internal" && "bg-warning-2/50 rounded-ds-sm", f),
-			...n(p),
-			children: /* @__PURE__ */ g("div", {
-				className: a("max-w-[85%] rounded-ds-2xl px-ds-04 py-ds-03", o === "end" ? "bg-accent-3 text-surface-fg" : "bg-surface-raised text-surface-fg"),
-				children: t
+			transition: t.snappy,
+			className: r("group/message relative flex", o === "end" ? "justify-end" : "justify-start", s === "mention" && "border-l-2 border-l-accent-9 bg-accent-2 pl-ds-03 rounded-ds-sm", s === "internal" && "bg-warning-2/50 rounded-ds-sm", d),
+			...e(f),
+			children: /* @__PURE__ */ m("div", {
+				className: r("max-w-[85%] rounded-ds-2xl px-ds-04 py-ds-03", o === "end" ? "bg-accent-3 text-surface-fg" : "bg-surface-raised text-surface-fg"),
+				children: n
 			})
 		})
-	}) : /* @__PURE__ */ g(C.Provider, {
-		value: v,
-		children: /* @__PURE__ */ g(e.div, {
-			ref: m,
+	}) : /* @__PURE__ */ m(w.Provider, {
+		value: _,
+		children: /* @__PURE__ */ m(x.div, {
+			ref: g,
 			initial: {
 				opacity: 0,
 				y: 8
@@ -161,281 +104,194 @@ var T = h.forwardRef(({ children: t, variant: i = "flat", placement: o = "start"
 				opacity: 1,
 				y: 0
 			},
-			transition: r.snappy,
-			className: a("group/message relative flex gap-ds-04", l && "-mt-ds-01", c === "mention" && "border-l-2 border-l-accent-9 bg-accent-2 pl-ds-03 rounded-ds-sm", c === "internal" && "bg-warning-2/50 rounded-ds-sm", f),
-			...n(p),
-			children: t
+			transition: t.snappy,
+			className: r("group/message relative flex gap-ds-04", c && "-mt-ds-01", s === "mention" && "border-l-2 border-l-accent-9 bg-accent-2 pl-ds-03 rounded-ds-sm", s === "internal" && "bg-warning-2/50 rounded-ds-sm", d),
+			...e(f),
+			children: n
 		})
 	});
 });
-T.displayName = "Message";
-function E({ src: e, fallback: t, icon: n, size: r = "md", children: i }) {
-	let { grouped: o } = w(), s = r === "sm" ? "w-5" : "w-6";
-	return o ? /* @__PURE__ */ g("div", { className: a(s, r === "sm" ? "h-5" : "h-6", "shrink-0") }) : i ? /* @__PURE__ */ g("div", {
-		className: a(s, "shrink-0 flex items-start"),
-		children: i
-	}) : n ? /* @__PURE__ */ g("div", {
-		className: a(s, r === "sm" ? "h-5" : "h-6", "shrink-0 flex items-center justify-center rounded-ds-full bg-surface-raised-hover"),
+E.displayName = "Message";
+function D({ src: e, fallback: t, icon: n, size: i = "md", children: a }) {
+	let { grouped: l } = T(), u = i === "sm" ? "w-5" : "w-6";
+	return l ? /* @__PURE__ */ m("div", { className: r(u, i === "sm" ? "h-5" : "h-6", "shrink-0") }) : a ? /* @__PURE__ */ m("div", {
+		className: r(u, "shrink-0 flex items-start"),
+		children: a
+	}) : n ? /* @__PURE__ */ m("div", {
+		className: r(u, i === "sm" ? "h-5" : "h-6", "shrink-0 flex items-center justify-center rounded-ds-full bg-surface-raised-hover"),
 		children: n
-	}) : /* @__PURE__ */ g("div", {
-		className: a(s, "shrink-0"),
-		children: /* @__PURE__ */ _(c, {
-			size: r === "sm" ? "xs" : "sm",
-			children: [e && /* @__PURE__ */ g(u, {
+	}) : /* @__PURE__ */ m("div", {
+		className: r(u, "shrink-0"),
+		children: /* @__PURE__ */ h(o, {
+			size: i === "sm" ? "xs" : "sm",
+			children: [e && /* @__PURE__ */ m(c, {
 				src: e,
 				alt: t ?? ""
-			}), /* @__PURE__ */ g(l, { children: t ?? "" })]
+			}), /* @__PURE__ */ m(s, { children: t ?? "" })]
 		})
 	});
 }
-E.displayName = "Message.Avatar";
-function D({ children: e, className: t, ...n }) {
-	return /* @__PURE__ */ g("div", {
-		className: a("min-w-0 flex-1 flex flex-col gap-ds-02", t),
+D.displayName = "Message.Avatar";
+function O({ children: e, className: t, ...n }) {
+	return /* @__PURE__ */ m("div", {
+		className: r("min-w-0 flex-1 flex flex-col gap-ds-02", t),
 		...n,
 		children: e
 	});
 }
-D.displayName = "Message.Content";
-function O(e) {
+O.displayName = "Message.Content";
+function k(e) {
 	return e.toLocaleTimeString("en-US", {
 		hour: "numeric",
 		minute: "2-digit"
 	});
 }
-function k({ name: e, badge: t, timestamp: n, formattedTimestamp: r, timestampFormat: i = O }) {
-	let { grouped: a } = w();
+function A({ name: e, badge: t, timestamp: n, formattedTimestamp: r, timestampFormat: i = k }) {
+	let { grouped: a } = T();
 	if (a) return null;
 	let o = r ?? (n ? i(n) : void 0);
-	return /* @__PURE__ */ _("div", {
+	return /* @__PURE__ */ h("div", {
 		className: "flex items-baseline gap-ds-02",
 		children: [
-			/* @__PURE__ */ g("span", {
+			/* @__PURE__ */ m("span", {
 				className: "font-semibold text-[13px] text-surface-fg",
 				children: e
 			}),
 			t,
-			o && /* @__PURE__ */ g("span", {
+			o && /* @__PURE__ */ m("span", {
 				className: "text-[11px] text-surface-fg-subtle/50",
 				children: o
 			})
 		]
 	});
 }
-k.displayName = "Message.Author";
-function A({ children: e, className: t, ...n }) {
-	return /* @__PURE__ */ g("div", {
-		className: a("text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap", t),
+A.displayName = "Message.Author";
+function j({ children: e, className: t, ...n }) {
+	return /* @__PURE__ */ m("div", {
+		className: r("text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap", t),
 		...n,
 		children: e
 	});
 }
-A.displayName = "Message.Body";
-function j({ content: e, onSave: t, onCancel: n, canEdit: r = !1, renderContent: i }) {
-	let [o, s] = h.useState(!1), [c, l] = h.useState(e), u = h.useRef(null);
-	h.useEffect(() => {
+j.displayName = "Message.Body";
+function M({ content: e, onSave: t, onCancel: n, canEdit: i = !1, renderContent: a }) {
+	let [o, s] = p.useState(!1), [c, l] = p.useState(e), u = p.useRef(null);
+	p.useEffect(() => {
 		o && u.current && (u.current.focus(), u.current.select());
 	}, [o]);
-	let d = h.useCallback(() => {
-		r && (l(e), s(!0));
-	}, [r, e]), f = h.useCallback(() => {
+	let d = p.useCallback(() => {
+		i && (l(e), s(!0));
+	}, [i, e]), f = p.useCallback(() => {
 		let n = c.trim();
 		n && n !== e && t(n), s(!1);
 	}, [
 		c,
 		e,
 		t
-	]), p = h.useCallback(() => {
+	]), g = p.useCallback(() => {
 		s(!1), l(e), n?.();
-	}, [e, n]), m = h.useCallback((e) => {
-		e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), f()) : e.key === "Escape" && (e.preventDefault(), p());
-	}, [f, p]);
-	return o ? /* @__PURE__ */ _("div", {
+	}, [e, n]), _ = p.useCallback((e) => {
+		e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), f()) : e.key === "Escape" && (e.preventDefault(), g());
+	}, [f, g]);
+	return o ? /* @__PURE__ */ h("div", {
 		className: "text-[13px] leading-relaxed",
-		children: [/* @__PURE__ */ g("textarea", {
+		children: [/* @__PURE__ */ m("textarea", {
 			ref: u,
 			value: c,
 			onChange: (e) => l(e.target.value),
-			onKeyDown: m,
+			onKeyDown: _,
 			onBlur: f,
 			className: "w-full resize-none rounded-ds-sm border border-surface-border-strong bg-surface-raised-hover px-ds-02 py-ds-01 text-[13px] leading-relaxed text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
 			rows: 2
-		}), /* @__PURE__ */ g("div", {
+		}), /* @__PURE__ */ m("div", {
 			className: "mt-ds-01 text-ds-xs text-surface-fg-subtle/50",
 			children: "Enter to save · Escape to cancel"
 		})]
-	}) : /* @__PURE__ */ g("div", {
-		className: a("text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap", r && "cursor-pointer hover:bg-surface-raised-hover rounded-ds-sm transition-colors"),
+	}) : /* @__PURE__ */ m("div", {
+		className: r("text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap", i && "cursor-pointer hover:bg-surface-raised-hover rounded-ds-sm transition-colors"),
 		onClick: d,
-		role: r ? "button" : void 0,
-		tabIndex: r ? 0 : void 0,
-		onKeyDown: r ? (e) => {
+		role: i ? "button" : void 0,
+		tabIndex: i ? 0 : void 0,
+		onKeyDown: i ? (e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), d());
 		} : void 0,
-		children: i ? i(e) : e
+		children: a ? a(e) : e
 	});
 }
-j.displayName = "Message.EditableBody";
-function M({ reactions: e, onReact: t }) {
-	return e.length === 0 ? null : /* @__PURE__ */ g("div", {
+M.displayName = "Message.EditableBody";
+function N({ reactions: e, onReact: t }) {
+	return e.length === 0 ? null : /* @__PURE__ */ m("div", {
 		className: "flex flex-wrap gap-ds-02 mt-ds-03",
-		children: e.map((e) => /* @__PURE__ */ _("button", {
+		children: e.map((e) => /* @__PURE__ */ h("button", {
 			type: "button",
 			onClick: () => t(e.emoji),
 			"aria-label": `${e.emoji} ${e.count} reaction${e.count === 1 ? "" : "s"}${e.reacted ? ", you reacted" : ""}`,
-			className: a("inline-flex items-center gap-ds-01 rounded-full px-ds-02 py-ds-01 text-ds-xs transition-colors", e.reacted ? "bg-accent-3 ring-1 ring-accent-6" : "bg-surface-raised-hover hover:bg-surface-raised-active"),
-			children: [/* @__PURE__ */ g("span", { children: e.emoji }), /* @__PURE__ */ g("span", { children: e.count })]
+			className: r("inline-flex items-center gap-ds-01 rounded-full px-ds-02 py-ds-01 text-ds-xs transition-colors", e.reacted ? "bg-accent-3 ring-1 ring-accent-6" : "bg-surface-raised-hover hover:bg-surface-raised-active"),
+			children: [/* @__PURE__ */ m("span", { children: e.emoji }), /* @__PURE__ */ m("span", { children: e.count })]
 		}, e.emoji))
 	});
 }
-M.displayName = "Message.Reactions";
-function N({ children: e, delay: t = 100 }) {
-	return /* @__PURE__ */ g("div", {
-		className: a("absolute -top-2 right-0 z-10", "flex items-center gap-ds-01 rounded-ds-md border border-surface-border 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"),
+N.displayName = "Message.Reactions";
+function P({ children: e, delay: t = 100 }) {
+	return /* @__PURE__ */ m("div", {
+		className: r("absolute -top-2 right-0 z-10", "flex items-center gap-ds-01 rounded-ds-md border border-surface-border 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"),
 		style: { transitionDelay: `${t}ms` },
 		children: e
 	});
 }
-N.displayName = "Message.Actions";
-function P({ icon: e, label: t, onClick: n, variant: r = "default" }) {
-	return /* @__PURE__ */ _(f, { children: [/* @__PURE__ */ g(m, {
+P.displayName = "Message.Actions";
+function F({ icon: e, label: t, onClick: n, variant: i = "default" }) {
+	return /* @__PURE__ */ h(u, { children: [/* @__PURE__ */ m(f, {
 		asChild: !0,
-		children: /* @__PURE__ */ g("button", {
+		children: /* @__PURE__ */ m("button", {
 			type: "button",
 			onClick: n,
 			"aria-label": t,
-			className: a("p-ds-02 rounded-ds-sm transition-colors", r === "default" && "text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-raised-hover", r === "danger" && "text-surface-fg-subtle hover:text-error-11 hover:bg-surface-raised-hover"),
-			children: /* @__PURE__ */ g(s, {
+			className: r("p-ds-02 rounded-ds-sm transition-colors", i === "default" && "text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-raised-hover", i === "danger" && "text-surface-fg-subtle hover:text-error-11 hover:bg-surface-raised-hover"),
+			children: /* @__PURE__ */ m(a, {
 				icon: e,
 				size: "xs"
 			})
 		})
-	}), /* @__PURE__ */ g(p, { children: t })] });
-}
-P.displayName = "Message.Action";
-var F = Object.assign(T, {
-	Avatar: E,
-	Content: D,
-	Author: k,
-	Body: A,
-	EditableBody: j,
-	Reactions: M,
-	Actions: N,
-	Action: P
-});
-//#endregion
-//#region src/ui/chat/system-message.tsx
-function I(e) {
-	return new Date(e).toLocaleTimeString("en-US", {
-		hour: "numeric",
-		minute: "2-digit"
-	});
-}
-var L = h.forwardRef(({ icon: e, timestamp: t, variant: n = "event", children: r, className: i, ...o }, c) => n === "alert" ? /* @__PURE__ */ g("div", {
-	ref: c,
-	role: "alert",
-	className: a("flex justify-center", i),
-	...o,
-	children: /* @__PURE__ */ _("div", {
-		className: "flex items-center gap-ds-03 rounded-ds-lg bg-error-3 px-ds-04 py-ds-03",
-		children: [
-			e ?? /* @__PURE__ */ g(s, {
-				icon: v,
-				size: "sm"
-			}),
-			/* @__PURE__ */ g("span", {
-				className: "text-ds-sm text-error-11",
-				children: r
-			}),
-			t && /* @__PURE__ */ g("span", {
-				className: "text-ds-sm text-error-11/60",
-				children: I(t)
-			})
-		]
-	})
-}) : /* @__PURE__ */ _("div", {
-	ref: c,
-	className: a("flex items-center gap-ds-02 rounded-ds-sm bg-surface-raised-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-ds-sm text-surface-fg-subtle/60", i),
-	...o,
-	children: [
-		e,
-		/* @__PURE__ */ g("span", {
-			className: "flex-1",
-			children: r
-		}),
-		t && /* @__PURE__ */ g("span", { children: I(t) })
-	]
-}));
-L.displayName = "SystemMessage";
-//#endregion
-//#region src/ui/chat/date-separator.tsx
-function R(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 z({ date: e, format: t, className: n }) {
-	let r = typeof e == "string" ? new Date(e) : e, i = t ? t(r) : R(r);
-	return /* @__PURE__ */ _("div", {
-		className: a("flex items-center gap-ds-03 py-ds-03", n),
-		children: [
-			/* @__PURE__ */ g("div", { className: "flex-1 border-t border-surface-border-subtle" }),
-			/* @__PURE__ */ g("span", {
-				className: "text-ds-xs font-medium text-surface-fg-subtle/50 uppercase tracking-wider",
-				children: i
-			}),
-			/* @__PURE__ */ g("div", { className: "flex-1 border-t border-surface-border-subtle" })
-		]
-	});
+	}), /* @__PURE__ */ m(d, { children: t })] });
 }
-z.displayName = "DateSeparator";
-//#endregion
-//#region src/ui/chat/unread-separator.tsx
-function B({ label: e = "NEW", count: t, className: n }) {
-	return /* @__PURE__ */ _("div", {
-		className: a("relative flex items-center py-ds-02", n),
-		children: [
-			/* @__PURE__ */ g("div", { className: "flex-1 border-t-2 border-accent-7" }),
-			/* @__PURE__ */ g("span", {
-				className: "px-ds-03 text-ds-xs font-semibold text-accent-11",
-				children: t ? `${t} ${e}` : e
-			}),
-			/* @__PURE__ */ g("div", { className: "flex-1 border-t-2 border-accent-7" })
-		]
-	});
-}
-B.displayName = "UnreadSeparator";
-//#endregion
-//#region src/ui/chat/message-input.tsx
-var V = h.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: f, ...p }, m) => {
-	let [v, x] = h.useState(""), S = h.useRef(null), C = h.useCallback(() => {
+F.displayName = "Message.Action";
+var I = Object.assign(E, {
+	Avatar: D,
+	Content: O,
+	Author: A,
+	Body: j,
+	EditableBody: M,
+	Reactions: N,
+	Actions: P,
+	Action: F
+}), L = p.forwardRef(({ onSubmit: e, placeholder: t = "Type a message...", disabled: n = !1, isStreaming: i = !1, onCancel: o, leadingSlot: s, trailingSlot: c, disclaimer: u, sendIcon: d, className: f, ...g }, y) => {
+	let [b, x] = p.useState(""), S = p.useRef(null), C = p.useCallback(() => {
 		let e = S.current;
 		e && (e.style.height = "auto", e.style.height = `${Math.min(e.scrollHeight, 160)}px`);
-	}, []), w = h.useCallback((e) => {
+	}, []), w = p.useCallback((e) => {
 		x(e.target.value), C();
-	}, [C]), T = h.useCallback(() => {
-		let t = v.trim();
-		!t || r || (e(t), x(""), S.current && (S.current.style.height = "auto"));
+	}, [C]), T = p.useCallback(() => {
+		let t = b.trim();
+		!t || i || (e(t), x(""), S.current && (S.current.style.height = "auto"));
 	}, [
-		v,
-		r,
+		b,
+		i,
 		e
-	]), E = h.useCallback((e) => {
-		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), r || T());
-	}, [r, T]), D = v.trim().length === 0;
-	return /* @__PURE__ */ _("div", {
-		ref: m,
-		className: a("border-t border-surface-border-subtle px-ds-05 py-ds-04", f),
-		...p,
-		children: [/* @__PURE__ */ _("div", {
+	]), E = p.useCallback((e) => {
+		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), i || T());
+	}, [i, T]), D = b.trim().length === 0;
+	return /* @__PURE__ */ h("div", {
+		ref: y,
+		className: r("border-t border-surface-border-subtle px-ds-05 py-ds-04", f),
+		...g,
+		children: [/* @__PURE__ */ h("div", {
 			className: "flex items-end gap-ds-02 rounded-ds-xl border border-surface-border bg-surface-base p-ds-03",
 			children: [
-				o,
-				/* @__PURE__ */ g("textarea", {
+				s,
+				/* @__PURE__ */ m("textarea", {
 					ref: S,
-					value: v,
+					value: b,
 					onChange: w,
 					onKeyDown: E,
 					placeholder: t,
@@ -445,58 +301,183 @@ var V = h.forwardRef(({ onSubmit: e, placeholder: t = "Type a message...", disab
 					className: "flex-1 resize-none bg-transparent px-ds-02 py-ds-01 text-ds-sm text-surface-fg placeholder:text-surface-fg-subtle/50 focus:outline-hidden disabled:opacity-50",
 					style: { maxHeight: 160 }
 				}),
-				r ? /* @__PURE__ */ g(d, {
+				i ? /* @__PURE__ */ m(l, {
 					variant: "ghost",
 					size: "icon-sm",
 					color: "error",
-					onClick: i,
+					onClick: o,
 					"aria-label": "Stop",
-					children: /* @__PURE__ */ g(s, {
-						icon: b,
+					children: /* @__PURE__ */ m(a, {
+						icon: v,
 						size: "sm"
 					})
-				}) : /* @__PURE__ */ g(d, {
+				}) : /* @__PURE__ */ m(l, {
 					variant: "ghost",
 					size: "icon-sm",
 					onClick: T,
 					disabled: D || n,
 					"aria-label": "Send",
-					children: u ?? /* @__PURE__ */ g(s, {
-						icon: y,
+					children: d ?? /* @__PURE__ */ m(a, {
+						icon: _,
 						size: "sm"
 					})
 				}),
 				c
 			]
-		}), l && /* @__PURE__ */ g("p", {
+		}), u && /* @__PURE__ */ m("p", {
 			className: "mt-ds-02 text-center text-ds-xs text-surface-fg-subtle/50",
-			children: l
+			children: u
 		})]
 	});
 });
-V.displayName = "MessageInput";
+L.displayName = "MessageInput";
+//#endregion
+//#region src/ui/chat/message-list.tsx
+var R = p.forwardRef(({ children: e, autoScroll: t = !0, newMessageCount: a = 0, onScrollToBottom: o, onLoadMore: s, loadingMore: c = !1, emptySlot: l, scrollToBottomSlot: u, headerSlot: d, className: f, ...g }, _) => {
+	let v = p.useRef(null), y = p.useRef(!0), [S, C] = p.useState(!0), w = p.useRef(!1), T = p.useRef(0), E = p.Children.count(e) === 0 && !c, D = p.useCallback(() => {
+		let e = v.current;
+		if (!e) return;
+		let t = e.scrollHeight - e.scrollTop - e.clientHeight < 40;
+		y.current = t, C(t), e.scrollTop < 100 && s && !w.current && (w.current = !0, T.current = e.scrollHeight, s());
+	}, [s]);
+	p.useLayoutEffect(() => {
+		let e = v.current;
+		if (e) {
+			if (w.current) {
+				e.scrollTop = e.scrollHeight - T.current, w.current = !1;
+				return;
+			}
+			t && y.current && e.scrollTo({
+				top: e.scrollHeight,
+				behavior: "smooth"
+			});
+		}
+	}, [e, t]), p.useEffect(() => {
+		c || (w.current = !1);
+	}, [c]);
+	let O = a > 0 && !S, k = p.useCallback(() => {
+		let e = v.current;
+		e && e.scrollTo({
+			top: e.scrollHeight,
+			behavior: "smooth"
+		}), o?.();
+	}, [o]);
+	return /* @__PURE__ */ h("div", {
+		ref: _,
+		className: r("relative flex flex-1 flex-col overflow-hidden", f),
+		...g,
+		children: [
+			d,
+			/* @__PURE__ */ h("div", {
+				ref: v,
+				role: "log",
+				"aria-live": "polite",
+				"aria-relevant": "additions",
+				className: "flex-1 overflow-y-auto px-ds-05 py-ds-04",
+				style: {
+					scrollbarWidth: "thin",
+					scrollbarColor: "var(--color-surface-border) transparent"
+				},
+				onScroll: D,
+				children: [c && /* @__PURE__ */ m("div", {
+					className: "flex justify-center py-ds-03",
+					children: /* @__PURE__ */ m(i, { size: "sm" })
+				}), E ? l : /* @__PURE__ */ m("div", {
+					className: "flex flex-col gap-ds-04",
+					children: /* @__PURE__ */ m(b, {
+						initial: !1,
+						children: e
+					})
+				})]
+			}),
+			/* @__PURE__ */ m(b, { children: O && /* @__PURE__ */ h(x.button, {
+				initial: {
+					opacity: 0,
+					y: 10
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				exit: {
+					opacity: 0,
+					y: 10
+				},
+				transition: n.fade,
+				onClick: k,
+				className: "absolute bottom-ds-04 left-1/2 z-10 -translate-x-1/2 rounded-full bg-accent-9 px-ds-04 py-ds-02 text-ds-xs font-medium text-accent-fg shadow-raised transition-colors hover:bg-accent-10",
+				children: [a, " new"]
+			}) })
+		]
+	});
+});
+R.displayName = "MessageList";
+//#endregion
+//#region src/ui/chat/system-message.tsx
+function z(e) {
+	return new Date(e).toLocaleTimeString("en-US", {
+		hour: "numeric",
+		minute: "2-digit"
+	});
+}
+var B = p.forwardRef(({ icon: e, timestamp: t, variant: n = "event", children: i, className: o, ...s }, c) => n === "alert" ? /* @__PURE__ */ m("div", {
+	ref: c,
+	role: "alert",
+	className: r("flex justify-center", o),
+	...s,
+	children: /* @__PURE__ */ h("div", {
+		className: "flex items-center gap-ds-03 rounded-ds-lg bg-error-3 px-ds-04 py-ds-03",
+		children: [
+			e ?? /* @__PURE__ */ m(a, {
+				icon: g,
+				size: "sm"
+			}),
+			/* @__PURE__ */ m("span", {
+				className: "text-ds-sm text-error-11",
+				children: i
+			}),
+			t && /* @__PURE__ */ m("span", {
+				className: "text-ds-sm text-error-11/60",
+				children: z(t)
+			})
+		]
+	})
+}) : /* @__PURE__ */ h("div", {
+	ref: c,
+	className: r("flex items-center gap-ds-02 rounded-ds-sm bg-surface-raised-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-ds-sm text-surface-fg-subtle/60", o),
+	...s,
+	children: [
+		e,
+		/* @__PURE__ */ m("span", {
+			className: "flex-1",
+			children: i
+		}),
+		t && /* @__PURE__ */ m("span", { children: z(t) })
+	]
+}));
+B.displayName = "SystemMessage";
 //#endregion
 //#region src/ui/chat/typing-indicator.tsx
-function H(e) {
+function V(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 U({ users: n, className: r }) {
-	return /* @__PURE__ */ g("div", {
-		className: a("min-h-[24px] px-ds-05", r),
+function H({ users: e, className: t }) {
+	return /* @__PURE__ */ m("div", {
+		className: r("min-h-[24px] px-ds-05", t),
 		role: "status",
 		"aria-live": "polite",
-		children: /* @__PURE__ */ g(t, { children: n.length > 0 && /* @__PURE__ */ _(e.div, {
+		children: /* @__PURE__ */ m(b, { children: e.length > 0 && /* @__PURE__ */ h(x.div, {
 			initial: { opacity: 0 },
 			animate: { opacity: 1 },
 			exit: { opacity: 0 },
 			className: "flex items-center gap-ds-02 text-ds-xs text-surface-fg-subtle",
-			children: [/* @__PURE__ */ g("span", {
+			children: [/* @__PURE__ */ m("span", {
 				className: "flex items-center gap-ds-01",
 				children: [
 					0,
 					1,
 					2
-				].map((t) => /* @__PURE__ */ g(e.span, {
+				].map((e) => /* @__PURE__ */ m(x.span, {
 					className: "h-1 w-1 rounded-full bg-surface-fg-subtle",
 					animate: { y: [
 						0,
@@ -506,13 +487,29 @@ function U({ users: n, className: r }) {
 					transition: {
 						duration: .5,
 						repeat: Infinity,
-						delay: t * .15
+						delay: e * .15
 					}
-				}, t))
-			}), /* @__PURE__ */ g("span", { children: H(n) })]
+				}, e))
+			}), /* @__PURE__ */ m("span", { children: V(e) })]
 		}) })
 	});
 }
-U.displayName = "TypingIndicator";
+H.displayName = "TypingIndicator";
+//#endregion
+//#region src/ui/chat/unread-separator.tsx
+function U({ label: e = "NEW", count: t, className: n }) {
+	return /* @__PURE__ */ h("div", {
+		className: r("relative flex items-center py-ds-02", n),
+		children: [
+			/* @__PURE__ */ m("div", { className: "flex-1 border-t-2 border-accent-7" }),
+			/* @__PURE__ */ m("span", {
+				className: "px-ds-03 text-ds-xs font-semibold text-accent-11",
+				children: t ? `${t} ${e}` : e
+			}),
+			/* @__PURE__ */ m("div", { className: "flex-1 border-t-2 border-accent-7" })
+		]
+	});
+}
+U.displayName = "UnreadSeparator";
 //#endregion
-export { L as a, S as c, z as i, V as n, F as o, B as r, w as s, U as t };
+export { L as a, C as c, R as i, H as n, I as o, B as r, T as s, U as t };