stream-chat-react 14.10.0 → 14.11.1

package/dist/es/useChannelHeaderOnlineStatus.a9357343.mjs

@@ -0,0 +1,771 @@
+import { Lt as useAriaIdentifiers, Nt as Avatar, Qn as useModalContext, Sr as useComponentContextIcons, Vn as useTranslationContext, Xt as isMessageDeleted, ca as useChatContext, da as useChannelStateContext, mt as extractDisplayInfo } from "./NotificationList.db01a56d.mjs";
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
+import { SKIP, visit } from "unist-util-visit";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { toString } from "mdast-util-to-string";
+import remarkParse from "remark-parse";
+import { unified } from "unified";
+//#region src/context/MessageTranslationViewContext.tsx
+/**
+* Message translation view context: user-specific state for whether each message
+* shows original text or a translation.
+*
+* ## Spec
+*
+* - **State**: Per message list (channel vs thread), we store a map
+*   `messageId → 'original' | 'translated'`. Default for messages with `message.i18n`
+*   is `'translated'`; otherwise `'original'`.
+*
+* - **Provider placement**: The provider is tied to the **message list**, not the channel.
+*   It is rendered inside `MessageList` and `VirtualizedMessageList`. That way the
+*   main channel list and the thread list each have their own translation view state
+*   (e.g. Thread.tsx gets correct behavior without sharing channel state).
+*
+* - **Multiple translations**: `message.i18n` can contain multiple languages, e.g.:
+*   `{ en_text: "Good morning", fr_text: "Bonjour", it_text: "Buongiorno", language: "en" }`.
+*   Which translation is shown is determined by the app’s **user language**
+*   (`useTranslationContext().userLanguage`). We use `message.i18n[userLanguage + '_text']`;
+*   if missing, we fall back to `message.text`. Only one translation is shown at a time.
+*
+* - **Source language**: When present, `message.i18n.language` is the original/source
+*   language of `message.text`. It can be used for the indicator label, e.g.
+*   "Translated from English · View original".
+*
+* - **Invariants**: The original message content, layout, grouping, and order stay
+*   unchanged. Removing or toggling translation only changes the annotation and which
+*   text is displayed. "View original" / "View translation" switch the displayed
+*   text and update the annotation (e.g. "Original · View translation" when showing
+*   original).
+*
+* - **Translation indicator visibility**: The translation indicator (e.g. "Translated ·
+*   View original") is **not** shown when the currently viewed text already corresponds
+*   to `userLanguage` — for example when viewing original and the original text is the
+*   user-language version (i.e. `getTranslatedMessageText({ language: userLanguage, message })`
+*   equals `message.text`). In that case there is no meaningful original/translated choice,
+*   so the indicator is hidden.
+*/
+/**
+* Returns the translated message text for a given language from `message.i18n`, or
+* undefined if not present. Used to resolve which of the multiple translations to show.
+*/
+var getTranslatedMessageText = ({ language, message }) => message?.i18n?.[`${language}_text`];
+var defaultContextValue = {
+	getTranslationView: (_messageId, hasI18n) => hasI18n ? "translated" : "original",
+	setTranslationView: () => {}
+};
+var MessageTranslationViewContext = createContext(defaultContextValue);
+var MessageTranslationViewProvider = ({ children }) => {
+	const [viewByMessageId, setViewByMessageId] = useState({});
+	const setTranslationView = useCallback((messageId, view) => {
+		setViewByMessageId((prev) => ({
+			...prev,
+			[messageId]: view
+		}));
+	}, []);
+	const getTranslationView = useCallback((messageId, hasI18n) => viewByMessageId[messageId] ?? (hasI18n ? "translated" : "original"), [viewByMessageId]);
+	const stableValue = React.useMemo(() => ({
+		getTranslationView,
+		setTranslationView
+	}), [getTranslationView, setTranslationView]);
+	return /* @__PURE__ */ jsx(MessageTranslationViewContext.Provider, {
+		value: stableValue,
+		children
+	});
+};
+var useMessageTranslationViewContext = () => {
+	return useContext(MessageTranslationViewContext) ?? defaultContextValue;
+};
+//#endregion
+//#region src/utils/useStableCallback.ts
+/**
+* A utility hook implementing a stable callback. It takes in an unstable method that
+* is supposed to be invoked somewhere deeper in the DOM tree without making it
+* change its reference every time the parent component rerenders. It will also return
+* the value of the callback if it does return one.
+* A common use-case would be having a function whose invocation depends on state
+* somewhere high up in the DOM tree and wanting to use the same function deeper
+* down, for example in a leaf node and simply using useCallback results in
+* cascading dependency hell. If we wrap it in useStableCallback, we would be able
+* to:
+* - Use the same function as a dependency of another hook (since it is stable)
+* - Still invoke it and get the latest state
+*
+* **Caveats:**
+* - Never wrap a function that is supposed to return a React.ReactElement in
+*   useStableCallback, since React will not know that the DOM needs to be updated
+*   whenever the callback value changes (for example, renderItem from FlatList must
+*   never be wrapped in this hook)
+* - Always prefer using a standard useCallback/stable function wherever possible
+*   (the purpose of useStableCallback is to bridge the gap between top level contexts
+*   and cascading rereders in downstream components - **not** as an escape hatch)
+* @param callback - the callback we want to stabilize
+*/
+var useStableCallback = (callback) => {
+	const ref = useRef(callback);
+	ref.current = callback;
+	return useCallback((...args) => ref.current(...args), []);
+};
+//#endregion
+//#region src/components/Dialog/components/Alert.tsx
+var Root = forwardRef(function AlertRoot({ children, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: clsx("str-chat__alert-root", className),
+		ref,
+		children
+	});
+});
+var Header = forwardRef(function AlertHeader({ children, className, description, descriptionId, Icon, title, titleId, ...props }, ref) {
+	const { dialogId } = useModalContext();
+	const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } = useAriaIdentifiers(dialogId);
+	const resolvedTitleId = titleId ?? derivedTitleId;
+	const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: clsx("str-chat__alert-header", className),
+		ref,
+		children: title ? /* @__PURE__ */ jsxs(Fragment$1, { children: [Icon && /* @__PURE__ */ jsx(Icon, {}), /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__alert-header__copy",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "str-chat__alert-header__title",
+				id: resolvedTitleId,
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "str-chat__alert-header__description",
+				id: resolvedDescriptionId,
+				children: description
+			})]
+		})] }) : children
+	});
+});
+var Alert = {
+	Actions: forwardRef(function AlertActions({ children, className, ...props }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			...props,
+			className: clsx("str-chat__alert-actions", className),
+			ref,
+			children
+		});
+	}),
+	Header,
+	Root
+};
+//#endregion
+//#region src/components/Badge/Badge.tsx
+/**
+* Compact pill/circle badge for counts and labels.
+* Uses design tokens: --badge-bg-*, --badge-text-*, --badge-border.
+*/
+var Badge = ({ children, className, size = "md", variant = "default", ...spanProps }) => /* @__PURE__ */ jsx("div", {
+	...spanProps,
+	className: clsx("str-chat__badge", `str-chat__badge--variant-${variant}`, { [`str-chat__badge--size-${size}`]: size }, className),
+	children
+});
+var ErrorBadge = ({ className, size = "sm", ...rest }) => {
+	const { IconExclamationMarkFill } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(Badge, {
+		...rest,
+		className,
+		size,
+		variant: "error",
+		children: /* @__PURE__ */ jsx(IconExclamationMarkFill, {})
+	});
+};
+//#endregion
+//#region src/components/Avatar/ChannelAvatar.tsx
+var ChannelAvatar = ({ displayMembers, imageUrl, size, userName, ...sharedProps }) => {
+	return /* @__PURE__ */ jsx(GroupAvatar, {
+		displayMembers: useMemo(() => {
+			if (!imageUrl && displayMembers && displayMembers.length > 0) return displayMembers;
+			return [{
+				imageUrl,
+				userName
+			}];
+		}, [
+			displayMembers,
+			imageUrl,
+			userName
+		]),
+		size,
+		...sharedProps
+	});
+};
+//#endregion
+//#region src/components/Avatar/GroupAvatar.tsx
+/**
+* Avatar component to display multiple users' avatars in a group.
+* Renders a single Avatar if fewer than 2 members. Otherwise, renders up to 2 avatars (when overflowCount is set) or 4, plus an optional +N badge.
+*/
+var GroupAvatar = ({ badgeSize, className, displayMembers = [], isOnline, size, ...rest }) => {
+	const displayMembersToRender = useMemo(() => displayMembers.length > 4 ? displayMembers.slice(0, 2) : displayMembers, [displayMembers]);
+	const overflowCount = displayMembers.length - displayMembersToRender.length;
+	if (displayMembers.length < 2) {
+		const firstUser = displayMembers[0];
+		return /* @__PURE__ */ jsx(Avatar, {
+			imageUrl: firstUser?.imageUrl,
+			isOnline,
+			size,
+			userName: firstUser?.userName,
+			...rest
+		});
+	}
+	let avatarSize = null;
+	if (size === "2xl") avatarSize = "lg";
+	else if (size === "xl") avatarSize = "md";
+	else if (size === "lg") avatarSize = "sm";
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__avatar-group", {
+			"str-chat__avatar-group--offline": typeof isOnline === "boolean" && !isOnline,
+			"str-chat__avatar-group--online": typeof isOnline === "boolean" && isOnline,
+			[`str-chat__avatar-group--size-${size}`]: typeof size === "string"
+		}, className),
+		"data-testid": "group-avatar",
+		role: "button",
+		...rest,
+		children: [displayMembersToRender.map(({ id, imageUrl, userName }, index) => /* @__PURE__ */ jsx(Avatar, {
+			imageUrl,
+			size: avatarSize,
+			userName
+		}, id || `${userName}-${imageUrl}-${index}`)), typeof overflowCount === "number" && overflowCount > 0 && /* @__PURE__ */ jsxs(Badge, {
+			className: "str-chat__avatar-group__count-badge",
+			"data-testid": "group-avatar-count-badge",
+			size: badgeSize,
+			variant: "counter",
+			children: ["+", overflowCount]
+		})]
+	});
+};
+//#endregion
+//#region src/components/Message/renderText/remarkPlugins/htmlToTextPlugin.ts
+var visitor = (node) => {
+	if (node.type !== "html") return;
+	node.type = "text";
+};
+var transform = (tree) => {
+	visit(tree, visitor);
+};
+var htmlToTextPlugin = () => transform;
+//#endregion
+//#region src/components/Message/renderText/remarkPlugins/imageToLink.ts
+var text = (value) => ({
+	type: "text",
+	value
+});
+/**
+* Converts image Markdown links (![Minion](https://octodex.github.com/images/minion.png))
+* to HTML <a href={url}>{url | title | alt}</a>
+*
+* By default, the anchor text content is the image url so that image preview can be generated / enriched on the server.
+* @param getTextLabelFrom
+*/
+function imageToLink({ getTextLabelFrom = "url" } = {}) {
+	return (tree) => {
+		const visitor = (node, index, parent) => {
+			if (parent == null || index == null) return;
+			const link = {
+				children: [text(node[getTextLabelFrom] ?? node.url)],
+				title: node.title ?? node.alt ?? node.url,
+				type: "link",
+				url: node.url
+			};
+			parent.children.splice(index, 1, link);
+			return [SKIP, index + 1];
+		};
+		visit(tree, "image", visitor);
+	};
+}
+//#endregion
+//#region src/components/Message/renderText/remarkPlugins/plusPlusToEmphasis.ts
+/**
+* \S → first char must be non-whitespace
+* (?:...)?→ optional middle+closing when length > 1
+* [\s\S]*?→ anything (including newlines), lazy
+* final \S→ last char non-whitespace (only required when there’s more than 1)
+*
+* Matches:
+* ++a++
+* Does not match:
+* ++++
+* ++ ++
+*/
+var INS_REGEX = /\+\+(\S(?:[\s\S]*?\S)?)\+\+/g;
+var IGNORE_NODE_TYPES = /* @__PURE__ */ new Set([
+	"code",
+	"inlineCode",
+	"link",
+	"linkReference",
+	"definition",
+	"math",
+	"inlineMath"
+]);
+/**
+* Converts MD "++Some text++" to inserted text element rendered in HTML as <ins>Some text</ins>
+* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins
+*/
+var plusPlusToEmphasis = () => {
+	const visitor = (node, index, parent) => {
+		if (IGNORE_NODE_TYPES.has(node.type)) return SKIP;
+		if (node.type !== "text" || parent == null || typeof index !== "number") return;
+		const value = node.value;
+		INS_REGEX.lastIndex = 0;
+		let match;
+		let last = 0;
+		const out = [];
+		while (match = INS_REGEX.exec(value)) {
+			const [full, inner] = match;
+			const start = match.index;
+			if (start > last) out.push({
+				type: "text",
+				value: value.slice(last, start)
+			});
+			out.push({
+				children: [{
+					type: "text",
+					value: inner
+				}],
+				data: { hName: "ins" },
+				type: "emphasis"
+			});
+			last = start + full.length;
+		}
+		if (out.length === 0) return;
+		if (last < value.length) out.push({
+			type: "text",
+			value: value.slice(last)
+		});
+		parent.children.splice(index, 1, ...out);
+		return [SKIP, index + out.length];
+	};
+	return (tree) => visit(tree, visitor);
+};
+//#endregion
+//#region src/components/Form/Checkbox.tsx
+var Checkbox = ({ checked, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: clsx("str-chat__checkmark str-chat__checkbox", {
+		"str-chat__checkbox--checked": checked,
+		"str-chat__checkmark--checked": checked
+	})
+});
+var Checkmark = Checkbox;
+//#endregion
+//#region src/components/ChannelListItem/utils.tsx
+var remarkPlugins = [
+	htmlToTextPlugin,
+	[remarkGfm, { singleTilde: false }],
+	plusPlusToEmphasis,
+	imageToLink
+];
+var renderPreviewText = (text) => /* @__PURE__ */ jsx(ReactMarkdown, {
+	remarkPlugins,
+	skipHtml: true,
+	children: text
+});
+var createPlainTextProcessor = () => unified().use(remarkParse).use(remarkPlugins);
+var plainTextProcessor;
+var stripMarkdownToText = (text) => {
+	try {
+		const processor = plainTextProcessor ?? (plainTextProcessor = createPlainTextProcessor());
+		return toString(processor.runSync(processor.parse(text))) || text;
+	} catch {
+		return text;
+	}
+};
+var getLatestPollVote = (latestVotesByOption) => {
+	let latestVote;
+	for (const optionVotes of Object.values(latestVotesByOption)) optionVotes.forEach((vote) => {
+		if (latestVote && new Date(latestVote.updated_at) >= new Date(vote.created_at)) return;
+		latestVote = vote;
+	});
+	return latestVote;
+};
+/**
+* Resolves the channel's latest-message preview once: the localized DISPLAY string, a `kind`
+* discriminant, and the bits announcements need (poll question, attachment type). Single source of
+* truth for the display variant ({@link getLatestMessagePreview}) and the announcement variant
+* ({@link getLatestMessagePreviewText}), so the translation lookup and branching run once per call.
+*/
+var getLatestMessagePreviewParts = (channel, t, userLanguage = "en", latestMessageArg) => {
+	const latestMessage = latestMessageArg ?? channel.state.latestMessages[channel.state.latestMessages.length - 1];
+	const previewTextToRender = getTranslatedMessageText({
+		language: userLanguage,
+		message: latestMessage
+	}) || latestMessage?.text;
+	const poll = latestMessage?.poll;
+	if (!latestMessage) return {
+		isUserMessageText: false,
+		kind: "empty",
+		latestMessage,
+		text: t("Nothing yet...")
+	};
+	if (isMessageDeleted(latestMessage)) return {
+		isUserMessageText: false,
+		kind: "deleted",
+		latestMessage,
+		text: t("Message deleted")
+	};
+	if (poll) if (!poll.vote_count) {
+		const createdBy = poll.created_by?.id === channel.getClient().userID ? t("You") : poll.created_by?.name ?? t("Poll");
+		return {
+			isUserMessageText: false,
+			kind: "poll",
+			latestMessage,
+			pollName: poll.name,
+			text: t("📊 {{createdBy}} created: {{ pollName}}", {
+				createdBy,
+				pollName: poll.name
+			})
+		};
+	} else {
+		const latestVote = getLatestPollVote(poll.latest_votes_by_option);
+		const option = latestVote && poll.options.find((opt) => opt.id === latestVote.option_id);
+		if (option && latestVote) return {
+			isUserMessageText: false,
+			kind: "poll",
+			latestMessage,
+			pollName: poll.name,
+			text: t("📊 {{votedBy}} voted: {{pollOptionText}}", {
+				pollOptionText: option.text,
+				votedBy: latestVote?.user?.id === channel.getClient().userID ? t("You") : latestVote.user?.name ?? t("Poll")
+			})
+		};
+	}
+	if (previewTextToRender) return {
+		isUserMessageText: true,
+		kind: "text",
+		latestMessage,
+		text: previewTextToRender
+	};
+	if (latestMessage.command) return {
+		isUserMessageText: false,
+		kind: "command",
+		latestMessage,
+		text: `/${latestMessage.command}`
+	};
+	if (latestMessage.attachments?.length) return {
+		isUserMessageText: false,
+		kind: "attachment",
+		latestMessage,
+		text: t("🏙 Attachment...")
+	};
+	if (latestMessage.shared_location) return {
+		isUserMessageText: false,
+		kind: "location",
+		latestMessage,
+		text: t("📍Shared location")
+	};
+	return {
+		isUserMessageText: false,
+		kind: "text",
+		latestMessage,
+		text: t("Empty message...")
+	};
+};
+/**
+* Maps a known attachment `type` to a localized, human-readable word (e.g. "image" → "Image"). The
+* cases are literal `t('aria/…')` calls so `i18next-cli` extracts them. Unknown/custom types return
+* `undefined`, so the announcement falls back to a generic "Attachment".
+*/
+var getAttachmentTypeLabel = (type, t) => {
+	switch (type) {
+		case "audio": return t("aria/audio");
+		case "file": return t("aria/file");
+		case "giphy": return t("aria/GIF");
+		case "image": return t("aria/image");
+		case "video": return t("aria/video");
+		case "voiceRecording": return t("aria/voice message");
+		default: return;
+	}
+};
+/**
+* The text announced for the channel's latest message (for an accessible name / live region).
+* Non-text content gets a concise, screen-reader-friendly phrasing that may differ from the visible
+* preview: a poll announces its question, an attachment its type, a shared location and a deleted
+* message a plain phrase. User-message text is stripped of markdown so the words are read, not the
+* syntax (AI-generated text is returned verbatim, matching the display path).
+*/
+var getLatestMessagePreviewText = (channel, t, userLanguage = "en", isMessageAIGenerated, latestMessage) => {
+	const { isUserMessageText, kind, latestMessage: resolvedLatestMessage, pollName, text } = getLatestMessagePreviewParts(channel, t, userLanguage, latestMessage);
+	switch (kind) {
+		case "poll": return t("aria/Poll: {{ pollName }}", { pollName: pollName ?? "" });
+		case "attachment": {
+			const realAttachments = resolvedLatestMessage?.attachments?.filter((attachment) => !attachment.og_scrape_url) ?? [];
+			if (realAttachments.length > 1) return t("aria/Message with attachments");
+			const typeLabel = getAttachmentTypeLabel(realAttachments[0]?.type, t);
+			return typeLabel ? t("aria/Attachment {{ attachmentType }}", { attachmentType: typeLabel }) : t("aria/Attachment");
+		}
+		case "location": return t("aria/Shared location");
+		case "empty": return t("aria/There are no messages in this chat.");
+		case "text": return isUserMessageText && resolvedLatestMessage && !isMessageAIGenerated?.(resolvedLatestMessage) ? stripMarkdownToText(text) : text;
+		default: return text;
+	}
+};
+var getLatestMessagePreview = (channel, t, userLanguage = "en", isMessageAIGenerated, latestMessage) => {
+	const { isUserMessageText, latestMessage: resolvedLatestMessage, text } = getLatestMessagePreviewParts(channel, t, userLanguage, latestMessage);
+	return isUserMessageText && resolvedLatestMessage && !isMessageAIGenerated?.(resolvedLatestMessage) ? renderPreviewText(text) : text;
+};
+/**
+* Channel display image: channel.data.image, or for DM (2 members) the other member's user.image.
+*/
+var getChannelDisplayImage = (channel, currentUserId) => {
+	const data = channel.data;
+	if (data?.image && typeof data.image === "string") return data.image;
+	const memberList = Object.values(channel.state.members);
+	if (memberList.length === 2) {
+		const image = memberList.find((m) => m.user?.id !== currentUserId)?.user?.image;
+		if (image && typeof image === "string") return image;
+	}
+};
+var getGroupChannelDisplayInfo = (channel) => {
+	const members = Object.values(channel.state.members);
+	if (members.length <= 2) return;
+	const memberList = [];
+	for (const member of members) {
+		const { user } = member;
+		if (!user?.name && !user?.image) continue;
+		memberList.push(extractDisplayInfo(member));
+	}
+	return { members: memberList };
+};
+//#endregion
+//#region src/components/ChannelListItem/hooks/useChannelDisplayName.ts
+/**
+* 1. channel.data.name
+* 2. DM (exactly 2 members): other member's name, then directMessageLabel
+* 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)
+* 4. undefined otherwise
+*/
+function computeChannelDisplayName(channel, directMessageLabel, currentUserId) {
+	const data = channel.data;
+	if (data?.name && typeof data.name === "string") return data.name;
+	const memberList = Object.values(channel.state.members);
+	const otherMembers = memberList.filter((m) => m.user?.id !== currentUserId);
+	if (memberList.length === 2 && otherMembers.length === 1) return otherMembers[0].user?.name || directMessageLabel;
+	if (otherMembers.length >= 2) {
+		const names = otherMembers.map((m) => m.user?.name).filter(Boolean).slice(0, 2);
+		if (names.length > 0) return names.join(", ");
+	}
+}
+/**
+* Channel display name with translation context.
+* 1. channel.data.name
+* 2. DM (exactly 2 members): other member's name, then translated "Direct message"
+* 3. Group (3+ members): comma-separated list of 2 other members' names (no ellipsis)
+* 4. undefined otherwise
+*/
+var useChannelDisplayName = (channel) => {
+	const { client } = useChatContext("useChannelDisplayName");
+	const { t } = useTranslationContext("useChannelDisplayName");
+	const directMessageLabel = t("Direct message");
+	const [displayName, setDisplayName] = useState(() => channel ? computeChannelDisplayName(channel, directMessageLabel, client.userID ?? void 0) : void 0);
+	useEffect(() => {
+		if (!channel) {
+			setDisplayName(void 0);
+			return;
+		}
+		const updateDisplayName = () => setDisplayName(computeChannelDisplayName(channel, directMessageLabel, client.userID ?? void 0));
+		updateDisplayName();
+		client.on("user.updated", updateDisplayName);
+		return () => {
+			client.off("user.updated", updateDisplayName);
+		};
+	}, [
+		channel,
+		channel?.data,
+		client,
+		directMessageLabel
+	]);
+	return displayName;
+};
+//#endregion
+//#region src/components/ChannelListItem/hooks/useChannelPreviewInfo.ts
+var emptyGroupInfo = {
+	members: [],
+	overflowCount: void 0
+};
+var useChannelPreviewInfo = (props) => {
+	const { channel, overrideImage, overrideTitle } = props;
+	const { client } = useChatContext();
+	const channelDisplayName = useChannelDisplayName(channel);
+	const displayTitle = overrideTitle ?? channelDisplayName;
+	const [displayImage, setDisplayImage] = useState(() => channel ? overrideImage ?? getChannelDisplayImage(channel, client.userID ?? void 0) : void 0);
+	const [groupChannelDisplayInfo, setGroupChannelDisplayInfo] = useState(() => channel ? getGroupChannelDisplayInfo(channel) ?? emptyGroupInfo : emptyGroupInfo);
+	useEffect(() => {
+		if (!channel) return;
+		if (overrideImage) return;
+		const updateInfo = () => {
+			setDisplayImage(getChannelDisplayImage(channel, client.userID ?? void 0));
+			setGroupChannelDisplayInfo(getGroupChannelDisplayInfo(channel) ?? emptyGroupInfo);
+		};
+		updateInfo();
+		const { unsubscribe: unsubscribeChannelUpdated } = channel.on("channel.updated", updateInfo);
+		const { unsubscribe: unsubscribeUserUpdated } = client.on("user.updated", updateInfo);
+		return () => {
+			unsubscribeChannelUpdated();
+			unsubscribeUserUpdated();
+		};
+	}, [
+		channel,
+		channel?.data,
+		client,
+		overrideImage
+	]);
+	return useMemo(() => ({
+		displayImage: overrideImage ?? displayImage,
+		displayTitle,
+		groupChannelDisplayInfo
+	}), [
+		displayImage,
+		displayTitle,
+		groupChannelDisplayInfo,
+		overrideImage
+	]);
+};
+//#endregion
+//#region src/utils/isDmChannel.ts
+var isDmChannel = ({ channel, ownUserId }) => {
+	const memberCount = channel.data?.member_count ?? 0;
+	return memberCount === 1 || memberCount === 2 && !!ownUserId && Object.values(channel.state?.members ?? {}).some(({ user }) => user?.id === ownUserId);
+};
+//#endregion
+//#region src/components/ChannelList/hooks/useSelectedChannelState.ts
+var noop = () => {};
+function useSelectedChannelState({ channel, selector, stateChangeEventKeys = ["all"] }) {
+	return useSyncExternalStore(useCallback((onStoreChange) => {
+		if (!channel) return noop;
+		const subscriptions = stateChangeEventKeys.map((et) => channel.on(et, () => {
+			onStoreChange(selector(channel));
+		}));
+		return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+	}, [
+		channel,
+		selector,
+		stateChangeEventKeys
+	]), useCallback(() => {
+		if (!channel) return void 0;
+		return selector(channel);
+	}, [channel, selector]));
+}
+//#endregion
+//#region src/components/ChannelList/hooks/useChannelMembershipState.ts
+var selector = (c) => c.state.membership;
+var keys = ["member.updated"];
+function useChannelMembershipState(channel) {
+	return useSelectedChannelState({
+		channel,
+		selector,
+		stateChangeEventKeys: keys
+	});
+}
+//#endregion
+//#region src/components/ChannelListItem/hooks/useIsChannelMuted.ts
+/**
+* `channel.muteStatus()` throws in two cases:
+* - the channel has not been initialized yet (i.e. `.watch()`/`.query()` has not
+*   resolved) - the ChannelList can briefly hold such channels, e.g. a
+*   `message.new` for a channel that has not been watched yet (#2474);
+* - the channel is disconnected (e.g. after `client.disconnectUser()`), in which
+*   case `channel.getClient()` throws even though the channel stays initialized
+*   (#2393 failure class).
+* Guard against both to avoid crashing the whole app.
+*/
+var getMuteStatus = (channel) => channel.initialized && !channel.disconnected ? channel.muteStatus() : {
+	createdAt: null,
+	expiresAt: null,
+	muted: false
+};
+var useIsChannelMuted = (channel) => {
+	const { client } = useChatContext("useIsChannelMuted");
+	const [muted, setMuted] = useState(() => getMuteStatus(channel));
+	useEffect(() => {
+		const handleEvent = () => {
+			setMuted(getMuteStatus(channel));
+		};
+		return client.on("notification.channel_mutes_updated", handleEvent).unsubscribe;
+	}, [channel, client]);
+	return muted;
+};
+//#endregion
+//#region src/components/ChannelListItem/hooks/useIsUserMuted.ts
+var useIsUserMuted = (targetUserId) => {
+	const { mutes } = useChatContext();
+	return useMemo(() => !!targetUserId && mutes.some((mute) => mute.target.id === targetUserId), [mutes, targetUserId]);
+};
+//#endregion
+//#region src/components/ChannelHeader/hooks/useChannelHasMembersOnline.ts
+var getOtherWatchers = (watchers, ownUserId) => {
+	const next = Object.assign({}, watchers ?? {});
+	if (ownUserId) delete next[ownUserId];
+	return next;
+};
+var useChannelHasMembersOnline = ({ channel: channelOverride, enabled = true } = {}) => {
+	const { channel: contextChannel } = useChannelStateContext();
+	const { client } = useChatContext();
+	const channel = channelOverride ?? contextChannel;
+	const ownUserId = client.user?.id;
+	const [watchers, setWatchers] = useState(() => getOtherWatchers(channel?.state?.watchers, ownUserId));
+	useEffect(() => {
+		setWatchers(getOtherWatchers(channel?.state?.watchers, ownUserId));
+	}, [channel, ownUserId]);
+	useEffect(() => {
+		if (!enabled || !channel) return;
+		const startSubscription = channel.on("user.watching.start", (event) => {
+			setWatchers((prev) => {
+				if (!event.user?.id || event.user.id === ownUserId) return prev;
+				if (prev[event.user.id]) return prev;
+				return Object.assign({ [event.user.id]: event.user }, prev);
+			});
+		});
+		const stopSubscription = channel.on("user.watching.stop", (event) => {
+			setWatchers((prev) => {
+				if (!event.user?.id || !prev[event.user.id]) return prev;
+				const next = Object.assign({}, prev);
+				delete next[event.user.id];
+				return next;
+			});
+		});
+		return () => {
+			startSubscription.unsubscribe();
+			stopSubscription.unsubscribe();
+		};
+	}, [
+		channel,
+		enabled,
+		ownUserId
+	]);
+	if (!enabled) return false;
+	return Object.keys(watchers).length > 0;
+};
+//#endregion
+//#region src/components/ChannelHeader/hooks/useChannelHeaderOnlineStatus.ts
+/**
+* Returns the channel header online status text (e.g. "Online", "Offline", or "X members, Y online").
+* Returns null when the channel has no members (nothing to show).
+*/
+function useChannelHeaderOnlineStatus({ channel: channelOverride, watcherCount: watcherCountOverride } = {}) {
+	const { t } = useTranslationContext();
+	const { client } = useChatContext();
+	const { channel: contextChannel, watcherCount: contextWatcherCount = 0 } = useChannelStateContext();
+	const channel = channelOverride ?? contextChannel;
+	const watcherCount = watcherCountOverride ?? contextWatcherCount;
+	const { member_count: memberCount = 0 } = channel?.data || {};
+	const isDirectMessagingChannel = isDmChannel({
+		channel,
+		ownUserId: client.user?.id
+	});
+	const hasMembersOnline = useChannelHasMembersOnline({
+		channel,
+		enabled: isDirectMessagingChannel
+	});
+	if (!memberCount) return null;
+	if (isDirectMessagingChannel) return hasMembersOnline ? t("Online") : t("Offline");
+	return `${t("{{ memberCount }} members", { memberCount })} · ${t("{{ watcherCount }} online", { watcherCount })}`;
+}
+//#endregion
+export { getTranslatedMessageText as A, ErrorBadge as C, useStableCallback as D, Root as E, MessageTranslationViewContext as O, Badge as S, Header as T, plusPlusToEmphasis as _, useChannelMembershipState as a, GroupAvatar as b, useChannelPreviewInfo as c, getGroupChannelDisplayInfo as d, getLatestMessagePreview as f, Checkmark as g, Checkbox as h, useIsChannelMuted as i, useMessageTranslationViewContext as j, MessageTranslationViewProvider as k, useChannelDisplayName as l, renderPreviewText as m, useChannelHasMembersOnline as n, useSelectedChannelState as o, getLatestMessagePreviewText as p, useIsUserMuted as r, isDmChannel as s, useChannelHeaderOnlineStatus as t, getChannelDisplayImage as u, imageToLink as v, Alert as w, ChannelAvatar as x, htmlToTextPlugin as y };
+
+//# sourceMappingURL=useChannelHeaderOnlineStatus.a9357343.mjs.map