stream-chat-react 14.9.0 → 14.10.0

package/dist/es/index.mjs

@@ -1,5 +1,5 @@
 import { $ as isMessageEdited, $n as useStableId, $r as ChannelListContextProvider, $t as IconFolder, A as WithAudioPlayback, An as IconSearch, Ar as DialogPortalEntry, At as IconBookmarkRemove, B as ACTIONS_NOT_WORKING_IN_THREAD, Bn as IconUser, Br as useOpenedDialogCount, Bt as IconCopy, C as insertIntro, Cn as IconPlusSmall, Cr as DialogManagerProvider, Ct as IconArrowUpRight, D as makeDateMessageId, Dn as IconReorder, Dr as useModalDialogManager, Dt as IconBellOff, E as isLocalMessage, En as IconRefresh, Er as useDialogManager, Et as IconBell, F as defaultRegisterAudioPlayerError, Fn as IconTranslate, Fr as useDialogIsTopmost, Ft as IconChevronDown, G as countEmojis, Gn as IconVideo, Gr as useComponentContext, Gt as IconEmojiAdd, H as OPTIONAL_MESSAGE_ACTIONS, Hn as IconUserCheck, Hr as DialogManager, Ht as IconDownload, I as elementIsPlaying, In as IconTrophy, Ir as useDialogOnNearestManager, It as IconChevronLeft, J as getNonImageAttachments, Jn as IconXCircle, Jr as useChatContext, Jt as IconExclamationMarkFill, K as getImages, Kn as IconVideoFill, Kr as ChatContext, Kt as IconExclamationCircleFill, L as LegacyThreadContext, Ln as IconUnpin, Lr as useModalDialog, Lt as IconChevronRight, M as useAudioPlayer, Mn as IconShield, Mr as modalDialogId, Mt as IconCheckmark, N as useInteractionAnnouncements, Nn as IconThread, Nr as useDialog, Nt as IconCheckmark1Small, O as makeIntroMessage, On as IconReply, Or as useNearestDialogManagerContext, Ot as IconBolt, P as AudioPlayer, Pn as IconThreadFill, Pr as useDialogIsOpen, Pt as IconChecks, Q as isMessageDeleted, Qn as Button, Qr as ChannelListContext, Qt as IconFlag, R as useLegacyThreadContext, Rn as IconUnsupportedAttachment, Rr as useModalDialogIsOpen, Rt as IconClock, S as hasMoreMessagesProbably, Sn as IconPlus, Sr as predefinedFormatters, St as IconArrowUp, T as isIntroMessage, Tn as IconQuote, Tr as modalDialogManagerId, Tt as IconAudio, U as areMessagePropsEqual, Un as IconUserRemove, Ur as ComponentContext, Ut as IconEdit, V as MESSAGE_ACTIONS, Vn as IconUserAdd, Vr as useStateStore, Vt as IconDelete, W as areMessageUIPropsEqual, Wn as IconUsers, Wr as ComponentProvider, Wt as IconEmoji, X as isMessageBlocked, Xn as IconXmarkSmall, Xr as ChannelStateProvider, Xt as IconEyeFill, Y as getReadByTooltipText, Yn as IconXmark, Yr as ChannelStateContext, Yt as IconExclamationTriangleFill, Z as isMessageBounced, Zn as createIcon, Zr as useChannelStateContext, Zt as IconFile, _ as Channel, _n as IconNoSign, _r as getDateString, _t as EmptyStateIndicator, a as ChatView, an as IconLoading, ar as isNotificationTargetPanel, at as messageHasGiphyAttachment, b as getIsFirstUnreadMessage, bn as IconPin, br as isLanguageSupported, bt as IconArrowDownCircle, c as ChatViewSelectorButton, cn as IconMenu, cr as useAriaLiveAnnouncer, ct as messageHasSingleAttachment, d as useActiveThread, dn as IconMessageBubbles, dr as useTypingContext, dt as EMOJI_REGEX, ei as useChannelListContext, en as IconGiphy, er as addNotificationTargetTag, et as isMessageErrorRetryable, f as useChatViewContext, fn as IconMicrophoneSolid, fr as TranslationContext, ft as CHANNEL_CONTAINER_ID, g as useThreadContext, gn as IconMute, gr as defaultTranslatorFunction, gt as useEditMessageHandler, h as ThreadProvider, hn as IconMore, hr as defaultDateTimeParser, ht as useMentionsHandlers, i as useNotificationTarget, in as IconLink, ir as isNotificationForPanel, it as messageHasAttachments, j as useActiveAudioPlayer, jn as IconSend, jr as Portal, jt as IconCamera, k as processMessages, kn as IconRetry, kr as DialogPortalDestination, kt as IconBookmark, l as ChatViewThreadsSelectorButton, ln as IconMessageBubble, lr as TypingContext, lt as messageTextHasEmojisOnly, m as ThreadContext, mn as IconMinusCircle, mr as useTranslationContext, mt as LoadingChannel, n as hasSystemNotificationTag, ni as ChannelActionProvider, nn as IconInfo, nr as getNotificationTargetPanels, nt as isUserMuted, o as ChatViewChannelsSelectorButton, on as IconLocation, or as useDebouncedAnnounce, ot as messageHasQuotedMessage, p as useThreadsViewContext, pn as IconMinus, pr as TranslationProvider, pt as LoadingErrorIndicator, q as getMessageActions, qn as IconVoice, qr as ChatProvider, qt as IconExclamationMark, r as useNotificationApi, ri as useChannelActionContext, rn as IconLeave, rr as getNotificationTargetTag, rt as mapToUserNameOrId, s as ChatViewContext, sn as IconMegaphone, sr as AriaLiveAnnouncerContext, st as messageHasReactions, t as SYSTEM_NOTIFICATION_TAG, ti as ChannelActionContext, tn as IconImage, tr as getNotificationTargetPanel, tt as isNetworkSendFailure, u as defaultChatViewSelectorItemSet, un as IconMessageBubbleFill, ur as TypingProvider, ut as validateAndGetMessage, v as getChannel, vn as IconNotification, vr as isDate, vt as IconArchive, w as isDateSeparatorMessage, wn as IconPoll, wr as ModalDialogManagerProvider, wt as IconAttachment, x as getLastReceived, xn as IconPlayFill, xr as isNumberOrString, xt as IconArrowLeft, y as getGroupStyles, yn as IconPauseFill, yr as isDayOrMoment, yt as IconArrowDown, z as usePopoverPosition, zn as IconUpload, zr as useModalDialogIsTopmost, zt as IconCommand } from "./useNotificationApi.ed6bff88.mjs";
