stream-chat-react 14.11.1 → 15.0.0-rc.1

package/dist/es/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMediaView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useModalContext,\n  useTranslationContext,\n} from '../../../../context';\nimport { formatTime } from '../../../../components/AudioPlayback';\nimport { Avatar as DefaultAvatar } from '../../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';\nimport { Badge } from '../../../../components/Badge';\nimport {\n  type BaseImageProps,\n  BaseImage as DefaultBaseImage,\n} from '../../../../components/BaseImage';\nimport { Prompt } from '../../../../components/Dialog';\nimport { Gallery as DefaultGallery, GalleryUI } from '../../../../components/Gallery';\nimport { GlobalModal } from '../../../../components/Modal';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\nimport { getUserDisplayName } from '../ChannelMembersView/ChannelMembersView.utils';\nimport { ChannelMediaEmptyList } from './ChannelMediaEmptyList';\nimport type { ChannelMediaItem } from './ChannelMediaView.utils';\nimport { useChannelMediaSearch } from './useChannelMediaSearch';\nimport { Button } from '../../../../components';\n\n// Default items rendered per grid page (5 columns x 6 rows). Overridable via the\n// `itemsPerPage` prop. Intentionally decoupled from the search source's message\n// page size: a message carries a variable number of attachments, so message\n// pages and attachment pages don't align.\nconst DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE = 30;\n\ntype ChannelMediaGridItemProps = {\n  BaseImage: React.ComponentType<BaseImageProps>;\n  item: ChannelMediaItem;\n  onClick: () => void;\n};\n\nconst ChannelMediaGridItem = ({\n  BaseImage,\n  item,\n  onClick,\n}: ChannelMediaGridItemProps) => {\n  const { IconImage, IconVideoFill } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const displayName = getUserDisplayName(item.user);\n  const mediaSrc =\n    item.type === 'video'\n      ? item.galleryItem.videoThumbnailUrl\n      : item.galleryItem.imageUrl;\n  const durationLabel = formatTime(item.durationSeconds, 'floor');\n  const label =\n    item.type === 'video'\n      ? t(\n          'channelDetail.channelMediaView.openVideoShared.ariaLabel',\n          'Open video shared by {{ name }}',\n          { name: displayName },\n        )\n      : t(\n          'channelDetail.channelMediaView.openImageShared.ariaLabel',\n          'Open image shared by {{ name }}',\n          { name: displayName },\n        );\n\n  return (\n    <button\n      aria-label={label}\n      className='str-chat__channel-detail__media-view__item'\n      onClick={onClick}\n      type='button'\n    >\n      {mediaSrc ? (\n        <BaseImage\n          alt={item.galleryItem.alt ?? item.galleryItem.title ?? ''}\n          className='str-chat__channel-detail__media-view__item__media'\n          src={mediaSrc}\n        />\n      ) : (\n        <div\n          aria-hidden='true'\n          className='str-chat__channel-detail__media-view__item__placeholder'\n        >\n          <IconImage />\n        </div>\n      )}\n      <Avatar\n        {...extractDisplayInfo({ user: item.user })}\n        aria-hidden='true'\n        className='str-chat__channel-detail__media-view__item__avatar'\n        size='sm'\n      />\n      {item.type === 'video' && (\n        <Badge\n          className='str-chat__channel-detail__media-view__item__duration'\n          size='sm'\n          variant='inverse'\n        >\n          <IconVideoFill className='str-chat__channel-detail__media-view__item__duration-icon' />\n          {durationLabel ? <span>{durationLabel}</span> : null}\n        </Badge>\n      )}\n    </button>\n  );\n};\n\ntype ChannelMediaPaginationProps = {\n  nextDisabled: boolean;\n  onNext: () => void;\n  onPrevious: () => void;\n  previousDisabled: boolean;\n};\n\nconst ChannelMediaPagination = ({\n  nextDisabled,\n  onNext,\n  onPrevious,\n  previousDisabled,\n}: ChannelMediaPaginationProps) => {\n  const { IconChevronLeft, IconChevronRight } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <div className='str-chat__channel-detail__media-view__pagination'>\n      <Button\n        appearance='outline'\n        aria-label={t(\n          'channelDetail.channelMediaView.previousPage.ariaLabel',\n          'Previous page',\n        )}\n        className='str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--previous'\n        disabled={previousDisabled}\n        onClick={onPrevious}\n        size='md'\n        variant='secondary'\n      >\n        <IconChevronLeft />\n        {t('channelDetail.channelMediaView.previous.text', 'Previous')}\n      </Button>\n      <Button\n        appearance='outline'\n        aria-label={t('channelDetail.channelMediaView.nextPage.ariaLabel', 'Next page')}\n        className='str-chat__channel-detail__media-view__pagination__button str-chat__channel-detail__media-view__pagination__button--next'\n        disabled={nextDisabled}\n        onClick={onNext}\n        size='md'\n        variant='secondary'\n      >\n        {t('channelDetail.channelMediaView.next.text', 'Next')}\n        <IconChevronRight />\n      </Button>\n    </div>\n  );\n};\n\nexport type ChannelMediaViewProps = SectionNavigatorSectionContentProps & {\n  /** Number of media items rendered per grid page. Defaults to 30. */\n  itemsPerPage?: number;\n};\n\nexport const ChannelMediaView: React.ComponentType<ChannelMediaViewProps> = ({\n  itemsPerPage = DEFAULT_CHANNEL_MEDIA_ITEMS_PER_PAGE,\n}) => {\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n  const {\n    BaseImage = DefaultBaseImage,\n    Gallery = DefaultGallery,\n    Modal = GlobalModal,\n  } = useComponentContext();\n  const { channelMediaSearchSource, hasNext, hasResultsLoaded, isLoading, mediaItems } =\n    useChannelMediaSearch();\n\n  const [viewerOpen, setViewerOpen] = useState(false);\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [page, setPage] = useState(0);\n  const gridRef = useRef<HTMLDivElement>(null);\n  // Set when \"Next\" reached a page that isn't loaded yet; the fill effect below\n  // advances to it once the fetched attachments land, keeping fetches triggered\n  // only by the button (or the initial mount load).\n  const pendingNextRef = useRef(false);\n\n  const galleryItems = useMemo(\n    () => mediaItems.map((item) => item.galleryItem),\n    [mediaItems],\n  );\n\n  const pageStart = page * itemsPerPage;\n  const pageItems = useMemo(\n    () => mediaItems.slice(pageStart, pageStart + itemsPerPage),\n    [mediaItems, itemsPerPage, pageStart],\n  );\n\n  // More items already loaded beyond this page, or the source can fetch more.\n  const canGoNext = mediaItems.length > pageStart + itemsPerPage || hasNext;\n  const showPagination =\n    mediaItems.length > itemsPerPage || (mediaItems.length > 0 && hasNext);\n\n  const openViewer = useCallback((index: number) => {\n    setSelectedIndex(index);\n    setViewerOpen(true);\n  }, []);\n\n  const closeViewer = useCallback(() => {\n    setViewerOpen(false);\n  }, []);\n\n  const goToPreviousPage = useCallback(() => {\n    pendingNextRef.current = false;\n    setPage((current) => Math.max(0, current - 1));\n  }, []);\n\n  const goToNextPage = useCallback(() => {\n    const nextPageStart = (page + 1) * itemsPerPage;\n    if (mediaItems.length > nextPageStart) {\n      // The next page is already backed by loaded attachments — advance now.\n      setPage(page + 1);\n    } else if (hasNext) {\n      // The next page isn't loaded yet. Request more and let the fill effect\n      // advance once enough attachments arrive. Only a ref changes here (no\n      // re-render), so the fetch fires exactly once per click.\n      pendingNextRef.current = true;\n      void channelMediaSearchSource.search();\n    }\n  }, [channelMediaSearchSource, hasNext, itemsPerPage, mediaItems.length, page]);\n\n  // Forward-fill loop. Because a message yields a variable number of\n  // attachments, one fetch may not fill a grid page (and the very first page\n  // can arrive short). Keep pulling message pages until the visible page is\n  // full or the channel is exhausted; nothing is ever discarded, so paging to\n  // the end always reveals every attachment. Also resolves a pending \"Next\" by\n  // advancing once its target page has data.\n  useEffect(() => {\n    if (isLoading) return;\n\n    if (pendingNextRef.current) {\n      const nextPageStart = (page + 1) * itemsPerPage;\n      if (mediaItems.length > nextPageStart) {\n        pendingNextRef.current = false;\n        setPage((current) => current + 1);\n        return;\n      }\n      if (!hasNext) {\n        pendingNextRef.current = false;\n        return;\n      }\n      void channelMediaSearchSource.search();\n      return;\n    }\n\n    // Top up the visible page (covers the first page on mount).\n    const need = pageStart + itemsPerPage;\n    if (mediaItems.length < need && hasNext) {\n      void channelMediaSearchSource.search();\n    }\n  }, [\n    channelMediaSearchSource,\n    hasNext,\n    isLoading,\n    itemsPerPage,\n    mediaItems.length,\n    page,\n    pageStart,\n  ]);\n\n  // Each page replaces the previous one, so reset the grid scroll on change.\n  useEffect(() => {\n    const grid = gridRef.current;\n    if (typeof grid?.scrollTo === 'function') {\n      grid.scrollTo({ top: 0 });\n    } else if (grid) {\n      grid.scrollTop = 0;\n    }\n  }, [page]);\n\n  return (\n    <div className='str-chat__channel-detail__media-view'>\n      <SectionNavigatorHeader\n        close={close}\n        title={t('channelDetail.channelMediaView.photosVideos.title', 'Photos & videos')}\n      />\n      <Prompt.Body className='str-chat__channel-detail__media-view__body'>\n        <div className='str-chat__channel-detail__media-view__grid' ref={gridRef}>\n          <div className='str-chat__channel-detail__media-view__grid__content'>\n            {pageItems.length > 0 ? (\n              <div className='str-chat__channel-detail__media-view__grid__items'>\n                {pageItems.map((item, index) => (\n                  <ChannelMediaGridItem\n                    BaseImage={BaseImage}\n                    item={item}\n                    key={item.id}\n                    onClick={() => openViewer(pageStart + index)}\n                  />\n                ))}\n              </div>\n            ) : hasResultsLoaded ? (\n              <ChannelMediaEmptyList />\n            ) : null}\n            <ChannelDetailListLoadingIndicator searchSource={channelMediaSearchSource} />\n            {showPagination && (\n              <ChannelMediaPagination\n                nextDisabled={!canGoNext || isLoading}\n                onNext={goToNextPage}\n                onPrevious={goToPreviousPage}\n                previousDisabled={page === 0}\n              />\n            )}\n          </div>\n        </div>\n      </Prompt.Body>\n      <Modal\n        className={clsx(\n          'str-chat__gallery-modal',\n          'str-chat__channel-detail__media-view__viewer',\n        )}\n        onClose={closeViewer}\n        open={viewerOpen}\n      >\n        <Gallery\n          GalleryUI={GalleryUI}\n          initialIndex={selectedIndex}\n          items={galleryItems}\n          onRequestClose={closeViewer}\n        />\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.utils.mjs

