@jcdecor/ui 0.1.0 → 0.1.6

package/dist/chat.js

@@ -1,27 +1,27 @@
 "use client";
 import { ActionIcon as e, Avatar as t, Badge as n, Box as r, FileButton as i, Indicator as a, Loader as o, Pill as s, ScrollArea as c, TextInput as l, Textarea as u, Tooltip as d } from "@mantine/core";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { IconAlertCircle as m, IconArrowLeft as h, IconCheck as g, IconChecks as _, IconFile as v, IconPaperclip as y, IconSearch as b, IconSend2 as x } from "@tabler/icons-react";
-import { useEffect as S, useMemo as C, useRef as w, useState as T } from "react";
-import { useUncontrolled as E } from "@mantine/hooks";
+import { IconAlertCircle as m, IconArrowLeft as h, IconCheck as g, IconChecks as _, IconFile as v, IconPaperclip as y, IconPlayerStopFilled as b, IconSearch as x, IconSend2 as S } from "@tabler/icons-react";
+import { useEffect as C, useMemo as w, useRef as T, useState as E } from "react";
+import { useUncontrolled as D } from "@mantine/hooks";
 //#region src/chat/utils.ts
-var D = 864e5;
-function O(e) {
+var O = 864e5;
+function k(e) {
 	return e instanceof Date ? e : new Date(e);
 }
-function k(e) {
+function A(e) {
 	return new Date(e.getFullYear(), e.getMonth(), e.getDate()).getTime();
 }
-function A(e, t = /* @__PURE__ */ new Date()) {
-	let n = O(e), r = Math.round((k(t) - k(n)) / D);
+function j(e, t = /* @__PURE__ */ new Date()) {
+	let n = k(e), r = Math.round((A(t) - A(n)) / O);
 	return r === 0 ? "Hoje" : r === 1 ? "Ontem" : r > 1 && r < 7 ? new Intl.DateTimeFormat("pt-BR", { weekday: "long" }).format(n) : new Intl.DateTimeFormat("pt-BR", {
 		day: "numeric",
 		month: "short",
 		year: "numeric"
 	}).format(n);
 }
-function j(e, t = /* @__PURE__ */ new Date()) {
-	let n = O(e), r = Math.round((k(t) - k(n)) / D);
+function M(e, t = /* @__PURE__ */ new Date()) {
+	let n = k(e), r = Math.round((A(t) - A(n)) / O);
 	return r === 0 ? new Intl.DateTimeFormat("pt-BR", {
 		hour: "2-digit",
 		minute: "2-digit"
@@ -30,16 +30,16 @@ function j(e, t = /* @__PURE__ */ new Date()) {
 		month: "2-digit"
 	}).format(n);
 }
-function M(e, t = 3e5, n = /* @__PURE__ */ new Date()) {
+function N(e, t = 3e5, n = /* @__PURE__ */ new Date()) {
 	let r = [], i = null;
 	return e.forEach((a, o) => {
-		let s = O(a.createdAt), c = k(s);
+		let s = k(a.createdAt), c = A(s);
 		c !== i && (r.push({
 			type: "separator",
 			key: `sep-${c}`,
-			label: A(s, n)
+			label: j(s, n)
 		}), i = c);
-		let l = e[o - 1], u = e[o + 1], d = !!l && !l.system && !a.system && l.authorId === a.authorId && k(O(l.createdAt)) === c && s.getTime() - O(l.createdAt).getTime() <= t, f = !!u && !u.system && !a.system && u.authorId === a.authorId && k(O(u.createdAt)) === c && O(u.createdAt).getTime() - s.getTime() <= t, p = d && f ? "middle" : d ? "last" : f ? "first" : "single";
+		let l = e[o - 1], u = e[o + 1], d = !!l && !l.system && !a.system && l.authorId === a.authorId && A(k(l.createdAt)) === c && s.getTime() - k(l.createdAt).getTime() <= t, f = !!u && !u.system && !a.system && u.authorId === a.authorId && A(k(u.createdAt)) === c && k(u.createdAt).getTime() - s.getTime() <= t, p = d && f ? "middle" : d ? "last" : f ? "first" : "single";
 		r.push({
 			type: "message",
 			key: a.id,
@@ -48,13 +48,13 @@ function M(e, t = 3e5, n = /* @__PURE__ */ new Date()) {
 		});
 	}), r;
 }
-function N(e) {
+function P(e) {
 	return e.replace(/[^\p{L}\s]/gu, " ").replace(/\s+/g, " ").trim() || e;
 }
-function P(e) {
+function F(e) {
 	return e < 1024 ? `${e} B` : e < 1048576 ? `${(e / 1024).toLocaleString("pt-BR", { maximumFractionDigits: 1 })} KB` : `${(e / 1024 / 1024).toLocaleString("pt-BR", { maximumFractionDigits: 1 })} MB`;
 }
-var F = {
+var I = {
 	message: "jc-Chat-message-rp98v",
 	avatarSlot: "jc-Chat-avatarSlot-15yrh",
 	bubbleColumn: "jc-Chat-bubbleColumn-tj06n",
@@ -76,10 +76,14 @@ var F = {
 	"jc-typing": "jc-Chat-jc-typing-1jizy",
 	composer: "jc-Chat-composer-43w9m",
 	composerInput: "jc-Chat-composerInput-1oikc",
+	composerSection: "jc-Chat-composerSection-1gkgv",
 	composerFiles: "jc-Chat-composerFiles-1ogto",
 	conversations: "jc-Chat-conversations-1have",
 	conversationSearch: "jc-Chat-conversationSearch-1jn0p",
+	conversationItem: "jc-Chat-conversationItem-oaopu",
 	conversation: "jc-Chat-conversation-avukg",
+	conversationIcon: "jc-Chat-conversationIcon-oaodh",
+	conversationActions: "jc-Chat-conversationActions-13cer",
 	conversationBody: "jc-Chat-conversationBody-oak57",
 	conversationTop: "jc-Chat-conversationTop-9y66t",
 	conversationName: "jc-Chat-conversationName-oariv",
@@ -96,14 +100,14 @@ var F = {
 	layoutMain: "jc-Chat-layoutMain-1ia3a",
 	layoutMessages: "jc-Chat-layoutMessages-hkrzq",
 	backButton: "jc-Chat-backButton-94q9l"
-}, I = {
+}, L = {
 	sending: "Enviando…",
 	sent: "Enviada",
 	delivered: "Entregue",
 	read: "Lida",
 	error: "Falha no envio"
 };
-function L({ status: e }) {
+function R({ status: e }) {
 	return e === "sending" ? /* @__PURE__ */ f(o, {
 		size: 10,
 		color: "gray"
@@ -112,54 +116,55 @@ function L({ status: e }) {
 		color: "var(--ds-error)"
 	}) : /* @__PURE__ */ f(_, { size: 14 });
 }
-function R({ own: e, author: n, showAuthor: i, showAvatar: a = !0, createdAt: o, status: s, attachments: c, position: l = "single", system: u, children: m, ...h }) {
+function z({ own: e, author: n, showAuthor: i, showAvatar: a = !0, createdAt: o, status: s, attachments: c, position: l = "single", system: u, variant: m = "bubble", avatar: h, children: g, ..._ }) {
 	if (u) return /* @__PURE__ */ f(r, {
-		className: F.system,
+		className: I.system,
 		role: "status",
-		...h,
-		children: m
+		..._,
+		children: g
 	});
-	let g = l === "single" || l === "last", _ = l === "single" || l === "first", y = o ? new Intl.DateTimeFormat("pt-BR", {
+	let y = l === "single" || l === "last", b = l === "single" || l === "first", x = o ? new Intl.DateTimeFormat("pt-BR", {
 		hour: "2-digit",
 		minute: "2-digit"
-	}).format(O(o)) : null;
+	}).format(k(o)) : null;
 	return /* @__PURE__ */ p(r, {
-		className: F.message,
+		className: I.message,
 		mod: {
 			own: e,
 			position: l,
-			status: s
+			status: s,
+			variant: m === "plain" ? "plain" : void 0
 		},
-		...h,
+		..._,
 		children: [!e && /* @__PURE__ */ f("div", {
-			className: F.avatarSlot,
-			children: a && g && n && /* @__PURE__ */ f(t, {
+			className: I.avatarSlot,
+			children: a && (m === "plain" ? b : y) && (h ?? (n && /* @__PURE__ */ f(t, {
 				src: n.avatar,
-				name: N(n.name),
+				name: P(n.name),
 				color: n.color ?? "initials",
 				size: 32,
 				alt: n.name
-			})
+			})))
 		}), /* @__PURE__ */ p("div", {
-			className: F.bubbleColumn,
+			className: I.bubbleColumn,
 			children: [
-				i && _ && n && !e && /* @__PURE__ */ f("div", {
-					className: F.author,
+				i && b && n && !e && /* @__PURE__ */ f("div", {
+					className: I.author,
 					children: n.name
 				}),
 				c && c.length > 0 && /* @__PURE__ */ f("div", {
-					className: F.attachments,
+					className: I.attachments,
 					children: c.map((e, t) => e.type === "image" && e.url ? /* @__PURE__ */ f("a", {
 						href: e.url,
 						target: "_blank",
 						rel: "noreferrer",
 						children: /* @__PURE__ */ f("img", {
-							className: F.imageAttachment,
+							className: I.imageAttachment,
 							src: e.url,
 							alt: e.name
 						})
 					}, t) : /* @__PURE__ */ p("a", {
-						className: F.fileAttachment,
+						className: I.fileAttachment,
 						href: e.url,
 						target: "_blank",
 						rel: "noreferrer",
@@ -167,34 +172,34 @@ function R({ own: e, author: n, showAuthor: i, showAvatar: a = !0, createdAt: o,
 						children: [
 							/* @__PURE__ */ f(v, { size: 18 }),
 							/* @__PURE__ */ f("span", {
-								className: F.fileName,
+								className: I.fileName,
 								children: e.name
 							}),
 							e.size !== void 0 && /* @__PURE__ */ f("span", {
-								className: F.fileSize,
-								children: P(e.size)
+								className: I.fileSize,
+								children: F(e.size)
 							})
 						]
 					}, t))
 				}),
-				m != null && m !== "" && /* @__PURE__ */ f("div", {
-					className: F.bubble,
-					children: m
+				g != null && g !== "" && /* @__PURE__ */ f("div", {
+					className: I.bubble,
+					children: g
 				}),
-				g && (y || e && s) && /* @__PURE__ */ p("div", {
-					className: F.meta,
+				y && (x || e && s) && /* @__PURE__ */ p("div", {
+					className: I.meta,
 					"data-read": s === "read" || void 0,
-					children: [y && o && /* @__PURE__ */ f("time", {
-						dateTime: O(o).toISOString(),
-						children: y
+					children: [x && o && /* @__PURE__ */ f("time", {
+						dateTime: k(o).toISOString(),
+						children: x
 					}), e && s && /* @__PURE__ */ f(d, {
-						label: I[s],
+						label: L[s],
 						withArrow: !0,
 						children: /* @__PURE__ */ f("span", {
-							className: F.status,
-							"aria-label": I[s],
+							className: I.status,
+							"aria-label": L[s],
 							style: { display: "inline-flex" },
-							children: /* @__PURE__ */ f(L, { status: s })
+							children: /* @__PURE__ */ f(R, { status: s })
 						})
 					})]
 				})
@@ -202,82 +207,84 @@ function R({ own: e, author: n, showAuthor: i, showAvatar: a = !0, createdAt: o,
 		})]
 	});
 }
-R.displayName = "@jcdecor/ui/ChatMessage";
+z.displayName = "@jcdecor/ui/ChatMessage";
 //#endregion
 //#region src/chat/TypingIndicator.tsx
-function z(e) {
+function B(e) {
 	return e.length === 0 ? "" : e.length === 1 ? `${e[0]} está digitando…` : e.length === 2 ? `${e[0]} e ${e[1]} estão digitando…` : `${e[0]} e mais ${e.length - 1} estão digitando…`;
 }
-function B({ names: e = [], ...t }) {
-	let n = z(e);
+function V({ names: e = [], ...t }) {
+	let n = B(e);
 	return /* @__PURE__ */ p(r, {
-		className: F.typing,
+		className: I.typing,
 		role: "status",
 		"aria-live": "polite",
 		"aria-label": n || "Digitando",
 		...t,
 		children: [/* @__PURE__ */ p("span", {
-			className: F.dots,
+			className: I.dots,
 			"aria-hidden": !0,
 			children: [
-				/* @__PURE__ */ f("span", { className: F.dot }),
-				/* @__PURE__ */ f("span", { className: F.dot }),
-				/* @__PURE__ */ f("span", { className: F.dot })
+				/* @__PURE__ */ f("span", { className: I.dot }),
+				/* @__PURE__ */ f("span", { className: I.dot }),
+				/* @__PURE__ */ f("span", { className: I.dot })
 			]
 		}), n && /* @__PURE__ */ f("span", { children: n })]
 	});
 }
-B.displayName = "@jcdecor/ui/TypingIndicator";
+V.displayName = "@jcdecor/ui/TypingIndicator";
 //#endregion
 //#region src/chat/ChatThread.tsx
-function V({ messages: e, currentUserId: t, users: n = [], typing: i, showAuthors: a, autoScroll: o = !0, groupWindow: s, empty: l, renderContent: u, h: d = "100%", ...m }) {
-	let h = w(null), g = w(null), _ = w(!0), v = w(!1), y = C(() => Array.isArray(n) ? Object.fromEntries(n.map((e) => [e.id, e])) : n, [n]), b = C(() => M(e, s), [e, s]), x = e[e.length - 1];
-	return S(() => {
-		let e = h.current;
-		e && o && ((_.current || x?.authorId === t) && e.scrollTo({
+function H({ messages: e, currentUserId: t, users: n = [], typing: i, showAuthors: a, autoScroll: o = !0, groupWindow: s, empty: l, renderContent: u, renderAvatar: d, footer: m, h = "100%", ...g }) {
+	let _ = T(null), v = T(null), y = T(!0), b = T(!1), x = w(() => Array.isArray(n) ? Object.fromEntries(n.map((e) => [e.id, e])) : n, [n]), S = w(() => N(e, s), [e, s]), E = e[e.length - 1];
+	return C(() => {
+		let e = _.current;
+		e && o && ((y.current || E?.authorId === t) && e.scrollTo({
 			top: e.scrollHeight,
-			behavior: v.current ? "smooth" : "auto"
-		}), v.current = !0);
+			behavior: b.current ? "smooth" : "auto"
+		}), b.current = !0);
 	}, [
 		e.length,
-		x?.id,
+		E?.id,
 		i?.length,
 		o,
 		t
-	]), S(() => {
-		let e = h.current, t = g.current;
+	]), C(() => {
+		let e = _.current, t = v.current;
 		if (!e || !t || !o || typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(() => {
-			_.current && e.scrollTo({ top: e.scrollHeight });
+			y.current && e.scrollTo({ top: e.scrollHeight });
 		});
 		return n.observe(t), () => n.disconnect();
 	}, [o]), /* @__PURE__ */ f(c, {
-		h: d,
-		viewportRef: h,
+		h,
+		viewportRef: _,
 		onScrollPositionChange: ({ y: e }) => {
-			let t = h.current;
-			t && (_.current = t.scrollHeight - t.clientHeight - e < 80);
+			let t = _.current;
+			t && (y.current = t.scrollHeight - t.clientHeight - e < 80);
 		},
-		...m,
+		...g,
 		children: /* @__PURE__ */ p(r, {
-			ref: g,
-			className: F.thread,
+			ref: v,
+			className: I.thread,
 			role: "log",
 			"aria-live": "polite",
 			"aria-relevant": "additions",
 			children: [
 				e.length === 0 && l,
-				b.map((e) => {
+				S.map((e) => {
 					if (e.type === "separator") return /* @__PURE__ */ f("div", {
-						className: F.separator,
+						className: I.separator,
 						role: "separator",
 						children: e.label
 					}, e.key);
 					let { message: n, position: r } = e, i = n.authorId === t;
-					return /* @__PURE__ */ f(R, {
+					return /* @__PURE__ */ f(z, {
 						own: i,
 						system: n.system,
-						author: y[n.authorId],
+						variant: n.variant,
+						avatar: d?.(n),
+						author: x[n.authorId],
 						showAuthor: a,
 						createdAt: n.createdAt,
 						status: i ? n.status : void 0,
@@ -287,7 +294,8 @@ function V({ messages: e, currentUserId: t, users: n = [], typing: i, showAuthor
 						children: u ? u(n) : n.text
 					}, e.key);
 				}),
-				i && i.length > 0 && /* @__PURE__ */ f(B, {
+				m,
+				i && i.length > 0 && /* @__PURE__ */ f(V, {
 					names: i,
 					mt: "sm",
 					ml: 40
@@ -296,38 +304,41 @@ function V({ messages: e, currentUserId: t, users: n = [], typing: i, showAuthor
 		})
 	});
 }
-V.displayName = "@jcdecor/ui/ChatThread";
+H.displayName = "@jcdecor/ui/ChatThread";
 //#endregion
 //#region src/chat/ChatComposer.tsx
-function H({ value: t, defaultValue: n, onChange: a, onSend: o, placeholder: c = "Digite uma mensagem…", disabled: l, allowAttachments: m, accept: h, maxRows: g = 5, leftSection: _, sendLabel: v = "Enviar", ...b }) {
-	let [S, C] = E({
+function U({ value: t, defaultValue: n, onChange: a, onSend: o, placeholder: c = "Digite uma mensagem…", disabled: l, allowAttachments: m, accept: h, maxRows: g = 5, leftSection: _, rightSection: v, sendLabel: x = "Enviar", loading: C, onStop: w, stopLabel: T = "Interromper", sendDisabled: O, ...k }) {
+	let [A, j] = D({
 		value: t,
 		defaultValue: n,
 		finalValue: "",
 		onChange: a
-	}), [w, D] = T([]), O = !l && (S.trim().length > 0 || w.length > 0), k = () => {
-		O && (o({
-			text: S.trim(),
-			files: w
-		}), C(""), D([]));
+	}), [M, N] = E([]), P = !l && !O && !C && (A.trim().length > 0 || M.length > 0), F = () => {
+		P && (o({
+			text: A.trim(),
+			files: M
+		}), j(""), N([]));
 	};
 	return /* @__PURE__ */ p(r, {
-		...b,
-		children: [w.length > 0 && /* @__PURE__ */ f("div", {
-			className: F.composerFiles,
-			children: w.map((e, t) => /* @__PURE__ */ f(s, {
+		...k,
+		children: [M.length > 0 && /* @__PURE__ */ f("div", {
+			className: I.composerFiles,
+			children: M.map((e, t) => /* @__PURE__ */ f(s, {
 				withRemoveButton: !0,
-				onRemove: () => D((e) => e.filter((e, n) => n !== t)),
+				onRemove: () => N((e) => e.filter((e, n) => n !== t)),
 				children: e.name
 			}, `${e.name}-${t}`))
 		}), /* @__PURE__ */ p("div", {
-			className: F.composer,
+			className: I.composer,
 			children: [
-				_,
+				_ && /* @__PURE__ */ f("div", {
+					className: I.composerSection,
+					children: _
+				}),
 				m && /* @__PURE__ */ f(i, {
 					multiple: !0,
 					accept: h,
-					onChange: (e) => D((t) => [...t, ...e ?? []]),
+					onChange: (e) => N((t) => [...t, ...e ?? []]),
 					disabled: l,
 					children: (t) => /* @__PURE__ */ f(d, {
 						label: "Anexar arquivo",
@@ -341,11 +352,11 @@ function H({ value: t, defaultValue: n, onChange: a, onSend: o, placeholder: c =
 					})
 				}),
 				/* @__PURE__ */ f(u, {
-					className: F.composerInput,
-					value: S,
-					onChange: (e) => C(e.currentTarget.value),
+					className: I.composerInput,
+					value: A,
+					onChange: (e) => j(e.currentTarget.value),
 					onKeyDown: (e) => {
-						e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), k());
+						e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), F());
 					},
 					placeholder: c,
 					disabled: l,
@@ -355,38 +366,53 @@ function H({ value: t, defaultValue: n, onChange: a, onSend: o, placeholder: c =
 					radius: "lg",
 					"aria-label": c
 				}),
-				/* @__PURE__ */ f(e, {
+				v && /* @__PURE__ */ f("div", {
+					className: I.composerSection,
+					children: v
+				}),
+				C && w ? /* @__PURE__ */ f(d, {
+					label: T,
+					children: /* @__PURE__ */ f(e, {
+						size: 44,
+						radius: "xl",
+						variant: "light",
+						color: "danger",
+						onClick: w,
+						"aria-label": T,
+						children: /* @__PURE__ */ f(b, { size: 18 })
+					})
+				}) : /* @__PURE__ */ f(e, {
 					size: 44,
 					radius: "xl",
 					variant: "filled",
-					onClick: k,
-					disabled: !O,
-					"aria-label": v,
-					children: /* @__PURE__ */ f(x, { size: 20 })
+					onClick: F,
+					disabled: !P,
+					"aria-label": x,
+					children: /* @__PURE__ */ f(S, { size: 20 })
 				})
 			]
 		})]
 	});
 }
-H.displayName = "@jcdecor/ui/ChatComposer";
+U.displayName = "@jcdecor/ui/ChatComposer";
 //#endregion
 //#region src/chat/ConversationList.tsx
-function U({ conversations: e, activeId: i, onSelect: o, searchable: s = !0, searchPlaceholder: u = "Buscar conversas", empty: d, ...m }) {
-	let [h, g] = T(""), _ = C(() => {
-		let t = h.trim().toLocaleLowerCase("pt-BR");
+function W({ conversations: e, activeId: i, onSelect: o, searchable: s = !0, searchPlaceholder: u = "Buscar conversas", empty: d, renderIcon: m, renderActions: h, ...g }) {
+	let [_, v] = E(""), y = w(() => {
+		let t = _.trim().toLocaleLowerCase("pt-BR");
 		return t ? e.filter((e) => e.name.toLocaleLowerCase("pt-BR").includes(t) || e.lastMessage?.toLocaleLowerCase("pt-BR").includes(t)) : e;
-	}, [e, h]);
+	}, [e, _]);
 	return /* @__PURE__ */ p(r, {
-		className: F.conversations,
-		...m,
+		className: I.conversations,
+		...g,
 		children: [s && /* @__PURE__ */ f("div", {
-			className: F.conversationSearch,
+			className: I.conversationSearch,
 			children: /* @__PURE__ */ f(l, {
 				size: "sm",
 				placeholder: u,
-				leftSection: /* @__PURE__ */ f(b, { size: 16 }),
-				value: h,
-				onChange: (e) => g(e.currentTarget.value),
+				leftSection: /* @__PURE__ */ f(x, { size: 16 }),
+				value: _,
+				onChange: (e) => v(e.currentTarget.value),
 				"aria-label": u
 			})
 		}), /* @__PURE__ */ f(c, {
@@ -394,82 +420,91 @@ function U({ conversations: e, activeId: i, onSelect: o, searchable: s = !0, sea
 			type: "auto",
 			children: /* @__PURE__ */ p("div", {
 				role: "list",
-				children: [_.length === 0 && /* @__PURE__ */ f(r, {
+				children: [y.length === 0 && /* @__PURE__ */ f(r, {
 					p: "lg",
 					ta: "center",
 					c: "var(--ds-text-3)",
 					fz: "sm",
 					children: d ?? "Nenhuma conversa encontrada"
-				}), _.map((e) => /* @__PURE__ */ p("button", {
-					type: "button",
+				}), y.map((e) => /* @__PURE__ */ p("div", {
 					role: "listitem",
-					className: F.conversation,
+					className: I.conversationItem,
 					"data-active": e.id === i || void 0,
 					"data-unread": (e.unread ?? 0) > 0 || void 0,
-					"aria-current": e.id === i ? "true" : void 0,
-					onClick: () => o?.(e),
-					children: [/* @__PURE__ */ f(a, {
-						color: "evergreen",
-						position: "bottom-end",
-						offset: 5,
-						size: 10,
-						withBorder: !0,
-						disabled: !e.online,
-						children: /* @__PURE__ */ f(t, {
-							src: e.avatar,
-							name: N(e.name),
-							color: e.color ?? "initials",
-							size: 40
-						})
-					}), /* @__PURE__ */ p("div", {
-						className: F.conversationBody,
-						children: [
-							/* @__PURE__ */ p("div", {
-								className: F.conversationTop,
-								children: [/* @__PURE__ */ f("span", {
-									className: F.conversationName,
-									children: e.name
-								}), e.lastMessageAt !== void 0 && /* @__PURE__ */ f("span", {
-									className: F.conversationTime,
-									children: j(e.lastMessageAt)
-								})]
-							}),
-							/* @__PURE__ */ p("div", {
-								className: F.conversationBottom,
-								children: [/* @__PURE__ */ f("span", {
-									className: F.conversationPreview,
-									children: e.lastMessage
-								}), (e.unread ?? 0) > 0 && /* @__PURE__ */ f(n, {
-									size: "sm",
-									variant: "filled",
-									circle: (e.unread ?? 0) < 10,
-									"aria-label": `${e.unread} não lidas`,
-									children: e.unread > 99 ? "99+" : e.unread
-								})]
-							}),
-							e.tag && /* @__PURE__ */ f(n, {
-								size: "xs",
-								color: "obsidian",
-								mt: 6,
-								children: e.tag
+					children: [/* @__PURE__ */ p("button", {
+						type: "button",
+						className: I.conversation,
+						"aria-current": e.id === i ? "true" : void 0,
+						onClick: () => o?.(e),
+						children: [/* @__PURE__ */ f(a, {
+							color: "evergreen",
+							position: "bottom-end",
+							offset: 5,
+							size: 10,
+							withBorder: !0,
+							disabled: !e.online,
+							children: m ? /* @__PURE__ */ f("span", {
+								className: I.conversationIcon,
+								children: m(e)
+							}) : /* @__PURE__ */ f(t, {
+								src: e.avatar,
+								name: P(e.name),
+								color: e.color ?? "initials",
+								size: 40
 							})
-						]
+						}), /* @__PURE__ */ p("div", {
+							className: I.conversationBody,
+							children: [
+								/* @__PURE__ */ p("div", {
+									className: I.conversationTop,
+									children: [/* @__PURE__ */ f("span", {
+										className: I.conversationName,
+										children: e.name
+									}), e.lastMessageAt !== void 0 && /* @__PURE__ */ f("span", {
+										className: I.conversationTime,
+										children: M(e.lastMessageAt)
+									})]
+								}),
+								/* @__PURE__ */ p("div", {
+									className: I.conversationBottom,
+									children: [/* @__PURE__ */ f("span", {
+										className: I.conversationPreview,
+										children: e.lastMessage
+									}), (e.unread ?? 0) > 0 && /* @__PURE__ */ f(n, {
+										size: "sm",
+										variant: "filled",
+										circle: (e.unread ?? 0) < 10,
+										"aria-label": `${e.unread} não lidas`,
+										children: e.unread > 99 ? "99+" : e.unread
+									})]
+								}),
+								e.tag && /* @__PURE__ */ f(n, {
+									size: "xs",
+									color: "obsidian",
+									mt: 6,
+									children: e.tag
+								})
+							]
+						})]
+					}), h && /* @__PURE__ */ f("div", {
+						className: I.conversationActions,
+						children: h(e)
 					})]
 				}, e.id))]
 			})
 		})]
 	});
 }
-U.displayName = "@jcdecor/ui/ConversationList";
+W.displayName = "@jcdecor/ui/ConversationList";
 //#endregion
 //#region src/chat/ChatLayout.tsx
-function W({ title: n, subtitle: i, avatar: o, avatarName: s, online: c, actions: l, onBack: u, ...d }) {
+function G({ title: n, subtitle: i, avatar: o, avatarName: s, online: c, actions: l, onBack: u, ...d }) {
 	return /* @__PURE__ */ p(r, {
-		className: F.header,
+		className: I.header,
 		...d,
 		children: [
 			u && /* @__PURE__ */ f(e, {
-				className: F.backButton,
+				className: I.backButton,
 				variant: "subtle",
 				onClick: u,
 				"aria-label": "Voltar",
@@ -484,18 +519,18 @@ function W({ title: n, subtitle: i, avatar: o, avatarName: s, online: c, actions
 				disabled: !c,
 				children: /* @__PURE__ */ f(t, {
 					src: o,
-					name: s ? N(s) : void 0,
+					name: s ? P(s) : void 0,
 					color: "initials",
 					size: 40
 				})
 			}),
 			/* @__PURE__ */ p("div", {
-				className: F.headerBody,
+				className: I.headerBody,
 				children: [/* @__PURE__ */ f("div", {
-					className: F.headerTitle,
+					className: I.headerTitle,
 					children: n
 				}), i && /* @__PURE__ */ f("div", {
-					className: F.headerSubtitle,
+					className: I.headerSubtitle,
 					children: i
 				})]
 			}),
@@ -503,29 +538,29 @@ function W({ title: n, subtitle: i, avatar: o, avatarName: s, online: c, actions
 		]
 	});
 }
-W.displayName = "@jcdecor/ui/ChatHeader";
-function G({ sidebar: e, header: t, children: n, composer: i, height: a = 600, sidebarWidth: o = 320, mobileView: s = "thread", style: c, ...l }) {
+G.displayName = "@jcdecor/ui/ChatHeader";
+function K({ sidebar: e, header: t, children: n, composer: i, height: a = 600, sidebarWidth: o = 320, mobileView: s = "thread", style: c, ...l }) {
 	let u = (e) => typeof e == "number" ? `${e}px` : e;
 	return /* @__PURE__ */ f(r, {
-		className: F.layoutContainer,
+		className: I.layoutContainer,
 		style: [{
 			"--chat-height": u(a),
 			"--chat-sidebar-width": u(o)
 		}, c],
 		...l,
 		children: /* @__PURE__ */ p("div", {
-			className: F.layout,
+			className: I.layout,
 			"data-mobile-view": e ? s : void 0,
 			"data-single": !e || void 0,
 			children: [e && /* @__PURE__ */ f("aside", {
-				className: F.layoutSidebar,
+				className: I.layoutSidebar,
 				children: e
 			}), /* @__PURE__ */ p("section", {
-				className: F.layoutMain,
+				className: I.layoutMain,
 				children: [
 					t,
 					/* @__PURE__ */ f("div", {
-						className: F.layoutMessages,
+						className: I.layoutMessages,
 						children: n
 					}),
 					i
@@ -534,8 +569,8 @@ function G({ sidebar: e, header: t, children: n, composer: i, height: a = 600, s
 		})
 	});
 }
-G.displayName = "@jcdecor/ui/ChatLayout";
+K.displayName = "@jcdecor/ui/ChatLayout";
 //#endregion
-export { H as ChatComposer, W as ChatHeader, G as ChatLayout, R as ChatMessage, V as ChatThread, U as ConversationList, B as TypingIndicator, M as buildThread, A as dayLabel, P as formatBytes, N as initialsName, j as shortTimeLabel };
+export { U as ChatComposer, G as ChatHeader, K as ChatLayout, z as ChatMessage, H as ChatThread, W as ConversationList, V as TypingIndicator, N as buildThread, j as dayLabel, F as formatBytes, P as initialsName, M as shortTimeLabel };
 
 //# sourceMappingURL=chat.js.map