@fluid-app/portal-sdk 0.1.232 → 0.1.234

package/dist/{MessagingScreen-CxpLlTW_.cjs → MessagingScreen-CKWiOb9l.cjs}

@@ -1,6 +1,9 @@
 const require_chunk = require("./chunk-9hOWP6kD.cjs");
-const require_FluidProvider = require("./FluidProvider-BNL_Apw2.cjs");
+const require_FluidProvider = require("./FluidProvider-BE05KBep.cjs");
 const require_src = require("./src-DpFIi-nj.cjs");
+const require_ScreenHeaderContext = require("./ScreenHeaderContext-oIu5Bvhs.cjs");
+const require_use_account = require("./use-account-DcBCP06c.cjs");
+const require_use_store = require("./use-store-lOOUcpRT.cjs");
 const require_format = require("./format-CytB2M00.cjs");
 const require_dist = require("./dist-DbRTQ2QF.cjs");
 const require_es = require("./es-UfEBhcZD.cjs");
@@ -19,11 +22,24 @@ let node_path = require("node:path");
 let node_url = require("node:url");
 //#region src/messaging/use-messaging-auth.ts
 function useMessagingAuth() {
+	const accountQuery = require_use_account.useAccount();
+	const storeQuery = require_use_store.useStore();
+	const account = accountQuery.data;
+	const recipientId = account?.recipient_id ?? null;
 	return {
-		recipientId: null,
-		companyId: null,
-		currentUser: null,
-		isLoading: false
+		recipientId,
+		companyId: storeQuery.data?.id ?? null,
+		currentUser: account && recipientId != null ? {
+			id: account.id,
+			recipientId,
+			firstName: account.first_name,
+			lastName: account.last_name,
+			email: account.email,
+			affiliateId: account.id,
+			...account.avatar_url != null && { imageUrl: account.avatar_url }
+		} : null,
+		isLoading: accountQuery.isLoading || storeQuery.isLoading,
+		isError: accountQuery.isError || storeQuery.isError
 	};
 }
 //#endregion
@@ -44,7 +60,9 @@ var MessagingApiError = class extends require_FluidProvider.ApiError {
 * Arrays: key[]=val, nested objects: key[subkey]=val
 */
 function buildUrl(baseUrl, endpoint, params) {
-	const url = new URL(`${baseUrl}${endpoint}`);
+	const path = `${baseUrl}${endpoint}`;
+	if (typeof window === "undefined" && !/^https?:/i.test(path)) throw new Error("messaging-api-client: relative baseUrl is not supported outside the browser");
+	const url = /^https?:/i.test(path) ? new URL(path) : new URL(path, window.location.origin);
 	if (!params) return url.toString();
 	for (const [key, value] of Object.entries(params)) {
 		if (value === void 0 || value === null) continue;
@@ -3319,6 +3337,21 @@ function goodTry(tryFn) {
 //#region ../../../node_modules/.pnpm/use-local-storage-state@19.5.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/use-local-storage-state/index.js
 var use_local_storage_state_default = useLocalStorageState;
 //#endregion
+//#region ../../messaging/ui/src/utils/render-helpers.tsx
+/**
+* Default image renderer using a plain <img> tag.
+* Used as a fallback when no framework-specific renderImage is provided.
+*/
+function defaultRenderImage(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: props.src,
+		alt: props.alt,
+		width: props.width,
+		height: props.height,
+		className: props.className
+	});
+}
+//#endregion
 //#region ../../messaging/ui/src/utils/avatar-utils.ts
 const AVATAR_COLORS = [
 	"#6d7989",
@@ -3414,19 +3447,84 @@ function GroupAvatars({ conversation, currentUserId, groupSize = GROUP_MAX, rend
 	});
 }
 //#endregion
-//#region ../../messaging/ui/src/utils/render-helpers.tsx
-/**
-* Default image renderer using a plain <img> tag.
-* Used as a fallback when no framework-specific renderImage is provided.
-*/
-function defaultRenderImage(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src: props.src,
-		alt: props.alt,
-		width: props.width,
-		height: props.height,
-		className: props.className
-	});
+//#region ../../messaging/ui/src/app/MessagesHeaderActions.tsx
+function MessagesHeaderActions({ conversation, currentUser, navigation, renderImage }) {
+	if (!conversation || !currentUser) return null;
+	const affiliateId = currentUser.affiliateId;
+	const messageType = getMessageType(conversation).type;
+	const conversationId = conversation.id;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		(messageType === "broadcast" || messageType === "private-channel" || messageType === "public-channel") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupAvatars, {
+			conversation,
+			currentUserId: affiliateId,
+			renderImage
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("flex size-6 items-center justify-center rounded-sm border empty:hidden", messageType === "public-channel" && "border-blue-200 bg-blue-50", messageType === "sms" && "border-green-200 bg-green-50", messageType === "email" && "border-pink-200 bg-pink-50", messageType === "private-channel" && "border-purple-200 bg-purple-50", messageType === "broadcast" && "border-gray-200 bg-gray-50"),
+			children: [
+				messageType === "public-channel" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Eye, { className: "size-3 text-blue-700" }),
+				messageType === "sms" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Phone, { className: "size-3 text-green-700" }),
+				messageType === "email" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Mail, { className: "size-3 text-pink-600" }),
+				messageType === "private-channel" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Lock, { className: "size-2.5 text-purple-700" }),
+				messageType === "broadcast" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Megaphone, { className: "size-3 text-gray-700" })
+			]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.IconButton, {
+				size: "icon-xs",
+				"aria-label": "More options",
+				icon: lucide_react.EllipsisVertical
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuContent, {
+			align: "end",
+			className: "w-60 p-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuLabel, {
+				className: "border-b border-gray-200 px-4 py-3 text-sm font-semibold text-slate-700",
+				children: "Channel Options"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "px-0 py-1",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+						disabled: true,
+						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.User, { className: "size-4 text-gray-500" }), "Channel Details"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+						disabled: true,
+						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings, { className: "size-4 text-gray-500" }), "Channel Settings"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+						disabled: true,
+						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BellOff, { className: "size-4 text-gray-500" }), "Mute Channel"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+						onSelect: () => navigation.navigate({
+							view: "pins",
+							conversationId
+						}),
+						className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, { className: "size-4 text-gray-500" }),
+							"Pinned Messages",
+							(conversation.pinned_messages_count ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ml-auto text-xs text-gray-500",
+								children: conversation.pinned_messages_count ?? 0
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, { className: "mx-0 my-1" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
+						disabled: true,
+						className: "mx-1.5 my-0 gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-red-500 focus:text-red-500",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LogOut, { className: "size-4 text-red-500" }), "Leave Channel"]
+					})
+				]
+			})]
+		})] })
+	] });
 }
 //#endregion
 //#region ../../messaging/ui/src/app/MessagesTopBar.tsx