@@ -0,0 +1,42 @@
+import { toBaseImageDescriptors } from "../../../../components/BaseImage/toBaseImageDescriptors.mjs";
+import { convertTimestampToDate, isImageAttachment, isVideoAttachment } from "stream-chat";
+//#region src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.utils.ts
+/** Attachment types rendered by the media gallery. */
+var MEDIA_ATTACHMENT_TYPES = ["image", "video"];
+var getMediaAttachmentType = (attachment) => {
+	if (isVideoAttachment(attachment)) return "video";
+	if (isImageAttachment(attachment)) return "image";
+};
+/**
+* Flattens messages into one renderable media item per image/video attachment,
+* carrying over the gallery descriptor, posting user, and video duration.
+*/
+var toChannelMediaItems = (messages) => {
+	const items = [];
+	messages.forEach((message) => {
+		message.attachments?.forEach((attachment, index) => {
+			const type = getMediaAttachmentType(attachment);
+			if (!type) return;
+			const descriptor = toBaseImageDescriptors(attachment);
+			if (!descriptor) return;
+			if (!(type === "video" ? Boolean(descriptor.videoThumbnailUrl || descriptor.videoUrl) : Boolean(descriptor.imageUrl))) return;
+			const attachmentDuration = attachment.custom?.duration;
+			items.push({
+				durationSeconds: typeof attachmentDuration === "number" ? attachmentDuration : void 0,
+				galleryItem: {
+					...descriptor,
+					createdAt: convertTimestampToDate(message.created_at),
+					user: message.user ?? void 0
+				},
+				id: `${message.id}-${index}`,
+				type,
+				user: message.user ?? void 0
+			});
+		});
+	});
+	return items;
+};
+//#endregion
+export { MEDIA_ATTACHMENT_TYPES, toChannelMediaItems };
+
+//# sourceMappingURL=ChannelMediaView.utils.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMediaView.utils.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMediaView/ChannelMediaView.utils.ts"],"sourcesContent":["import {\n  type Attachment,\n  convertTimestampToDate,\n  isImageAttachment,\n  isVideoAttachment,\n  type LocalMessage,\n  type MessageResponse,\n  type UserResponse,\n  type VoiceRecordingAttachment,\n} from 'stream-chat';\n\nimport { toBaseImageDescriptors } from '../../../../components/BaseImage';\nimport type { GalleryItem } from '../../../../components/Gallery';\n\n/** Attachment types rendered by the media gallery. */\nexport const MEDIA_ATTACHMENT_TYPES = ['image', 'video'] as const;\n\nexport type ChannelMediaItemType = (typeof MEDIA_ATTACHMENT_TYPES)[number];\n\nexport type ChannelMediaItem = {\n  /** Item to hand over to the full-screen `Gallery` viewer. */\n  galleryItem: GalleryItem;\n  /** Stable identity (messageId + attachment index). */\n  id: string;\n  type: ChannelMediaItemType;\n  /** Video duration in seconds, when known. */\n  durationSeconds?: number;\n  /** User who shared the media. */\n  user?: UserResponse;\n};\n\nconst getMediaAttachmentType = (\n  attachment: Attachment,\n): ChannelMediaItemType | undefined => {\n  if (isVideoAttachment(attachment)) return 'video';\n  if (isImageAttachment(attachment)) return 'image';\n  return undefined;\n};\n\n/**\n * Flattens messages into one renderable media item per image/video attachment,\n * carrying over the gallery descriptor, posting user, and video duration.\n */\nexport const toChannelMediaItems = (\n  messages: Array<MessageResponse | LocalMessage>,\n): ChannelMediaItem[] => {\n  const items: ChannelMediaItem[] = [];\n\n  messages.forEach((message) => {\n    message.attachments?.forEach((attachment, index) => {\n      const type = getMediaAttachmentType(attachment);\n      if (!type) return;\n\n      const descriptor = toBaseImageDescriptors(attachment);\n      if (!descriptor) return;\n\n      const hasRenderableSource =\n        type === 'video'\n          ? Boolean(descriptor.videoThumbnailUrl || descriptor.videoUrl)\n          : Boolean(descriptor.imageUrl);\n      if (!hasRenderableSource) return;\n\n      const attachmentDuration = (attachment as VoiceRecordingAttachment).custom\n        ?.duration;\n\n      items.push({\n        durationSeconds:\n          typeof attachmentDuration === 'number' ? attachmentDuration : undefined,\n        galleryItem: {\n          ...descriptor,\n          // the gallery header reads sender and timestamp off the item\n          createdAt: convertTimestampToDate(message.created_at),\n          user: message.user ?? undefined,\n        },\n        id: `${message.id}-${index}`,\n        type,\n        user: message.user ?? undefined,\n      });\n    });\n  });\n\n  return items;\n};\n"],"mappings":";;;;AAeA,IAAa,yBAAyB,CAAC,SAAS,OAAO;AAgBvD,IAAM,0BACJ,eACqC;CACrC,IAAI,kBAAkB,UAAU,GAAG,OAAO;CAC1C,IAAI,kBAAkB,UAAU,GAAG,OAAO;AAE5C;;;;;AAMA,IAAa,uBACX,aACuB;CACvB,MAAM,QAA4B,CAAC;CAEnC,SAAS,SAAS,YAAY;EAC5B,QAAQ,aAAa,SAAS,YAAY,UAAU;GAClD,MAAM,OAAO,uBAAuB,UAAU;GAC9C,IAAI,CAAC,MAAM;GAEX,MAAM,aAAa,uBAAuB,UAAU;GACpD,IAAI,CAAC,YAAY;GAMjB,IAAI,EAHF,SAAS,UACL,QAAQ,WAAW,qBAAqB,WAAW,QAAQ,IAC3D,QAAQ,WAAW,QAAQ,IACP;GAE1B,MAAM,qBAAsB,WAAwC,QAChE;GAEJ,MAAM,KAAK;IACT,iBACE,OAAO,uBAAuB,WAAW,qBAAqB,KAAA;IAChE,aAAa;KACX,GAAG;KAEH,WAAW,uBAAuB,QAAQ,UAAU;KACpD,MAAM,QAAQ,QAAQ,KAAA;IACxB;IACA,IAAI,GAAG,QAAQ,GAAG,GAAG;IACrB;IACA,MAAM,QAAQ,QAAQ,KAAA;GACxB,CAAC;EACH,CAAC;CACH,CAAC;CAED,OAAO;AACT"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMediaView/useChannelMediaSearch.mjs

