@jcdecor/ui 0.1.0

package/dist/chat/utils.d.ts

@@ -0,0 +1,25 @@
+import type { ChatMessageData } from './types';
+export declare function toDate(value: Date | string | number): Date;
+/** "Hoje", "Ontem", "segunda-feira" (últimos 7 dias) ou "12 de set. de 2026". */
+export declare function dayLabel(value: Date | string | number, now?: Date): string;
+/** Horário curto para listas: "14:32" hoje, "Ontem", ou "12/09". */
+export declare function shortTimeLabel(value: Date | string | number, now?: Date): string;
+export type GroupPosition = 'single' | 'first' | 'middle' | 'last';
+export type ThreadItem = {
+    type: 'separator';
+    key: string;
+    label: string;
+} | {
+    type: 'message';
+    key: string;
+    message: ChatMessageData;
+    position: GroupPosition;
+};
+/**
+ * Agrupa mensagens consecutivas do mesmo autor (janela de `groupWindowMs`)
+ * e insere separadores de data.
+ */
+export declare function buildThread(messages: ChatMessageData[], groupWindowMs?: number, now?: Date): ThreadItem[];
+/** Remove símbolos/separadores para as iniciais do Avatar: "Bruno · Instalação" → "Bruno Instalação" (BI). */
+export declare function initialsName(name: string): string;
+export declare function formatBytes(bytes: number): string;

package/dist/chat.d.ts

@@ -0,0 +1 @@
+export * from './chat/index';

package/dist/chat.js