-import { $ as ContextMenu, A as Gallery, At as VisuallyHidden, B as formatTime, Bt as MessageContext, C as Checkbox, Ct as useStableCallback, D as SwitchFieldDescription, Dt as NotificationConfigurationProvider, E as SwitchField, Et as useNotifications, F as toGalleryItemDescriptors, Ft as useModalContext, G as MessageTimestamp, H as FILE_ICON_GRAPHIC_CLASSNAME, Ht as useMessageContext, I as useGalleryContext, It as MessageTranslationViewContext, J as imageToLink, K as Timestamp, L as toBaseImageDescriptors, Lt as MessageTranslationViewProvider, M as VideoThumbnail, Mt as useAriaLiveOutletContext, N as VideoPlayer, Nt as ModalContext, O as SwitchFieldLabel, Ot as useNotificationConfigurationContext, P as GalleryContext, Pt as ModalContextProvider, Q as BaseContextMenuButton, R as BaseImage, Rt as getTranslatedMessageText, S as TextInput, St as useAriaIdentifiers, T as Switch, Tt as LoadingIndicator, U as FILE_ICON_NO_LABEL_CLASSNAME, V as FileIcon, Vt as MessageProvider, W as DownloadButton, X as GlobalModal, Y as htmlToTextPlugin, Z as Prompt, _ as getLatestMessagePreview, _t as DialogAnchor, a as pickNewest, at as ContextMenuRoot, b as ListItemLayout, bt as Header, c as useIsUserMuted, ct as UserContextMenuButton, d as useSelectedChannelState, dt as getNextRovingFocusIndex, et as ContextMenuBackButton, f as isDmChannel, ft as GroupAvatar, g as getGroupChannelDisplayInfo, gt as Avatar, h as getChannelDisplayImage, ht as ErrorBadge, i as createDefaultPickNext, it as ContextMenuHeader, j as GalleryUI, jt as AriaLiveOutletContext, k as SwitchFieldTitle, kt as AriaLiveOutlet, l as useIsChannelMuted, lt as useContextMenuContext, m as useChannelDisplayName, mt as Badge, nt as ContextMenuButton, o as pickOldest, ot as DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR, p as useChannelPreviewInfo, pt as ChannelAvatar, q as plusPlusToEmphasis, r as NotificationList, rt as ContextMenuContent, s as Notification, st as EmojiContextMenuButton, t as useChannelHeaderOnlineStatus, tt as ContextMenuBody, u as useChannelMembershipState, ut as createRovingFocusKeyDownHandler, v as getLatestMessagePreviewText, vt as useDialogAnchor, w as Checkmark, wt as FileSizeIndicator, x as ListItemLayoutContent, xt as Root, y as renderPreviewText, yt as Alert, z as ImagePlaceholder, zt as useMessageTranslationViewContext } from "./useChannelHeaderOnlineStatus.c86db868.mjs";
+import { $ as BaseContextMenuButton, A as Gallery, At as AriaLiveOutlet, B as formatTime, Bt as useMessageTranslationViewContext, C as Checkbox, Ct as useAriaIdentifiers, D as SwitchFieldDescription, Dt as useNotifications, E as SwitchField, Et as LoadingIndicator, F as toGalleryItemDescriptors, Ft as ModalContextProvider, G as MessageTimestamp, H as FILE_ICON_GRAPHIC_CLASSNAME, Ht as MessageProvider, I as useGalleryContext, It as useModalContext, J as imageToLink, K as Timestamp, L as toBaseImageDescriptors, Lt as MessageTranslationViewContext, M as VideoThumbnail, Mt as AriaLiveOutletContext, N as VideoPlayer, Nt as useAriaLiveOutletContext, O as SwitchFieldLabel, Ot as NotificationConfigurationProvider, P as GalleryContext, Pt as ModalContext, Q as Prompt, R as BaseImage, Rt as MessageTranslationViewProvider, S as TextInput, St as Root, T as Switch, Tt as FileSizeIndicator, U as FILE_ICON_NO_LABEL_CLASSNAME, Ut as useMessageContext, V as FileIcon, Vt as MessageContext, W as DownloadButton, X as extractDisplayInfo, Y as htmlToTextPlugin, Z as GlobalModal, _ as getLatestMessagePreview, _t as Avatar, a as pickNewest, at as ContextMenuHeader, b as ListItemLayout, bt as Alert, c as useIsUserMuted, ct as EmojiContextMenuButton, d as useSelectedChannelState, dt as createRovingFocusKeyDownHandler, et as ContextMenu, f as isDmChannel, ft as getNextRovingFocusIndex, g as getGroupChannelDisplayInfo, gt as ErrorBadge, h as getChannelDisplayImage, ht as Badge, i as createDefaultPickNext, it as ContextMenuContent, j as GalleryUI, jt as VisuallyHidden, k as SwitchFieldTitle, kt as useNotificationConfigurationContext, l as useIsChannelMuted, lt as UserContextMenuButton, m as useChannelDisplayName, mt as ChannelAvatar, nt as ContextMenuBody, o as pickOldest, ot as ContextMenuRoot, p as useChannelPreviewInfo, pt as GroupAvatar, q as plusPlusToEmphasis, r as NotificationList, rt as ContextMenuButton, s as Notification, st as DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR, t as useChannelHeaderOnlineStatus, tt as ContextMenuBackButton, u as useChannelMembershipState, ut as useContextMenuContext, v as getLatestMessagePreviewText, vt as DialogAnchor, w as Checkmark, wt as useStableCallback, x as ListItemLayoutContent, xt as Header, y as renderPreviewText, yt as useDialogAnchor, z as ImagePlaceholder, zt as getTranslatedMessageText } from "./useChannelHeaderOnlineStatus.d6065c22.mjs";
 import { a as useMessageComposerContext, i as MessageComposerContextProvider, n as useIsCooldownActive, r as MessageComposerContext, t as useMessageComposerController } from "./useMessageComposerController.d50f6168.mjs";
 import { a as getExtensionFromMimeType, i as dataTransferItemsToFiles, n as toAudioBuffer, o as getRecordedMediaTypeFromMimeType, r as createFileFromBlobs, s as useHandleFileChangeWrapper, t as renderAudio } from "./audioProcessing.766ca76c.mjs";
 import React, { Component, Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -10332,14 +10332,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 = Avatar } = useComponentContext(AvatarStack.name);