@@ -0,0 +1,47 @@
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
+import { MEDIA_ATTACHMENT_TYPES, toChannelMediaItems } from "./ChannelMediaView.utils.mjs";
+import { useEffect, useMemo } from "react";
+import { MessageSearchSource } from "stream-chat";
+//#region src/plugins/ChannelDetail/Views/ChannelMediaView/useChannelMediaSearch.ts
+var CHANNEL_MEDIA_SEARCH_PAGE_SIZE = 30;
+var channelMediaSearchSourceItemsStateSelector = (state) => ({
+	hasNext: state.hasNext,
+	isLoading: state.isLoading,
+	messages: state.items
+});
+var useChannelMediaSearch = () => {
+	const { client } = useChatContext();
+	const { channel } = useChannelDetailContext();
+	const channelMediaSearchSource = useMemo(() => {
+		const source = new MessageSearchSource(client, {
+			allowEmptySearchString: true,
+			pageSize: CHANNEL_MEDIA_SEARCH_PAGE_SIZE,
+			resetOnNewSearchQuery: false
+		});
+		source.messageSearchChannelFilters = { cid: channel.cid };
+		source.messageSearchFilters = { "attachments.type": { $in: [...MEDIA_ATTACHMENT_TYPES] } };
+		return source;
+	}, [channel.cid, client]);
+	const { hasNext, isLoading, messages } = useStateStore(channelMediaSearchSource.state, channelMediaSearchSourceItemsStateSelector);
+	const mediaItems = useMemo(() => toChannelMediaItems(messages ?? []), [messages]);
+	useEffect(() => {
+		channelMediaSearchSource.activate();
+		channelMediaSearchSource.search("");
+		return () => {
+			channelMediaSearchSource.cancelScheduledQuery();
+		};
+	}, [channelMediaSearchSource]);
+	return {
+		channelMediaSearchSource,
+		hasNext: Boolean(hasNext),
+		hasResultsLoaded: Array.isArray(messages),
+		isLoading,
+		mediaItems
+	};
+};
+//#endregion
+export { useChannelMediaSearch };
+
+//# sourceMappingURL=useChannelMediaSearch.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMediaView/useChannelMediaSearch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelMediaSearch.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMediaView/useChannelMediaSearch.ts"],"sourcesContent":["import {\n  type LocalMessage,\n  type MessageResponse,\n  MessageSearchSource,\n  type SearchSourceState,\n} from 'stream-chat';\nimport { useEffect, useMemo } from 'react';\n\nimport { useChatContext } from '../../../../context';\nimport { useStateStore } from '../../../../store';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { MEDIA_ATTACHMENT_TYPES, toChannelMediaItems } from './ChannelMediaView.utils';\n\nconst CHANNEL_MEDIA_SEARCH_PAGE_SIZE = 30;\n\nconst channelMediaSearchSourceItemsStateSelector = (\n  state: SearchSourceState<MessageResponse>,\n) => ({\n  hasNext: state.hasNext,\n  isLoading: state.isLoading,\n  messages: state.items,\n});\n\nexport const useChannelMediaSearch = () => {\n  const { client } = useChatContext();\n  const { channel } = useChannelDetailContext();\n\n  const channelMediaSearchSource = useMemo(() => {\n    const source = new MessageSearchSource(client, {\n      allowEmptySearchString: true,\n      pageSize: CHANNEL_MEDIA_SEARCH_PAGE_SIZE,\n      resetOnNewSearchQuery: false,\n    });\n\n    source.messageSearchChannelFilters = { cid: channel.cid };\n    source.messageSearchFilters = {\n      'attachments.type': { $in: [...MEDIA_ATTACHMENT_TYPES] },\n    };\n\n    return source;\n  }, [channel.cid, client]);\n\n  const { hasNext, isLoading, messages } = useStateStore(\n    channelMediaSearchSource.state,\n    channelMediaSearchSourceItemsStateSelector,\n  );\n\n  const mediaItems = useMemo(\n    () => toChannelMediaItems((messages ?? []) as Array<MessageResponse | LocalMessage>),\n    [messages],\n  );\n\n  useEffect(() => {\n    channelMediaSearchSource.activate();\n    void channelMediaSearchSource.search('');\n\n    return () => {\n      channelMediaSearchSource.cancelScheduledQuery();\n    };\n  }, [channelMediaSearchSource]);\n\n  return {\n    channelMediaSearchSource,\n    hasNext: Boolean(hasNext),\n    hasResultsLoaded: Array.isArray(messages),\n    isLoading,\n    mediaItems,\n  };\n};\n"],"mappings":";;;;;;;AAaA,IAAM,iCAAiC;AAEvC,IAAM,8CACJ,WACI;CACJ,SAAS,MAAM;CACf,WAAW,MAAM;CACjB,UAAU,MAAM;AAClB;AAEA,IAAa,8BAA8B;CACzC,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,YAAY,wBAAwB;CAE5C,MAAM,2BAA2B,cAAc;EAC7C,MAAM,SAAS,IAAI,oBAAoB,QAAQ;GAC7C,wBAAwB;GACxB,UAAU;GACV,uBAAuB;EACzB,CAAC;EAED,OAAO,8BAA8B,EAAE,KAAK,QAAQ,IAAI;EACxD,OAAO,uBAAuB,EAC5B,oBAAoB,EAAE,KAAK,CAAC,GAAG,sBAAsB,EAAE,EACzD;EAEA,OAAO;CACT,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC;CAExB,MAAM,EAAE,SAAS,WAAW,aAAa,cACvC,yBAAyB,OACzB,0CACF;CAEA,MAAM,aAAa,cACX,oBAAqB,YAAY,CAAC,CAA2C,GACnF,CAAC,QAAQ,CACX;CAEA,gBAAgB;EACd,yBAAyB,SAAS;EAClC,yBAA8B,OAAO,EAAE;EAEvC,aAAa;GACX,yBAAyB,qBAAqB;EAChD;CACF,GAAG,CAAC,wBAAwB,CAAC;CAE7B,OAAO;EACL;EACA,SAAS,QAAQ,OAAO;EACxB,kBAAkB,MAAM,QAAQ,QAAQ;EACxC;EACA;CACF;AACF"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.mjs

