@burdenoff/microfe-conversations 2026.522.1 → 2026.523.2

package/dist/conversations/pages/ConversationDetailPage.js

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