@@ -3438,17 +3536,13 @@ function getPageTitleFromRoute(route) {
 		default: return;
 	}
 }
-function MessagesTopBar({ renderSidebarTrigger, renderBreadcrumb, history, onToast }) {
+function MessagesTopBar({ renderSidebarTrigger, renderBreadcrumb, history }) {
 	const { auth, renderImage: contextRenderImage } = useMessagingApp();
 	const navigation = useMessagingNavigation();
 	const currentRoute = navigation.currentRoute;
 	const renderImage = contextRenderImage ?? defaultRenderImage;
-	const conversationId = "conversationId" in currentRoute ? currentRoute.conversationId : 0;
-	const { data: conversation } = useConversation(conversationId);
+	const { data: conversation } = useConversation("conversationId" in currentRoute ? currentRoute.conversationId : 0);
 	const currentUser = auth.currentUser;
-	const affiliateId = currentUser?.affiliateId;
-	const otherUsers = conversation?.recipients.filter((r) => r.receivable_id !== affiliateId);
-	const { type: messageType } = conversation ? getMessageType(conversation) : {};
 	const pageTitle = getPageTitleFromRoute(currentRoute);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex w-full items-center justify-between p-4",
@@ -3479,80 +3573,14 @@ function MessagesTopBar({ renderSidebarTrigger, renderBreadcrumb, history, onToa
 					children: pageTitle
 				})
 			}) : null]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex items-center gap-4",