@@ -0,0 +1,541 @@
+"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";
+//#region src/chat/utils.ts
+var D = 864e5;
+function O(e) {
+	return e instanceof Date ? e : new Date(e);
+}
+function k(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);
+	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);
+	return r === 0 ? new Intl.DateTimeFormat("pt-BR", {
+		hour: "2-digit",
+		minute: "2-digit"
+	}).format(n) : r === 1 ? "Ontem" : new Intl.DateTimeFormat("pt-BR", {
+		day: "2-digit",
+		month: "2-digit"
+	}).format(n);
+}
+function M(e, t = 3e5, n = /* @__PURE__ */ new Date()) {
+	let r = [], i = null;
+	return e.forEach((a, o) => {
+		let s = O(a.createdAt), c = k(s);
+		c !== i && (r.push({
+			type: "separator",
+			key: `sep-${c}`,
+			label: A(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";
+		r.push({
+			type: "message",
+			key: a.id,
+			message: a,
+			position: p
+		});
+	}), r;
+}
+function N(e) {
+	return e.replace(/[^\p{L}\s]/gu, " ").replace(/\s+/g, " ").trim() || e;
+}
+function P(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 = {
+	message: "jc-Chat-message-rp98v",
+	avatarSlot: "jc-Chat-avatarSlot-15yrh",
+	bubbleColumn: "jc-Chat-bubbleColumn-tj06n",
+	author: "jc-Chat-author-g2tpy",
+	bubble: "jc-Chat-bubble-gjjq1",
+	meta: "jc-Chat-meta-1raix",
+	status: "jc-Chat-status-okr8r",
+	attachments: "jc-Chat-attachments-3ruvo",
+	imageAttachment: "jc-Chat-imageAttachment-y8rab",
+	fileAttachment: "jc-Chat-fileAttachment-xckjb",
+	fileName: "jc-Chat-fileName-1up6t",
+	fileSize: "jc-Chat-fileSize-1usjz",
+	system: "jc-Chat-system-ontp3",
+	thread: "jc-Chat-thread-ovhv6",
+	separator: "jc-Chat-separator-113me",
+	typing: "jc-Chat-typing-p4t6k",
+	dots: "jc-Chat-dots-1radd",
+	dot: "jc-Chat-dot-kde92",
+	"jc-typing": "jc-Chat-jc-typing-1jizy",
+	composer: "jc-Chat-composer-43w9m",
+	composerInput: "jc-Chat-composerInput-1oikc",
+	composerFiles: "jc-Chat-composerFiles-1ogto",
+	conversations: "jc-Chat-conversations-1have",
+	conversationSearch: "jc-Chat-conversationSearch-1jn0p",
+	conversation: "jc-Chat-conversation-avukg",
+	conversationBody: "jc-Chat-conversationBody-oak57",
+	conversationTop: "jc-Chat-conversationTop-9y66t",
+	conversationName: "jc-Chat-conversationName-oariv",
+	conversationTime: "jc-Chat-conversationTime-oaviq",
+	conversationBottom: "jc-Chat-conversationBottom-1br38",
+	conversationPreview: "jc-Chat-conversationPreview-1haog",
+	header: "jc-Chat-header-j5059",
+	headerBody: "jc-Chat-headerBody-aar0m",
+	headerTitle: "jc-Chat-headerTitle-zem3u",
+	headerSubtitle: "jc-Chat-headerSubtitle-11h06",
+	layoutContainer: "jc-Chat-layoutContainer-1sozm",
+	layout: "jc-Chat-layout-kzf0p",
+	layoutSidebar: "jc-Chat-layoutSidebar-1vdlo",
+	layoutMain: "jc-Chat-layoutMain-1ia3a",
+	layoutMessages: "jc-Chat-layoutMessages-hkrzq",
+	backButton: "jc-Chat-backButton-94q9l"
+}, I = {
+	sending: "Enviando…",
+	sent: "Enviada",
+	delivered: "Entregue",
+	read: "Lida",
+	error: "Falha no envio"
+};
+function L({ status: e }) {
+	return e === "sending" ? /* @__PURE__ */ f(o, {
+		size: 10,
+		color: "gray"
+	}) : e === "sent" ? /* @__PURE__ */ f(g, { size: 14 }) : e === "error" ? /* @__PURE__ */ f(m, {
+		size: 14,
+		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 }) {
+	if (u) return /* @__PURE__ */ f(r, {
+		className: F.system,
+		role: "status",
+		...h,
+		children: m
+	});
+	let g = l === "single" || l === "last", _ = l === "single" || l === "first", y = o ? new Intl.DateTimeFormat("pt-BR", {
+		hour: "2-digit",
+		minute: "2-digit"
+	}).format(O(o)) : null;
+	return /* @__PURE__ */ p(r, {
+		className: F.message,
+		mod: {
+			own: e,
+			position: l,
+			status: s
+		},
+		...h,
+		children: [!e && /* @__PURE__ */ f("div", {
+			className: F.avatarSlot,
+			children: a && g && n && /* @__PURE__ */ f(t, {
+				src: n.avatar,
+				name: N(n.name),
+				color: n.color ?? "initials",
+				size: 32,
+				alt: n.name
+			})
+		}), /* @__PURE__ */ p("div", {
+			className: F.bubbleColumn,
+			children: [
+				i && _ && n && !e && /* @__PURE__ */ f("div", {
+					className: F.author,
+					children: n.name
+				}),
+				c && c.length > 0 && /* @__PURE__ */ f("div", {
+					className: F.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,
+							src: e.url,
+							alt: e.name
+						})
+					}, t) : /* @__PURE__ */ p("a", {
+						className: F.fileAttachment,
+						href: e.url,
+						target: "_blank",
+						rel: "noreferrer",
+						download: e.name,
+						children: [
+							/* @__PURE__ */ f(v, { size: 18 }),
+							/* @__PURE__ */ f("span", {
+								className: F.fileName,
+								children: e.name
+							}),
+							e.size !== void 0 && /* @__PURE__ */ f("span", {
+								className: F.fileSize,
+								children: P(e.size)
+							})
+						]
+					}, t))
+				}),
+				m != null && m !== "" && /* @__PURE__ */ f("div", {
+					className: F.bubble,
+					children: m
+				}),
+				g && (y || e && s) && /* @__PURE__ */ p("div", {
+					className: F.meta,
+					"data-read": s === "read" || void 0,
+					children: [y && o && /* @__PURE__ */ f("time", {
+						dateTime: O(o).toISOString(),
+						children: y
+					}), e && s && /* @__PURE__ */ f(d, {
+						label: I[s],
+						withArrow: !0,
+						children: /* @__PURE__ */ f("span", {
+							className: F.status,
+							"aria-label": I[s],
+							style: { display: "inline-flex" },
+							children: /* @__PURE__ */ f(L, { status: s })
+						})
+					})]
+				})
+			]
+		})]
+	});
+}
+R.displayName = "@jcdecor/ui/ChatMessage";
+//#endregion
+//#region src/chat/TypingIndicator.tsx
+function z(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);
+	return /* @__PURE__ */ p(r, {
+		className: F.typing,
+		role: "status",
+		"aria-live": "polite",
+		"aria-label": n || "Digitando",
+		...t,
+		children: [/* @__PURE__ */ p("span", {
+			className: F.dots,
+			"aria-hidden": !0,
+			children: [
+				/* @__PURE__ */ f("span", { className: F.dot }),
+				/* @__PURE__ */ f("span", { className: F.dot }),
+				/* @__PURE__ */ f("span", { className: F.dot })
+			]
+		}), n && /* @__PURE__ */ f("span", { children: n })]
+	});
+}
+B.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({
+			top: e.scrollHeight,
+			behavior: v.current ? "smooth" : "auto"
+		}), v.current = !0);
+	}, [
+		e.length,
+		x?.id,
+		i?.length,
+		o,
+		t
+	]), S(() => {
+		let e = h.current, t = g.current;
+		if (!e || !t || !o || typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(() => {
+			_.current && e.scrollTo({ top: e.scrollHeight });
+		});
+		return n.observe(t), () => n.disconnect();
+	}, [o]), /* @__PURE__ */ f(c, {
+		h: d,
+		viewportRef: h,
+		onScrollPositionChange: ({ y: e }) => {
+			let t = h.current;
+			t && (_.current = t.scrollHeight - t.clientHeight - e < 80);
+		},
+		...m,
+		children: /* @__PURE__ */ p(r, {
+			ref: g,
+			className: F.thread,
+			role: "log",
+			"aria-live": "polite",
+			"aria-relevant": "additions",
+			children: [
+				e.length === 0 && l,
+				b.map((e) => {
+					if (e.type === "separator") return /* @__PURE__ */ f("div", {
+						className: F.separator,
+						role: "separator",
+						children: e.label
+					}, e.key);
+					let { message: n, position: r } = e, i = n.authorId === t;
+					return /* @__PURE__ */ f(R, {
+						own: i,
+						system: n.system,
+						author: y[n.authorId],
+						showAuthor: a,
+						createdAt: n.createdAt,
+						status: i ? n.status : void 0,
+						attachments: n.attachments,
+						position: r,
+						"data-group-start": r === "single" || r === "first" || void 0,
+						children: u ? u(n) : n.text
+					}, e.key);
+				}),
+				i && i.length > 0 && /* @__PURE__ */ f(B, {
+					names: i,
+					mt: "sm",
+					ml: 40
+				})
+			]
+		})
+	});
+}
+V.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({
+		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([]));
+	};
+	return /* @__PURE__ */ p(r, {
+		...b,
+		children: [w.length > 0 && /* @__PURE__ */ f("div", {
+			className: F.composerFiles,
+			children: w.map((e, t) => /* @__PURE__ */ f(s, {
+				withRemoveButton: !0,
+				onRemove: () => D((e) => e.filter((e, n) => n !== t)),
+				children: e.name
+			}, `${e.name}-${t}`))
+		}), /* @__PURE__ */ p("div", {
+			className: F.composer,
+			children: [
+				_,
+				m && /* @__PURE__ */ f(i, {
+					multiple: !0,
+					accept: h,
+					onChange: (e) => D((t) => [...t, ...e ?? []]),
+					disabled: l,
+					children: (t) => /* @__PURE__ */ f(d, {
+						label: "Anexar arquivo",
+						children: /* @__PURE__ */ f(e, {
+							...t,
+							size: "lg",
+							variant: "subtle",
+							"aria-label": "Anexar arquivo",
+							children: /* @__PURE__ */ f(y, { size: 20 })
+						})
+					})
+				}),
+				/* @__PURE__ */ f(u, {
+					className: F.composerInput,
+					value: S,
+					onChange: (e) => C(e.currentTarget.value),
+					onKeyDown: (e) => {
+						e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), k());
+					},
+					placeholder: c,
+					disabled: l,
+					autosize: !0,
+					minRows: 1,
+					maxRows: g,
+					radius: "lg",
+					"aria-label": c
+				}),
+				/* @__PURE__ */ f(e, {
+					size: 44,
+					radius: "xl",
+					variant: "filled",
+					onClick: k,
+					disabled: !O,
+					"aria-label": v,
+					children: /* @__PURE__ */ f(x, { size: 20 })
+				})
+			]
+		})]
+	});
+}
+H.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");
+		return t ? e.filter((e) => e.name.toLocaleLowerCase("pt-BR").includes(t) || e.lastMessage?.toLocaleLowerCase("pt-BR").includes(t)) : e;
+	}, [e, h]);
+	return /* @__PURE__ */ p(r, {
+		className: F.conversations,
+		...m,
+		children: [s && /* @__PURE__ */ f("div", {
+			className: F.conversationSearch,
+			children: /* @__PURE__ */ f(l, {
+				size: "sm",
+				placeholder: u,
+				leftSection: /* @__PURE__ */ f(b, { size: 16 }),
+				value: h,
+				onChange: (e) => g(e.currentTarget.value),
+				"aria-label": u
+			})
+		}), /* @__PURE__ */ f(c, {
+			style: { flex: 1 },
+			type: "auto",
+			children: /* @__PURE__ */ p("div", {
+				role: "list",
+				children: [_.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",
+					role: "listitem",
+					className: F.conversation,
+					"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
+							})
+						]
+					})]
+				}, e.id))]
+			})
+		})]
+	});
+}
+U.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 }) {
+	return /* @__PURE__ */ p(r, {
+		className: F.header,
+		...d,
+		children: [
+			u && /* @__PURE__ */ f(e, {
+				className: F.backButton,
+				variant: "subtle",
+				onClick: u,
+				"aria-label": "Voltar",
+				children: /* @__PURE__ */ f(h, { size: 20 })
+			}),
+			(o || s) && /* @__PURE__ */ f(a, {
+				color: "evergreen",
+				position: "bottom-end",
+				offset: 5,
+				size: 10,
+				withBorder: !0,
+				disabled: !c,
+				children: /* @__PURE__ */ f(t, {
+					src: o,
+					name: s ? N(s) : void 0,
+					color: "initials",
+					size: 40
+				})
+			}),
+			/* @__PURE__ */ p("div", {
+				className: F.headerBody,
+				children: [/* @__PURE__ */ f("div", {
+					className: F.headerTitle,
+					children: n
+				}), i && /* @__PURE__ */ f("div", {
+					className: F.headerSubtitle,
+					children: i
+				})]
+			}),
+			l
+		]
+	});
+}
+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 }) {
+	let u = (e) => typeof e == "number" ? `${e}px` : e;
+	return /* @__PURE__ */ f(r, {
+		className: F.layoutContainer,
+		style: [{
+			"--chat-height": u(a),
+			"--chat-sidebar-width": u(o)
+		}, c],
+		...l,
+		children: /* @__PURE__ */ p("div", {
+			className: F.layout,
+			"data-mobile-view": e ? s : void 0,
+			"data-single": !e || void 0,
+			children: [e && /* @__PURE__ */ f("aside", {
+				className: F.layoutSidebar,
+				children: e
+			}), /* @__PURE__ */ p("section", {
+				className: F.layoutMain,
+				children: [
+					t,
+					/* @__PURE__ */ f("div", {
+						className: F.layoutMessages,
+						children: n
+					}),
+					i
+				]
+			})]
+		})
+	});
+}
+G.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 };
+
+//# sourceMappingURL=chat.js.map