@burdenoff/fe-libs 2026.527.2 → 2026.527.4

package/dist/shared/components/ContextConversationWidget.js

@@ -1,810 +1,216 @@
-import { Button as e } from "../../ui/button.js";
-import { useGatewayClient as t } from "../graphql/GatewayContext.js";
+import { useGatewayClient as e } from "../graphql/GatewayContext.js";
 import "../../shared-graphql.js";
-import { useAuth as n } from "../providers/shell/AuthProvider.js";
-import { useActiveContext as r } from "../providers/shell/ActiveContextProvider.js";
-import { Badge as i } from "../../ui/badge.js";
-import { Card as a, CardContent as o, CardHeader as s, CardTitle as ee } from "../../ui/card.js";
-import { Textarea as te } from "../../ui/textarea.js";
+import { useAuth as t } from "../providers/shell/AuthProvider.js";
+import { useActiveContext as n } from "../providers/shell/ActiveContextProvider.js";
+import { Card as r, CardContent as ee } from "../../ui/card.js";
 import "../../ui.js";
-import { useI18n as ne } from "../providers/shell/I18nProvider.js";
-import { usePageConversationContext as re } from "../providers/shell/PageConversationContextProvider.js";
+import { useI18n as te } from "../providers/shell/I18nProvider.js";
+import { usePageConversationContext as ne } from "../providers/shell/PageConversationContextProvider.js";
 import "../../shared-providers-shell.js";