@@ -0,0 +1,454 @@
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { useNotificationApi } from "../../../../components/Notifications/hooks/useNotificationApi.mjs";
+import { Button } from "../../../../components/Button/Button.mjs";
+import { Alert } from "../../../../components/Dialog/components/Alert.mjs";
+import { useStableCallback } from "../../../../utils/useStableCallback.mjs";
+import { GlobalModal } from "../../../../components/Modal/GlobalModal.mjs";
+import { Switch } from "../../../../components/Form/SwitchField.mjs";
+import { useModalContext } from "../../../../context/ModalContext.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { ListItemLayout } from "../../../../components/ListItemLayout/ListItemLayout.mjs";
+import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
+import { useChatViewNavigation } from "../../../SlotLayout/ChatViewNavigationContext.mjs";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import debounce from "lodash.debounce";
+//#region src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx
+var ChannelMemberActionContext = createContext(void 0);
+var ChannelMemberActionProvider = ({ children, value }) => /* @__PURE__ */ jsx(ChannelMemberActionContext.Provider, {
+	value,
+	children
+});
+var useChannelMemberActionContext = () => {
+	const contextValue = useContext(ChannelMemberActionContext);
+	if (!contextValue) throw new Error("The useChannelMemberActionContext hook was called outside of ChannelMemberActionProvider.");
+	return contextValue;
+};
+var toError = (error) => error instanceof Error ? error : /* @__PURE__ */ new Error("An unknown error occurred");
+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, {
+	className: clsx("str-chat__channel-member-confirmation-alert", { [`str-chat__channel-member-confirmation-alert--${action}`]: action }),
+	"data-testid": testId,
+	children: [/* @__PURE__ */ jsx(Alert.Header, {
+		description,
+		title
+	}), /* @__PURE__ */ jsxs(Alert.Actions, { children: [/* @__PURE__ */ jsx(Button, {
+		appearance: "solid",
+		"data-testid": `${testId}-confirm-button`,
+		disabled: isSubmitting,
+		onClick: onConfirm,
+		size: "md",
+		variant: "danger",
+		children: confirmLabel
+	}), /* @__PURE__ */ jsx(Button, {
+		appearance: "outline",
+		autoFocus: true,
+		"data-testid": `${testId}-cancel-button`,
+		disabled: isSubmitting,
+		onClick: onCancel,
+		size: "md",
+		variant: "secondary",
+		children: cancelLabel
+	})] })]
+});
+var useChannelMemberActionFilterState = () => {
+	const { client } = useChatContext();
+	const { channel } = useChannelDetailContext();
+	const { targetUserId } = useChannelMemberActionContext();
+	const ownCapabilities = channel.data?.own_capabilities;
+	const isCurrentUser = targetUserId === client.user?.id;
+	return {
+		canBlockUser: !isCurrentUser && !!targetUserId,
+		canMuteUser: !isCurrentUser && !!targetUserId,
+		canRemoveUser: !isCurrentUser && !!targetUserId && ownCapabilities?.includes("update-channel-members"),
+		canSendMessage: !isCurrentUser && !!targetUserId
+	};
+};
+var useBaseChannelMemberActionSetFilter = (channelMemberActionSet) => {
+	const { canBlockUser, canMuteUser, canRemoveUser, canSendMessage } = useChannelMemberActionFilterState();
+	return useMemo(() => channelMemberActionSet.filter((action) => {
+		switch (action.type) {
+			case "blockUser": return canBlockUser;
+			case "muteUser": return canMuteUser;
+			case "removeUser": return canRemoveUser;
+			case "sendMessage": return canSendMessage;
+			default: return true;
+		}
+	}), [
+		canBlockUser,
+		canMuteUser,
+		canRemoveUser,
+		canSendMessage,
+		channelMemberActionSet
+	]);
+};
+var SendDirectMessageAction = () => {
+	const { channelManager, client } = useChatContext();
+	const { open } = useChatViewNavigation();
+	const { close } = useModalContext();
+	const { channel } = useChannelDetailContext();
+	const { addNotification } = useNotificationApi();
+	const { t } = useTranslationContext();
+	const { targetUserId } = useChannelMemberActionContext();
+	const [isSending, setIsSending] = useState(false);
+	const openDirectMessage = useCallback(async () => {
+		if (!client.userID || !targetUserId || isSending) return;
+		setIsSending(true);
+		try {
+			const directMessageChannel = client.channel(channel.type, { members: [client.userID, targetUserId].map((user_id) => ({ user_id })) });
+			await directMessageChannel.watch();
+			open({
+				key: directMessageChannel.cid ?? void 0,
+				kind: "channel",
+				source: directMessageChannel
+			});
+			channelManager.ingestChannel(directMessageChannel);
+			close();
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("channelDetail.channelMemberActions.errorOpeningDirectMessage.text", "Error opening direct message"),
+				severity: "error",
+				type: "api:channel:watch:failed"
+			});
+		} finally {
+			setIsSending(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		client,
+		close,
+		channelManager,
+		isSending,
+		open,
+		t,
+		targetUserId
+	]);
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		LeadingIcon: SendDirectMessageActionIcon,
+		RootElement: "button",
+		rootProps: useMemo(() => ({
+			className: channelMemberDetailActionClassName,
+			disabled: isSending,
+			onClick: openDirectMessage
+		}), [isSending, openDirectMessage]),
+		title: t("channelDetail.channelMemberActions.sendDirectMessage.title", "Send direct message")
+	});
+};
+var UserMuteAction = () => {
+	const { channel } = useChannelDetailContext();
+	const { client, mutes } = useChatContext();
+	const { addNotification } = useNotificationApi();
+	const { t } = useTranslationContext();
+	const { targetUserId } = useChannelMemberActionContext();
+	const userMuted = !!targetUserId && mutes.some((mute) => mute.target?.id === targetUserId);
+	const [optimisticUserMuted, setOptimisticUserMuted] = useState(userMuted);
+	useEffect(() => {
+		setOptimisticUserMuted(userMuted);
+	}, [userMuted]);
+	const toggleUserMuteRequest = useStableCallback((nextMuted, userId) => {
+		if (!userId) return;
+		if (!nextMuted) return client.moderation.unmute({ target_ids: [userId] }).then(() => addNotification({
+			context: { channel },
+			emitter: "ChannelMemberDetail",
+			message: t("channelDetail.channelManagementActions.userUnmuted.text", "User unmuted"),
+			severity: "success",
+			type: "api:user:unmute:success"
+		})).catch((error) => {
+			setOptimisticUserMuted(userMuted);
+			return addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("channelDetail.channelManagementActions.errorUnmutingUser.text", "Error unmuting user"),
+				severity: "error",
+				type: "api:user:unmute:failed"
+			});
+		});
+		return client.moderation.mute({ target_ids: [userId] }).then(() => addNotification({
+			context: { channel },
+			emitter: "ChannelMemberDetail",
+			message: t("channelDetail.channelManagementActions.userMuted.text", "User muted"),
+			severity: "success",
+			type: "api:user:mute:success"
+		})).catch((error) => {
+			setOptimisticUserMuted(userMuted);
+			return addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("channelDetail.channelManagementActions.errorMutingUser.text", "Error muting user"),
+				severity: "error",
+				type: "api:user:mute:failed"
+			});
+		});
+	});
+	const toggleUserMute = useMemo(() => debounce(toggleUserMuteRequest, 1e3), [toggleUserMuteRequest]);
+	useEffect(() => () => {
+		toggleUserMute.cancel();
+	}, [toggleUserMute]);
+	const toggleOptimisticUserMute = useCallback(() => {
+		const nextMuted = !optimisticUserMuted;
+		setOptimisticUserMuted(nextMuted);
+		toggleUserMute(nextMuted, targetUserId);
+	}, [
+		optimisticUserMuted,
+		targetUserId,
+		toggleUserMute
+	]);
+	const rootProps = useMemo(() => ({
+		"aria-pressed": optimisticUserMuted,
+		className: clsx("str-chat__form__switch-field", channelMemberDetailActionClassName),
+		onClick: toggleOptimisticUserMute
+	}), [optimisticUserMuted, toggleOptimisticUserMute]);
+	const TrailingSlot = useMemo(() => {
+		function UserMuteSwitch() {
+			return /* @__PURE__ */ jsx(Switch, {
+				on: optimisticUserMuted,
+				presentation: true
+			});
+		}
+		return UserMuteSwitch;
+	}, [optimisticUserMuted]);
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		LeadingIcon: optimisticUserMuted ? MemberUnmuteActionIcon : MemberMuteActionIcon,
+		RootElement: "button",
+		rootProps,
+		title: optimisticUserMuted ? t("channelDetail.channelManagementActions.unmuteUser.title", "Unmute user") : t("channelDetail.channelManagementActions.muteUser.title", "Mute user"),
+		TrailingSlot
+	});
+};
+var BlockUserAction = () => {
+	const { client } = useChatContext();
+	const { Modal = GlobalModal } = useComponentContext();
+	const { channel } = useChannelDetailContext();
+	const { addNotification } = useNotificationApi();
+	const { t } = useTranslationContext();
+	const { memberDisplayName, targetUserId } = useChannelMemberActionContext();
+	const { userIds: blockedUserIds } = useStateStore(client.blockedUsers, blockedUsersSelector);
+	const isBlocked = !!targetUserId && new Set(blockedUserIds).has(targetUserId);
+	const [alertOpen, setAlertOpen] = useState(false);
+	const [userBlockInProgress, setUserBlockInProgress] = useState(false);
+	const closeBlockUserAlert = useCallback(() => {
+		setAlertOpen(false);
+	}, []);
+	const openBlockUserAlert = useCallback(() => {
+		setAlertOpen(true);
+	}, []);
+	const unblockUser = useCallback(async () => {
+		if (!targetUserId) return;
+		try {
+			setUserBlockInProgress(true);
+			await client.unblockUser(targetUserId);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				message: t("common.userUnblocked.text", "User unblocked"),
+				severity: "success",
+				type: "api:user:unblock:success"
+			});
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("channelDetail.channelManagementActions.errorUnblockingUser.text", "Error unblocking user"),
+				severity: "error",
+				type: "api:user:unblock:failed"
+			});
+		} finally {
+			setAlertOpen(false);
+			setUserBlockInProgress(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		client,
+		t,
+		targetUserId
+	]);
+	const blockUser = useCallback(async () => {
+		if (!targetUserId) return;
+		try {
+			setUserBlockInProgress(true);
+			await client.blockUser(targetUserId);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				message: t("common.userBlocked.text", "User blocked"),
+				severity: "success",
+				type: "api:user:block:success"
+			});
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("channelDetail.channelManagementActions.errorBlockingUser.text", "Error blocking user"),
+				severity: "error",
+				type: "api:user:block:failed"
+			});
+		} finally {
+			setAlertOpen(false);
+			setUserBlockInProgress(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		client,
+		t,
+		targetUserId
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ListItemLayout, {
+		destructive: true,
+		LeadingIcon: BlockUserActionIcon,
+		RootElement: "button",
+		rootProps: useMemo(() => ({
+			className: channelMemberDetailActionClassName,
+			disabled: userBlockInProgress,
+			onClick: openBlockUserAlert
+		}), [openBlockUserAlert, userBlockInProgress]),
+		title: isBlocked ? t("channelDetail.channelMemberActions.unblockUser.title", "Unblock user") : t("channelDetail.channelManagementActions.blockUser.title", "Block user")
+	}), /* @__PURE__ */ jsx(Modal, {
+		open: alertOpen,
+		role: "alertdialog",
+		children: /* @__PURE__ */ jsx(ChannelMemberConfirmationAlert, {
+			action: "blockUser",
+			cancelLabel: t("common.cancel.label", "Cancel"),
+			confirmLabel: isBlocked ? t("channelDetail.channelMemberActions.unblockUser.title", "Unblock user") : t("channelDetail.channelManagementActions.blockUser.title", "Block user"),
+			description: isBlocked ? t("channelDetail.channelMemberActions.ableMessageAgain.description", "{{ member }} will be able to message you again.", { member: memberDisplayName }) : t("channelDetail.channelMemberActions.wonTAbleMessage.description", "{{ member }} won't be able to message you anymore.", { member: memberDisplayName }),
+			isSubmitting: userBlockInProgress,
+			onCancel: closeBlockUserAlert,
+			onConfirm: isBlocked ? unblockUser : blockUser,
+			testId: "channel-detail-block-member-alert",
+			title: isBlocked ? t("channelDetail.channelMemberActions.unblockUser.title", "Unblock user") : t("channelDetail.channelManagementActions.blockUser.title", "Block user")
+		})
+	})] });
+};
+var RemoveUserAction = () => {
+	const { Modal = GlobalModal } = useComponentContext();
+	const { channel } = useChannelDetailContext();
+	const { addNotification } = useNotificationApi();
+	const { t } = useTranslationContext();
+	const { memberDisplayName, targetUserId } = useChannelMemberActionContext();
+	const [alertOpen, setAlertOpen] = useState(false);
+	const [removeMemberInProgress, setRemoveMemberInProgress] = useState(false);
+	const closeRemoveUserAlert = useCallback(() => {
+		setAlertOpen(false);
+	}, []);
+	const openRemoveUserAlert = useCallback(() => {
+		setAlertOpen(true);
+	}, []);
+	const removeUser = useCallback(async () => {
+		if (!targetUserId) return;
+		try {
+			setRemoveMemberInProgress(true);
+			await channel.removeMembers([targetUserId]);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				message: t("channelDetail.channelMemberActions.userRemoved.text", "User removed"),
+				severity: "success",
+				type: "api:channel:remove-members:success"
+			});
+			setAlertOpen(false);
+		} catch (error) {
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMemberDetail",
+				error: toError(error),
+				message: t("channelDetail.channelMemberActions.errorRemovingUser.text", "Error removing user"),
+				severity: "error",
+				type: "api:channel:remove-members:failed"
+			});
+		} finally {
+			setRemoveMemberInProgress(false);
+		}
+	}, [
+		addNotification,
+		channel,
+		t,
+		targetUserId
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ListItemLayout, {
+		destructive: true,
+		LeadingIcon: RemoveUserActionIcon,
+		RootElement: "button",
+		rootProps: useMemo(() => ({
+			className: channelMemberDetailActionClassName,
+			disabled: removeMemberInProgress,
+			onClick: openRemoveUserAlert
+		}), [openRemoveUserAlert, removeMemberInProgress]),
+		title: t("channelDetail.channelMemberActions.removeUser.title", "Remove user")
+	}), /* @__PURE__ */ jsx(Modal, {
+		open: alertOpen,
+		role: "alertdialog",
+		children: /* @__PURE__ */ jsx(ChannelMemberConfirmationAlert, {
+			action: "removeUser",
+			cancelLabel: t("common.cancel.label", "Cancel"),
+			confirmLabel: t("channelDetail.channelMemberActions.removeUser.title", "Remove user"),
+			description: t("channelDetail.channelMemberActions.removeChannel.description", "Remove {{ member }} from this channel?", { member: memberDisplayName }),
+			isSubmitting: removeMemberInProgress,
+			onCancel: closeRemoveUserAlert,
+			onConfirm: removeUser,
+			testId: "channel-detail-remove-member-alert",
+			title: t("channelDetail.channelMemberActions.removeUser.title", "Remove user")
+		})
+	})] });
+};
+var DefaultChannelMemberActions = {
+	BlockUser: BlockUserAction,
+	MuteUser: UserMuteAction,
+	RemoveUser: RemoveUserAction,
+	SendDirectMessage: SendDirectMessageAction
+};
+var defaultChannelMemberActionSet = [
+	{
+		Component: DefaultChannelMemberActions.SendDirectMessage,
+		type: "sendMessage"
+	},
+	{
+		Component: DefaultChannelMemberActions.MuteUser,
+		type: "muteUser"
+	},
+	{
+		Component: DefaultChannelMemberActions.BlockUser,
+		type: "blockUser"
+	},
+	{
+		Component: DefaultChannelMemberActions.RemoveUser,
+		type: "removeUser"
+	}
+];
+//#endregion
+export { ChannelMemberActionProvider, DefaultChannelMemberActions, defaultChannelMemberActionSet, useBaseChannelMemberActionSetFilter, useChannelMemberActionContext };
+
+//# sourceMappingURL=ChannelMemberActions.defaults.mjs.map