stream-chat-react 14.9.0 → 14.11.0

package/dist/es/channel-detail.mjs

@@ -1,9 +1,9 @@
-import { $t as IconFolder, An as IconSearch, Bn as IconUser, Gr as useComponentContext, Ir as useDialogOnNearestManager, It as IconChevronLeft, Jr as useChatContext, Kn as IconVideoFill, Lt as IconChevronRight, Mt as IconCheckmark, Pr as useDialogIsOpen, Qn as Button, Tt as IconAudio, Un as IconUserRemove, Vn as IconUserAdd, Vr as useStateStore, Vt as IconDelete, Zr as useChannelStateContext, _n as IconNoSign, _r as getDateString, bn as IconPin, cn as IconMenu, ei as useChannelListContext, gn as IconMute, ln as IconMessageBubble, mr as useTranslationContext, nn as IconInfo, r as useNotificationApi, ri as useChannelActionContext, rn as IconLeave, tn as IconImage, vr as isDate } from "./useNotificationApi.ed6bff88.mjs";
-import { $ as ContextMenu, A as Gallery, B as formatTime, C as Checkbox, Ct as useStableCallback, Ft as useModalContext, L as toBaseImageDescriptors, R as BaseImage, S as TextInput, T as Switch, Tt as LoadingIndicator, V as FileIcon, X as GlobalModal, Z as Prompt, b as ListItemLayout, c as useIsUserMuted, f as isDmChannel, gt as Avatar, j as GalleryUI, l as useIsChannelMuted, mt as Badge, n as useChannelHasMembersOnline, nt as ContextMenuButton, p as useChannelPreviewInfo, pt as ChannelAvatar, t as useChannelHeaderOnlineStatus, u as useChannelMembershipState, wt as FileSizeIndicator, yt as Alert } from "./useChannelHeaderOnlineStatus.c86db868.mjs";
+import { Ct as ContextMenuButton, F as ListItemLayout, G as GalleryUI, Gn as isDate, L as TextInput, Nt as Avatar, Q as BaseImage, Qn as useModalContext, R as Switch, Sr as useComponentContextIcons, Vn as useTranslationContext, W as Gallery, Wn as getDateString, Z as toBaseImageDescriptors, _a as useChannelActionContext, _t as GlobalModal, aa as useComponentContext, br as useStateStore, bt as ContextMenu, c as useNotificationApi, ca as useChatContext, da as useChannelStateContext, dn as FileSizeIndicator, et as formatTime, fn as LoadingIndicator, hr as useDialogOnNearestManager, ma as useChannelListContext, mt as extractDisplayInfo, pr as useDialogIsOpen, tt as FileIcon, vn as Button, vt as Prompt } from "./NotificationList.db01a56d.mjs";
+import { D as useStableCallback, S as Badge, a as useChannelMembershipState, c as useChannelPreviewInfo, h as Checkbox, i as useIsChannelMuted, n as useChannelHasMembersOnline, r as useIsUserMuted, s as isDmChannel, t as useChannelHeaderOnlineStatus, w as Alert, x as ChannelAvatar } from "./useChannelHeaderOnlineStatus.a9357343.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 { ChannelMemberSearchSource, MessageSearchSource, UserSearchSource, isImageAttachment, isScrapedContent, isVideoAttachment } from "stream-chat";
 import clsx from "clsx";
+import { ChannelMemberSearchSource, MessageSearchSource, UserSearchSource, isImageAttachment, isScrapedContent, isVideoAttachment } from "stream-chat";
 import debounce from "lodash.debounce";
 import uniqBy from "lodash.uniqby";
 import { GroupedVirtuoso, Virtuoso } from "react-virtuoso";
