stream-chat-react 14.10.0 → 14.11.0

package/dist/cjs/useChannelHeaderOnlineStatus.7e17671e.js

@@ -0,0 +1,961 @@
+const require_NotificationList = require("./NotificationList.6abbee1c.js");
+let react = require("react");
+react = require_NotificationList.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+clsx = require_NotificationList.__toESM(clsx);
+let use_sync_external_store_shim = require("use-sync-external-store/shim");
+let unist_util_visit = require("unist-util-visit");
+let react_markdown = require("react-markdown");
+react_markdown = require_NotificationList.__toESM(react_markdown);
+let remark_gfm = require("remark-gfm");
+remark_gfm = require_NotificationList.__toESM(remark_gfm);
+let mdast_util_to_string = require("mdast-util-to-string");
+let remark_parse = require("remark-parse");
+remark_parse = require_NotificationList.__toESM(remark_parse);
+let unified = require("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 = (0, react.createContext)(defaultContextValue);
+var MessageTranslationViewProvider = ({ children }) => {
+	const [viewByMessageId, setViewByMessageId] = (0, react.useState)({});
+	const setTranslationView = (0, react.useCallback)((messageId, view) => {
+		setViewByMessageId((prev) => ({
+			...prev,
+			[messageId]: view
+		}));
+	}, []);
+	const getTranslationView = (0, react.useCallback)((messageId, hasI18n) => viewByMessageId[messageId] ?? (hasI18n ? "translated" : "original"), [viewByMessageId]);
+	const stableValue = react.default.useMemo(() => ({
+		getTranslationView,
+		setTranslationView
+	}), [getTranslationView, setTranslationView]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageTranslationViewContext.Provider, {
+		value: stableValue,
+		children
+	});
+};
+var useMessageTranslationViewContext = () => {
+	return (0, react.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 = (0, react.useRef)(callback);
+	ref.current = callback;
+	return (0, react.useCallback)((...args) => ref.current(...args), []);
+};
+//#endregion
+//#region src/components/Dialog/components/Alert.tsx
+var Root = (0, react.forwardRef)(function AlertRoot({ children, className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: (0, clsx.default)("str-chat__alert-root", className),
+		ref,
+		children
+	});
+});
+var Header = (0, react.forwardRef)(function AlertHeader({ children, className, description, descriptionId, Icon, title, titleId, ...props }, ref) {
+	const { dialogId } = require_NotificationList.useModalContext();
+	const { descriptionId: derivedDescriptionId, titleId: derivedTitleId } = require_NotificationList.useAriaIdentifiers(dialogId);
+	const resolvedTitleId = titleId ?? derivedTitleId;
+	const resolvedDescriptionId = descriptionId ?? derivedDescriptionId;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: (0, clsx.default)("str-chat__alert-header", className),
+		ref,
+		children: title ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "str-chat__alert-header__copy",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "str-chat__alert-header__title",
+				id: resolvedTitleId,
+				children: title
+			}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "str-chat__alert-header__description",
+				id: resolvedDescriptionId,
+				children: description
+			})]
+		})] }) : children
+	});
+});
+var Alert = {
+	Actions: (0, react.forwardRef)(function AlertActions({ children, className, ...props }, ref) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...props,
+			className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)("div", {
+	...spanProps,
+	className: (0, clsx.default)("str-chat__badge", `str-chat__badge--variant-${variant}`, { [`str-chat__badge--size-${size}`]: size }, className),
+	children
+});
+var ErrorBadge = ({ className, size = "sm", ...rest }) => {
+	const { IconExclamationMarkFill } = require_NotificationList.useComponentContextIcons();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+		...rest,
+		className,
+		size,
+		variant: "error",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconExclamationMarkFill, {})
+	});
+};
+//#endregion
+//#region src/components/Avatar/ChannelAvatar.tsx
+var ChannelAvatar = ({ displayMembers, imageUrl, size, userName, ...sharedProps }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupAvatar, {
+		displayMembers: (0, react.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 = (0, react.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__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("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__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Avatar, {
+			imageUrl,
+			size: avatarSize,
+			userName
+		}, id || `${userName}-${imageUrl}-${index}`)), typeof overflowCount === "number" && overflowCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.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) => {
+	(0, unist_util_visit.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 [unist_util_visit.SKIP, index + 1];
+		};
+		(0, unist_util_visit.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 unist_util_visit.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 [unist_util_visit.SKIP, index + out.length];
+	};
+	return (tree) => (0, unist_util_visit.visit)(tree, visitor);
+};
+//#endregion
+//#region src/components/Form/Checkbox.tsx
+var Checkbox = ({ checked, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	...props,
+	className: (0, clsx.default)("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,
+	[remark_gfm.default, { singleTilde: false }],
+	plusPlusToEmphasis,
+	imageToLink
+];
+var renderPreviewText = (text) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
+	remarkPlugins,
+	skipHtml: true,
+	children: text
+});
+var createPlainTextProcessor = () => (0, unified.unified)().use(remark_parse.default).use(remarkPlugins);
+var plainTextProcessor;
+var stripMarkdownToText = (text) => {
+	try {
+		const processor = plainTextProcessor ?? (plainTextProcessor = createPlainTextProcessor());
+		return (0, mdast_util_to_string.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 (require_NotificationList.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(require_NotificationList.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 } = require_NotificationList.useChatContext("useChannelDisplayName");
+	const { t } = require_NotificationList.useTranslationContext("useChannelDisplayName");
+	const directMessageLabel = t("Direct message");
+	const [displayName, setDisplayName] = (0, react.useState)(() => channel ? computeChannelDisplayName(channel, directMessageLabel, client.userID ?? void 0) : void 0);
+	(0, react.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 } = require_NotificationList.useChatContext();
+	const channelDisplayName = useChannelDisplayName(channel);
+	const displayTitle = overrideTitle ?? channelDisplayName;
+	const [displayImage, setDisplayImage] = (0, react.useState)(() => channel ? overrideImage ?? getChannelDisplayImage(channel, client.userID ?? void 0) : void 0);
+	const [groupChannelDisplayInfo, setGroupChannelDisplayInfo] = (0, react.useState)(() => channel ? getGroupChannelDisplayInfo(channel) ?? emptyGroupInfo : emptyGroupInfo);
+	(0, react.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 (0, react.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 (0, use_sync_external_store_shim.useSyncExternalStore)((0, react.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
+	]), (0, react.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 } = require_NotificationList.useChatContext("useIsChannelMuted");
+	const [muted, setMuted] = (0, react.useState)(() => getMuteStatus(channel));
+	(0, react.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 } = require_NotificationList.useChatContext();
+	return (0, react.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 } = require_NotificationList.useChannelStateContext();
+	const { client } = require_NotificationList.useChatContext();
+	const channel = channelOverride ?? contextChannel;
+	const ownUserId = client.user?.id;
+	const [watchers, setWatchers] = (0, react.useState)(() => getOtherWatchers(channel?.state?.watchers, ownUserId));
+	(0, react.useEffect)(() => {
+		setWatchers(getOtherWatchers(channel?.state?.watchers, ownUserId));
+	}, [channel, ownUserId]);
+	(0, react.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 } = require_NotificationList.useTranslationContext();
+	const { client } = require_NotificationList.useChatContext();
+	const { channel: contextChannel, watcherCount: contextWatcherCount = 0 } = require_NotificationList.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
+Object.defineProperty(exports, "Alert", {
+	enumerable: true,
+	get: function() {
+		return Alert;
+	}
+});
+Object.defineProperty(exports, "Badge", {
+	enumerable: true,
+	get: function() {
+		return Badge;
+	}
+});
+Object.defineProperty(exports, "ChannelAvatar", {
+	enumerable: true,
+	get: function() {
+		return ChannelAvatar;
+	}
+});
+Object.defineProperty(exports, "Checkbox", {
+	enumerable: true,
+	get: function() {
+		return Checkbox;
+	}
+});
+Object.defineProperty(exports, "Checkmark", {
+	enumerable: true,
+	get: function() {
+		return Checkmark;
+	}
+});
+Object.defineProperty(exports, "ErrorBadge", {
+	enumerable: true,
+	get: function() {
+		return ErrorBadge;
+	}
+});
+Object.defineProperty(exports, "GroupAvatar", {
+	enumerable: true,
+	get: function() {
+		return GroupAvatar;
+	}
+});
+Object.defineProperty(exports, "Header", {
+	enumerable: true,
+	get: function() {
+		return Header;
+	}
+});
+Object.defineProperty(exports, "MessageTranslationViewContext", {
+	enumerable: true,
+	get: function() {
+		return MessageTranslationViewContext;
+	}
+});
+Object.defineProperty(exports, "MessageTranslationViewProvider", {
+	enumerable: true,
+	get: function() {
+		return MessageTranslationViewProvider;
+	}
+});
+Object.defineProperty(exports, "Root", {
+	enumerable: true,
+	get: function() {
+		return Root;
+	}
+});
+Object.defineProperty(exports, "getChannelDisplayImage", {
+	enumerable: true,
+	get: function() {
+		return getChannelDisplayImage;
+	}
+});
+Object.defineProperty(exports, "getGroupChannelDisplayInfo", {
+	enumerable: true,
+	get: function() {
+		return getGroupChannelDisplayInfo;
+	}
+});
+Object.defineProperty(exports, "getLatestMessagePreview", {
+	enumerable: true,
+	get: function() {
+		return getLatestMessagePreview;
+	}
+});
+Object.defineProperty(exports, "getLatestMessagePreviewText", {
+	enumerable: true,
+	get: function() {
+		return getLatestMessagePreviewText;
+	}
+});
+Object.defineProperty(exports, "getTranslatedMessageText", {
+	enumerable: true,
+	get: function() {
+		return getTranslatedMessageText;
+	}
+});
+Object.defineProperty(exports, "htmlToTextPlugin", {
+	enumerable: true,
+	get: function() {
+		return htmlToTextPlugin;
+	}
+});
+Object.defineProperty(exports, "imageToLink", {
+	enumerable: true,
+	get: function() {
+		return imageToLink;
+	}
+});
+Object.defineProperty(exports, "isDmChannel", {
+	enumerable: true,
+	get: function() {
+		return isDmChannel;
+	}
+});
+Object.defineProperty(exports, "plusPlusToEmphasis", {
+	enumerable: true,
+	get: function() {
+		return plusPlusToEmphasis;
+	}
+});
+Object.defineProperty(exports, "renderPreviewText", {
+	enumerable: true,
+	get: function() {
+		return renderPreviewText;
+	}
+});
+Object.defineProperty(exports, "useChannelDisplayName", {
+	enumerable: true,
+	get: function() {
+		return useChannelDisplayName;
+	}
+});
+Object.defineProperty(exports, "useChannelHasMembersOnline", {
+	enumerable: true,
+	get: function() {
+		return useChannelHasMembersOnline;
+	}
+});
+Object.defineProperty(exports, "useChannelHeaderOnlineStatus", {
+	enumerable: true,
+	get: function() {
+		return useChannelHeaderOnlineStatus;
+	}
+});
+Object.defineProperty(exports, "useChannelMembershipState", {
+	enumerable: true,
+	get: function() {
+		return useChannelMembershipState;
+	}
+});
+Object.defineProperty(exports, "useChannelPreviewInfo", {
+	enumerable: true,
+	get: function() {
+		return useChannelPreviewInfo;
+	}
+});
+Object.defineProperty(exports, "useIsChannelMuted", {
+	enumerable: true,
+	get: function() {
+		return useIsChannelMuted;
+	}
+});
+Object.defineProperty(exports, "useIsUserMuted", {
+	enumerable: true,
+	get: function() {
+		return useIsUserMuted;
+	}
+});
+Object.defineProperty(exports, "useMessageTranslationViewContext", {
+	enumerable: true,
+	get: function() {
+		return useMessageTranslationViewContext;
+	}
+});
+Object.defineProperty(exports, "useSelectedChannelState", {
+	enumerable: true,
+	get: function() {
+		return useSelectedChannelState;
+	}
+});
+Object.defineProperty(exports, "useStableCallback", {
+	enumerable: true,
+	get: function() {
+		return useStableCallback;
+	}
+});
+
+//# sourceMappingURL=useChannelHeaderOnlineStatus.7e17671e.js.map