@college-africa/chat-ui 1.3.1 → 1.3.2

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { C as e, S as t, _ as n, a as r, b as i, c as a, d as o, f as s, g as c, h as l, i as u, l as d, m as f, n as p, o as m, p as h, s as g, t as _, u as v, v as y, w as b, x, y as S } from "./summaries-DRFP-wEb.js";
+import { C as e, S as t, _ as n, a as r, b as i, c as a, d as o, f as s, g as c, h as l, i as u, l as d, m as f, n as p, o as m, p as h, s as g, t as _, u as v, v as y, w as b, x, y as S } from "./summaries-DI36-zkM.js";
 import * as C from "react";
 import w, { Children as ee, Component as te, createContext as ne, createElement as T, forwardRef as E, useCallback as D, useContext as re, useEffect as O, useLayoutEffect as ie, useMemo as ae, useRef as k, useState as A } from "react";
 import { Alert as j, AlertTitle as oe, AppBar as se, Autocomplete as ce, Avatar as M, Badge as le, Box as N, Button as P, Chip as ue, CircularProgress as F, Dialog as de, DialogActions as fe, DialogContent as pe, DialogTitle as me, Divider as he, Drawer as ge, FormControlLabel as _e, IconButton as ve, InputAdornment as ye, List as be, ListItem as xe, ListItemAvatar as Se, ListItemButton as Ce, ListItemText as we, Menu as Te, MenuItem as Ee, Paper as De, Select as Oe, Skeleton as ke, Snackbar as Ae, Switch as je, TextField as Me, Toolbar as Ne, Tooltip as Pe, Typography as I } from "@mui/material";
@@ -6063,9 +6063,22 @@ function vf(e) {
 		hour12: !0
 	});
 }
+function yf(e) {
+	let t = typeof e == "string" ? new Date(e) : e, n = /* @__PURE__ */ new Date(), r = new Date(n.getFullYear(), n.getMonth(), n.getDate()), i = new Date(r);
+	i.setDate(i.getDate() - 1);
+	let a = new Date(t.getFullYear(), t.getMonth(), t.getDate());
+	return a.getTime() === r.getTime() ? "Today" : a.getTime() === i.getTime() ? "Yesterday" : a.getTime() > r.getTime() - 10080 * 60 * 1e3 ? t.toLocaleDateString("en-US", { weekday: "long" }) : t.getFullYear() === n.getFullYear() ? t.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric"
+	}) : t.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+}
 //#endregion
 //#region src/components/MessageBubble.tsx