+	const { Avatar: Avatar$6 = Avatar } = useComponentContext(AvatarStack.name);
 	const displayInfoToRender = useMemo(() => displayInfo.length > capLimit ? displayInfo.slice(0, capLimit) : displayInfo, [displayInfo, capLimit]);
 	const overflowCount = displayInfo.length - displayInfoToRender.length;
 	if (!displayInfo.length) return null;
 	return /* @__PURE__ */ jsxs(Component, {
 		className: clsx("str-chat__avatar-stack", { [`str-chat__avatar-stack--size-${size}`]: typeof size === "string" }),
 		"data-testid": "avatar-stack",
-		children: [displayInfoToRender.map((info, index) => /* @__PURE__ */ jsx(Avatar$3, {
+		children: [displayInfoToRender.map((info, index) => /* @__PURE__ */ jsx(Avatar$6, {
 			imageUrl: info.imageUrl,
 			size,
 			userName: info.userName
@@ -10665,14 +10665,11 @@ var MessageAlsoSentInChannelIndicator = () => {
 //#endregion
 //#region src/components/Message/MessageRepliesCountButton.tsx
 function UnMemoizedMessageRepliesCountButton(props) {
-	const { AvatarStack: AvatarStack$2 = AvatarStack } = useComponentContext(MessageRepliesCountButton.name);
+	const { AvatarStack: AvatarStack$4 = AvatarStack, extractDisplayInfo: extractDisplayInfo$9 = extractDisplayInfo } = useComponentContext(MessageRepliesCountButton.name);
 	const { labelPlural, labelSingle, onClick, reply_count: replyCount = 0, thread_participants: threadParticipants = [] } = props;
 	const { channelCapabilities } = useChannelStateContext();
 	const { t } = useTranslationContext("MessageRepliesCountButton");
-	const avatarStackDisplayInfo = useMemo(() => threadParticipants.slice(0, 3).map((participant) => ({
-		imageUrl: participant.image,
-		userName: participant.name || participant.id
-	})), [threadParticipants]);
+	const avatarStackDisplayInfo = 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}`;
@@ -10684,7 +10681,7 @@ function UnMemoizedMessageRepliesCountButton(props) {
 			"data-testid": "replies-count-button",
 			disabled: !channelCapabilities["send-reply"],
 			onClick,
-			children: [replyCountText, /* @__PURE__ */ jsx(AvatarStack$2, {
+			children: [replyCountText, /* @__PURE__ */ jsx(AvatarStack$4, {
 				displayInfo: avatarStackDisplayInfo,
 				size: "xs"
 			})]
@@ -15012,15 +15009,16 @@ var PollVoteTimestamp = ({ timestamp }) => {
 var PollVoteAuthor = ({ vote }) => {
 	const { t } = useTranslationContext();
 	const { client } = useChatContext();
+	const { Avatar: Avatar$5 = Avatar, extractDisplayInfo: extractDisplayInfo$8 = extractDisplayInfo } = useComponentContext();
 	const displayName = client.user?.id && client.user.id === vote.user?.id ? t("You") : vote.user?.name || vote.user?.id || t("Anonymous");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__poll-vote__author",
-		children: [vote.user && /* @__PURE__ */ jsx(Avatar, {
+		children: [vote.user && /* @__PURE__ */ 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__ */ jsx("div", {
+			key: `poll-vote-${vote.id}-avatar-${vote.user.id}`,
+			size: "md"
+		}), /* @__PURE__ */ jsx("div", {
 			className: "str-chat__poll-vote__author__name",
 			children: displayName
 		})]
@@ -15566,7 +15564,7 @@ var PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbose }) => {
 	const { t } = useTranslationContext();
 	const { channelCapabilities = {} } = useChannelStateContext("PollOptionsShortlist");
 	const { message } = useMessageContext();
-	const { AvatarStack: AvatarStack$1 = AvatarStack } = useComponentContext();
+	const { AvatarStack: AvatarStack$3 = AvatarStack, extractDisplayInfo: extractDisplayInfo$7 = extractDisplayInfo } = useComponentContext();
 	const { poll } = usePollContext();
 	const { is_closed, latest_votes_by_option, maxVotedOptionIds, ownVotesByOptionId, vote_counts_by_option, voting_visibility } = useStateStore(poll.state, pollStateSelector$2);
 	const canCastVote = channelCapabilities["cast-poll-vote"] && !is_closed;
@@ -15583,12 +15581,9 @@ var PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbose }) => {
 		ownVotesByOptionId,
 		poll
 	]);
-	const avatarDisplayInfo = useMemo(() => latest_votes_by_option?.[option.id] && latest_votes_by_option[option.id].filter((vote) => !!vote.user && !isVoteAnswer(vote)).slice(0, displayAvatarCount).map(({ user }) => ({
-		id: user.id,
-		imageUrl: user.image,
-		userName: user.name
-	})), [
+	const avatarDisplayInfo = useMemo(() => latest_votes_by_option?.[option.id] && latest_votes_by_option[option.id].filter((vote) => !!vote.user && !isVoteAnswer(vote)).slice(0, displayAvatarCount).map(extractDisplayInfo$7), [
 		displayAvatarCount,
+		extractDisplayInfo$7,
 		latest_votes_by_option,
 		option.id
 	]);
@@ -15614,7 +15609,7 @@ var PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbose }) => {
 					className: "str-chat__poll-option-votes",
 					children: [displayAvatarCount && voting_visibility === "public" && /* @__PURE__ */ jsx("div", {
 						className: "str-chat__poll-option-voters",
-						children: /* @__PURE__ */ jsx(AvatarStack$1, {
+						children: /* @__PURE__ */ jsx(AvatarStack$3, {
 							displayInfo: avatarDisplayInfo,
 							size: "xs"
 						})
@@ -17621,16 +17616,23 @@ var UserGroupItem = ({ entity, focused, ...buttonProps }) => {
 * UI component for mentions rendered in suggestion list
 */
 var UserItem = ({ entity, focused, ...buttonProps }) => {
+	const { Avatar: Avatar$4 = Avatar, extractDisplayInfo: extractDisplayInfo$6 = extractDisplayInfo } = useComponentContext();
 	const hasEntity = !!Object.keys(entity).length;
 	const titleAttribute = entity.name || entity.id || "";
-	const LeadingSlot = useMemo(() => function UserItemAvatar() {
-		return /* @__PURE__ */ jsx(Avatar, {
-			"aria-hidden": true,
-			imageUrl: entity.image,
-			size: "md",
-			userName: titleAttribute
-		});
-	}, [entity.image, titleAttribute]);
+	const LeadingSlot = useMemo(() => {
+		const displayInfo = extractDisplayInfo$6({ user: entity });
+		return function UserItemAvatar() {
+			return /* @__PURE__ */ jsx(Avatar$4, {
+				...displayInfo,
+				"aria-hidden": true,
+				size: "md"
+			});
+		};
+	}, [
+		Avatar$4,
+		entity,
+		extractDisplayInfo$6
+	]);
 	if (!hasEntity) return null;
 	return /* @__PURE__ */ jsx(ListItemLayout, {
 		contentClassName: "str-chat__context-menu__button__label",
@@ -19113,7 +19115,7 @@ var MessageReactionsDetailLoadingIndicator = () => {
 var MessageReactionsDetail = ({ handleFetchReactions, handleReaction, onSelectedReactionTypeChange, own_reactions, reactionDetailsSort: propReactionDetailsSort, reactionGroups, reactions, selectedReactionType, totalReactionCount }) => {
 	const [extendedReactionListOpen, setExtendedReactionListOpen] = useState(false);
 	const { client } = useChatContext();
-	const { Avatar: Avatar$2 = Avatar, LoadingIndicator = MessageReactionsDetailLoadingIndicator, reactionOptions = defaultReactionOptions, ReactionSelectorExtendedList = ReactionSelector.ExtendedList } = useComponentContext(MessageReactionsDetail.name);
+	const { Avatar: Avatar$3 = Avatar, extractDisplayInfo: extractDisplayInfo$5 = extractDisplayInfo, LoadingIndicator = MessageReactionsDetailLoadingIndicator, reactionOptions = defaultReactionOptions, ReactionSelectorExtendedList = ReactionSelector.ExtendedList } = useComponentContext(MessageReactionsDetail.name);
 	const { t } = useTranslationContext();
 	const { handleReaction: contextHandleReaction, message, reactionDetailsSort: contextReactionDetailsSort } = useMessageContext(MessageReactionsDetail.name);
 	const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
@@ -19195,12 +19197,11 @@ var MessageReactionsDetail = ({ handleFetchReactions, handleReaction, onSelected
 						return /* @__PURE__ */ jsxs("div", {
 							className: "str-chat__message-reactions-detail__user-list-item",
 							children: [
-								/* @__PURE__ */ jsx(Avatar$2, {
+								/* @__PURE__ */ 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__ */ jsxs("div", {
 									className: "str-chat__message-reactions-detail__user-list-item-info",
@@ -20397,7 +20398,7 @@ var MessageUIWithContext = ({ endOfGroup, firstOfGroup, groupedByUser, handleAct
 	const { t } = useTranslationContext("MessageUI");
 	const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
 	const reminder = useMessageReminder(message.id);
-	const { Attachment: Attachment$13 = Attachment, Avatar: Avatar$1 = 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 = MessageTimestamp, MessageTranslationIndicator: MessageTranslationIndicator$1 = MessageTranslationIndicator, PinIndicator: PinIndicator$1 = PinIndicator, QuotedMessage: QuotedMessage$1 = QuotedMessage, ReminderNotification: ReminderNotification$1 = ReminderNotification, StreamedMessageText: StreamedMessageText$1 = StreamedMessageText } = useComponentContext("MessageUI");
+	const { Attachment: Attachment$13 = Attachment, Avatar: Avatar$2 = Avatar, extractDisplayInfo: extractDisplayInfo$4 = 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 = MessageTimestamp, MessageTranslationIndicator: MessageTranslationIndicator$1 = MessageTranslationIndicator, PinIndicator: PinIndicator$1 = PinIndicator, QuotedMessage: QuotedMessage$1 = QuotedMessage, ReminderNotification: ReminderNotification$1 = ReminderNotification, StreamedMessageText: StreamedMessageText$1 = StreamedMessageText } = useComponentContext("MessageUI");
 	const isAIGenerated = useMemo(() => isMessageAIGenerated?.(message), [isMessageAIGenerated, message]);
 	const isDeleted = isMessageDeleted(message);
 	const finalAttachments = useMemo(() => !message.shared_location && !message.attachments ? [] : !message.shared_location ? message.attachments : [message.shared_location, ...message.attachments ?? []], [message]);
@@ -20463,13 +20464,12 @@ var MessageUIWithContext = ({ endOfGroup, firstOfGroup, groupedByUser, handleAct
 			message.show_in_channel && /* @__PURE__ */ jsx(MessageAlsoSentInChannelIndicator$1, {}),
 			!!reminder && /* @__PURE__ */ jsx(ReminderNotification$1, { reminder }),
 			/* @__PURE__ */ jsx(MessageTranslationIndicator$1, { message }),
-			message.user && /* @__PURE__ */ jsx(Avatar$1, {
+			message.user && /* @__PURE__ */ 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__ */ jsxs("div", {
 				"aria-label": messageInnerAriaLabel,
@@ -21601,6 +21601,7 @@ var InfiniteScroll = (props) => {
 */
 var UnMemoizedTypingIndicator = (props) => {
 	const { isMessageListScrolledToBottom = true, scrollToBottom, threadList } = props;
+	const { AvatarStack: AvatarStack$2 = AvatarStack, extractDisplayInfo: extractDisplayInfo$3 = extractDisplayInfo } = useComponentContext();
 	const { channelConfig, thread } = useChannelStateContext("TypingIndicator");
 	const parentId = useThreadContext()?.id ?? thread?.id;
 	const { client } = useChatContext("TypingIndicator");
@@ -21611,11 +21612,7 @@ var UnMemoizedTypingIndicator = (props) => {
 	const { displayUsers } = useDebouncedTypingActive(threadList ? typingInThread : typingInChannel);
 	const showIndicator = displayUsers.length > 0;
 	const typingAnnouncement = useMemo(() => getTypingStatusMessage(displayUsers, t), [displayUsers, t]);
-	const displayInfo = useMemo(() => displayUsers.map(({ user }) => ({
-		id: user?.id,
-		imageUrl: user?.image,
-		userName: user?.name
-	})), [displayUsers]);
+	const displayInfo = useMemo(() => displayUsers.map(extractDisplayInfo$3), [displayUsers, extractDisplayInfo$3]);
 	useEffect(() => {
 		if (showIndicator && isMessageListScrolledToBottom) scrollToBottom();
 	}, [
@@ -21631,7 +21628,7 @@ var UnMemoizedTypingIndicator = (props) => {
 		children: [
 			displayInfo.length > 0 && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ jsx(AvatarStack, {
+				children: /* @__PURE__ */ jsx(AvatarStack$2, {
 					badgeSize: "md",
 					displayInfo,
 					size: "md"
@@ -23875,6 +23872,7 @@ var UserSearchResultItem = ({ item }) => {
 	const { setChannels } = useChannelListContext();
 	const { directMessagingChannelType } = useSearchContext();
 	const { t } = useTranslationContext();
+	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$2 = extractDisplayInfo } = useComponentContext();
 	const onClick = useCallback(() => {
 		const newChannel = client.channel(directMessagingChannelType, { members: [client.userID, item.id] });
 		newChannel.watch();
@@ -23895,11 +23893,10 @@ var UserSearchResultItem = ({ item }) => {
 			"data-testid": "search-result-user",
 			onClick,
 			role: "option",
-			children: [/* @__PURE__ */ jsx(Avatar, {
-				imageUrl: item.image,
+			children: [/* @__PURE__ */ jsx(Avatar$1, {
+				...extractDisplayInfo$2({ user: item }),
 				isOnline: item.online,
-				size: "xl",
-				userName: item.name || item.id
+				size: "xl"
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "str-chat__search-result-data",
 				children: [/* @__PURE__ */ jsx("div", {
@@ -25423,6 +25420,7 @@ var composeThreadListItemAccessibleLabel = (data, config = {}) => composeAccessi
 var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props }) => {
 	const { client, isMessageAIGenerated } = useChatContext();
 	const thread = useThreadListItemContext();
+	const { AvatarStack: AvatarStack$1 = AvatarStack, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
 	const selector = useCallback((nextValue) => ({
 		channel: nextValue.channel,
 		deletedAt: nextValue.deletedAt,
@@ -25493,12 +25491,8 @@ var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props })
 	};
 	const displayInfo = 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]);
 	useEffect(() => {
 		if (!resetHighlighting) return;
 		const reset = resetHighlighting;
@@ -25537,7 +25531,7 @@ var ThreadListItemUI = ({ accessibleLabelConfig, resetHighlighting, ...props })
 						className: "str-chat__thread-list-item__content-trailing",
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "str-chat__thread-list-item__reply-information",
-							children: [/* @__PURE__ */ jsx(AvatarStack, {
+							children: [/* @__PURE__ */ jsx(AvatarStack$1, {
 								displayInfo,
 								size: "sm"
 							}), /* @__PURE__ */ jsx("span", {
@@ -26148,7 +26142,7 @@ var useChat = ({ client, defaultLanguage = "en", i18nInstance }) => {
 	};
 	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();