-			children: [
-				(messageType === "broadcast" || messageType === "private-channel" || messageType === "public-channel") && conversation && otherUsers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupAvatars, {
-					conversation,
-					currentUserId: affiliateId,
-					renderImage
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: (0, clsx.default)("flex size-6 items-center justify-center rounded-sm border empty:hidden", messageType === "public-channel" && "border-blue-200 bg-blue-50", messageType === "sms" && "border-green-200 bg-green-50", messageType === "email" && "border-pink-200 bg-pink-50", messageType === "private-channel" && "border-purple-200 bg-purple-50", messageType === "broadcast" && "border-gray-200 bg-gray-50"),
-					children: [
-						messageType === "public-channel" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Eye, { className: "size-3 text-blue-700" }),
-						messageType === "sms" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Phone, { className: "size-3 text-green-700" }),
-						messageType === "email" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Mail, { className: "size-3 text-pink-600" }),
-						messageType === "private-channel" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Lock, { className: "size-2.5 text-purple-700" }),
-						messageType === "broadcast" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Megaphone, { className: "size-3 text-gray-700" })
-					]
-				}),
-				conversation && currentUser ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuTrigger, {
-					asChild: true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.IconButton, {
-						size: "icon-xs",
-						"aria-label": "More options",
-						icon: lucide_react.EllipsisVertical
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuContent, {
-					align: "end",
-					className: "w-60 p-0",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuLabel, {
-						className: "border-b border-gray-200 px-4 py-3 text-sm font-semibold text-slate-700",
-						children: "Channel Options"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "px-0 py-1",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-								className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700 opacity-50",
-								onSelect: () => onToast?.("channel details coming soon"),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.User, { className: "size-4 text-gray-500" }), "Channel Details"]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-								className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700 opacity-50",
-								onSelect: () => onToast?.("channel settings coming soon"),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings, { className: "size-4 text-gray-500" }), "Channel Settings"]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-								className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700 opacity-50",
-								onSelect: () => onToast?.("mute channel coming soon"),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.BellOff, { className: "size-4 text-gray-500" }), "Mute Channel"]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-								onSelect: () => navigation.navigate({
-									view: "pins",
-									conversationId
-								}),
-								className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-slate-700",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, { className: "size-4 text-gray-500" }),
-									"Pinned Messages",
-									(conversation.pinned_messages_count ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "ml-auto text-xs text-gray-500",
-										children: conversation.pinned_messages_count ?? 0
-									})
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DropdownMenuSeparator, { className: "mx-0 my-1" }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.DropdownMenuItem, {
-								className: "mx-1.5 my-0 cursor-pointer gap-2 rounded-md px-2.5 py-[9px] text-sm font-medium text-red-500 opacity-50 focus:text-red-500",
-								onSelect: () => onToast?.("leave channel coming soon"),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LogOut, { className: "size-4 text-red-500" }), "Leave Channel"]
-							})
-						]
-					})] })
-				})] }) : null
-			]
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessagesHeaderActions, {
+				conversation,
+				currentUser,
+				navigation,
+				renderImage
+			})
 		})]
 	});
 }
@@ -4069,7 +4097,7 @@ function useScrollerRef() {
 	if (!context) throw new Error("useScrollerRef must be used within MessagingLayout");
 	return context;
 }
