@jcdecor/vue 0.1.0

package/dist/chat.js

@@ -0,0 +1,661 @@
+import { d as e } from "./themeDefaults-Ckd05FUY.js";
+import { ActionIcon as t, Avatar as n, Badge as r, Box as i, FileButton as a, Indicator as o, Loader as s, Pill as c, ScrollArea as l, TextInput as u, Textarea as d, resolveNode as f } from "@mantine-vue/core";
+import { Comment as p, Fragment as m, Text as h, computed as g, defineComponent as _, h as v, isVNode as y, onBeforeUnmount as b, onMounted as x, ref as S, watch as C } from "vue";
+import { IconAlertCircle as w, IconArrowLeft as T, IconCheck as E, IconChecks as D, IconFile as O, IconPaperclip as k, IconSearch as A, IconSend2 as j } from "@tabler/icons-vue";
+import { useUncontrolled as M } from "@mantine-vue/hooks";
+//#region src/chat/utils.ts
+var N = 864e5;
+function P(e) {
+	return e instanceof Date ? e : new Date(e);
+}
+function F(e) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate()).getTime();
+}
+function I(e, t = /* @__PURE__ */ new Date()) {
+	let n = P(e), r = Math.round((F(t) - F(n)) / N);
+	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 L(e, t = /* @__PURE__ */ new Date()) {
+	let n = P(e), r = Math.round((F(t) - F(n)) / N);
+	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 R(e, t = 3e5, n = /* @__PURE__ */ new Date()) {
+	let r = [], i = null;
+	return e.forEach((a, o) => {
+		let s = P(a.createdAt), c = F(s);
+		c !== i && (r.push({
+			type: "separator",
+			key: `sep-${c}`,
+			label: I(s, n)
+		}), i = c);
+		let l = e[o - 1], u = e[o + 1], d = !!l && !l.system && !a.system && l.authorId === a.authorId && F(P(l.createdAt)) === c && s.getTime() - P(l.createdAt).getTime() <= t, f = !!u && !u.system && !a.system && u.authorId === a.authorId && F(P(u.createdAt)) === c && P(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 z(e) {
+	return e.replace(/[^\p{L}\s]/gu, " ").replace(/\s+/g, " ").trim() || e;
+}
+function B(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`;
+}
+//#endregion
+//#region src/chat/node.ts
+var V = {
+	type: null,
+	default: void 0
+};
+function H(e) {
+	if (e == null || e === !1 || e === !0 || e === "") return !1;
+	if (Array.isArray(e)) return e.some((e) => H(e));
+	if (y(e)) {
+		if (e.type === p) return !1;
+		if (e.type === h) return e.children !== "" && e.children != null;
+		if (e.type === m) return H(e.children);
+	}
+	return !0;
+}
+var U = {
+	message: "jc-Chat-message-i3s00",
+	avatarSlot: "jc-Chat-avatarSlot-1bua4",
+	bubbleColumn: "jc-Chat-bubbleColumn-1sfy5",
+	author: "jc-Chat-author-1wgw6",
+	bubble: "jc-Chat-bubble-1wxm6",
+	meta: "jc-Chat-meta-1ec66",
+	status: "jc-Chat-status-5xpn1",
+	attachments: "jc-Chat-attachments-17uow",
+	imageAttachment: "jc-Chat-imageAttachment-dknbo",
+	fileAttachment: "jc-Chat-fileAttachment-1o6f0",
+	fileName: "jc-Chat-fileName-1niet",
+	fileSize: "jc-Chat-fileSize-1nii6",
+	system: "jc-Chat-system-60s3e",
+	thread: "jc-Chat-thread-68g9h",
+	separator: "jc-Chat-separator-1cqvs",
+	typing: "jc-Chat-typing-6hrkv",
+	dots: "jc-Chat-dots-1ec0n",
+	dot: "jc-Chat-dot-1ts3o",
+	"jc-typing": "jc-Chat-jc-typing-1v69c",
+	composer: "jc-Chat-composer-1prlw",
+	composerInput: "jc-Chat-composerInput-6e0s5",
+	composerFiles: "jc-Chat-composerFiles-6ca43",
+	conversations: "jc-Chat-conversations-1y7fv",
+	conversationSearch: "jc-Chat-conversationSearch-1etgc",
+	conversation: "jc-Chat-conversation-19ssj",
+	conversationBody: "jc-Chat-conversationBody-mt5sx",
+	conversationTop: "jc-Chat-conversationTop-1ob6a",
+	conversationName: "jc-Chat-conversationName-mtd6l",
+	conversationTime: "jc-Chat-conversationTime-mth6g",
+	conversationBottom: "jc-Chat-conversationBottom-16xiv",
+	conversationPreview: "jc-Chat-conversationPreview-19wdb",
+	header: "jc-Chat-header-hyjkd",
+	headerBody: "jc-Chat-headerBody-g69o0",
+	headerTitle: "jc-Chat-headerTitle-4gc2x",
+	headerSubtitle: "jc-Chat-headerSubtitle-1saun",
+	layoutContainer: "jc-Chat-layoutContainer-180vn",
+	layout: "jc-Chat-layout-2cdez",
+	layoutSidebar: "jc-Chat-layoutSidebar-d9247",
+	layoutMain: "jc-Chat-layoutMain-1o5ly",
+	layoutMessages: "jc-Chat-layoutMessages-18emg",
+	backButton: "jc-Chat-backButton-f08wz"
+}, W = {
+	sending: "Enviando…",
+	sent: "Enviada",
+	delivered: "Entregue",
+	read: "Lida",
+	error: "Falha no envio"
+};
+function G(e) {
+	return e === "sending" ? v(s, {
+		size: 10,
+		color: "gray"
+	}) : e === "sent" ? v(E, { size: 14 }) : e === "error" ? v(w, {
+		size: 14,
+		color: "var(--ds-error)"
+	}) : v(D, { size: 14 });
+}
+var K = new Intl.DateTimeFormat("pt-BR", {
+	hour: "2-digit",
+	minute: "2-digit"
+}), q = _({
+	name: "ChatMessage",
+	props: {
+		own: {
+			type: Boolean,
+			default: !1
+		},
+		author: {
+			type: Object,
+			default: void 0
+		},
+		showAuthor: {
+			type: Boolean,
+			default: !1
+		},
+		showAvatar: {
+			type: Boolean,
+			default: !0
+		},
+		createdAt: {
+			type: [
+				Date,
+				String,
+				Number
+			],
+			default: void 0
+		},
+		status: {
+			type: String,
+			default: void 0
+		},
+		attachments: {
+			type: Array,
+			default: void 0
+		},
+		position: {
+			type: String,
+			default: "single"
+		},
+		system: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(t, { slots: r }) {
+		return () => {
+			let a = r.default?.();
+			if (t.system) return v(i, {
+				class: U.system,
+				role: "status"
+			}, () => a);
+			let { own: o, author: s, status: c, position: l, createdAt: u, attachments: d } = t, f = l === "single" || l === "last", p = l === "single" || l === "first", m = u ? K.format(P(u)) : null, h = o ? null : v("div", { class: U.avatarSlot }, t.showAvatar && f && s ? [v(n, {
+				src: s.avatar,
+				name: z(s.name),
+				color: s.color ?? "initials",
+				size: 32,
+				alt: s.name
+			})] : void 0), g = d && d.length > 0 ? v("div", { class: U.attachments }, d.map((e, t) => e.type === "image" && e.url ? v("a", {
+				key: t,
+				href: e.url,
+				target: "_blank",
+				rel: "noreferrer"
+			}, [v("img", {
+				class: U.imageAttachment,
+				src: e.url,
+				alt: e.name
+			})]) : v("a", {
+				key: t,
+				class: U.fileAttachment,
+				href: e.url,
+				target: "_blank",
+				rel: "noreferrer",
+				download: e.name
+			}, [
+				v(O, { size: 18 }),
+				v("span", { class: U.fileName }, e.name),
+				e.size === void 0 ? null : v("span", { class: U.fileSize }, B(e.size))
+			]))) : null, _ = f && (m || o && c) ? v("div", {
+				class: U.meta,
+				"data-read": c === "read" || void 0
+			}, [m && u ? v("time", { datetime: P(u).toISOString() }, m) : null, o && c ? v(e, {
+				label: W[c],
+				withArrow: !0
+			}, () => v("span", {
+				class: U.status,
+				"aria-label": W[c],
+				style: { display: "inline-flex" }
+			}, [G(c)])) : null]) : null;
+			return v(i, {
+				class: U.message,
+				mod: {
+					own: o,
+					position: l,
+					status: c
+				}
+			}, () => [h, v("div", { class: U.bubbleColumn }, [
+				t.showAuthor && p && s && !o ? v("div", { class: U.author }, s.name) : null,
+				g,
+				H(a) ? v("div", { class: U.bubble }, a) : null,
+				_
+			])]);
+		};
+	}
+});
+//#endregion
+//#region src/chat/TypingIndicator.ts
+function J(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…`;
+}
+var Y = _({
+	name: "TypingIndicator",
+	props: { names: {
+		type: Array,
+		default: () => []
+	} },
+	setup(e) {
+		return () => {
+			let t = J(e.names);
+			return v(i, {
+				class: U.typing,
+				role: "status",
+				"aria-live": "polite",
+				"aria-label": t || "Digitando"
+			}, () => [v("span", {
+				class: U.dots,
+				"aria-hidden": "true"
+			}, [
+				v("span", { class: U.dot }),
+				v("span", { class: U.dot }),
+				v("span", { class: U.dot })
+			]), t ? v("span", t) : null]);
+		};
+	}
+}), X = 80, Z = _({
+	name: "ChatThread",
+	props: {
+		messages: {
+			type: Array,
+			required: !0
+		},
+		currentUserId: {
+			type: String,
+			required: !0
+		},
+		users: {
+			type: [Array, Object],
+			default: () => []
+		},
+		typing: {
+			type: Array,
+			default: void 0
+		},
+		showAuthors: {
+			type: Boolean,
+			default: !1
+		},
+		autoScroll: {
+			type: Boolean,
+			default: !0
+		},
+		groupWindow: {
+			type: Number,
+			default: void 0
+		},
+		empty: V,
+		renderContent: {
+			type: Function,
+			default: void 0
+		},
+		h: {
+			type: [String, Number],
+			default: "100%"
+		}
+	},
+	setup(e, { slots: t }) {
+		let n = null, r = null, a = !0, o = !1, s = null, c = g(() => Array.isArray(e.users) ? Object.fromEntries(e.users.map((e) => [e.id, e])) : e.users), u = g(() => R(e.messages, e.groupWindow));
+		function d() {
+			let t = n;
+			if (!t || !e.autoScroll) return;
+			let r = e.messages[e.messages.length - 1];
+			(a || r?.authorId === e.currentUserId) && t.scrollTo({
+				top: t.scrollHeight,
+				behavior: o ? "smooth" : "auto"
+			}), o = !0;
+		}
+		function f() {
+			s?.disconnect(), s = null;
+			let t = n;
+			t && r && e.autoScroll && typeof ResizeObserver < "u" && (s = new ResizeObserver(() => {
+				a && t.scrollTo({ top: t.scrollHeight });
+			}), s.observe(r));
+		}
+		x(() => {
+			d(), f();
+		}), C(() => [
+			e.messages.length,
+			e.messages[e.messages.length - 1]?.id,
+			e.typing?.length,
+			e.autoScroll,
+			e.currentUserId
+		], d, { flush: "post" }), C(() => e.autoScroll, f, { flush: "post" }), b(() => s?.disconnect());
+		let p = { rootRef: (e) => {
+			n = e;
+		} }, m = (e) => {
+			r = e;
+		}, h = ({ y: e }) => {
+			let t = n;
+			t && (a = t.scrollHeight - t.clientHeight - e < X);
+		};
+		return () => {
+			let n = (n) => t.content ? t.content({ message: n }) : e.renderContent ? e.renderContent(n) : n.text, r = e.messages.length === 0 ? t.empty ? t.empty() : typeof e.empty == "function" ? e.empty() : e.empty : null, a = u.value.map((t) => {
+				if (t.type === "separator") return v("div", {
+					key: t.key,
+					class: U.separator,
+					role: "separator"
+				}, t.label);
+				let { message: r, position: i } = t, a = r.authorId === e.currentUserId, o = n(r);
+				return v(q, {
+					key: t.key,
+					own: a,
+					system: r.system,
+					author: c.value[r.authorId],
+					showAuthor: e.showAuthors,
+					createdAt: r.createdAt,
+					status: a ? r.status : void 0,
+					attachments: r.attachments,
+					position: i,
+					"data-group-start": i === "single" || i === "first" || void 0
+				}, { default: () => o });
+			});
+			return v(l, {
+				h: e.h,
+				viewportProps: p,
+				onScrollPositionChange: h
+			}, () => v(i, {
+				rootRef: m,
+				class: U.thread,
+				role: "log",
+				"aria-live": "polite",
+				"aria-relevant": "additions"
+			}, () => [
+				r,
+				...a,
+				e.typing && e.typing.length > 0 ? v(Y, {
+					names: e.typing,
+					mt: "sm",
+					ml: 40
+				}) : null
+			]));
+		};
+	}
+}), Q = _({
+	name: "ChatComposer",
+	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			default: "Digite uma mensagem…"
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		allowAttachments: {
+			type: Boolean,
+			default: !1
+		},
+		accept: {
+			type: String,
+			default: void 0
+		},
+		maxRows: {
+			type: Number,
+			default: 5
+		},
+		leftSection: V,
+		sendLabel: {
+			type: String,
+			default: "Enviar"
+		}
+	},
+	emits: {
+		send: (e) => !0,
+		"update:modelValue": (e) => !0
+	},
+	setup(n, { emit: r, slots: o }) {
+		let [s, l] = M({
+			value: () => n.modelValue,
+			defaultValue: n.defaultValue,
+			finalValue: "",
+			onChange: (e) => r("update:modelValue", e)
+		}), u = S([]), p = g(() => !n.disabled && (s.value.trim().length > 0 || u.value.length > 0)), m = () => {
+			p.value && (r("send", {
+				text: s.value.trim(),
+				files: u.value
+			}), l(""), u.value = []);
+		}, h = (e) => {
+			e.key === "Enter" && !e.shiftKey && !e.isComposing && (e.preventDefault(), m());
+		}, _ = (e) => {
+			u.value = u.value.filter((t, n) => n !== e);
+		}, y = (e) => {
+			u.value = [...u.value, ...Array.isArray(e) ? e : e ? [e] : []];
+		};
+		return () => v(i, null, () => [u.value.length > 0 ? v("div", { class: U.composerFiles }, u.value.map((e, t) => v(c, {
+			key: `${e.name}-${t}`,
+			withRemoveButton: !0,
+			onRemove: () => _(t)
+		}, () => e.name))) : null, v("div", { class: U.composer }, [
+			f(n.leftSection, o.leftSection),
+			n.allowAttachments ? v(a, {
+				multiple: !0,
+				accept: n.accept,
+				disabled: n.disabled,
+				onChange: y
+			}, { default: (n) => v(e, { label: "Anexar arquivo" }, () => v(t, {
+				...n,
+				size: "lg",
+				variant: "subtle",
+				"aria-label": "Anexar arquivo"
+			}, () => v(k, { size: 20 }))) }) : null,
+			v(d, {
+				class: U.composerInput,
+				modelValue: s.value,
+				"onUpdate:modelValue": (e) => l(e),
+				onKeydown: h,
+				placeholder: n.placeholder,
+				disabled: n.disabled,
+				autosize: !0,
+				minRows: 1,
+				maxRows: n.maxRows,
+				radius: "lg",
+				"aria-label": n.placeholder
+			}),
+			v(t, {
+				size: 44,
+				radius: "xl",
+				variant: "filled",
+				onClick: m,
+				disabled: !p.value,
+				"aria-label": n.sendLabel
+			}, () => v(j, { size: 20 }))
+		])]);
+	}
+}), ee = _({
+	name: "ConversationList",
+	props: {
+		conversations: {
+			type: Array,
+			required: !0
+		},
+		activeId: {
+			type: String,
+			default: void 0
+		},
+		searchable: {
+			type: Boolean,
+			default: !0
+		},
+		searchPlaceholder: {
+			type: String,
+			default: "Buscar conversas"
+		},
+		empty: V
+	},
+	emits: { select: (e) => !0 },
+	setup(e, { emit: t, slots: a }) {
+		let s = S(""), c = g(() => {
+			let t = s.value.trim().toLocaleLowerCase("pt-BR");
+			return t ? e.conversations.filter((e) => e.name.toLocaleLowerCase("pt-BR").includes(t) || e.lastMessage?.toLocaleLowerCase("pt-BR").includes(t)) : e.conversations;
+		}), d = (i) => {
+			let a = i.unread ?? 0, s = i.id === e.activeId;
+			return v("button", {
+				key: i.id,
+				type: "button",
+				role: "listitem",
+				class: U.conversation,
+				"data-active": s || void 0,
+				"data-unread": a > 0 || void 0,
+				"aria-current": s ? "true" : void 0,
+				onClick: () => t("select", i)
+			}, [v(o, {
+				color: "evergreen",
+				position: "bottom-end",
+				offset: 5,
+				size: 10,
+				withBorder: !0,
+				disabled: !i.online
+			}, () => v(n, {
+				src: i.avatar,
+				name: z(i.name),
+				color: i.color ?? "initials",
+				size: 40
+			})), v("div", { class: U.conversationBody }, [
+				v("div", { class: U.conversationTop }, [v("span", { class: U.conversationName }, i.name), i.lastMessageAt === void 0 ? null : v("span", { class: U.conversationTime }, L(i.lastMessageAt))]),
+				v("div", { class: U.conversationBottom }, [v("span", { class: U.conversationPreview }, i.lastMessage), a > 0 ? v(r, {
+					size: "sm",
+					variant: "filled",
+					circle: a < 10,
+					"aria-label": `${i.unread} não lidas`
+				}, () => a > 99 ? "99+" : String(a)) : null]),
+				i.tag ? v(r, {
+					size: "xs",
+					color: "obsidian",
+					mt: 6
+				}, () => i.tag) : null
+			])]);
+		};
+		return () => v(i, { class: U.conversations }, () => [e.searchable ? v("div", { class: U.conversationSearch }, [v(u, {
+			size: "sm",
+			placeholder: e.searchPlaceholder,
+			modelValue: s.value,
+			"onUpdate:modelValue": (e) => s.value = e,
+			"aria-label": e.searchPlaceholder
+		}, { leftSection: () => v(A, { size: 16 }) })]) : null, v(l, {
+			style: { flex: 1 },
+			type: "auto"
+		}, () => v("div", { role: "list" }, [c.value.length === 0 ? v(i, {
+			p: "lg",
+			ta: "center",
+			c: "var(--ds-text-3)",
+			fz: "sm"
+		}, () => a.empty || e.empty != null ? f(e.empty, a.empty) : "Nenhuma conversa encontrada") : null, ...c.value.map(d)]))]);
+	}
+}), te = _({
+	name: "ChatHeader",
+	props: {
+		title: V,
+		subtitle: V,
+		avatar: {
+			type: String,
+			default: void 0
+		},
+		avatarName: {
+			type: String,
+			default: void 0
+		},
+		online: {
+			type: Boolean,
+			default: !1
+		},
+		actions: V,
+		onBack: {
+			type: [Function, Array],
+			default: void 0
+		}
+	},
+	setup(e, { slots: r }) {
+		let a = () => {
+			let t = e.onBack;
+			Array.isArray(t) ? t.forEach((e) => e()) : t?.();
+		};
+		return () => {
+			let s = f(e.subtitle, r.subtitle);
+			return v(i, { class: U.header }, () => [
+				e.onBack ? v(t, {
+					class: U.backButton,
+					variant: "subtle",
+					onClick: a,
+					"aria-label": "Voltar"
+				}, () => v(T, { size: 20 })) : null,
+				e.avatar || e.avatarName ? v(o, {
+					color: "evergreen",
+					position: "bottom-end",
+					offset: 5,
+					size: 10,
+					withBorder: !0,
+					disabled: !e.online
+				}, () => v(n, {
+					src: e.avatar,
+					name: e.avatarName ? z(e.avatarName) : void 0,
+					color: "initials",
+					size: 40
+				})) : null,
+				v("div", { class: U.headerBody }, [v("div", { class: U.headerTitle }, [f(e.title, r.title)]), H(s) ? v("div", { class: U.headerSubtitle }, [s]) : null]),
+				f(e.actions, r.actions)
+			]);
+		};
+	}
+}), $ = (e) => typeof e == "number" ? `${e}px` : e, ne = _({
+	name: "ChatLayout",
+	props: {
+		sidebar: V,
+		header: V,
+		composer: V,
+		height: {
+			type: [Number, String],
+			default: 600
+		},
+		sidebarWidth: {
+			type: [Number, String],
+			default: 320
+		},
+		mobileView: {
+			type: String,
+			default: "thread"
+		}
+	},
+	setup(e, { slots: t }) {
+		return () => {
+			let n = f(e.sidebar, t.sidebar), r = H(n);
+			return v(i, {
+				class: U.layoutContainer,
+				style: {
+					"--chat-height": $(e.height),
+					"--chat-sidebar-width": $(e.sidebarWidth)
+				}
+			}, () => v("div", {
+				class: U.layout,
+				"data-mobile-view": r ? e.mobileView : void 0,
+				"data-single": !r || void 0
+			}, [r ? v("aside", { class: U.layoutSidebar }, [n]) : null, v("section", { class: U.layoutMain }, [
+				f(e.header, t.header),
+				v("div", { class: U.layoutMessages }, t.default?.()),
+				f(e.composer, t.composer)
+			])]));
+		};
+	}
+});
+//#endregion
+export { Q as ChatComposer, te as ChatHeader, ne as ChatLayout, q as ChatMessage, Z as ChatThread, ee as ConversationList, Y as TypingIndicator, R as buildThread, I as dayLabel, B as formatBytes, z as initialsName, L as shortTimeLabel };
+
+//# sourceMappingURL=chat.js.map