-var yf = w.memo(({ message: e, isOwnMessage: t, senderName: n, showSenderName: r = !0, isFirstInGroup: i = !0, isLastInGroup: a = !0, status: o = "sent" }) => {
+var bf = w.memo(({ message: e, isOwnMessage: t, senderName: n, showSenderName: r = !0, isFirstInGroup: i = !0, isLastInGroup: a = !0, status: o = "sent" }) => {
 	let s = e.id.startsWith("temp-"), c = () => {
 		if (!t || !a) return null;
 		let e = {
@@ -6139,7 +6152,7 @@ var yf = w.memo(({ message: e, isOwnMessage: t, senderName: n, showSenderName: r
 			t && l
 		]
 	});
-}), bf = ({ isOwnMessage: e = !1 }) => /* @__PURE__ */ L(N, {
+}), xf = ({ isOwnMessage: e = !1 }) => /* @__PURE__ */ L(N, {
 	display: "flex",
 	justifyContent: e ? "flex-end" : "flex-start",
 	mb: 1,
@@ -6159,7 +6172,7 @@ var yf = w.memo(({ message: e, isOwnMessage: t, senderName: n, showSenderName: r
 			}
 		})]
 	})
-}), xf = ({ hasMore: e, loading: t, onLoadMore: n, threshold: r = 1, rootMargin: i = "100px" }) => {
+}), Sf = ({ hasMore: e, loading: t, onLoadMore: n, threshold: r = 1, rootMargin: i = "100px" }) => {
 	let a = k(null), o = k(null);
 	return O(() => {
 		if (!e || t) return;
@@ -6191,22 +6204,39 @@ var yf = w.memo(({ message: e, isOwnMessage: t, senderName: n, showSenderName: r
 			children: "Scroll to load more"
 		})
 	}) : null;
-}, Sf = (e, t, n) => {
+}, Cf = ({ date: e }) => /* @__PURE__ */ L(N, {
+	display: "flex",
+	justifyContent: "center",
+	my: 1.5,
+	children: /* @__PURE__ */ L(I, {
+		variant: "caption",
+		color: "text.secondary",
+		fontWeight: 500,
+		sx: {
+			userSelect: "none",
+			bgcolor: "background.paper",
+			px: 1.5,
+			py: .5,
+			borderRadius: .5
+		},
+		children: yf(e)
+	})
+}), wf = (e, t, n) => {
 	O(() => ((async () => {
 		await e();
 	})(), n), t);
 };
 //#endregion
 //#region src/hooks/useSenderNames.ts
-function Cf(e) {
+function Tf(e) {
 	let t = e.map((e) => Number(e.sender));
 	return new Set(t);
 }
-function wf(e) {
+function Ef(e) {
 	let [t, n] = A(() => /* @__PURE__ */ new Map()), i = D(async () => {
 		if (!e.length) return t;
 		try {
-			let n = Cf(e), i = Array.from(n);
+			let n = Tf(e), i = Array.from(n);
 			if (console.log("[names] size:", n.size), !n.size) return t;
 			let a = (await o.users.bulkGet(i)).filter((e) => !!e), s = /* @__PURE__ */ new Map();
 			if (a.forEach((e) => {
@@ -6223,14 +6253,14 @@ function wf(e) {
 		}
 		return t;
 	}, [e, t]);
-	return Sf(async () => {
+	return wf(async () => {
 		n(await i());
 	}, [e]), t;
 }
 //#endregion
 //#region src/components/MessageList.tsx
-var Tf = ({ messages: e, currentUserId: t, loading: n = !1, error: r = null, autoScroll: i = !0, hasMore: a = !1, loadingMore: o = !1, onLoadMore: s }) => {
-	let c = k(null), l = k(null), u = k(0), d = k(!0), [f, p] = A(i), m = wf(e), h = () => {
+var Df = ({ messages: e, currentUserId: t, loading: n = !1, error: r = null, autoScroll: i = !0, hasMore: a = !1, loadingMore: o = !1, onLoadMore: s }) => {
+	let c = k(null), l = k(null), u = k(0), d = k(!0), [f, p] = A(i), m = Ef(e), h = () => {
 		if (!l.current) return !1;
 		let { scrollTop: e, scrollHeight: t, clientHeight: n } = l.current;
 		return t - e - n < 100;
@@ -6257,7 +6287,7 @@ var Tf = ({ messages: e, currentUserId: t, loading: n = !1, error: r = null, aut
 			3,
 			4,
 			5
-		].map((e) => /* @__PURE__ */ L(bf, { isOwnMessage: e % 3 == 0 }, e))
+		].map((e) => /* @__PURE__ */ L(xf, { isOwnMessage: e % 3 == 0 }, e))
 	}) : r && !e.length ? /* @__PURE__ */ L(N, {
 		display: "flex",
 		justifyContent: "center",
@@ -6293,26 +6323,26 @@ var Tf = ({ messages: e, currentUserId: t, loading: n = !1, error: r = null, aut
 			d.current = h();
 		},
 		children: [
-			a && s && /* @__PURE__ */ L(xf, {
+			a && s && /* @__PURE__ */ L(Sf, {
 				hasMore: a,
 				loading: o,
 				onLoadMore: s
 			}),
 			e.map((n, r) => {
-				let i = n.sender, a = n.sender === t, o = m.get(i), s = r > 0 ? e[r - 1] : null, c = r < e.length - 1 ? e[r + 1] : null, l = !s || !v(s, n);
-				return /* @__PURE__ */ L(yf, {
+				let i = n.sender, a = n.sender === t, o = m.get(i), s = r > 0 ? e[r - 1] : null, c = r < e.length - 1 ? e[r + 1] : null, l = new Date(n.created_at).toDateString(), u = l !== (s ? new Date(s.created_at).toDateString() : null), d = u || !s || !v(s, n), f = l !== (c ? new Date(c.created_at).toDateString() : null) || !c || !v(n, c);
+				return /* @__PURE__ */ R(w.Fragment, { children: [u && /* @__PURE__ */ L(Cf, { date: n.created_at }), /* @__PURE__ */ L(bf, {
 					message: n,
 					isOwnMessage: a,
 					senderName: o,
-					showSenderName: l,
-					isFirstInGroup: l,
-					isLastInGroup: !c || !v(n, c)
-				}, n.id);
+					showSenderName: d,
+					isFirstInGroup: d,
+					isLastInGroup: f
+				})] }, n.id);
 			}),
 			/* @__PURE__ */ L("div", { ref: c })
 		]
 	});
-}, Ef = ({ onSend: e, sending: t = !1, placeholder: n = "Type a message...", disabled: r = !1, disableReason: i }) => {
+}, Of = ({ onSend: e, sending: t = !1, placeholder: n = "Type a message...", disabled: r = !1, disableReason: i }) => {
 	let [a, o] = A(""), s = k(null), c = () => {
 		let n = a.trim();
 		n && !t && !r && (e(n), o(""), setTimeout(() => {
@@ -6350,9 +6380,9 @@ var Tf = ({ messages: e, currentUserId: t, loading: n = !1, error: r = null, aut
 };
 //#endregion
 //#region src/hooks/useMessages.ts
-function Df({ conversation: e, limit: t = 50 }) {
+function kf({ conversation: e, limit: t = 50 }) {
 	let n = h(e), [r, i] = A(!1), [s, c] = A(!1), [l, u] = A(), d = ff(() => o.messages.where("conversationId").equals(n).sortBy("created_at"), [n]) || [], f = ff(() => o.msgCursor.where("id").equals(n).first(), [n]);
-	return Sf(async () => {
+	return wf(async () => {
 		let r = { limit: t };
 		d.length && (r.cursorType = "after", r.cursorDatetime = d[d.length - 1]?.created_at), i(!0), await a(e, r).catch(u), i(!1), await o.summaries.update(n, { unread_count: 0 });
 	}, [e, t]), console.log("mw", d.length), {
@@ -6384,10 +6414,10 @@ function Df({ conversation: e, limit: t = 50 }) {
 }
 //#endregion
 //#region src/components/ChatWindow.tsx
-var Of = ({ conversation: e, user: t, isConnected: n, onBack: i }) => {
+var Af = ({ conversation: e, user: t, isConnected: n, onBack: i }) => {
 	let a = r();
 	if (!a) return null;
-	let { messages: s, cursor: c, loading: l, error: u, loadMore: d, loadingMore: f } = Df({ conversation: e }), p = ff(async () => e.type === "group" ? await o.groups.get(e.id) : null, [e.id, e.type]), m = t?.role === "admin", g = t?.role === "moderator", v = p?.is_member ?? !0, y = p?.system ?? !1, b = m && e.type === "group" && !v, x = e.type === "group" && !v, S = e.type === "group" && (m || v), C = e.type === "group" && !y && (m || g && v), w = m && e.type === "group" && !y, [ee, te] = A(!1), [ne, T] = A(!1), [E, D] = A(""), [re, O] = A(!1), [ie, ae] = A(null), k = () => {
+	let { messages: s, cursor: c, loading: l, error: u, loadMore: d, loadingMore: f } = kf({ conversation: e }), p = ff(async () => e.type === "group" ? await o.groups.get(e.id) : null, [e.id, e.type]), m = t?.role === "admin", g = t?.role === "moderator", v = p?.is_member ?? !0, y = p?.system ?? !1, b = m && e.type === "group" && !v, x = e.type === "group" && !v, S = e.type === "group" && (m || v), C = e.type === "group" && !y && (m || g && v), w = m && e.type === "group" && !y, [ee, te] = A(!1), [ne, T] = A(!1), [E, D] = A(""), [re, O] = A(!1), [ie, ae] = A(null), k = () => {
 		D(e.name || ""), ae(null), T(!0);
 	}, oe = async () => {
 		if (E.trim()) {
@@ -6511,7 +6541,7 @@ var Of = ({ conversation: e, user: t, isConnected: n, onBack: i }) => {
 				onClose: () => we(null),
 				children: Ce.message
 			}),
-			/* @__PURE__ */ L(Tf, {
+			/* @__PURE__ */ L(Df, {
 				messages: s,
 				currentUserId: t?.id || 0,
 				loading: l,
@@ -6526,7 +6556,7 @@ var Of = ({ conversation: e, user: t, isConnected: n, onBack: i }) => {
 				severity: "warning",
 				sx: { m: 2 },
 				children: "You must be a group member to send messages"
-			}) : /* @__PURE__ */ L(Ef, {
+			}) : /* @__PURE__ */ L(Of, {
 				onSend: async (n) => {
 					if (!n.trim()) return;
 					Se(!0), we(null), Ee(!0);
@@ -6552,7 +6582,7 @@ var Of = ({ conversation: e, user: t, isConnected: n, onBack: i }) => {
 			})
 		]
 	});
-}, kf = class extends te {
+}, jf = class extends te {
 	constructor(e) {
 		super(e), this.state = {
 			hasError: !1,
@@ -6608,7 +6638,7 @@ var Of = ({ conversation: e, user: t, isConnected: n, onBack: i }) => {
 };
 //#endregion
 //#region src/hooks/useWebSocket.ts
-function Af({ onMessage: e, onConnect: t, onDisconnect: n, onError: i } = {}) {
+function Mf({ onMessage: e, onConnect: t, onDisconnect: n, onError: i } = {}) {
 	let [a, o] = A(!1), s = D((t) => {
 		e?.(t);
 	}, [e]), c = D(() => {
@@ -6636,15 +6666,15 @@ function Af({ onMessage: e, onConnect: t, onDisconnect: n, onError: i } = {}) {
 }
 //#endregion
 //#region src/components/ChatContainer.tsx
-var jf = ({ initialConversation: e }) => {
+var Nf = ({ initialConversation: e }) => {
 	let [t, n] = A(e ?? null), [i, a] = A(), [s, c] = A(!0), [l, u] = A(() => r()), d = D((e) => () => c(e), []);
 	return O(() => {
 		l || r(u);
-	}, [l]), Sf(async () => {
+	}, [l]), wf(async () => {
 		if (!l) return;
 		let e = await l.getMe();
 		a(e), o.users.put(e);
-	}, [l]), Af({
+	}, [l]), Mf({
 		onError: d(!1),
 		onConnect: d(!0),
 		onDisconnect: d(!1)
@@ -6674,7 +6704,7 @@ var jf = ({ initialConversation: e }) => {
 				},
 				flexDirection: "column"
 			},
-			children: /* @__PURE__ */ L(kf, { children: /* @__PURE__ */ L(pf, {
+			children: /* @__PURE__ */ L(jf, { children: /* @__PURE__ */ L(pf, {
 				currentUser: i,
 				selectedConversation: t,
 				onConversationSelect: (e) => {
@@ -6692,7 +6722,7 @@ var jf = ({ initialConversation: e }) => {
 				},
 				flexDirection: "column"
 			},
-			children: t ? /* @__PURE__ */ L(kf, { children: /* @__PURE__ */ L(Of, {
+			children: t ? /* @__PURE__ */ L(jf, { children: /* @__PURE__ */ L(Af, {
 				conversation: t,
 				user: i,
 				isConnected: s,
@@ -6715,7 +6745,7 @@ var jf = ({ initialConversation: e }) => {
 		height: "100%",
 		children: /* @__PURE__ */ L(F, {})
 	});
-}, Mf = ({ count: e, children: t, max: n = 99 }) => /* @__PURE__ */ L(le, {
+}, Pf = ({ count: e, children: t, max: n = 99 }) => /* @__PURE__ */ L(le, {
 	badgeContent: e,
 	color: "error",
 	max: n,
@@ -6726,26 +6756,26 @@ var jf = ({ initialConversation: e }) => {
 		transform: "translateY(-50%)"
 	} },
 	children: t
-}), Nf = /* @__PURE__ */ e(((e, t) => {
+}), Ff = /* @__PURE__ */ e(((e, t) => {
 	var n = i();
 	t.exports = function() {
 		return n.Date.now();
 	};
-})), Pf = /* @__PURE__ */ e(((e, t) => {
+})), If = /* @__PURE__ */ e(((e, t) => {
 	var n = /\s/;
 	function r(e) {
 		for (var t = e.length; t-- && n.test(e.charAt(t)););
 		return t;
 	}
 	t.exports = r;
-})), Ff = /* @__PURE__ */ e(((e, t) => {
-	var n = Pf(), r = /^\s+/;
+})), Lf = /* @__PURE__ */ e(((e, t) => {
+	var n = If(), r = /^\s+/;
 	function i(e) {
 		return e && e.slice(0, n(e) + 1).replace(r, "");
 	}
 	t.exports = i;
-})), If = /* @__PURE__ */ e(((e, t) => {
-	var r = Ff(), i = n(), a = Vd(), o = NaN, s = /^[-+]0x[0-9a-f]+$/i, c = /^0b[01]+$/i, l = /^0o[0-7]+$/i, u = parseInt;
+})), Rf = /* @__PURE__ */ e(((e, t) => {
+	var r = Lf(), i = n(), a = Vd(), o = NaN, s = /^[-+]0x[0-9a-f]+$/i, c = /^0b[01]+$/i, l = /^0o[0-7]+$/i, u = parseInt;
 	function d(e) {
 		if (typeof e == "number") return e;
 		if (a(e)) return o;
@@ -6759,8 +6789,8 @@ var jf = ({ initialConversation: e }) => {
 		return n || l.test(e) ? u(e.slice(2), n ? 2 : 8) : s.test(e) ? o : +e;
 	}
 	t.exports = d;
-})), Lf = /* @__PURE__ */ b((/* @__PURE__ */ e(((e, t) => {
-	var r = n(), i = Nf(), a = If(), o = "Expected a function", s = Math.max, c = Math.min;
+})), zf = /* @__PURE__ */ b((/* @__PURE__ */ e(((e, t) => {
+	var r = n(), i = Ff(), a = Rf(), o = "Expected a function", s = Math.max, c = Math.min;
 	function l(e, t, n) {
 		var l, u, d, f, p, m, h = 0, g = !1, _ = !1, v = !0;
 		if (typeof e != "function") throw TypeError(o);
@@ -6805,25 +6835,25 @@ var jf = ({ initialConversation: e }) => {
 		return ne.cancel = ee, ne.flush = te, ne;
 	}
 	t.exports = l;
-})))(), 1), Rf = 0, zf = (0, Lf.default)(() => {
+})))(), 1), Bf = 0, Vf = (0, zf.default)(() => {
 	r() && _().catch(console.warn);
 }, 600);
-function Bf() {
-	return O(() => (Rf++, Rf === 1 && (document.addEventListener("visibilitychange", () => {
-		document.visibilityState === "visible" && zf();
+function Hf() {
+	return O(() => (Bf++, Bf === 1 && (document.addEventListener("visibilitychange", () => {
+		document.visibilityState === "visible" && Vf();
 	}), r((e) => {
-		e.on("open", zf);
+		e.on("open", Vf);
 	})), () => {
-		Rf--, Rf === 0 && (r()?.off("open", zf), zf.cancel());
+		Bf--, Bf === 0 && (r()?.off("open", Vf), Vf.cancel());
 	}), []), ff(() => o.summaries.toArray().then((e) => e.reduce((e, t) => e + t.unread_count, 0)), [], void 0);
 }
 //#endregion
 //#region src/hooks/constants.ts
-var Vf = {
+var Uf = {
 	SUMMARIES: 300 * 1e3,
 	USER: 3600 * 1e3,
 	MESSAGES: Infinity
-}, Hf = () => typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, Uf = {
+}, Wf = () => typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").matches, Gf = {
 	mode: "dark",
 	background: {
 		paper: "#3d3d43",
@@ -6833,17 +6863,17 @@ var Vf = {
 		primary: "#eee",
 		secondary: "#aaa"
 	}
-}, Wf = {
+}, Kf = {
 	mode: "light",
 	background: {
 		default: "#f5f5f5",
 		paper: "#ffff"
 	}
-}, Gf = (e) => {
-	let t = Hf(), n = (e || (t ? "dark" : "light")) === "dark";
+}, qf = (e) => {
+	let t = Wf(), n = (e || (t ? "dark" : "light")) === "dark";
 	return qi({
 		palette: {
-			...n ? Uf : Wf,
+			...n ? Gf : Kf,
 			primary: {
 				main: "#E91E63",
 				light: "#F48FB1",
@@ -6966,6 +6996,6 @@ var Vf = {
 			} } }
 		}
 	});
-}, Kf = Gf();
+}, Jf = qf();
 //#endregion
-export { Vf as CACHE_TTL, Be as ChatApp, jf as ChatContainer, mf as ChatHeader, Of as ChatWindow, Da as ConversationItem, Oa as ConversationItemSkeleton, pf as ConversationList, sf as CreateGroupDialog, kf as ErrorBoundary, xf as LoadMoreTrigger, yf as MessageBubble, Ef as MessageInput, Tf as MessageList, bf as MessageSkeleton, Mf as UnreadBadge, o as db, u as disconnectSDK, _ as fetchSummaries, r as getSDK, Gf as getTheme, m as initSDK, g as isSDKInitialized, Kf as theme, Df as useMessages, wf as useSenderNames, Bf as useUnreadCount, Af as useWebSocket };
+export { Uf as CACHE_TTL, Be as ChatApp, Nf as ChatContainer, mf as ChatHeader, Af as ChatWindow, Da as ConversationItem, Oa as ConversationItemSkeleton, pf as ConversationList, sf as CreateGroupDialog, jf as ErrorBoundary, Sf as LoadMoreTrigger, bf as MessageBubble, Of as MessageInput, Df as MessageList, xf as MessageSkeleton, Pf as UnreadBadge, o as db, u as disconnectSDK, _ as fetchSummaries, r as getSDK, qf as getTheme, m as initSDK, g as isSDKInitialized, Jf as theme, kf as useMessages, Ef as useSenderNames, Hf as useUnreadCount, Mf as useWebSocket };