@@ -174,6 +174,7 @@ var SectionNavigator = ({ className, createLayoutObserver = defaultCreateLayoutO
 * (`goBack`), where it would compete with the back affordance.
 */
 var SectionNavigatorHeader = (props) => {
+	const { IconMenu } = useComponentContextIcons();
 	const { t } = useTranslationContext("SectionNavigatorHeader");
 	const { layout, openNavigation } = useSectionNavigatorContext();
 	const MenuButton = useMemo(() => {
@@ -192,6 +193,7 @@ var SectionNavigatorHeader = (props) => {
 			});
 		};
 	}, [
+		IconMenu,
 		layout,
 		openNavigation,
 		props.goBack,
@@ -239,6 +241,7 @@ var useChannelDetailContext = () => {
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesEmptyList.tsx
 var ChannelFilesEmptyList = () => {
+	const { IconFolder } = useComponentContextIcons();
 	const { t } = useTranslationContext("ChannelFilesEmptyList");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__channel-detail__files-view__empty-state",
@@ -480,11 +483,26 @@ var ChannelFilesView = () => {
 //#region src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementActions.defaults.tsx
 var toError$1 = (error) => error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred");
 var getDisplayName = (name, fallback) => name || fallback || "";
-var BlockUserActionIcon$1 = () => /* @__PURE__ */ jsx(IconNoSign, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user" });
-var DeleteChatActionIcon = () => /* @__PURE__ */ jsx(IconDelete, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--delete-chat" });
-var MuteActionIcon = () => /* @__PURE__ */ jsx(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
-var MutedActionIcon = () => /* @__PURE__ */ jsx(IconAudio, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute" });
-var LeaveChannelActionIcon = () => /* @__PURE__ */ jsx(IconLeave, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--leave-channel" });
+var BlockUserActionIcon$1 = () => {
+	const { IconNoSign } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconNoSign, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user" });
+};
+var DeleteChatActionIcon = () => {
+	const { IconDelete } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconDelete, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--delete-chat" });
+};
+var MuteActionIcon = () => {
+	const { IconMute } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
+};
+var MutedActionIcon = () => {
+	const { IconAudio } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconAudio, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute" });
+};
+var LeaveChannelActionIcon = () => {
+	const { IconLeave } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconLeave, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--leave-channel" });
+};
 var channelManagementViewActionClassName = "str-chat__channel-management-view-action";
 var blockedUsersSelector$1 = ({ userIds }) => ({ userIds });
 var ChannelManagementConfirmationAlert = ({ action, cancelLabel, confirmLabel, description, isSubmitting, onCancel, onConfirm, testId, title }) => /* @__PURE__ */ jsxs(Alert.Root, {
@@ -1009,6 +1027,7 @@ var defaultChannelManagementActionSet = [
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelManagementView/ChannelManagementView.tsx
 var ChannelManagementInfoBody = ({ actions }) => {
+	const { IconMute, IconPin } = useComponentContextIcons();
 	const { client } = useChatContext();
 	const { channel } = useChannelDetailContext();
 	const { Avatar = ChannelAvatar } = useComponentContext();
@@ -1198,6 +1217,7 @@ var useChannelManagementEditForm = ({ uploadImage }) => {
 	};
 };
 var ChannelManagementEditBody = (props) => {
+	const { IconCheckmark } = useComponentContextIcons();
 	const { Avatar = ChannelAvatar } = useComponentContext();
 	const { canSubmit, displayTitle, fileInputRef, groupChannelDisplayInfo, handleDeleteImage, handleFileChange, handleOpenFilePicker, handleSubmit, hasAvatarImage, isOnline, name, nameLabel, previewImageUrl, setName, t, trimmedName } = useChannelManagementEditForm(props);
 	return /* @__PURE__ */ jsxs("form", {
@@ -1306,6 +1326,7 @@ var ChannelManagementView = ({ channelManagementActionSet = defaultChannelManage
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaEmptyList.tsx
 var ChannelMediaEmptyList = () => {
+	const { IconImage } = useComponentContextIcons();
 	const { t } = useTranslationContext("ChannelMediaEmptyList");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__channel-detail__media-view__empty-state",
@@ -1403,6 +1424,8 @@ var useChannelMediaSearch = () => {
 var DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE = 30;
 var ChannelMediaGridItem = ({ BaseImage, item, onClick }) => {
 	const { t } = useTranslationContext("ChannelMediaView");
+	const { Avatar: Avatar$4 = Avatar, extractDisplayInfo: extractDisplayInfo$4 = extractDisplayInfo } = useComponentContext();
+	const { IconImage, IconVideoFill } = useComponentContextIcons();
 	const displayName = getUserDisplayName(item.user);
 	const mediaSrc = item.type === "video" ? item.galleryItem.videoThumbnailUrl : item.galleryItem.imageUrl;
 	const durationLabel = formatTime(item.durationSeconds, "floor");
@@ -1421,12 +1444,11 @@ var ChannelMediaGridItem = ({ BaseImage, item, onClick }) => {
 				className: "str-chat__channel-detail__media-view__item__placeholder",
 				children: /* @__PURE__ */ jsx(IconImage, {})
 			}),
-			/* @__PURE__ */ jsx(Avatar, {
+			/* @__PURE__ */ jsx(Avatar$4, {
+				...extractDisplayInfo$4({ user: item.user }),
 				"aria-hidden": "true",
 				className: "str-chat__channel-detail__media-view__item__avatar",
-				imageUrl: item.user?.image,
-				size: "sm",
-				userName: displayName
+				size: "sm"
 			}),
 			item.type === "video" && /* @__PURE__ */ jsxs(Badge, {
 				className: "str-chat__channel-detail__media-view__item__duration",
@@ -1439,6 +1461,7 @@ var ChannelMediaGridItem = ({ BaseImage, item, onClick }) => {
 };
 var ChannelMediaPagination = ({ nextDisabled, onNext, onPrevious, previousDisabled }) => {
 	const { t } = useTranslationContext("ChannelMediaView");
+	const { IconChevronLeft, IconChevronRight } = useComponentContextIcons();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__channel-detail__media-view__pagination",
 		children: [/* @__PURE__ */ jsxs(Button, {
@@ -1621,6 +1644,7 @@ var AddMembersHeaderAction = ({ modeController }) => {
 };
 var AddMembersMenuAction = ({ closeMenu, modeController }) => {
 	const { t } = useTranslationContext();
+	const { IconUserAdd } = useComponentContextIcons();
 	if (modeController.mode !== "browse") return null;
 	return /* @__PURE__ */ jsx(ContextMenuButton, {
 		"aria-label": t("Add channel members"),
@@ -1748,6 +1772,7 @@ var useChannelMemberIds = (channel) => {
 //#endregion
 //#region src/plugins/ChannelDetail/ChannelDetailSearchInput.tsx
 var ChannelDetailSearchInput = React.memo(({ autoFocus, onSearchChange, resetKey }) => {
+	const { IconSearch } = useComponentContextIcons();
 	const { t } = useTranslationContext();
 	const [searchInput, setSearchInput] = useState("");
 	useEffect(() => {
@@ -1773,10 +1798,13 @@ var ChannelDetailSearchInput = React.memo(({ autoFocus, onSearchChange, resetKey
 ChannelDetailSearchInput.displayName = "ChannelDetailSearchInput";
 //#endregion
 //#region src/plugins/ChannelDetail/ChannelDetailEmptyList.tsx
-var ChannelDetailEmptyList = ({ children }) => /* @__PURE__ */ jsxs("div", {
-	className: "str-chat__channel-detail__channel-members-view__empty-state",
-	children: [/* @__PURE__ */ jsx(IconSearch, {}), /* @__PURE__ */ jsx("div", { children })]
-});
+var ChannelDetailEmptyList = ({ children }) => {
+	const { IconSearch } = useComponentContextIcons();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__channel-members-view__empty-state",
+		children: [/* @__PURE__ */ jsx(IconSearch, {}), /* @__PURE__ */ jsx("div", { children })]
+	});
+};
 //#endregion
 //#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
 var USER_SEARCH_PAGE_SIZE = 30;
@@ -1786,22 +1814,25 @@ var searchSourceItemsStateSelector = (state) => ({
 });
 var EMPTY_USERS = [];
 var computeUserItemKey = (_, user) => user.id;
-var MuteIndicator = () => /* @__PURE__ */ jsx(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
+var MuteIndicator = () => {
+	const { IconMute } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
+};
 var readOnlyRootProps = { className: "str-chat__channel-detail__channel-members-view__list-item" };
 var ChannelMembersAddViewItem = ({ canManageChannelMembers, isMember, isMuted, isSelected, toggleSelectedUser, user }) => {
 	const { t } = useTranslationContext();
+	const { Avatar: Avatar$3 = Avatar, extractDisplayInfo: extractDisplayInfo$3 = extractDisplayInfo } = useComponentContext();
 	const displayName = getUserDisplayName(user);
 	const LeadingSlot = useMemo(() => function MemberAvatar() {
-		return /* @__PURE__ */ jsx(Avatar, {
-			imageUrl: user.image,
+		return /* @__PURE__ */ jsx(Avatar$3, {
+			...extractDisplayInfo$3({ user }),
 			isOnline: user.online,
-			size: "md",
-			userName: displayName
+			size: "md"
 		});
 	}, [
-		displayName,
-		user.image,
-		user.online
+		Avatar$3,
+		extractDisplayInfo$3,
+		user
 	]);
 	const SelectableTrailingSlot = useMemo(() => function SelectCheckbox() {
 		return /* @__PURE__ */ jsx(Checkbox, {
@@ -2008,18 +2039,23 @@ var getPresenceStatusText$1 = (user, t) => {
 };
 var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
 	const { t } = useTranslationContext();
+	const { Avatar: Avatar$2 = Avatar, extractDisplayInfo: extractDisplayInfo$2 = extractDisplayInfo } = useComponentContext();
 	const user = member.user;
 	const displayName = getMemberDisplayName(member);
 	const roleTranslation = getMemberRoleTranslation(member, t);
 	const LeadingSlot = useMemo(() => function MemberAvatar() {
-		return /* @__PURE__ */ jsx(Avatar, {
-			imageUrl: user?.image,
+		return /* @__PURE__ */ jsx(Avatar$2, {
+			...extractDisplayInfo$2({ user: user ?? void 0 }),
 			isOnline: user?.online,
-			size: "md",
-			userName: getUserDisplayName(user)
+			size: "md"
 		});
-	}, [user]);
+	}, [
+		Avatar$2,
+		extractDisplayInfo$2,
+		user
+	]);
 	const TrailingSlot = useMemo(() => function MemberTrailingSlot() {
+		const { IconMute } = useComponentContextIcons();
 		return /* @__PURE__ */ jsxs("div", {
 			className: "str-chat__channel-detail__channel-members-view__list-item__trailing-slot",
 			children: [roleTranslation ? /* @__PURE__ */ jsx("span", {
@@ -2093,11 +2129,26 @@ var useChannelMemberActionContext = () => {
 	return contextValue;
 };
 var toError = (error) => error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred");
-var MemberMuteActionIcon = () => /* @__PURE__ */ jsx(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
-var MemberUnmuteActionIcon = () => /* @__PURE__ */ jsx(IconAudio, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute" });
-var SendDirectMessageActionIcon = () => /* @__PURE__ */ jsx(IconMessageBubble, { className: "str-chat__channel-detail__action-icon" });
-var BlockUserActionIcon = () => /* @__PURE__ */ jsx(IconNoSign, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user" });
-var RemoveUserActionIcon = () => /* @__PURE__ */ jsx(IconUserRemove, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--remove-user" });
+var MemberMuteActionIcon = () => {
+	const { IconMute } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
+};
+var MemberUnmuteActionIcon = () => {
+	const { IconAudio } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconAudio, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute" });
+};
+var SendDirectMessageActionIcon = () => {
+	const { IconMessageBubble } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconMessageBubble, { className: "str-chat__channel-detail__action-icon" });
+};
+var BlockUserActionIcon = () => {
+	const { IconNoSign } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconNoSign, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user" });
+};
+var RemoveUserActionIcon = () => {
+	const { IconUserRemove } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconUserRemove, { className: "str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--remove-user" });
+};
 var channelMemberDetailActionClassName = "str-chat__channel-member-detail-action";
 var blockedUsersSelector = ({ userIds }) => ({ userIds });
 var ChannelMemberConfirmationAlert = ({ action, cancelLabel, confirmLabel, description, isSubmitting, onCancel, onConfirm, testId, title }) => /* @__PURE__ */ jsxs(Alert.Root, {
@@ -2636,6 +2687,7 @@ var ChannelMembersView = ({ HeaderActions = DefaultHeaderActions, headerActionSe
 //#endregion
 //#region src/plugins/ChannelDetail/Views/PinnedMessagesView/PinnedMessagesEmptyList.tsx
 var PinnedMessagesEmptyList = () => {
+	const { IconPin } = useComponentContextIcons();
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__channel-detail__pinned-messages-view__empty-state",
@@ -2765,14 +2817,18 @@ var PinnedMessageDate = ({ message }) => {
 };
 var PinnedMessagesViewItem = ({ message, onSelect }) => {
 	const { t } = useTranslationContext();
+	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
 	const displayName = getUserDisplayName(message.user ?? void 0);
 	const LeadingSlot = useMemo(() => function MessageAuthorAvatar() {
-		return /* @__PURE__ */ jsx(Avatar, {
-			imageUrl: message.user?.image,
-			size: "md",
-			userName: displayName
+		return /* @__PURE__ */ jsx(Avatar$1, {
+			...extractDisplayInfo$1({ user: message.user ?? void 0 }),
+			size: "md"
 		});
-	}, [displayName, message.user?.image]);
+	}, [
+		Avatar$1,
+		extractDisplayInfo$1,
+		message.user
+	]);
 	const TrailingSlot = useMemo(() => function MessageDate() {
 		return /* @__PURE__ */ jsx(PinnedMessageDate, { message });
 	}, [message]);
@@ -2844,11 +2900,26 @@ var PinnedMessagesView = ({ searchSource }) => {
 };
 //#endregion
 //#region src/plugins/ChannelDetail/ChannelDetail.tsx
-var ChannelManagementNavButtonIcon = () => /* @__PURE__ */ jsx(IconInfo, { className: "str-chat__channel-detail__action-icon" });
-var ChannelMembersNavButtonIcon = () => /* @__PURE__ */ jsx(IconUser, { className: "str-chat__channel-detail__action-icon" });
-var PinnedMessagesNavButtonIcon = () => /* @__PURE__ */ jsx(IconPin, { className: "str-chat__channel-detail__action-icon" });
-var ChannelMediaNavButtonIcon = () => /* @__PURE__ */ jsx(IconImage, { className: "str-chat__channel-detail__action-icon" });
-var ChannelFilesNavButtonIcon = () => /* @__PURE__ */ jsx(IconFolder, { className: "str-chat__channel-detail__action-icon" });
+var ChannelManagementNavButtonIcon = () => {
+	const { IconInfo } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconInfo, { className: "str-chat__channel-detail__action-icon" });
+};
+var ChannelMembersNavButtonIcon = () => {
+	const { IconUser } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconUser, { className: "str-chat__channel-detail__action-icon" });
+};
+var PinnedMessagesNavButtonIcon = () => {
+	const { IconPin } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconPin, { className: "str-chat__channel-detail__action-icon" });
+};
+var ChannelMediaNavButtonIcon = () => {
+	const { IconImage } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconImage, { className: "str-chat__channel-detail__action-icon" });
+};
+var ChannelFilesNavButtonIcon = () => {
+	const { IconFolder } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconFolder, { className: "str-chat__channel-detail__action-icon" });
+};
 var ChannelManagementNavButton = (props) => /* @__PURE__ */ jsx(ChannelDetailNavButton, {
 	...props,
 	LeadingIcon: ChannelManagementNavButtonIcon,