@burdenoff/microfe-conversations 2026.523.1 → 2026.525.1

package/dist/conversations/pages/ConversationDetailPage.js

@@ -2,258 +2,261 @@ import { useConversations as e } from "../providers/ConversationsProvider.js";
 import { cn as t } from "../utils/cn.js";
 import { useConversationsStore as n } from "../store/conversationsStore.js";
 import { MessageBubble as r } from "../components/MessageBubble.js";
-import { useConversationActions as i, useGetConversation as ee } from "../hooks/useConversationQueries.js";
-import { useEditMessage as te, useGetMessages as ne, useMessageActions as re, useSendMessage as ie } from "../hooks/useMessageQueries.js";
-import { useMessageStreamForConversation as ae } from "../hooks/useMessageSubscriptions.js";
-import { PermissionGuard as a } from "../components/PermissionGuard.js";
-import { CONVERSATIONS_PERMISSIONS as o } from "../constants/permissions.js";
-import { nativeImpact as oe, nativeNotify as s } from "../../utils/nativeBridge.js";
-import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
-import { Archive as se, ArrowLeft as ce, Bell as le, BellOff as ue, ExternalLink as de, Hash as fe, Loader2 as pe, MessageCircle as me, MoreVertical as he, Pin as ge, PinOff as _e, SendHorizontal as ve, Users as ye, X as be } from "lucide-react";
-import { useNavigate as xe, useParams as Se } from "react-router-dom";
-import { useEventBus as Ce } from "@burdenoff/fe-libs/shared/events";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { useI18n as we } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useConversationActions as i, useGetConversation as a } from "../hooks/useConversationQueries.js";
+import { useEditMessage as ee, useGetMessages as te, useMessageActions as ne, useSendMessage as re } from "../hooks/useMessageQueries.js";
+import { useMessageStreamForConversation as ie } from "../hooks/useMessageSubscriptions.js";
+import { PermissionGuard as o } from "../components/PermissionGuard.js";
+import { CONVERSATIONS_PERMISSIONS as s } from "../constants/permissions.js";
+import { nativeImpact as ae, nativeNotify as c } from "../../utils/nativeBridge.js";
+import { useCallback as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { Archive as oe, ArrowLeft as se, Bell as ce, BellOff as le, ExternalLink as ue, Hash as de, Loader2 as fe, MessageCircle as pe, MoreVertical as me, Pin as he, PinOff as ge, SendHorizontal as _e, Users as ve, X as ye } from "lucide-react";
+import { useNavigate as be, useParams as xe } from "react-router-dom";
+import { useEventBus as Se } from "@burdenoff/fe-libs/shared/events";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useI18n as Ce } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/conversations/pages/ConversationDetailPage.tsx
-var h = 100;
-function g() {
-	let { conversationId: a } = Se(), o = xe(), { basePath: g, currentUser: Te } = e(), y = Ce(), { t: Ee } = we(), b = (e, t) => {
-		let n = Ee(e);
+var g = 100;
+function _() {
+	let { conversationId: o } = xe(), s = be(), { basePath: _, currentUser: we } = e(), b = Se(), { t: Te } = Ce(), x = (e, t) => {
+		let n = Te(e);
 		return n === e ? t : n;
-	}, { clearMessageDraft: x, isParticipantsPanelOpen: S, messageDrafts: De, setMessageDraft: C, toggleParticipantsPanel: w } = n(), [T, E] = f(De[a ?? ""] ?? ""), [D, O] = f([]), k = d(null), { conversation: A, loading: Oe, error: j } = ee(a ?? ""), { messages: M, loading: N, error: P } = ne(a ?? "", { first: h });
-	ae(a);
-	let { sendMessage: F, loading: I } = ie(), { editMessage: L, loading: R } = te(), { deleteMessage: z, addReaction: B, removeReaction: ke, pinMessage: Ae, unpinMessage: je } = re(), { archiveConversation: Me, pinConversation: Ne, unpinConversation: Pe, muteConversation: Fe, unmuteConversation: Ie } = i(), [V, H] = f(!1), [U, W] = f(null), [G, K] = f(""), [q, J] = f(null), Y = d(null), Le = Te?.id ?? "", X = A?.sourceContext, Z = u(() => {
+	}, { clearMessageDraft: S, isParticipantsPanelOpen: C, messageDrafts: Ee, setMessageDraft: w, toggleParticipantsPanel: T } = n(), [E, D] = p(Ee[o ?? ""] ?? ""), [O, k] = p([]), A = f(null), { conversation: j, loading: De, error: M } = a(o ?? ""), { messages: N, loading: P, error: F } = te(o ?? "", { first: g });
+	ie(o);
+	let { sendMessage: I, loading: L } = re(), { editMessage: R, loading: z } = ee(), { deleteMessage: B, addReaction: V, removeReaction: Oe, pinMessage: ke, unpinMessage: Ae } = ne(), { archiveConversation: je, pinConversation: Me, unpinConversation: Ne, muteConversation: Pe, unmuteConversation: Fe } = i(), [H, U] = p(!1), [W, G] = p(null), [K, q] = p(""), [J, Y] = p(null), X = f(null), Ie = we?.id ?? "", Z = j?.sourceContext, Q = d(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of D) t.conversationId === a && e.set(t.id, t);
-		for (let t of M) e.set(t.id, t);
+		for (let t of O) t.conversationId === o && e.set(t.id, t);
+		for (let t of N) e.set(t.id, t);
 		return Array.from(e.values()).sort((e, t) => new Date(e.createdAt).getTime() - new Date(t.createdAt).getTime());
 	}, [
-		a,
-		D,
-		M
+		o,
+		O,
+		N
 	]);
-	l(() => {
-		k.current?.scrollIntoView({ behavior: "smooth" });
-	}, [Z.length]), l(() => {
-		O([]);
-	}, [a]), l(() => {
-		if (D.length === 0 || M.length === 0) return;
-		let e = new Set(M.map((e) => e.id));
-		O((t) => {
+	u(() => {
+		A.current?.scrollIntoView({ behavior: "smooth" });
+	}, [Q.length]), u(() => {
+		k([]);
+	}, [o]), u(() => {
+		if (O.length === 0 || N.length === 0) return;
+		let e = new Set(N.map((e) => e.id));
+		k((t) => {
 			let n = t.filter((t) => !e.has(t.id));
 			return n.length === t.length ? t : n;
 		});
-	}, [D.length, M]), l(() => {
-		if (a) {
-			if (T.trim()) {
-				C(a, T);
+	}, [O.length, N]), u(() => {
+		if (o) {
+			if (E.trim()) {
+				w(o, E);
 				return;
 			}
-			x(a);
+			S(o);
 		}
 	}, [
-		T,
-		a,
-		C,
-		x
+		E,
+		o,
+		w,
+		S
 	]);
-	let Re = u(() => {
+	let Le = d(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of Z) !t.authorId || e.has(t.authorId) || e.set(t.authorId, {
+		for (let t of Q) !t.authorId || e.has(t.authorId) || e.set(t.authorId, {
 			id: t.authorId,
 			name: t.sender.name || t.authorId
 		});
 		return Array.from(e.values());
-	}, [Z]), Q = c(async () => {
-		if (!a || !T.trim() || I) return;
-		let e = await F({
-			conversationId: a,
-			content: T.trim(),
+	}, [Q]), $ = l(async () => {
+		if (!o || !E.trim() || L) return;
+		let e = await I({
+			conversationId: o,
+			content: E.trim(),
 			type: "TEXT",
-			parentMessageId: q?.id,
-			refetchFirst: h
+			parentMessageId: J?.id,
+			refetchFirst: g
 		});
-		e && (O((t) => [...t, e]), y.emit("conversations.message.sent", {
+		e && (k((t) => [...t, e]), b.emit("conversations.message.sent", {
 			messageId: e.id,
-			conversationId: a
-		}), E(""), J(null), x(a));
+			conversationId: o
+		}), D(""), Y(null), S(o));
 	}, [
-		y,
-		a,
-		T,
+		b,
+		o,
+		E,
+		L,
 		I,
-		F,
-		x,
-		q
-	]), ze = c((e) => {
-		e.key !== "Enter" || e.shiftKey || (e.preventDefault(), Q());
-	}, [Q]);
-	l(() => {
-		a && y.emit("conversations.conversation.opened", { conversationId: a });
-	}, [y, a]), l(() => {
-		if (!V) return;
+		S,
+		J
+	]), Re = l((e) => {
+		e.key !== "Enter" || e.shiftKey || (e.preventDefault(), $());
+	}, [$]);
+	u(() => {
+		o && b.emit("conversations.conversation.opened", { conversationId: o });
+	}, [b, o]), u(() => {
+		if (!H) return;
 		let e = (e) => {
-			Y.current && !Y.current.contains(e.target) && H(!1);
+			X.current && !X.current.contains(e.target) && U(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [V]);
-	let Be = c((e) => {
-		J({
+	}, [H]);
+	let ze = l((e) => {
+		Y({
 			id: e.id,
 			content: e.content,
 			sender: e.sender.name
 		});
-	}, []), Ve = c(async (e, t) => {
+	}, []), Be = l(async (e, t) => {
 		try {
-			await B(e, t);
+			await V(e, t);
 		} catch {
-			await ke(e, t).catch(() => {});
+			await Oe(e, t).catch(() => {});
 		}
-	}, [B, ke]), He = c((e) => {
-		W(e.id), K(e.content);
-	}, []), Ue = c(async () => {
-		!U || !G.trim() || R || (await L(U, G.trim()), W(null), K(""));
+	}, [V, Oe]), Ve = l((e) => {
+		G(e.id), q(e.content);
+	}, []), He = l(async () => {
+		!W || !K.trim() || z || (await R(W, K.trim()), G(null), q(""));
 	}, [
-		U,
-		G,
-		R,
-		L
-	]), $ = c(() => {
-		W(null), K("");
-	}, []), We = c(async (e) => {
-		oe("medium");
+		W,
+		K,
+		z,
+		R
+	]), Ue = l(() => {
+		G(null), q("");
+	}, []), We = l(async (e) => {
+		ae("medium");
 		try {
-			await z(e), s("success");
+			await B(e), c("success");
 		} catch (e) {
-			throw s("error"), e;
+			throw c("error"), e;
 		}
-	}, [z]), Ge = c(async (e, t) => {
+	}, [B]), Ge = l(async (e, t) => {
 		if (t) {
-			await je(e);
+			await Ae(e);
 			return;
 		}
-		await Ae(e);
-	}, [Ae, je]), Ke = c(async () => {
-		a && (A?.isPinned ? await Pe(a) : await Ne(a), H(!1));
+		await ke(e);
+	}, [ke, Ae]), Ke = l(async () => {
+		o && (j?.isPinned ? await Ne(o) : await Me(o), U(!1));
 	}, [
-		a,
-		A?.isPinned,
-		Ne,
-		Pe
-	]), qe = c(async () => {
-		a && (A?.isMuted ? await Ie(a) : await Fe(a), H(!1));
+		o,
+		j?.isPinned,
+		Me,
+		Ne
+	]), qe = l(async () => {
+		o && (j?.isMuted ? await Fe(o) : await Pe(o), U(!1));
 	}, [
-		a,
-		A?.isMuted,
-		Fe,
-		Ie
-	]), Je = c(async () => {
-		a && (await Me(a), y.emit("conversations.conversation.archived", { conversationId: a }), H(!1), o(g || "/conversations"));
+		o,
+		j?.isMuted,
+		Pe,
+		Fe
+	]), Je = l(async () => {
+		o && (await je(o), b.emit("conversations.conversation.archived", { conversationId: o }), U(!1), s(_ || "/conversations"));
 	}, [
-		Me,
-		g,
-		y,
-		a,
-		o
-	]), Ye = c(() => {
-		if (X?.contextHref) {
+		je,
+		_,
+		b,
+		o,
+		s
+	]), Ye = l(() => {
+		if (Z?.contextHref) {
 			try {
-				let e = new URL(X.contextHref);
+				let e = new URL(Z.contextHref);
 				if (e.origin === window.location.origin) {
-					o(`${e.pathname}${e.search}${e.hash}`);
+					s(`${e.pathname}${e.search}${e.hash}`);
 					return;
 				}
 			} catch {}
-			window.location.assign(X.contextHref);
+			window.location.assign(Z.contextHref);
 		}
-	}, [o, X?.contextHref]);
-	return !A && Oe ? /* @__PURE__ */ p("div", {
+	}, [s, Z?.contextHref]);
+	return !j && De ? /* @__PURE__ */ m("div", {
 		className: "flex items-center justify-center h-[calc(100vh-64px)] text-sm text-muted-foreground",
-		children: b("conversations.loading", "Loading conversation...")
-	}) : !A || j ? /* @__PURE__ */ m("div", {
+		children: x("conversations.loading", "Loading conversation...")
+	}) : !j || M ? /* @__PURE__ */ h("div", {
 		className: "flex flex-col items-center justify-center h-[calc(100vh-64px)] text-center gap-3 px-4",
 		children: [
-			/* @__PURE__ */ p(me, { className: "h-8 w-8 text-muted-foreground" }),
-			/* @__PURE__ */ p("p", {
+			/* @__PURE__ */ m(pe, { className: "h-8 w-8 text-muted-foreground" }),
+			/* @__PURE__ */ m("p", {
 				className: "text-sm text-muted-foreground",
-				children: j ? b("conversations.unavailable", "We couldn't load this conversation. Please try again.") : b("conversations.notFound", "Conversation not found")
+				children: M ? x("conversations.unavailable", "We couldn't load this conversation. Please try again.") : x("conversations.notFound", "Conversation not found")
 			}),
-			/* @__PURE__ */ p("button", {
+			/* @__PURE__ */ m("button", {
 				type: "button",
-				onClick: () => o(g || "/conversations"),
+				onClick: () => s(_ || "/conversations"),
 				className: "px-3 py-2 text-sm font-medium rounded-lg border border-border hover:bg-muted/50",
-				children: b("conversations.back", "Back to conversations")
+				children: x("conversations.back", "Back to conversations")
 			})
 		]
-	}) : /* @__PURE__ */ m("div", {
+	}) : /* @__PURE__ */ h("div", {
 		className: "relative flex h-[calc(100vh-64px)] bg-background",
-		children: [/* @__PURE__ */ m("div", {
+		children: [/* @__PURE__ */ h("div", {
 			className: "flex-1 flex flex-col min-w-0",
 			children: [
-				/* @__PURE__ */ m("header", {
+				/* @__PURE__ */ h("header", {
+					"data-tour": "conversation-detail-header",
 					className: "flex items-center justify-between px-4 py-3 border-b border-border bg-background/95 backdrop-blur-sm",
-					children: [/* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ h("div", {
 						className: "flex items-center gap-3 min-w-0",
-						children: [/* @__PURE__ */ p("button", {
+						children: [/* @__PURE__ */ m("button", {
 							type: "button",
-							onClick: () => o(g || "/conversations"),
+							onClick: () => s(_ || "/conversations"),
 							className: "flex min-h-10 min-w-10 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
-							children: /* @__PURE__ */ p(ce, { size: 18 })
-						}), /* @__PURE__ */ m("div", {
+							children: /* @__PURE__ */ m(se, { size: 18 })
+						}), /* @__PURE__ */ h("div", {
 							className: "min-w-0",
-							children: [/* @__PURE__ */ m("div", {
+							children: [/* @__PURE__ */ h("div", {
 								className: "flex items-center gap-1.5",
-								children: [A.type === "CHANNEL" && /* @__PURE__ */ p(fe, {
+								children: [j.type === "CHANNEL" && /* @__PURE__ */ m(de, {
 									size: 14,
 									className: "text-muted-foreground flex-shrink-0"
-								}), /* @__PURE__ */ p("h2", {
+								}), /* @__PURE__ */ m("h2", {
 									className: "text-sm font-semibold text-foreground truncate",
-									children: A.title
+									children: j.title
 								})]
-							}), /* @__PURE__ */ p("p", {
+							}), /* @__PURE__ */ m("p", {
 								className: "text-xs text-muted-foreground",
-								children: A.type === "DIRECT" ? b("conversations.directConversation", "Direct conversation") : A.type === "CHANNEL" ? `${b("conversations.channel", "Channel")} · ${A.memberCount} ${b("conversations.membersCountLabel", "members")}` : A.type === "ANNOUNCEMENT" ? `${b("conversations.announcement", "Announcement")} · ${A.memberCount} ${b("conversations.membersCountLabel", "members")}` : `${A.memberCount} ${b("conversations.membersCountLabel", "members")}`
+								children: j.type === "DIRECT" ? x("conversations.directConversation", "Direct conversation") : j.type === "CHANNEL" ? `${x("conversations.channel", "Channel")} · ${j.memberCount} ${x("conversations.membersCountLabel", "members")}` : j.type === "ANNOUNCEMENT" ? `${x("conversations.announcement", "Announcement")} · ${j.memberCount} ${x("conversations.membersCountLabel", "members")}` : `${j.memberCount} ${x("conversations.membersCountLabel", "members")}`
 							})]
 						})]
-					}), /* @__PURE__ */ m("div", {
+					}), /* @__PURE__ */ h("div", {
 						className: "flex shrink-0 items-center gap-1",
 						children: [
-							X?.contextHref && /* @__PURE__ */ p(v, {
-								icon: /* @__PURE__ */ p(de, { size: 16 }),
-								label: b("conversations.openContext", "Open context"),
+							Z?.contextHref && /* @__PURE__ */ m(y, {
+								dataTour: "conversation-open-context",
+								icon: /* @__PURE__ */ m(ue, { size: 16 }),
+								label: x("conversations.openContext", "Open context"),
 								onClick: Ye
 							}),
-							A.isGroup && /* @__PURE__ */ p(v, {
-								icon: /* @__PURE__ */ p(ye, { size: 16 }),
-								label: b("conversations.participants", "Participants"),
-								active: S,
-								onClick: w
+							j.isGroup && /* @__PURE__ */ m(y, {
+								dataTour: "conversation-participants-button",
+								icon: /* @__PURE__ */ m(ve, { size: 16 }),
+								label: x("conversations.participants", "Participants"),
+								active: C,
+								onClick: T
 							}),
-							/* @__PURE__ */ m("div", {
+							/* @__PURE__ */ h("div", {
 								className: "relative",
-								ref: Y,
-								children: [/* @__PURE__ */ p(v, {
-									icon: /* @__PURE__ */ p(he, { size: 16 }),
-									label: b("conversations.moreOptions", "More options"),
-									active: V,
-									onClick: () => H((e) => !e)
-								}), V && /* @__PURE__ */ m("div", {
+								ref: X,
+								children: [/* @__PURE__ */ m(y, {
+									icon: /* @__PURE__ */ m(me, { size: 16 }),
+									label: x("conversations.moreOptions", "More options"),
+									active: H,
+									onClick: () => U((e) => !e)
+								}), H && /* @__PURE__ */ h("div", {
 									className: "absolute right-0 top-full mt-1 w-48 bg-popover border border-border rounded-lg shadow-lg z-50 py-1 animate-in fade-in-0 zoom-in-95 duration-100",
 									children: [
-										/* @__PURE__ */ p(_, {
-											icon: A.isPinned ? /* @__PURE__ */ p(_e, { size: 14 }) : /* @__PURE__ */ p(ge, { size: 14 }),
-											label: A.isPinned ? b("conversations.unpinConversation", "Unpin conversation") : b("conversations.pinConversation", "Pin conversation"),
+										/* @__PURE__ */ m(v, {
+											icon: j.isPinned ? /* @__PURE__ */ m(ge, { size: 14 }) : /* @__PURE__ */ m(he, { size: 14 }),
+											label: j.isPinned ? x("conversations.unpinConversation", "Unpin conversation") : x("conversations.pinConversation", "Pin conversation"),
 											onClick: () => void Ke()
 										}),
-										/* @__PURE__ */ p(_, {
-											icon: A.isMuted ? /* @__PURE__ */ p(le, { size: 14 }) : /* @__PURE__ */ p(ue, { size: 14 }),
-											label: A.isMuted ? b("conversations.unmuteConversation", "Unmute conversation") : b("conversations.muteConversation", "Mute conversation"),
+										/* @__PURE__ */ m(v, {
+											icon: j.isMuted ? /* @__PURE__ */ m(ce, { size: 14 }) : /* @__PURE__ */ m(le, { size: 14 }),
+											label: j.isMuted ? x("conversations.unmuteConversation", "Unmute conversation") : x("conversations.muteConversation", "Mute conversation"),
 											onClick: () => void qe()
 										}),
-										/* @__PURE__ */ p("div", { className: "h-px bg-border my-1" }),
-										/* @__PURE__ */ p(_, {
-											icon: /* @__PURE__ */ p(se, { size: 14 }),
-											label: b("conversations.archiveConversation", "Archive conversation"),
+										/* @__PURE__ */ m("div", { className: "h-px bg-border my-1" }),
+										/* @__PURE__ */ m(v, {
+											icon: /* @__PURE__ */ m(oe, { size: 14 }),
+											label: x("conversations.archiveConversation", "Archive conversation"),
 											onClick: () => void Je(),
 											destructive: !0
 										})
@@ -263,107 +266,108 @@ function g() {
 						]
 					})]
 				}),
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: "flex-1 overflow-y-auto py-4 space-y-0.5",
 					children: [
-						X?.pagePath && /* @__PURE__ */ m("div", {
+						Z?.pagePath && /* @__PURE__ */ h("div", {
 							className: "mx-4 mb-4 rounded-lg border border-border bg-muted/20 px-3 py-2 text-xs text-muted-foreground",
-							children: [/* @__PURE__ */ p("span", {
+							children: [/* @__PURE__ */ m("span", {
 								className: "font-medium text-foreground",
-								children: X.contextTitle || X.pagePath
-							}), X.entityType && X.entityId ? ` · ${X.entityType} ${X.entityId}` : ""]
+								children: Z.contextTitle || Z.pagePath
+							}), Z.entityType && Z.entityId ? ` · ${Z.entityType} ${Z.entityId}` : ""]
 						}),
-						P && /* @__PURE__ */ p("div", {
+						F && /* @__PURE__ */ m("div", {
 							className: "mx-4 mb-4 rounded-lg border border-status-warning-border bg-status-warning-bg px-3 py-2 text-sm text-status-warning-text",
-							children: b("conversations.messagesUnavailable", "Messages couldn't be loaded right now. The conversation header and actions are still available.")
+							children: x("conversations.messagesUnavailable", "Messages couldn't be loaded right now. The conversation header and actions are still available.")
 						}),
-						N && /* @__PURE__ */ m("div", {
+						P && /* @__PURE__ */ h("div", {
 							className: "mx-4 mb-4 flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-sm text-muted-foreground",
-							children: [/* @__PURE__ */ p(pe, {
+							children: [/* @__PURE__ */ m(fe, {
 								size: 14,
 								className: "animate-spin"
-							}), b("conversations.loadingMessages", "Loading messages...")]
+							}), x("conversations.loadingMessages", "Loading messages...")]
 						}),
-						!N && !P && Z.length === 0 && /* @__PURE__ */ p("div", {
+						!P && !F && Q.length === 0 && /* @__PURE__ */ m("div", {
 							className: "mx-4 mb-4 rounded-lg border border-dashed border-border bg-muted/20 px-3 py-6 text-center text-sm text-muted-foreground",
-							children: b("conversations.noMessagesYet", "No messages yet. Start the conversation below.")
+							children: x("conversations.noMessagesYet", "No messages yet. Start the conversation below.")
 						}),
-						Z.map((e, t) => {
-							let n = Z[t - 1], i = !n || n.authorId !== e.authorId || n.type === "SYSTEM";
-							return /* @__PURE__ */ p("div", { children: U === e.id ? /* @__PURE__ */ m("div", {
+						Q.map((e, t) => {
+							let n = Q[t - 1], i = !n || n.authorId !== e.authorId || n.type === "SYSTEM";
+							return /* @__PURE__ */ m("div", { children: W === e.id ? /* @__PURE__ */ h("div", {
 								className: "px-4 py-2",
-								children: [/* @__PURE__ */ m("div", {
+								children: [/* @__PURE__ */ h("div", {
 									className: "flex items-center gap-2 text-xs text-muted-foreground mb-1",
-									children: [/* @__PURE__ */ p("span", { children: b("conversations.editingMessage", "Editing message") }), /* @__PURE__ */ p("button", {
+									children: [/* @__PURE__ */ m("span", { children: x("conversations.editingMessage", "Editing message") }), /* @__PURE__ */ m("button", {
 										type: "button",
-										onClick: $,
+										onClick: Ue,
 										className: "hover:text-foreground",
-										children: /* @__PURE__ */ p(be, { size: 12 })
+										children: /* @__PURE__ */ m(ye, { size: 12 })
 									})]
-								}), /* @__PURE__ */ m("div", {
+								}), /* @__PURE__ */ h("div", {
 									className: "flex items-end gap-2",
-									children: [/* @__PURE__ */ p("textarea", {
-										value: G,
-										onChange: (e) => K(e.target.value),
+									children: [/* @__PURE__ */ m("textarea", {
+										value: K,
+										onChange: (e) => q(e.target.value),
 										onKeyDown: (e) => {
-											e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Ue()), e.key === "Escape" && $();
+											e.key === "Enter" && !e.shiftKey && (e.preventDefault(), He()), e.key === "Escape" && Ue();
 										},
 										className: "flex-1 px-3 py-2 text-sm rounded-lg border border-border bg-muted/30 resize-none focus:outline-none focus:ring-2 focus:ring-ring",
 										rows: 2
-									}), /* @__PURE__ */ p("button", {
+									}), /* @__PURE__ */ m("button", {
 										type: "button",
-										onClick: () => void Ue(),
-										disabled: !G.trim() || R,
+										onClick: () => void He(),
+										disabled: !K.trim() || z,
 										className: "px-3 py-2 text-xs font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50",
-										children: b("conversations.save", "Save")
+										children: x("conversations.save", "Save")
 									})]
 								})]
-							}) : /* @__PURE__ */ p(r, {
+							}) : /* @__PURE__ */ m(r, {
 								message: e,
-								isOwnMessage: e.authorId === Le,
+								isOwnMessage: e.authorId === Ie,
 								showAvatar: i,
 								showSender: i,
-								onReply: Be,
-								onReact: (e, t) => void Ve(e, t),
-								onEdit: He,
+								onReply: ze,
+								onReact: (e, t) => void Be(e, t),
+								onEdit: Ve,
 								onDelete: (e) => void We(e),
 								onTogglePin: (e, t) => void Ge(e, t)
 							}) }, e.id);
 						}),
-						/* @__PURE__ */ p("div", { ref: k })
+						/* @__PURE__ */ m("div", { ref: A })
 					]
 				}),
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
+					"data-tour": "conversation-message-composer",
 					className: "border-t border-border px-4 py-3 bg-background",
-					children: [q && /* @__PURE__ */ m("div", {
+					children: [J && /* @__PURE__ */ h("div", {
 						className: "flex items-center gap-2 mb-2 px-3 py-1.5 rounded-lg bg-muted/50 text-xs text-muted-foreground",
-						children: [/* @__PURE__ */ m("span", { children: [
-							b("conversations.replyingTo", "Replying to"),
+						children: [/* @__PURE__ */ h("span", { children: [
+							x("conversations.replyingTo", "Replying to"),
 							" ",
-							/* @__PURE__ */ p("strong", {
+							/* @__PURE__ */ m("strong", {
 								className: "text-foreground",
-								children: q.sender
+								children: J.sender
 							}),
 							": ",
-							q.content.slice(0, 80),
-							q.content.length > 80 ? "…" : ""
-						] }), /* @__PURE__ */ p("button", {
+							J.content.slice(0, 80),
+							J.content.length > 80 ? "…" : ""
+						] }), /* @__PURE__ */ m("button", {
 							type: "button",
-							onClick: () => J(null),
-							"aria-label": b("conversations.cancelReply", "Cancel reply"),
+							onClick: () => Y(null),
+							"aria-label": x("conversations.cancelReply", "Cancel reply"),
 							className: "ml-auto flex min-h-9 min-w-9 items-center justify-center rounded-md hover:bg-muted/70 hover:text-foreground",
-							children: /* @__PURE__ */ p(be, { size: 12 })
+							children: /* @__PURE__ */ m(ye, { size: 12 })
 						})]
-					}), /* @__PURE__ */ m("div", {
+					}), /* @__PURE__ */ h("div", {
 						className: "flex items-end gap-2",
-						children: [/* @__PURE__ */ p("div", {
+						children: [/* @__PURE__ */ m("div", {
 							className: "flex-1 relative",
-							children: /* @__PURE__ */ p("textarea", {
-								"aria-label": b("conversations.messageComposer", "Message composer"),
-								value: T,
-								onChange: (e) => E(e.target.value),
-								onKeyDown: ze,
-								placeholder: `${b("conversations.messageConversationPrefix", "Message")} ${A.title}...`,
+							children: /* @__PURE__ */ m("textarea", {
+								"aria-label": x("conversations.messageComposer", "Message composer"),
+								value: E,
+								onChange: (e) => D(e.target.value),
+								onKeyDown: Re,
+								placeholder: `${x("conversations.messageConversationPrefix", "Message")} ${j.title}...`,
 								rows: 1,
 								className: t("w-full px-4 py-2.5 text-sm rounded-xl border border-border bg-muted/30", "resize-none overflow-hidden placeholder:text-muted-foreground", "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent max-h-32"),
 								style: {
@@ -375,55 +379,55 @@ function g() {
 									t.style.height = "auto", t.style.height = `${Math.min(t.scrollHeight, 128)}px`;
 								}
 							})
-						}), /* @__PURE__ */ p("button", {
+						}), /* @__PURE__ */ m("button", {
 							type: "button",
-							"aria-label": b("conversations.sendMessage", "Send message"),
-							onClick: () => void Q(),
-							disabled: !T.trim() || I,
-							className: t("p-2.5 rounded-xl transition-all duration-150", T.trim() && !I ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm" : "bg-muted text-muted-foreground cursor-not-allowed"),
-							children: I ? /* @__PURE__ */ p(pe, {
+							"aria-label": x("conversations.sendMessage", "Send message"),
+							onClick: () => void $(),
+							disabled: !E.trim() || L,
+							className: t("p-2.5 rounded-xl transition-all duration-150", E.trim() && !L ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm" : "bg-muted text-muted-foreground cursor-not-allowed"),
+							children: L ? /* @__PURE__ */ m(fe, {
 								size: 18,
 								className: "animate-spin"
-							}) : /* @__PURE__ */ p(ve, { size: 18 })
+							}) : /* @__PURE__ */ m(_e, { size: 18 })
 						})]
 					})]
 				})
 			]
-		}), S && A.isGroup && /* @__PURE__ */ p("aside", {
+		}), C && j.isGroup && /* @__PURE__ */ m("aside", {
 			className: "absolute inset-y-0 right-0 z-20 w-full max-w-72 border-l border-border bg-background shadow-lg animate-in slide-in-from-right-4 duration-200 md:relative md:z-auto md:w-64 md:shadow-none",
-			children: /* @__PURE__ */ m("div", {
+			children: /* @__PURE__ */ h("div", {
 				className: "p-4",
-				children: [/* @__PURE__ */ m("div", {
+				children: [/* @__PURE__ */ h("div", {
 					className: "flex items-center justify-between mb-4",
-					children: [/* @__PURE__ */ m("h3", {
+					children: [/* @__PURE__ */ h("h3", {
 						className: "text-sm font-semibold text-foreground",
 						children: [
-							b("conversations.members", "Members"),
+							x("conversations.members", "Members"),
 							" (",
-							Re.length || A.memberCount,
+							Le.length || j.memberCount,
 							")"
 						]
-					}), /* @__PURE__ */ p("button", {
+					}), /* @__PURE__ */ m("button", {
 						type: "button",
-						onClick: w,
+						onClick: T,
 						className: "p-1 rounded text-muted-foreground hover:text-foreground",
-						children: /* @__PURE__ */ p(ge, { size: 14 })
+						children: /* @__PURE__ */ m(he, { size: 14 })
 					})]
-				}), /* @__PURE__ */ p("div", {
+				}), /* @__PURE__ */ m("div", {
 					className: "space-y-1",
-					children: Re.map((e) => /* @__PURE__ */ m("div", {
+					children: Le.map((e) => /* @__PURE__ */ h("div", {
 						className: "flex items-center gap-2.5 px-2 py-1.5 rounded-lg hover:bg-muted/50",
-						children: [/* @__PURE__ */ p("div", {
+						children: [/* @__PURE__ */ m("div", {
 							className: "w-7 h-7 rounded-full bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground",
 							children: e.name.split(" ").map((e) => e[0]).join("").slice(0, 2)
-						}), /* @__PURE__ */ m("div", {
+						}), /* @__PURE__ */ h("div", {
 							className: "min-w-0",
-							children: [/* @__PURE__ */ p("p", {
+							children: [/* @__PURE__ */ m("p", {
 								className: "text-xs font-medium text-foreground truncate",
 								children: e.name
-							}), /* @__PURE__ */ p("p", {
+							}), /* @__PURE__ */ m("p", {
 								className: "text-[10px] text-muted-foreground",
-								children: b("conversations.member", "Member")
+								children: x("conversations.member", "Member")
 							})]
 						})]
 					}, e.id))
@@ -432,21 +436,22 @@ function g() {
 		})]
 	});
 }
-function _({ icon: e, label: n, onClick: r, destructive: i }) {
-	return /* @__PURE__ */ m("button", {
+function v({ icon: e, label: n, onClick: r, destructive: i }) {
+	return /* @__PURE__ */ h("button", {
 		type: "button",
 		onClick: r,
 		className: t("flex items-center gap-2.5 w-full px-3 py-2 text-sm transition-colors text-left", i ? "text-destructive hover:bg-destructive/10" : "text-foreground hover:bg-muted/50"),
-		children: [e, /* @__PURE__ */ p("span", { children: n })]
+		children: [e, /* @__PURE__ */ m("span", { children: n })]
 	});
 }
-function v({ icon: e, label: n, active: r, onClick: i }) {
-	return /* @__PURE__ */ p(a, {
-		permission: o.CONVERSATION_READ,
+function y({ icon: e, label: n, active: r, dataTour: i, onClick: a }) {
+	return /* @__PURE__ */ m(o, {
+		permission: s.CONVERSATION_READ,
 		allowUnavailablePermissions: !0,
-		children: /* @__PURE__ */ p("button", {
+		children: /* @__PURE__ */ m("button", {
+			"data-tour": i,
 			type: "button",
-			onClick: i,
+			onClick: a,
 			"aria-label": n,
 			title: n,
 			className: t("flex min-h-10 min-w-10 items-center justify-center rounded-lg transition-colors", r ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"),
@@ -455,6 +460,6 @@ function v({ icon: e, label: n, active: r, onClick: i }) {
 	});
 }
 //#endregion
-export { g as ConversationDetailPage };
+export { _ as ConversationDetailPage };
 
 //# sourceMappingURL=ConversationDetailPage.js.map