-function MessagingLayout({ children, topBar, renderLockedDownlineItem, renderNewChannelSidebar, showAdminFeatures = true, canUseMyDownline = false, downlineData }) {
+function MessagingLayout({ children, topBar, renderLockedDownlineItem, renderNewChannelSidebar, showAdminFeatures = true, canUseMyDownline = false, downlineData, hideTopBar = false }) {
 	const navigation = useMessagingNavigation();
 	const [isDragging, setIsDragging] = (0, react.useState)(false);
 	const sidebarRef = (0, react.useRef)(null);
@@ -4181,7 +4209,7 @@ function MessagingLayout({ children, topBar, renderLockedDownlineItem, renderNew
 	const initialLoadInProgress = currentRoute.view === "index" && (result.isLoading || isLoadingAnnouncementChannel);
 	const userWithoutChannels = currentRoute.view === "index" && !firstEntry && !announcementChannel && !result.isLoading && !isLoadingAnnouncementChannel;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative grid h-full w-full grid-rows-[auto_1fr] select-none",
+		className: hideTopBar ? "relative grid h-full w-full grid-rows-[1fr] select-none" : "relative grid h-full w-full grid-rows-[auto_1fr] select-none",
 		style: {
 			gridTemplateColumns: `minmax(150px, min(50vw, var(--sidebar-width))) 1fr`,
 			"--sidebar-width": `${sidebarWidth}px`
@@ -4192,7 +4220,7 @@ function MessagingLayout({ children, topBar, renderLockedDownlineItem, renderNew
           background: transparent;
         }
       ` }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			!hideTopBar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "col-span-2 border-b border-gray-200 bg-white",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessagesTopBar, {})
 			}),
@@ -4221,7 +4249,7 @@ function MessagingLayout({ children, topBar, renderLockedDownlineItem, renderNew
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "absolute z-50 h-full w-1 cursor-col-resize place-self-end bg-transparent hover:bg-blue-500 hover:opacity-50",
 				style: {
-					gridRow: "2 / -1",
+					gridRow: hideTopBar ? "1 / -1" : "2 / -1",
 					gridColumn: "1 / 2"
 				},
 				onMouseDown: handleMouseDown
@@ -57254,7 +57282,7 @@ function ScheduledMessagesView({ onToast }) {
 }
 //#endregion
 //#region ../../messaging/ui/src/app/MessagingApp.tsx
-function MessagingApp({ api, auth, websocketUrl, token, renderImage, renderProfileTrigger, onNavigate, initialRoute, renderLockedDownlineItem, renderNewChannelSidebar, showAdminFeatures, canUseMyDownline, downlineData, topBar, messagesViewProps, newMessageViewProps, onToast, getMessageLink, renderProfileContent, children }) {
+function MessagingApp({ api, auth, websocketUrl, token, renderImage, renderProfileTrigger, onNavigate, initialRoute, renderLockedDownlineItem, renderNewChannelSidebar, showAdminFeatures, canUseMyDownline, downlineData, topBar, messagesViewProps, newMessageViewProps, onToast, getMessageLink, renderProfileContent, hideTopBar, children }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MessagingAppProvider, {
 		api,
 		auth,
@@ -57278,6 +57306,7 @@ function MessagingApp({ api, auth, websocketUrl, token, renderImage, renderProfi
 				showAdminFeatures,
 				canUseMyDownline,
 				downlineData,
+				hideTopBar,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessagingRouter, {
 					messagesViewProps,
 					newMessageViewProps,
@@ -57327,6 +57356,66 @@ zod.z.object({
 	url: zod.z.string().min(1, "Link is required").url("Please enter a valid URL")
 });
 //#endregion
+//#region src/messaging/MessagingHeaderBridge.tsx
+/**
+* Bridges messaging header content from inside <MessagingApp> into the
+* portal shell's <ScreenHeader>. Render this as a child of <MessagingApp>
+* with `hideTopBar` set, and the messaging UI's own <MessagesTopBar /> is
+* suppressed in favour of populating the existing portal header.
+*
+* Right-hand actions are delegated to <MessagesHeaderActions /> from
+* messaging-ui so this stays in sync with <MessagesTopBar />. The breadcrumbs
+* are owned here because the portal shell shows them differently from the
+* messaging-ui's inline page-title fallback.
+*/
+const ROUTE_TITLES = {
+	pins: "Pinned Messages",
+	new: "New Message",
+	scheduled: "Scheduled Messages"
+};
+function fallbackRenderImage(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: props.src,
+		alt: props.alt,
+		width: props.width,
+		height: props.height,
+		className: props.className
+	});
+}
+function MessagingHeaderBridge() {
+	const { auth, renderImage: contextRenderImage } = useMessagingApp();
+	const navigation = useMessagingNavigation();
+	const { currentRoute } = navigation;
+	const { data: conversation } = useConversation("conversationId" in currentRoute ? currentRoute.conversationId : 0);
+	const renderImage = contextRenderImage ?? fallbackRenderImage;
+	const currentUser = auth.currentUser;
+	const conversationName = conversation?.name;
+	const routeTitle = ROUTE_TITLES[currentRoute.view];
+	require_ScreenHeaderContext.useScreenHeaderBreadcrumbs((0, react.useMemo)(() => {
+		if (routeTitle) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+			className: "text-foreground text-lg font-semibold",
+			children: routeTitle
+		});
+		if (conversationName) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+			className: "text-foreground truncate text-lg font-semibold",
+			children: conversationName
+		});
+		return null;
+	}, [routeTitle, conversationName]));
+	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessagesHeaderActions, {
+		conversation,
+		currentUser,
+		navigation,
+		renderImage
+	}), [
+		conversation,
+		currentUser,
+		navigation,
+		renderImage
+	]));
+	return null;
+}
+//#endregion
 //#region src/screens/MessagingScreen.tsx
 function renderImage(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
@@ -57397,6 +57486,20 @@ function MessagingScreen({ onToast, filestackApiKey, websocketUrl: websocketUrlO
 			children: "Loading messaging..."
 		})
 	});
+	if (messagingAuth.isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...divProps,
+		className: `flex h-full items-center justify-center ${divProps.className ?? ""}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "border-border max-w-sm rounded-lg border border-dashed p-8 text-center",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "text-foreground text-xl font-semibold",
+				children: "Messaging"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-muted-foreground mt-2",
+				children: "Couldn't load messaging. Please refresh to try again."
+			})]
+		})
+	});
 	if (!messagingAuth.recipientId) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		...divProps,
 		className: `flex h-full items-center justify-center ${divProps.className ?? ""}`,
@@ -57422,6 +57525,7 @@ function MessagingScreen({ onToast, filestackApiKey, websocketUrl: websocketUrlO
 			renderImage,
 			showAdminFeatures: false,
 			onToast: effectiveToast,
+			hideTopBar: true,
 			messagesViewProps: {
 				uploader,
 				saveDrafts: true,
@@ -57430,7 +57534,8 @@ function MessagingScreen({ onToast, filestackApiKey, websocketUrl: websocketUrlO
 			newMessageViewProps: {
 				searchUsers,
 				searchChannels
-			}
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessagingHeaderBridge, {})
 		})
 	});
 }
@@ -57475,4 +57580,4 @@ Object.defineProperty(exports, "useMessagingConfig", {
 	}
 });
 
-//# sourceMappingURL=MessagingScreen-CxpLlTW_.cjs.map
+//# sourceMappingURL=MessagingScreen-CKWiOb9l.cjs.map