-import { useEffect as c, useMemo as l, useRef as ie, useState as u } from "react";
-import { ChevronDown as ae, ChevronUp as oe, ExternalLink as se, Loader2 as ce, MessageCircle as le, Paperclip as ue, Pencil as de, Pin as fe, PinOff as pe, Reply as me, SendHorizontal as he, SmilePlus as ge, Trash2 as _e, X as ve } from "lucide-react";
-import { Fragment as ye, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { gql as p } from "@apollo/client";
-import { useMutation as m, useQuery as h, useSubscription as g } from "@apollo/client/react";
-import { useNavigate as be } from "react-router-dom";
+import { Composer as i } from "./contextConversationWidget/Composer.js";
+import { getSourceContext as a, getString as o, normalizeThreadSegment as s, sourceContextMatches as re } from "./contextConversationWidget/utils.js";
+import { MessageList as c } from "./contextConversationWidget/MessageList.js";
+import { NoWorkspaceCard as l } from "./contextConversationWidget/NoWorkspaceCard.js";
+import { PendingAttachmentsBar as ie } from "./contextConversationWidget/PendingAttachmentsBar.js";
+import { GET_CONTEXT_CONVERSATIONS as ae, GET_WIDGET_CONVERSATION as oe, GET_WIDGET_MESSAGES as se } from "./contextConversationWidget/queries.js";
+import { ReplyBanner as ce } from "./contextConversationWidget/ReplyBanner.js";
+import { useAttachmentUpload as le } from "./contextConversationWidget/useAttachmentUpload.js";
+import { useConversationSubscriptions as ue } from "./contextConversationWidget/useConversationSubscriptions.js";
+import { useMessageActions as de } from "./contextConversationWidget/useMessageActions.js";
+import { useSendMessage as fe } from "./contextConversationWidget/useSendMessage.js";
+import { useWidgetMessages as pe } from "./contextConversationWidget/useWidgetMessages.js";
+import { WidgetHeader as me } from "./contextConversationWidget/WidgetHeader.js";
+import { useEffect as u, useMemo as d, useRef as he, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useQuery as h } from "@apollo/client/react";
+import { useNavigate as ge } from "react-router-dom";
 //#region src/shared/components/ContextConversationWidget.tsx
-var xe = p`
-  mutation ContextConversationWidget_SendContextMessage(
-    $input: SendContextConversationMessageInput!
-  ) {
-    sendContextMessage(input: $input) {
-      success
-      message {
-        id
-        conversationId
-      }
-    }
-  }
-`, Se = p`
-  query ContextConversationWidget_GetConversation($id: ID!) {
-    conversation(id: $id) {
-      id
-      title
-      description
-      settings
-      updatedAt
-      features {
-        threads
-        reactions
-        mentions
-      }
-      currentUserMembership {
-        unreadCount
-      }
-    }
-  }
-`, Ce = p`
-  query ContextConversationWidget_GetContextConversations($first: Int) {
-    conversations(first: $first) {
-      edges {
-        node {
-          id
-          settings
-        }
-      }
-    }
-  }
-`, _ = p`
-  query ContextConversationWidget_GetMessages($conversationId: ID!, $first: Int) {
-    messages(conversationId: $conversationId, first: $first) {
-      edges {
-        node {
-          id
-          conversationId
-          type
-          status
-          content
-          authorId
-          authorType
-          parentMessageId
-          threadRootId
-          threadLevel
-          isEdited
-          editedAt
-          isPinned
-          createdAt
-          updatedAt
-          replyCount
-          permissions {
-            canEdit
-            canDelete
-            canReact
-            canReply
-            canPin
-          }
-          reactions {
-            id
-            emoji
-            userId
-            createdAt
-          }
-          attachments {
-            id
-            fileId
-            fileName
-            fileSize
-            mimeType
-            downloadUrl
-            thumbnail
-            width
-            height
-            duration
-          }
-        }
-      }
-    }
-  }
-`, we = p`
-  subscription ContextConversationWidget_MessageAdded($conversationId: ID!) {
-    messageAdded(conversationId: $conversationId) {
-      id
-      conversationId
-      type
-      status
-      content
-      authorId
-      authorType
-      parentMessageId
-      threadRootId
-      threadLevel
-      isEdited
-      editedAt
-      isPinned
-      createdAt
-      updatedAt
-      replyCount
-    }
-  }
-`, Te = p`
-  subscription ContextConversationWidget_MessageUpdated($conversationId: ID!) {
-    messageUpdated(conversationId: $conversationId) {
-      id
-      conversationId
-      content
-      isEdited
-      editedAt
-      updatedAt
-    }
-  }
-`, Ee = p`
-  subscription ContextConversationWidget_MessageDeleted($conversationId: ID!) {
-    messageDeleted(conversationId: $conversationId) {
-      messageId
-      conversationId
-    }
-  }
-`, De = p`
-  mutation ContextConversationWidget_EditMessage($input: EditMessageInput!) {
-    editMessage(input: $input) {
-      id
-      content
-      isEdited
-      editedAt
-      updatedAt
-    }
-  }
-`, Oe = p`
-  mutation ContextConversationWidget_DeleteMessage($id: ID!, $hard: Boolean) {
-    deleteMessage(id: $id, hard: $hard) {
-      success
-    }
-  }
-`, ke = p`
-  mutation ContextConversationWidget_AddReaction($messageId: ID!, $emoji: String!) {
-    addReaction(messageId: $messageId, emoji: $emoji) {
-      id
-    }
-  }
-`, Ae = p`
-  mutation ContextConversationWidget_RemoveReaction($messageId: ID!, $emoji: String!) {
-    removeReaction(messageId: $messageId, emoji: $emoji) {
-      success
-    }
-  }
-`, je = p`
-  mutation ContextConversationWidget_PinMessage($messageId: ID!) {
-    pinMessage(messageId: $messageId) {
-      id
-    }
-  }
-`, Me = p`
-  mutation ContextConversationWidget_UnpinMessage($messageId: ID!) {
-    unpinMessage(messageId: $messageId) {
-      id
-    }
-  }
-`, Ne = p`
-  mutation ContextConversationWidget_InitiateUpload($input: InitiateUploadInput!) {
-    initiateUpload(input: $input) {
-      uploadUrl
-      session {
-        id
-      }
-    }
-  }
-`, Pe = p`
-  mutation ContextConversationWidget_CompleteUpload($input: CompleteUploadInput!) {
-    completeUpload(input: $input) {
-      fileId
-      file {
-        id
-        name
-        mimeType
-        size
-        downloadUrl
-      }
-    }
-  }
-`, Fe = [
-	"👍",
-	"❤️",
-	"🎉",
-	"👀",
-	"✅"
-], Ie = 5 * 1024 * 1024;
-function v(e) {
-	return e.trim().toLowerCase().replace(/[^a-z0-9:_/-]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-}
-function y(e) {
-	if (typeof e != "string" || !e.trim()) return null;
-	try {
-		let t = typeof window < "u" ? window.location.origin : "http://local";
-		return v(new URL(e, t).pathname);
-	} catch {
-		return v(e.split(/[?#]/)[0] ?? e);
-	}
-}
-function b(e) {
-	return typeof e == "string" && e.trim() ? e : null;
-}
-function Le(e) {
-	if (!e || typeof e != "object" || Array.isArray(e)) return null;
-	let t = e.metadata;
-	if (!t || typeof t != "object" || Array.isArray(t)) return null;
-	let n = t.sourceContext;
-	return n && typeof n == "object" && !Array.isArray(n) ? n : null;
-}
-function Re(e, t) {
-	if (!e) return !1;
-	let n = b(e.product);
-	if (n && n !== t.product) return !1;
-	let r = b(e.widgetKey);
-	if (r && r !== t.widgetKey) return !1;
-	if (b(e.threadKey) === t.threadKey) return !0;
-	let i = b(e.entityType), a = b(e.entityId);
-	if (i && a && i === t.entityType && a === t.entityId) return !0;
-	let o = [y(e.pagePath), y(e.contextHref)].filter((e) => !!e), s = [y(t.pagePath), y(t.contextHref)].filter((e) => !!e);
-	return o.some((e) => s.includes(e));
-}
-function ze(e) {
-	if (typeof e == "string") return e;
-	if (e && typeof e == "object") {
-		let t = e;
-		if (typeof t.text == "string") return t.text;
-		if (typeof t.markdown == "string") return t.markdown;
-		if (typeof t.html == "string") return t.html;
-	}
-	return "";
-}
-function Be(e) {
-	return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
-}
-function Ve(e) {
-	return new Date(e).toLocaleTimeString([], {
-		hour: "2-digit",
-		minute: "2-digit"
-	});
-}
-function x({ className: p, widgetKey: y }) {
-	let { t: x } = ne(), { workspaceId: S } = r(), C = n(), w = re(), T = t("workspace"), E = be(), [D, O] = u(null), [He, k] = u(null), [A, j] = u(""), [M, Ue] = u(() => typeof window < "u" ? window.innerWidth < 768 : !1), [N, P] = u(null), [F, I] = u(null), [L, R] = u(""), [z, We] = u(!1), [B, V] = u([]), [Ge, H] = u(null), [Ke, qe] = u([]), [Je, Ye] = u(!1), U = ie(null), Xe = ie(null), W = l(() => (e, t) => {
-		let n = x(e);
+function g({ className: g, widgetKey: _ }) {
+	let { t: v } = te(), { workspaceId: y } = n(), b = t(), x = ne(), S = e("workspace"), C = ge(), [w, T] = f(null), [E, D] = f(null), [O, k] = f(""), [A, _e] = f(() => typeof window < "u" ? window.innerWidth < 768 : !1), [j, M] = f(null), [N, P] = f(null), [F, I] = f(""), [L, R] = f(null), [z, B] = f([]), V = he(null), H = d(() => (e, t) => {
+		let n = v(e);
 		return n === e ? t : n;
-	}, [x]), G = C.user?.id ?? null, K = y ?? w.widgetKey ?? "default", q = T, J = l(() => {
-		let e = v(w.entityType && w.entityId ? `${w.entityType}:${w.entityId}` : w.pagePath || w.contextHref), t = v(K);
+	}, [v]), U = b.user?.id ?? null, W = _ ?? x.widgetKey ?? "default", G = d(() => {
+		let e = x.entityType && x.entityId ? `${x.entityType}:${x.entityId}` : x.pagePath || x.contextHref;
 		return {
-			...w,
-			widgetKey: K,
-			threadKey: `${w.product}:${S}:${e}:widget:${t}`
+			...x,
+			widgetKey: W,
+			threadKey: `${x.product}:${y}:${s(e)}:widget:${s(W)}`
 		};
 	}, [
-		K,
-		w,
-		S
+		W,
+		x,
+		y
 	]);
-	c(() => {
-		O(null), k(null), P(null), I(null), R(""), H(null);
-	}, [J.threadKey]);
-	let [Ze] = m(De, { client: q }), [Qe] = m(Oe, { client: q }), [$e] = m(ke, { client: q }), [et] = m(Ae, { client: q }), [tt] = m(je, { client: q }), [nt] = m(Me, { client: q }), [rt] = m(Ne, { client: T }), [it] = m(Pe, { client: T }), Y = h(Se, {
-		client: q,
-		variables: { id: D },
-		skip: !D,
+	u(() => {
+		T(null), D(null), M(null), P(null), I(""), R(null);
+	}, [G.threadKey]);
+	let K = h(oe, {
+		client: S,
+		variables: { id: w },
+		skip: !w,
 		pollInterval: 3e5,
 		fetchPolicy: "cache-and-network"
-	}), at = h(Ce, {
-		client: q,
+	}), q = h(ae, {
+		client: S,
 		variables: { first: 100 },
-		skip: !S || !G || !!D,
+		skip: !y || !U || !!w,
 		fetchPolicy: "cache-and-network"
-	}), X = h(_, {
-		client: q,
+	}), J = h(se, {
+		client: S,
 		variables: {
-			conversationId: D,
+			conversationId: w,
 			first: 100
 		},
-		skip: !D,
+		skip: !w,
 		fetchPolicy: "cache-and-network"
 	});
-	g(we, {
-		client: q,
-		variables: { conversationId: D || "" },
-		skip: !D,
-		onData: ({ data: e, client: t }) => {
-			e.data?.messageAdded && t.refetchQueries({ include: [_] });
-		}
-	}), g(Te, {
-		client: q,
-		variables: { conversationId: D || "" },
-		skip: !D
-	}), g(Ee, {
-		client: q,
-		variables: { conversationId: D || "" },
-		skip: !D,
-		onData: ({ client: e }) => {
-			e.refetchQueries({ include: [_] });
-		}
-	});
-	let ot = (Y.data?.conversation?.settings ?? {}).metadata?.sourceContext, st = typeof ot?.contextHref == "string" ? ot.contextHref : J.contextHref, Z = l(() => (X.data?.messages?.edges ?? []).map((e) => {
-		let t = e.node;
-		return {
-			id: String(t.id ?? ""),
-			conversationId: String(t.conversationId ?? ""),
-			content: ze(t.content),
-			authorId: String(t.authorId ?? ""),
-			parentMessageId: t.parentMessageId ? String(t.parentMessageId) : void 0,
-			threadLevel: Number(t.threadLevel ?? 0),
-			replyCount: Number(t.replyCount ?? 0),
-			createdAt: String(t.createdAt ?? (/* @__PURE__ */ new Date()).toISOString()),
-			updatedAt: String(t.updatedAt ?? (/* @__PURE__ */ new Date()).toISOString()),
-			isEdited: !!t.isEdited,
-			isPinned: !!t.isPinned,
-			permissions: {
-				canEdit: !!t.permissions?.canEdit,
-				canDelete: !!t.permissions?.canDelete,
-				canReact: !!(t.permissions?.canReact ?? !0),
-				canReply: !!(t.permissions?.canReply ?? !0),
-				canPin: !!t.permissions?.canPin
-			},
-			reactions: (t.reactions ?? []).map((e) => ({
-				id: String(e.id ?? ""),
-				emoji: String(e.emoji ?? ""),
-				userId: String(e.userId ?? "")
-			})),
-			attachments: (t.attachments ?? []).map((e) => ({
-				id: String(e.id ?? ""),
-				fileId: String(e.fileId ?? ""),
-				fileName: String(e.fileName ?? e.fileId ?? "Attachment"),
-				fileSize: Number(e.fileSize ?? 0),
-				mimeType: String(e.mimeType ?? "application/octet-stream"),
-				downloadUrl: e.downloadUrl ? String(e.downloadUrl) : null,
-				thumbnail: e.thumbnail ? String(e.thumbnail) : null
-			}))
-		};
-	}), [X.data]);
-	c(() => {
-		if (D) return;
-		let e = (at.data?.conversations?.edges ?? []).find((e) => Re(Le(e.node?.settings), J)), t = e?.node?.id;
-		t && (O(t), k(b(Le(e.node?.settings)?.threadKey) ?? J.threadKey));
+	ue(S, w);
+	let Y = le({
+		workspaceClient: S,
+		onError: R
+	}), X = de({
+		client: S,
+		currentUserId: U,
+		refetchMessages: () => J.refetch()
+	}), Z = fe({
+		client: S,
+		workspaceId: y,
+		onError: R
+	}), Q = pe(J.data), ve = d(() => {
+		let e = (K.data?.conversation?.settings ?? {}).metadata?.sourceContext;
+		return typeof e?.contextHref == "string" ? e.contextHref : G.contextHref;
+	}, [K.data, G.contextHref]);
+	u(() => {
+		if (w) return;
+		let e = (q.data?.conversations?.edges ?? []).find((e) => re(a(e.node?.settings), G));
+		e?.node?.id && (T(e.node.id), D(o(a(e.node?.settings)?.threadKey) ?? G.threadKey));
 	}, [
-		at.data,
-		D,
-		J
+		q.data,
+		w,
+		G
 	]);
-	let ct = l(() => {
-		let e = /* @__PURE__ */ new Map();
-		G && e.set(G, {
-			id: G,
-			label: C.user?.name || C.user?.email || G
+	let ye = d(() => {
+		let e = O.match(/(^|\s)@([^\s@]*)$/)?.[2]?.toLowerCase() ?? null;
+		if (!e) return [];
+		let t = /* @__PURE__ */ new Map();
+		U && t.set(U, {
+			id: U,
+			label: b.user?.name || b.user?.email || U
 		});
-		for (let t of Z) e.has(t.authorId) || e.set(t.authorId, {
-			id: t.authorId,
-			label: t.authorId
+		for (let e of Q) t.has(e.authorId) || t.set(e.authorId, {
+			id: e.authorId,
+			label: e.authorId
 		});
-		return Array.from(e.values());
+		return Array.from(t.values()).filter((t) => `${t.label} ${t.id}`.toLowerCase().includes(e));
 	}, [
-		C.user?.email,
-		C.user?.name,
-		G,
-		Z
-	]), Q = l(() => A.match(/(^|\s)@([^\s@]*)$/)?.[2]?.toLowerCase() ?? null, [A]), lt = l(() => Q ? ct.filter((e) => `${e.label} ${e.id}`.toLowerCase().includes(Q)) : [], [Q, ct]), $ = l(() => {
-		let e = Y.data?.conversation?.features;
+		O,
+		b.user?.email,
+		b.user?.name,
+		U,
+		Q
+	]), $ = d(() => {
+		let e = K.data?.conversation?.features;
 		return {
 			threads: !!(e?.threads ?? !0),
 			reactions: !!(e?.reactions ?? !0),
 			mentions: !!(e?.mentions ?? !0)
 		};
-	}, [Y.data]);
-	if (c(() => {
-		Xe.current?.scrollIntoView({ behavior: "smooth" });
-	}, [Z.length, M]), !G) return null;
-	if (!S) return /* @__PURE__ */ f(a, {
-		className: p,
-		children: [/* @__PURE__ */ d(s, { children: /* @__PURE__ */ f(ee, {
-			className: "flex items-center gap-2 text-base",
-			children: [/* @__PURE__ */ d(le, { className: "h-4 w-4" }), W("conversationWidget.title", "Page conversation")]
-		}) }), /* @__PURE__ */ d(o, { children: /* @__PURE__ */ d("p", {
-			className: "text-sm text-muted-foreground",
-			children: W("conversationWidget.noWorkspace", "Select a workspace to enable contextual conversations on this page.")
-		}) })]
+	}, [K.data]);
+	if (u(() => {
+		V.current?.scrollIntoView({ behavior: "smooth" });
+	}, [Q.length, A]), !U) return null;
+	if (!y) return /* @__PURE__ */ p(l, {
+		className: g,
+		tr: H
 	});
-	let ut = async (e) => {
-		if (!(!e || e.length === 0)) {
-			We(!0), H(null);
-			try {
-				let t = [];
-				for (let n of Array.from(e)) {
-					if (n.size > Ie) throw Error(`${n.name} exceeds the 5 MB widget upload limit.`);
-					let e = n.name.includes(".") ? n.name.split(".").pop() ?? "bin" : "bin", r = await rt({ variables: { input: {
-						fileName: n.name,
-						fileSize: n.size,
-						mimeType: n.type || "application/octet-stream",
-						extension: e,
-						visibility: "PRIVATE"
-					} } }), i = r.data?.initiateUpload?.uploadUrl, a = r.data?.initiateUpload?.session?.id;
-					if (!i || !a) throw Error(`Unable to create an upload session for ${n.name}`);
-					if (!(await fetch(i, {
-						method: "PUT",
-						body: n,
-						headers: { "Content-Type": n.type || "application/octet-stream" }
-					})).ok) throw Error(`Upload failed for ${n.name}`);
-					let o = (await it({ variables: { input: { sessionId: a } } })).data?.completeUpload;
-					if (!o?.fileId) throw Error(`Failed to finalize ${n.name}`);
-					t.push({
-						fileId: o.fileId,
-						fileName: o.file?.name ?? n.name,
-						fileSize: Number(o.file?.size ?? n.size),
-						mimeType: o.file?.mimeType ?? n.type,
-						downloadUrl: o.file?.downloadUrl ?? null
-					});
-				}
-				V((e) => [...e, ...t]);
-			} catch (e) {
-				H(e instanceof Error ? e.message : "File upload failed");
-			} finally {
-				We(!1), U.current && (U.current.value = "");
-			}
-		}
-	}, dt = async () => {
-		if (!(!S || !A.trim())) {
-			H(null), Ye(!0);
-			try {
-				let e = await q.mutate({
-					mutation: xe,
-					errorPolicy: "none",
-					variables: { input: {
-						workspaceId: S,
-						sourceContext: {
-							...J,
-							threadKey: He ?? J.threadKey
-						},
-						content: { text: A.trim() },
-						type: "TEXT",
-						parentMessageId: N?.id,
-						mentionUserIds: Array.from(new Set(Ke)),
-						attachments: B.map((e) => ({
-							fileId: e.fileId,
-							fileName: e.fileName,
-							fileSize: e.fileSize,
-							mimeType: e.mimeType,
-							downloadUrl: e.downloadUrl
-						}))
-					} }
-				});
-				if (!e.data?.sendContextMessage?.success) throw Error("Failed to send message");
-				let t = e.data.sendContextMessage.message?.conversationId;
-				t && (O(String(t)), k(He ?? J.threadKey)), j(""), P(null), V([]), qe([]), D && (await X.refetch(), await Y.refetch());
-			} catch (e) {
-				H(e instanceof Error ? e.message : "Failed to send message");
-			} finally {
-				Ye(!1);
-			}
-		}
-	}, ft = (e) => {
-		j((t) => t.replace(/(^|\s)@([^\s@]*)$/, `$1@${e.label} `)), qe((t) => Array.from(new Set([...t, e.id])));
-	}, pt = async () => {
-		!F || !L.trim() || (await Ze({ variables: { input: {
-			id: F,
-			content: { text: L.trim() }
-		} } }), I(null), R(""), await X.refetch());
-	}, mt = async (e, t) => {
-		e.reactions.some((e) => e.emoji === t && e.userId === G) ? await et({ variables: {
-			messageId: e.id,
-			emoji: t
-		} }) : await $e({ variables: {
-			messageId: e.id,
-			emoji: t
-		} }), await X.refetch();
-	}, ht = async (e) => {
-		e.isPinned ? await nt({ variables: { messageId: e.id } }) : await tt({ variables: { messageId: e.id } }), await X.refetch();
+	let be = async () => {
+		R(null);
+		let e = await Z.send({
+			resolvedContext: G,
+			conversationThreadKey: E,
+			text: O,
+			parentMessageId: j?.id,
+			mentionUserIds: z,
+			attachments: Y.pendingAttachments
+		});
+		e === null && !O.trim() || (e && (T(e), D(E ?? G.threadKey)), k(""), M(null), Y.clearPendingAttachments(), B([]), w && (await J.refetch(), await K.refetch()));
+	}, xe = (e) => {
+		k((t) => t.replace(/(^|\s)@([^\s@]*)$/, `$1@${e.label} `)), B((t) => Array.from(new Set([...t, e.id])));
+	}, Se = async () => {
+		!N || !F.trim() || (await X.saveEdit(N, F.trim()), P(null), I(""));
 	};
-	return /* @__PURE__ */ f(a, {
-		className: p,
-		children: [/* @__PURE__ */ f(s, {
-			className: "space-y-3",
-			children: [/* @__PURE__ */ f("div", {
-				className: "flex flex-col gap-3 md:flex-row md:items-start md:justify-between",
-				children: [/* @__PURE__ */ f("div", {
-					className: "space-y-1",
-					children: [/* @__PURE__ */ f(ee, {
-						className: "flex items-center gap-2 text-base",
-						children: [/* @__PURE__ */ d(le, { className: "h-4 w-4" }), Y.data?.conversation?.title || w.contextTitle || W("conversationWidget.title", "Page conversation")]
-					}), /* @__PURE__ */ d("p", {
-						className: "text-sm text-muted-foreground truncate whitespace-nowrap overflow-hidden max-w-full",
-						title: w.entityType && w.entityId ? `${w.entityType} · ${w.entityId}` : w.pagePath,
-						children: w.entityType && w.entityId ? `${w.entityType} · ${w.entityId}` : w.pagePath
-					})]
-				}), /* @__PURE__ */ f("div", {
-					className: "flex flex-wrap items-center gap-2 md:justify-end",
-					children: [
-						/* @__PURE__ */ f(e, {
-							type: "button",
-							variant: "outline",
-							size: "sm",
-							onClick: () => {
-								try {
-									let e = new URL(st);
-									E(`${e.pathname}${e.search}${e.hash}`);
-								} catch {
-									E(w.pagePath);
-								}
-							},
-							children: [/* @__PURE__ */ d(se, { className: "mr-2 h-4 w-4" }), W("conversationWidget.openContext", "Open context")]
-						}),
-						/* @__PURE__ */ d(e, {
-							type: "button",
-							"data-tour": "page-discussion-open-full",
-							variant: "outline",
-							size: "sm",
-							onClick: () => {
-								D && E(`/conversations/${D}`);
-							},
-							disabled: !D,
-							children: W("conversationWidget.openInbox", "Open in conversations")
-						}),
-						/* @__PURE__ */ d(e, {
-							type: "button",
-							variant: "ghost",
-							size: "icon",
-							onClick: () => Ue((e) => !e),
-							"aria-label": M ? W("conversationWidget.expand", "Expand page conversation") : W("conversationWidget.collapse", "Collapse page conversation"),
-							children: d(M ? ae : oe, { className: "h-4 w-4" })
-						})
-					]
-				})]
-			}), /* @__PURE__ */ f("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: [
-					/* @__PURE__ */ d(i, {
-						variant: "secondary",
-						children: J.widgetKey
-					}),
-					J.activeTab ? /* @__PURE__ */ d(i, {
-						variant: "outline",
-						children: J.activeTab
-					}) : null,
-					Y.data?.conversation?.currentUserMembership?.unreadCount ? /* @__PURE__ */ f(i, { children: [Y.data.conversation.currentUserMembership.unreadCount, " unread"] }) : null
-				]
-			})]
-		}), !M && /* @__PURE__ */ f(o, {
+	return /* @__PURE__ */ m(r, {
+		className: g,
+		children: [/* @__PURE__ */ p(me, {
+			conversationTitle: K.data?.conversation?.title,
+			pageContext: x,
+			resolvedContext: G,
+			unreadCount: K.data?.conversation?.currentUserMembership?.unreadCount,
+			conversationId: w,
+			collapsed: A,
+			onToggleCollapsed: () => _e((e) => !e),
+			onOpenContext: () => {
+				try {
+					let e = new URL(ve);
+					C(`${e.pathname}${e.search}${e.hash}`);
+				} catch {
+					C(x.pagePath);
+				}
+			},
+			onOpenInbox: () => w && C(`/conversations/${w}`),
+			tr: H
+		}), !A && /* @__PURE__ */ m(ee, {
 			className: "space-y-4",
 			children: [
-				Ge && /* @__PURE__ */ d("div", {
+				L && /* @__PURE__ */ p("div", {
 					className: "rounded-md border border-destructive/20 bg-destructive/10 px-3 py-2 text-sm text-destructive",
-					children: Ge
+					children: L
 				}),
-				/* @__PURE__ */ d("div", {
-					className: "max-h-[24rem] overflow-y-auto rounded-lg border border-border bg-muted/20",
-					children: /* @__PURE__ */ f("div", {
-						className: "space-y-3 p-4",
-						children: [Z.length === 0 ? /* @__PURE__ */ d("div", {
-							className: "rounded-lg border border-dashed border-border bg-background/70 px-4 py-5 text-sm text-muted-foreground",
-							children: W("conversationWidget.empty", "No messages yet. Start the conversation in context.")
-						}) : Z.map((t) => {
-							let n = t.authorId === G;
-							return /* @__PURE__ */ d("div", {
-								className: `flex ${n ? "justify-end" : "justify-start"}`,
-								children: /* @__PURE__ */ f("div", {
-									className: `w-full max-w-full rounded-xl border px-3 py-2 text-sm shadow-sm sm:max-w-[92%] ${n ? "border-primary/20 bg-primary/5" : "border-border bg-background"}`,
-									children: [
-										/* @__PURE__ */ f("div", {
-											className: "mb-1 flex items-center justify-between gap-2",
-											children: [/* @__PURE__ */ f("div", {
-												className: "flex items-center gap-2 text-xs text-muted-foreground",
-												children: [
-													/* @__PURE__ */ d("span", {
-														className: "font-medium text-foreground",
-														children: n ? W("conversationWidget.you", "You") : t.authorId
-													}),
-													/* @__PURE__ */ d("span", { children: Ve(t.createdAt) }),
-													t.isEdited ? /* @__PURE__ */ d("span", { children: W("conversationWidget.edited", "edited") }) : null,
-													t.isPinned ? /* @__PURE__ */ d(fe, { className: "h-3 w-3" }) : null
-												]
-											}), /* @__PURE__ */ d("div", {
-												className: "flex items-center gap-1",
-												children: $.reactions && t.permissions.canReact ? Fe.map((e) => {
-													let n = t.reactions.filter((t) => t.emoji === e).length;
-													return /* @__PURE__ */ f("button", {
-														type: "button",
-														className: `min-h-9 rounded-full px-2.5 py-1 text-xs transition-colors ${t.reactions.some((t) => t.emoji === e && t.userId === G) ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80"}`,
-														onClick: () => void mt(t, e),
-														children: [e, n > 0 ? ` ${n}` : ""]
-													}, `${t.id}-${e}`);
-												}) : null
-											})]
-										}),
-										F === t.id ? /* @__PURE__ */ f("div", {
-											className: "space-y-2",
-											children: [/* @__PURE__ */ d(te, {
-												value: L,
-												onChange: (e) => R(e.target.value),
-												rows: 3
-											}), /* @__PURE__ */ f("div", {
-												className: "flex flex-wrap items-center justify-end gap-2",
-												children: [/* @__PURE__ */ d(e, {
-													type: "button",
-													variant: "outline",
-													size: "sm",
-													onClick: () => I(null),
-													children: W("conversationWidget.cancel", "Cancel")
-												}), /* @__PURE__ */ d(e, {
-													type: "button",
-													size: "sm",
-													onClick: () => void pt(),
-													children: W("conversationWidget.save", "Save")
-												})]
-											})]
-										}) : /* @__PURE__ */ f(ye, { children: [t.parentMessageId ? /* @__PURE__ */ d("p", {
-											className: "mb-1 text-xs text-muted-foreground",
-											children: W("conversationWidget.replyingInThread", "Reply in thread")
-										}) : null, /* @__PURE__ */ d("p", {
-											className: "whitespace-pre-wrap break-words text-sm text-foreground",
-											children: t.content
-										})] }),
-										t.attachments.length > 0 ? /* @__PURE__ */ d("div", {
-											className: "mt-3 flex flex-col gap-2",
-											children: t.attachments.map((e) => /* @__PURE__ */ f("a", {
-												href: e.downloadUrl ?? "#",
-												target: e.downloadUrl ? "_blank" : void 0,
-												rel: e.downloadUrl ? "noreferrer" : void 0,
-												className: "flex items-center justify-between gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-xs",
-												children: [/* @__PURE__ */ d("span", {
-													className: "truncate",
-													children: e.fileName
-												}), /* @__PURE__ */ d("span", {
-													className: "text-muted-foreground",
-													children: Be(e.fileSize)
-												})]
-											}, e.id))
-										}) : null,
-										/* @__PURE__ */ f("div", {
-											className: "mt-3 flex flex-wrap items-center gap-2 text-xs",
-											children: [
-												$.threads && t.permissions.canReply ? /* @__PURE__ */ f(e, {
-													type: "button",
-													variant: "ghost",
-													size: "sm",
-													onClick: () => P(t),
-													children: [/* @__PURE__ */ d(me, { className: "mr-2 h-3 w-3" }), W("conversationWidget.reply", "Reply")]
-												}) : null,
-												t.permissions.canEdit && F !== t.id ? /* @__PURE__ */ f(e, {
-													type: "button",
-													variant: "ghost",
-													size: "sm",
-													onClick: () => {
-														I(t.id), R(t.content);
-													},
-													children: [/* @__PURE__ */ d(de, { className: "mr-2 h-3 w-3" }), W("conversationWidget.edit", "Edit")]
-												}) : null,
-												t.permissions.canDelete ? /* @__PURE__ */ f(e, {
-													type: "button",
-													variant: "ghost",
-													size: "sm",
-													onClick: async () => {
-														await Qe({ variables: {
-															id: t.id,
-															hard: !1
-														} }), await X.refetch();
-													},
-													children: [/* @__PURE__ */ d(_e, { className: "mr-2 h-3 w-3" }), W("conversationWidget.delete", "Delete")]
-												}) : null,
-												t.permissions.canPin ? /* @__PURE__ */ f(e, {
-													type: "button",
-													variant: "ghost",
-													size: "sm",
-													onClick: () => void ht(t),
-													children: [t.isPinned ? /* @__PURE__ */ d(pe, { className: "mr-2 h-3 w-3" }) : /* @__PURE__ */ d(fe, { className: "mr-2 h-3 w-3" }), t.isPinned ? W("conversationWidget.unpin", "Unpin") : W("conversationWidget.pin", "Pin")]
-												}) : null
-											]
-										})
-									]
-								})
-							}, t.id);
-						}), /* @__PURE__ */ d("div", { ref: Xe })]
-					})
+				/* @__PURE__ */ p(c, {
+					messages: Q,
+					currentUserId: U,
+					featureFlags: $,
+					editingMessageId: N,
+					editingValue: F,
+					messageEndRef: V,
+					onEditValueChange: I,
+					onStartEdit: (e) => {
+						P(e.id), I(e.content);
+					},
+					onCancelEdit: () => P(null),
+					onSaveEdit: () => void Se(),
+					onSetReplyTarget: M,
+					onToggleReaction: (e, t) => void X.toggleReaction(e, t),
+					onDelete: (e) => void X.deleteMessageAction(e),
+					onTogglePin: (e) => void X.togglePin(e),
+					tr: H
 				}),
-				N ? /* @__PURE__ */ f("div", {
-					className: "flex items-center justify-between gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-sm",
-					children: [/* @__PURE__ */ f("div", {
-						className: "min-w-0",
-						children: [/* @__PURE__ */ f("p", {
-							className: "text-xs text-muted-foreground",
-							children: [
-								W("conversationWidget.replyingTo", "Replying to"),
-								" ",
-								N.authorId
-							]
-						}), /* @__PURE__ */ d("p", {
-							className: "truncate",
-							children: N.content
-						})]
-					}), /* @__PURE__ */ d(e, {
-						type: "button",
-						variant: "ghost",
-						size: "icon",
-						onClick: () => P(null),
-						children: /* @__PURE__ */ d(ve, { className: "h-4 w-4" })
-					})]
+				j ? /* @__PURE__ */ p(ce, {
+					replyTarget: j,
+					onClear: () => M(null),
+					tr: H
 				}) : null,
-				B.length > 0 ? /* @__PURE__ */ d("div", {
-					className: "flex flex-wrap gap-2",
-					children: B.map((e) => /* @__PURE__ */ f(i, {
-						variant: "secondary",
-						className: "gap-2 py-1.5",
-						children: [
-							/* @__PURE__ */ d(ue, { className: "h-3 w-3" }),
-							/* @__PURE__ */ d("span", {
-								className: "max-w-[14rem] truncate",
-								children: e.fileName
-							}),
-							/* @__PURE__ */ d("button", {
-								type: "button",
-								onClick: () => V((t) => t.filter((t) => t.fileId !== e.fileId)),
-								children: /* @__PURE__ */ d(ve, { className: "h-3 w-3" })
-							})
-						]
-					}, e.fileId))
+				Y.pendingAttachments.length > 0 ? /* @__PURE__ */ p(ie, {
+					attachments: Y.pendingAttachments,
+					onRemove: Y.removePendingAttachment
 				}) : null,
-				/* @__PURE__ */ f("div", {
-					"data-tour": "page-discussion-composer",
-					className: "space-y-3 rounded-lg border border-border bg-background/80 p-3",
-					children: [
-						/* @__PURE__ */ d(te, {
-							value: A,
-							onChange: (e) => j(e.target.value),
-							rows: 3,
-							placeholder: W("conversationWidget.placeholder", "Discuss this page in context…"),
-							className: "border-0 bg-transparent px-0 shadow-none focus-visible:ring-0"
-						}),
-						$.mentions && lt.length > 0 ? /* @__PURE__ */ f("div", {
-							className: "flex flex-wrap gap-2 rounded-md border border-border bg-muted/20 p-2",
-							children: [/* @__PURE__ */ d(ge, { className: "mt-0.5 h-4 w-4 text-muted-foreground" }), lt.map((t) => /* @__PURE__ */ f(e, {
-								type: "button",
-								variant: "outline",
-								size: "sm",
-								onClick: () => ft(t),
-								children: ["@", t.label]
-							}, t.id))]
-						}) : null,
-						/* @__PURE__ */ f("div", {
-							className: "flex flex-col gap-3 md:flex-row md:items-center md:justify-between",
-							children: [/* @__PURE__ */ f("div", {
-								className: "flex flex-wrap items-center gap-2",
-								children: [
-									/* @__PURE__ */ d("input", {
-										ref: U,
-										type: "file",
-										multiple: !0,
-										className: "hidden",
-										onChange: (e) => void ut(e.target.files)
-									}),
-									/* @__PURE__ */ f(e, {
-										type: "button",
-										variant: "outline",
-										size: "sm",
-										onClick: () => U.current?.click(),
-										disabled: z,
-										children: [z ? /* @__PURE__ */ d(ce, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ d(ue, { className: "mr-2 h-4 w-4" }), W("conversationWidget.attach", "Attach files")]
-									}),
-									$.mentions ? /* @__PURE__ */ d(i, {
-										variant: "outline",
-										children: W("conversationWidget.mentionsHint", "Type @ to mention participants")
-									}) : null
-								]
-							}), /* @__PURE__ */ f(e, {
-								type: "button",
-								onClick: () => void dt(),
-								disabled: Je || z || !A.trim(),
-								children: [Je ? /* @__PURE__ */ d(ce, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ d(he, { className: "mr-2 h-4 w-4" }), W("conversationWidget.send", "Send")]
-							})]
-						})
-					]
+				/* @__PURE__ */ p(i, {
+					composerValue: O,
+					onComposerChange: k,
+					fileInputRef: Y.fileInputRef,
+					onFilesSelected: (e) => void Y.handleUploadFiles(e),
+					onAttachClick: () => Y.fileInputRef.current?.click(),
+					onSend: () => void be(),
+					uploading: Y.uploading,
+					isSendingMessage: Z.isSending,
+					featureFlags: $,
+					mentionSuggestions: ye,
+					onSelectMention: xe,
+					tr: H
 				})
 			]
 		})]
 	});
 }
 //#endregion
-export { x as ContextConversationWidget };
+export { g as ContextConversationWidget };