stream-chat-react 14.9.0 → 14.10.0

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_useNotificationApi = require("./useNotificationApi.bf76a16b.js");
-const require_useChannelHeaderOnlineStatus = require("./useChannelHeaderOnlineStatus.72753090.js");
+const require_useChannelHeaderOnlineStatus = require("./useChannelHeaderOnlineStatus.6ace991c.js");
 const require_useMessageComposerController = require("./useMessageComposerController.f8f20e3d.js");
 const require_audioProcessing = require("./audioProcessing.22303d69.js");
 let react = require("react");
@@ -10353,14 +10353,14 @@ var DefaultCalloutDialog = ({ children, className, onClose }) => {
 //#endregion
 //#region src/components/Avatar/AvatarStack.tsx
 function AvatarStack({ badgeSize, capLimit = 3, component: Component = "div", displayInfo = [], size }) {
-	const { Avatar: Avatar$3 = require_useChannelHeaderOnlineStatus.Avatar } = require_useNotificationApi.useComponentContext(AvatarStack.name);
+	const { Avatar: Avatar$6 = require_useChannelHeaderOnlineStatus.Avatar } = require_useNotificationApi.useComponentContext(AvatarStack.name);
 	const displayInfoToRender = (0, react.useMemo)(() => displayInfo.length > capLimit ? displayInfo.slice(0, capLimit) : displayInfo, [displayInfo, capLimit]);
 	const overflowCount = displayInfo.length - displayInfoToRender.length;
 	if (!displayInfo.length) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
 		className: (0, clsx.default)("str-chat__avatar-stack", { [`str-chat__avatar-stack--size-${size}`]: typeof size === "string" }),
 		"data-testid": "avatar-stack",
-		children: [displayInfoToRender.map((info, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$3, {
+		children: [displayInfoToRender.map((info, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$6, {
 			imageUrl: info.imageUrl,
 			size,
 			userName: info.userName
@@ -10686,14 +10686,11 @@ var MessageAlsoSentInChannelIndicator = () => {
 //#endregion
 //#region src/components/Message/MessageRepliesCountButton.tsx
 function UnMemoizedMessageRepliesCountButton(props) {
-	const { AvatarStack: AvatarStack$2 = AvatarStack } = require_useNotificationApi.useComponentContext(MessageRepliesCountButton.name);
+	const { AvatarStack: AvatarStack$4 = AvatarStack, extractDisplayInfo: extractDisplayInfo$9 = require_useChannelHeaderOnlineStatus.extractDisplayInfo } = require_useNotificationApi.useComponentContext(MessageRepliesCountButton.name);
 	const { labelPlural, labelSingle, onClick, reply_count: replyCount = 0, thread_participants: threadParticipants = [] } = props;
 	const { channelCapabilities } = require_useNotificationApi.useChannelStateContext();
 	const { t } = require_useNotificationApi.useTranslationContext("MessageRepliesCountButton");
-	const avatarStackDisplayInfo = (0, react.useMemo)(() => threadParticipants.slice(0, 3).map((participant) => ({
-		imageUrl: participant.image,
-		userName: participant.name || participant.id
-	})), [threadParticipants]);
+	const avatarStackDisplayInfo = (0, react.useMemo)(() => threadParticipants.slice(0, 3).map((user) => extractDisplayInfo$9({ user })), [extractDisplayInfo$9, threadParticipants]);
 	if (!replyCount) return null;
 	let replyCountText = t("replyCount", { count: replyCount });
 	if (labelPlural && replyCount > 1) replyCountText = `${replyCount} ${labelPlural}`;
@@ -10705,7 +10702,7 @@ function UnMemoizedMessageRepliesCountButton(props) {
 			"data-testid": "replies-count-button",
 			disabled: !channelCapabilities["send-reply"],
 			onClick,
-			children: [replyCountText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarStack$2, {
+			children: [replyCountText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarStack$4, {
 				displayInfo: avatarStackDisplayInfo,
 				size: "xs"
 			})]
@@ -15033,15 +15030,16 @@ var PollVoteTimestamp = ({ timestamp }) => {
 var PollVoteAuthor = ({ vote }) => {
 	const { t } = require_useNotificationApi.useTranslationContext();
 	const { client } = require_useNotificationApi.useChatContext();
+	const { Avatar: Avatar$5 = require_useChannelHeaderOnlineStatus.Avatar, extractDisplayInfo: extractDisplayInfo$8 = require_useChannelHeaderOnlineStatus.extractDisplayInfo } = require_useNotificationApi.useComponentContext();
 	const displayName = client.user?.id && client.user.id === vote.user?.id ? t("You") : vote.user?.name || vote.user?.id || t("Anonymous");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "str-chat__poll-vote__author",
-		children: [vote.user && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Avatar, {
+		children: [vote.user && /* @__PURE__ */ (0, react.createElement)(Avatar$5, {
+			...extractDisplayInfo$8({ user: vote.user }),
 			className: "str-chat__avatar--poll-vote-author",
-			imageUrl: vote.user.image,
-			size: "md",
-			userName: vote.user.name
-		}, `poll-vote-${vote.id}-avatar-${vote.user.id}`), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			key: `poll-vote-${vote.id}-avatar-${vote.user.id}`,
+			size: "md"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "str-chat__poll-vote__author__name",
 			children: displayName
 		})]
@@ -15587,7 +15585,7 @@ var PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbose }) => {
 	const { t } = require_useNotificationApi.useTranslationContext();
 	const { channelCapabilities = {} } = require_useNotificationApi.useChannelStateContext("PollOptionsShortlist");
 	const { message } = require_useChannelHeaderOnlineStatus.useMessageContext();
-	const { AvatarStack: AvatarStack$1 = AvatarStack } = require_useNotificationApi.useComponentContext();
+	const { AvatarStack: AvatarStack$3 = AvatarStack, extractDisplayInfo: extractDisplayInfo$7 = require_useChannelHeaderOnlineStatus.extractDisplayInfo } = require_useNotificationApi.useComponentContext();
 	const { poll } = usePollContext();
 	const { is_closed, latest_votes_by_option, maxVotedOptionIds, ownVotesByOptionId, vote_counts_by_option, voting_visibility } = require_useNotificationApi.useStateStore(poll.state, pollStateSelector$2);
 	const canCastVote = channelCapabilities["cast-poll-vote"] && !is_closed;
@@ -15604,12 +15602,9 @@ var PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbose }) => {
 		ownVotesByOptionId,
 		poll
 	]);
-	const avatarDisplayInfo = (0, react.useMemo)(() => latest_votes_by_option?.[option.id] && latest_votes_by_option[option.id].filter((vote) => !!vote.user && !(0, stream_chat.isVoteAnswer)(vote)).slice(0, displayAvatarCount).map(({ user }) => ({
-		id: user.id,
-		imageUrl: user.image,
-		userName: user.name
-	})), [
+	const avatarDisplayInfo = (0, react.useMemo)(() => latest_votes_by_option?.[option.id] && latest_votes_by_option[option.id].filter((vote) => !!vote.user && !(0, stream_chat.isVoteAnswer)(vote)).slice(0, displayAvatarCount).map(extractDisplayInfo$7), [
 		displayAvatarCount,
+		extractDisplayInfo$7,
 		latest_votes_by_option,
 		option.id
 	]);
@@ -15635,7 +15630,7 @@ var PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbose }) => {
 					className: "str-chat__poll-option-votes",
 					children: [displayAvatarCount && voting_visibility === "public" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "str-chat__poll-option-voters",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarStack$1, {
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarStack$3, {
 							displayInfo: avatarDisplayInfo,
 							size: "xs"
 						})
@@ -17642,16 +17637,23 @@ var UserGroupItem = ({ entity, focused, ...buttonProps }) => {
 * UI component for mentions rendered in suggestion list
 */
 var UserItem = ({ entity, focused, ...buttonProps }) => {
+	const { Avatar: Avatar$4 = require_useChannelHeaderOnlineStatus.Avatar, extractDisplayInfo: extractDisplayInfo$6 = require_useChannelHeaderOnlineStatus.extractDisplayInfo } = require_useNotificationApi.useComponentContext();
 	const hasEntity = !!Object.keys(entity).length;
 	const titleAttribute = entity.name || entity.id || "";
-	const LeadingSlot = (0, react.useMemo)(() => function UserItemAvatar() {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Avatar, {
-			"aria-hidden": true,
-			imageUrl: entity.image,
-			size: "md",
-			userName: titleAttribute
-		});
-	}, [entity.image, titleAttribute]);
+	const LeadingSlot = (0, react.useMemo)(() => {
+		const displayInfo = extractDisplayInfo$6({ user: entity });
+		return function UserItemAvatar() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$4, {
+				...displayInfo,
+				"aria-hidden": true,
+				size: "md"
+			});
+		};
+	}, [
+		Avatar$4,
+		entity,
+		extractDisplayInfo$6
+	]);
 	if (!hasEntity) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.ListItemLayout, {
 		contentClassName: "str-chat__context-menu__button__label",
@@ -19134,7 +19136,7 @@ var MessageReactionsDetailLoadingIndicator = () => {
 var MessageReactionsDetail = ({ handleFetchReactions, handleReaction, onSelectedReactionTypeChange, own_reactions, reactionDetailsSort: propReactionDetailsSort, reactionGroups, reactions, selectedReactionType, totalReactionCount }) => {
 	const [extendedReactionListOpen, setExtendedReactionListOpen] = (0, react.useState)(false);
 	const { client } = require_useNotificationApi.useChatContext();
-	const { Avatar: Avatar$2 = require_useChannelHeaderOnlineStatus.Avatar, LoadingIndicator = MessageReactionsDetailLoadingIndicator, reactionOptions = defaultReactionOptions, ReactionSelectorExtendedList = ReactionSelector.ExtendedList } = require_useNotificationApi.useComponentContext(MessageReactionsDetail.name);
+	const { Avatar: Avatar$3 = require_useChannelHeaderOnlineStatus.Avatar, extractDisplayInfo: extractDisplayInfo$5 = require_useChannelHeaderOnlineStatus.extractDisplayInfo, LoadingIndicator = MessageReactionsDetailLoadingIndicator, reactionOptions = defaultReactionOptions, ReactionSelectorExtendedList = ReactionSelector.ExtendedList } = require_useNotificationApi.useComponentContext(MessageReactionsDetail.name);
 	const { t } = require_useNotificationApi.useTranslationContext();
 	const { handleReaction: contextHandleReaction, message, reactionDetailsSort: contextReactionDetailsSort } = require_useChannelHeaderOnlineStatus.useMessageContext(MessageReactionsDetail.name);
 	const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
@@ -19216,12 +19218,11 @@ var MessageReactionsDetail = ({ handleFetchReactions, handleReaction, onSelected
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "str-chat__message-reactions-detail__user-list-item",
 							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$2, {
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$3, {
+									...extractDisplayInfo$5({ user: user ?? void 0 }),
 									className: "str-chat__avatar--with-border",
 									"data-testid": "avatar",
-									imageUrl: user?.image,
-									size: "md",
-									userName: user?.name || user?.id
+									size: "md"
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									className: "str-chat__message-reactions-detail__user-list-item-info",
@@ -20418,7 +20419,7 @@ var MessageUIWithContext = ({ endOfGroup, firstOfGroup, groupedByUser, handleAct
 	const { t } = require_useNotificationApi.useTranslationContext("MessageUI");
 	const [isBounceDialogOpen, setIsBounceDialogOpen] = (0, react.useState)(false);
 	const reminder = useMessageReminder(message.id);
-	const { Attachment: Attachment$13 = Attachment, Avatar: Avatar$1 = require_useChannelHeaderOnlineStatus.Avatar, MessageActions: MessageActions$1 = MessageActions, MessageAlsoSentInChannelIndicator: MessageAlsoSentInChannelIndicator$1 = MessageAlsoSentInChannelIndicator, MessageBlocked: MessageBlocked$1 = MessageBlocked, MessageBouncePrompt: MessageBouncePrompt$1 = MessageBouncePrompt, MessageDeleted, MessageDeletedBubble: MessageDeletedBubble$1 = MessageDeletedBubble, MessageEditedIndicator: MessageEditedIndicator$1 = MessageEditedIndicator, MessageReactions: MessageReactions$1 = MessageReactions, MessageRepliesCountButton: MessageRepliesCountButton$1 = MessageRepliesCountButton, MessageStatus: MessageStatus$1 = MessageStatus, MessageTimestamp: MessageTimestamp$1 = require_useChannelHeaderOnlineStatus.MessageTimestamp, MessageTranslationIndicator: MessageTranslationIndicator$1 = MessageTranslationIndicator, PinIndicator: PinIndicator$1 = PinIndicator, QuotedMessage: QuotedMessage$1 = QuotedMessage, ReminderNotification: ReminderNotification$1 = ReminderNotification, StreamedMessageText: StreamedMessageText$1 = StreamedMessageText } = require_useNotificationApi.useComponentContext("MessageUI");
+	const { Attachment: Attachment$13 = Attachment, Avatar: Avatar$2 = require_useChannelHeaderOnlineStatus.Avatar, extractDisplayInfo: extractDisplayInfo$4 = require_useChannelHeaderOnlineStatus.extractDisplayInfo, MessageActions: MessageActions$1 = MessageActions, MessageAlsoSentInChannelIndicator: MessageAlsoSentInChannelIndicator$1 = MessageAlsoSentInChannelIndicator, MessageBlocked: MessageBlocked$1 = MessageBlocked, MessageBouncePrompt: MessageBouncePrompt$1 = MessageBouncePrompt, MessageDeleted, MessageDeletedBubble: MessageDeletedBubble$1 = MessageDeletedBubble, MessageEditedIndicator: MessageEditedIndicator$1 = MessageEditedIndicator, MessageReactions: MessageReactions$1 = MessageReactions, MessageRepliesCountButton: MessageRepliesCountButton$1 = MessageRepliesCountButton, MessageStatus: MessageStatus$1 = MessageStatus, MessageTimestamp: MessageTimestamp$1 = require_useChannelHeaderOnlineStatus.MessageTimestamp, MessageTranslationIndicator: MessageTranslationIndicator$1 = MessageTranslationIndicator, PinIndicator: PinIndicator$1 = PinIndicator, QuotedMessage: QuotedMessage$1 = QuotedMessage, ReminderNotification: ReminderNotification$1 = ReminderNotification, StreamedMessageText: StreamedMessageText$1 = StreamedMessageText } = require_useNotificationApi.useComponentContext("MessageUI");
 	const isAIGenerated = (0, react.useMemo)(() => isMessageAIGenerated?.(message), [isMessageAIGenerated, message]);
 	const isDeleted = require_useNotificationApi.isMessageDeleted(message);
 	const finalAttachments = (0, react.useMemo)(() => !message.shared_location && !message.attachments ? [] : !message.shared_location ? message.attachments : [message.shared_location, ...message.attachments ?? []], [message]);
@@ -20484,13 +20485,12 @@ var MessageUIWithContext = ({ endOfGroup, firstOfGroup, groupedByUser, handleAct
 			message.show_in_channel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageAlsoSentInChannelIndicator$1, {}),
 			!!reminder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReminderNotification$1, { reminder }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageTranslationIndicator$1, { message }),
-			message.user && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$1, {
+			message.user && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$2, {
+				...extractDisplayInfo$4({ user: message.user ?? void 0 }),
 				className: "str-chat__avatar--with-border",
-				imageUrl: message.user.image,
 				onClick: onUserClick,
 				onMouseOver: onUserHover,
-				size: "md",
-				userName: message.user.name || message.user.id
+				size: "md"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"aria-label": messageInnerAriaLabel,
@@ -21622,6 +21622,7 @@ var InfiniteScroll = (props) => {
 */
 var UnMemoizedTypingIndicator = (props) => {
 	const { isMessageListScrolledToBottom = true, scrollToBottom, threadList } = props;
+	const { AvatarStack: AvatarStack$2 = AvatarStack, extractDisplayInfo: extractDisplayInfo$3 = require_useChannelHeaderOnlineStatus.extractDisplayInfo } = require_useNotificationApi.useComponentContext();
 	const { channelConfig, thread } = require_useNotificationApi.useChannelStateContext("TypingIndicator");
 	const parentId = require_useNotificationApi.useThreadContext()?.id ?? thread?.id;
 	const { client } = require_useNotificationApi.useChatContext("TypingIndicator");
@@ -21632,11 +21633,7 @@ var UnMemoizedTypingIndicator = (props) => {
 	const { displayUsers } = useDebouncedTypingActive(threadList ? typingInThread : typingInChannel);
 	const showIndicator = displayUsers.length > 0;
 	const typingAnnouncement = (0, react.useMemo)(() => getTypingStatusMessage(displayUsers, t), [displayUsers, t]);
-	const displayInfo = (0, react.useMemo)(() => displayUsers.map(({ user }) => ({
-		id: user?.id,
-		imageUrl: user?.image,
-		userName: user?.name
-	})), [displayUsers]);
+	const displayInfo = (0, react.useMemo)(() => displayUsers.map(extractDisplayInfo$3), [displayUsers, extractDisplayInfo$3]);
 	(0, react.useEffect)(() => {
 		if (showIndicator && isMessageListScrolledToBottom) scrollToBottom();
 	}, [
@@ -21652,7 +21649,7 @@ var UnMemoizedTypingIndicator = (props) => {
 		children: [
 			displayInfo.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarStack, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarStack$2, {
 					badgeSize: "md",
 					displayInfo,
 					size: "md"
@@ -23896,6 +23893,7 @@ var UserSearchResultItem = ({ item }) => {
 	const { setChannels } = require_useNotificationApi.useChannelListContext();
 	const { directMessagingChannelType } = useSearchContext();
 	const { t } = require_useNotificationApi.useTranslationContext();
+	const { Avatar: Avatar$1 = require_useChannelHeaderOnlineStatus.Avatar, extractDisplayInfo: extractDisplayInfo$2 = require_useChannelHeaderOnlineStatus.extractDisplayInfo } = require_useNotificationApi.useComponentContext();
 	const onClick = (0, react.useCallback)(() => {
 		const newChannel = client.channel(directMessagingChannelType, { members: [client.userID, item.id] });
 		newChannel.watch();
@@ -23916,11 +23914,10 @@ var UserSearchResultItem = ({ item }) => {
 			"data-testid": "search-result-user",
 			onClick,
 			role: "option",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useChannelHeaderOnlineStatus.Avatar, {
-				imageUrl: item.image,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar$1, {
+				...extractDisplayInfo$2({ user: item }),
 				isOnline: item.online,
-				size: "xl",
-				userName: item.name || item.id
+				size: "xl"
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "str-chat__search-result-data",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -25444,6 +25441,7 @@ var composeThreadListItemAccessibleLabel = (data, config = {}) => composeAccessi
 var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props }) => {
 	const { client, isMessageAIGenerated } = require_useNotificationApi.useChatContext();
 	const thread = useThreadListItemContext();
+	const { AvatarStack: AvatarStack$1 = AvatarStack, extractDisplayInfo: extractDisplayInfo$1 = require_useChannelHeaderOnlineStatus.extractDisplayInfo } = require_useNotificationApi.useComponentContext();
 	const selector = (0, react.useCallback)((nextValue) => ({
 		channel: nextValue.channel,
 		deletedAt: nextValue.deletedAt,
@@ -25514,12 +25512,8 @@ var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props })
 	};
 	const displayInfo = (0, react.useMemo)(() => {
 		if (!participants) return [];
-		return participants.slice(0, 3).map((participant) => ({
-			id: participant.user?.id ?? void 0,
-			imageUrl: participant.user?.image,
-			userName: participant.user?.name || participant.user.id
-		}));
-	}, [participants]);
+		return participants.slice(0, 3).map(extractDisplayInfo$1);
+	}, [extractDisplayInfo$1, participants]);
 	(0, react.useEffect)(() => {
 		if (!resetHighlighting) return;
 		const reset = resetHighlighting;
@@ -25558,7 +25552,7 @@ var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props })
 						className: "str-chat__thread-list-item__content-trailing",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "str-chat__thread-list-item__reply-information",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarStack, {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AvatarStack$1, {
 								displayInfo,
 								size: "sm"
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -26169,7 +26163,7 @@ var useChat = ({ client, defaultLanguage = "en", i18nInstance }) => {
 	};
 	(0, react.useEffect)(() => {
 		if (!client) return;
-		const version = "14.9.0";
+		const version = "14.10.0";
 		const userAgent = client.getUserAgent();
 		if (!userAgent.includes("stream-chat-react")) client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
 		client.threads.registerSubscriptions();