stream-chat-react 14.11.1 → 14.12.0

package/dist/es/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesView.mjs

@@ -0,0 +1,130 @@
+import { useModalContext } from "../../../../context/ModalContext.mjs";
+import { getDateString } from "../../../../i18n/utils.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { FileSizeIndicator } from "../../../../components/Attachment/components/FileSizeIndicator.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { FileIcon } from "../../../../components/FileIcon/FileIcon.mjs";
+import { ListItemLayout } from "../../../../components/ListItemLayout/ListItemLayout.mjs";
+import { SectionNavigatorHeader } from "../../SectionNavigator/SectionNavigatorHeader.mjs";
+import { ChannelFilesEmptyList } from "./ChannelFilesEmptyList.mjs";
+import { ChannelDetailListLoadingIndicator } from "../../ChannelDetailListLoadingIndicator.mjs";
+import { useChannelFilesSearch } from "./useChannelFilesSearch.mjs";
+import { forwardRef, useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { GroupedVirtuoso } from "react-virtuoso";
+//#region src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesView.tsx
+var ChannelFilesItem = forwardRef(function ChannelFilesItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: clsx("str-chat__channel-detail__files-view__item", className),
+		ref
+	});
+});
+var ChannelFilesGroup = forwardRef(function ChannelFilesGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: clsx("str-chat__channel-detail__files-view__group", className),
+		ref
+	});
+});
+var ChannelFilesSectionHeader = ({ timestamp }) => {
+	const { t, tDateTimeParser } = useTranslationContext("ChannelFilesView");
+	const label = getDateString({
+		format: "MMMM YYYY",
+		messageCreatedAt: timestamp,
+		t,
+		tDateTimeParser
+	});
+	if (!label) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__channel-detail__files-view__section-header",
+		children: label
+	});
+};
+var getAttachmentFileName = (attachment) => attachment.title || attachment.fallback || "";
+var ChannelFileListItem = ({ item }) => {
+	const { attachment } = item;
+	const fileName = getAttachmentFileName(attachment);
+	const assetUrl = attachment.asset_url;
+	const LeadingSlot = useMemo(() => function FileListItemIcon() {
+		return /* @__PURE__ */ jsx(FileIcon, {
+			className: "str-chat__channel-detail__files-view__list-item__icon",
+			fileName,
+			mimeType: attachment.mime_type,
+			size: "md"
+		});
+	}, [attachment.mime_type, fileName]);
+	const sharedProps = useMemo(() => ({
+		LeadingSlot,
+		subtitle: /* @__PURE__ */ jsx(FileSizeIndicator, { fileSize: attachment.file_size }),
+		subtitleClassName: "str-chat__channel-detail__files-view__list-item__size",
+		title: fileName,
+		titleClassName: "str-chat__channel-detail__files-view__list-item__name"
+	}), [
+		attachment.file_size,
+		fileName,
+		LeadingSlot
+	]);
+	const linkRootProps = useMemo(() => ({
+		className: "str-chat__channel-detail__files-view__list-item",
+		download: fileName || void 0,
+		href: assetUrl,
+		rel: "noopener noreferrer",
+		target: "_blank"
+	}), [assetUrl, fileName]);
+	const divRootProps = useMemo(() => ({ className: "str-chat__channel-detail__files-view__list-item" }), []);
+	if (assetUrl) return /* @__PURE__ */ jsx(ListItemLayout, {
+		...sharedProps,
+		RootElement: "a",
+		rootProps: linkRootProps
+	});
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		...sharedProps,
+		RootElement: "div",
+		rootProps: divRootProps
+	});
+};
+var ChannelFilesView = () => {
+	const { t } = useTranslationContext();
+	const { close } = useModalContext();
+	const { channelFilesSearchSource, fileItems, groupCounts, hasResultsLoaded, sections } = useChannelFilesSearch();
+	const groupContent = useCallback((groupIndex) => /* @__PURE__ */ jsx(ChannelFilesSectionHeader, { timestamp: sections[groupIndex]?.timestamp }), [sections]);
+	const itemContent = useCallback((index) => /* @__PURE__ */ jsx(ChannelFileListItem, { item: fileItems[index] }), [fileItems]);
+	const atBottomStateChange = useCallback((atBottom) => {
+		if (atBottom) channelFilesSearchSource.search();
+	}, [channelFilesSearchSource]);
+	const EmptyPlaceholder = useMemo(() => function ChannelFilesEmptyPlaceholder() {
+		return hasResultsLoaded ? /* @__PURE__ */ jsx(ChannelFilesEmptyList, {}) : null;
+	}, [hasResultsLoaded]);
+	const Footer = useMemo(() => function ChannelFilesListFooter() {
+		return /* @__PURE__ */ jsx(ChannelDetailListLoadingIndicator, { searchSource: channelFilesSearchSource });
+	}, [channelFilesSearchSource]);
+	const components = useMemo(() => ({
+		EmptyPlaceholder,
+		Footer,
+		Group: ChannelFilesGroup,
+		Item: ChannelFilesItem
+	}), [EmptyPlaceholder, Footer]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__files-view",
+		children: [/* @__PURE__ */ jsx(SectionNavigatorHeader, {
+			close,
+			title: t("Files")
+		}), /* @__PURE__ */ jsx(Prompt.Body, {
+			className: "str-chat__channel-detail__files-view__body",
+			children: /* @__PURE__ */ jsx(GroupedVirtuoso, {
+				atBottomStateChange,
+				className: "str-chat__virtualized-list str-chat__channel-detail__files-view__list",
+				components,
+				groupContent,
+				groupCounts,
+				itemContent
+			})
+		})]
+	});
+};
+//#endregion
+export { ChannelFilesView };
+
+//# sourceMappingURL=ChannelFilesView.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelFilesView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesView.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { ComponentProps } from 'react';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport { GroupedVirtuoso } from 'react-virtuoso';\n\nimport { useModalContext, useTranslationContext } from '../../../../context';\nimport { getDateString } from '../../../../i18n/utils';\nimport { FileSizeIndicator } from '../../../../components/Attachment/components/FileSizeIndicator';\nimport { Prompt } from '../../../../components/Dialog';\nimport { FileIcon } from '../../../../components/FileIcon';\nimport { ListItemLayout } from '../../../../components/ListItemLayout';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\nimport { ChannelFilesEmptyList } from './ChannelFilesEmptyList';\nimport type { ChannelFileItem } from './ChannelFilesView.utils';\nimport { useChannelFilesSearch } from './useChannelFilesSearch';\n\n// Wraps each virtualized file row so the horizontal inset can be applied to a\n// stable class without padding the full-bleed sticky month headers.\nconst ChannelFilesItem = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  function ChannelFilesItem({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        className={clsx('str-chat__channel-detail__files-view__item', className)}\n        ref={ref}\n      />\n    );\n  },\n);\n\n// Wraps each sticky month header. react-virtuoso applies `position: sticky` but\n// leaves `top: auto`, so the headers never pin to the scroller top and\n// consecutive months overlap; the class supplies the required `top: 0`.\nconst ChannelFilesGroup = forwardRef<HTMLDivElement, ComponentProps<'div'>>(\n  function ChannelFilesGroup({ className, ...props }, ref) {\n    return (\n      <div\n        {...props}\n        className={clsx('str-chat__channel-detail__files-view__group', className)}\n        ref={ref}\n      />\n    );\n  },\n);\n\nconst ChannelFilesSectionHeader = ({ timestamp }: { timestamp?: string }) => {\n  const { t, tDateTimeParser } = useTranslationContext('ChannelFilesView');\n  const label = getDateString({\n    format: 'MMMM YYYY',\n    messageCreatedAt: timestamp,\n    t,\n    tDateTimeParser,\n  });\n\n  if (!label) return null;\n\n  return (\n    <div className='str-chat__channel-detail__files-view__section-header'>{label}</div>\n  );\n};\n\nconst getAttachmentFileName = (attachment: ChannelFileItem['attachment']) =>\n  attachment.title || attachment.fallback || '';\n\nconst ChannelFileListItem = ({ item }: { item: ChannelFileItem }) => {\n  const { attachment } = item;\n  const fileName = getAttachmentFileName(attachment);\n  const assetUrl = attachment.asset_url;\n\n  const LeadingSlot = useMemo(\n    () =>\n      function FileListItemIcon() {\n        return (\n          <FileIcon\n            className='str-chat__channel-detail__files-view__list-item__icon'\n            fileName={fileName}\n            mimeType={attachment.mime_type}\n            size='md'\n          />\n        );\n      },\n    [attachment.mime_type, fileName],\n  );\n\n  const sharedProps = useMemo(\n    () => ({\n      LeadingSlot,\n      subtitle: <FileSizeIndicator fileSize={attachment.file_size} />,\n      subtitleClassName: 'str-chat__channel-detail__files-view__list-item__size',\n      title: fileName,\n      titleClassName: 'str-chat__channel-detail__files-view__list-item__name',\n    }),\n    [attachment.file_size, fileName, LeadingSlot],\n  );\n\n  const linkRootProps = useMemo(\n    () => ({\n      className: 'str-chat__channel-detail__files-view__list-item',\n      download: fileName || undefined,\n      href: assetUrl,\n      rel: 'noopener noreferrer',\n      target: '_blank',\n    }),\n    [assetUrl, fileName],\n  );\n\n  const divRootProps = useMemo(\n    () => ({ className: 'str-chat__channel-detail__files-view__list-item' }),\n    [],\n  );\n\n  if (assetUrl) {\n    return <ListItemLayout {...sharedProps} RootElement='a' rootProps={linkRootProps} />;\n  }\n\n  return <ListItemLayout {...sharedProps} RootElement='div' rootProps={divRootProps} />;\n};\n\nexport type ChannelFilesViewProps = SectionNavigatorSectionContentProps;\n\nexport const ChannelFilesView: React.ComponentType<ChannelFilesViewProps> = () => {\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n  const { channelFilesSearchSource, fileItems, groupCounts, hasResultsLoaded, sections } =\n    useChannelFilesSearch();\n\n  const groupContent = useCallback(\n    (groupIndex: number) => (\n      <ChannelFilesSectionHeader timestamp={sections[groupIndex]?.timestamp} />\n    ),\n    [sections],\n  );\n\n  // In grouped mode the `index` passed here is the flat item index (0-based\n  // across all items, excluding group headers), so it indexes `fileItems`\n  // directly. We intentionally don't pass `computeItemKey`: GroupedVirtuoso\n  // calls it with the absolute group+item location index (and no item data),\n  // so it can't be used to look items up — the default position keys are\n  // correct for this append-only list.\n  const itemContent = useCallback(\n    (index: number) => <ChannelFileListItem item={fileItems[index]} />,\n    [fileItems],\n  );\n\n  const atBottomStateChange = useCallback(\n    (atBottom: boolean) => {\n      if (atBottom) channelFilesSearchSource.search();\n    },\n    [channelFilesSearchSource],\n  );\n\n  const EmptyPlaceholder = useMemo(\n    () =>\n      function ChannelFilesEmptyPlaceholder() {\n        return hasResultsLoaded ? <ChannelFilesEmptyList /> : null;\n      },\n    [hasResultsLoaded],\n  );\n\n  const Footer = useMemo(\n    () =>\n      function ChannelFilesListFooter() {\n        return (\n          <ChannelDetailListLoadingIndicator searchSource={channelFilesSearchSource} />\n        );\n      },\n    [channelFilesSearchSource],\n  );\n\n  const components = useMemo(\n    () => ({\n      EmptyPlaceholder,\n      Footer,\n      Group: ChannelFilesGroup,\n      Item: ChannelFilesItem,\n    }),\n    [EmptyPlaceholder, Footer],\n  );\n\n  return (\n    <div className='str-chat__channel-detail__files-view'>\n      <SectionNavigatorHeader close={close} title={t('Files')} />\n      <Prompt.Body className='str-chat__channel-detail__files-view__body'>\n        <GroupedVirtuoso\n          atBottomStateChange={atBottomStateChange}\n          className='str-chat__virtualized-list str-chat__channel-detail__files-view__list'\n          components={components}\n          groupContent={groupContent}\n          groupCounts={groupCounts}\n          itemContent={itemContent}\n        />\n      </Prompt.Body>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+import { isDate } from "../../../../i18n/utils.mjs";
+import { isScrapedContent } from "stream-chat";
+//#region src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesView.utils.ts
+/** Attachment types listed by the files view (everything that is not an image/video). */
+var FILE_ATTACHMENT_TYPES = ["file", "audio"];
+var FILE_ATTACHMENT_TYPE_SET = new Set(FILE_ATTACHMENT_TYPES);
+var normalizeTimestamp = (timestamp) => {
+	if (!timestamp) return void 0;
+	return isDate(timestamp) ? timestamp.toISOString() : timestamp;
+};
+var isChannelFileAttachment = (attachment) => !isScrapedContent(attachment) && !!attachment.type && FILE_ATTACHMENT_TYPE_SET.has(attachment.type);
+var byCreatedAtDesc = (a, b) => (b.createdAt ?? "").localeCompare(a.createdAt ?? "");
+/**
+* Flattens messages into file/audio attachment items organized into descending
+* month/year sections (newest first), in a single pass over the attachments.
+*
+* The result is shaped for GroupedVirtuoso: a single flat `items` array (items
+* grouped contiguously by section) plus `groupCounts`/`sections` aligned with
+* it, so the view never has to re-flatten. The raw attachment is kept
+* untransformed; only the carrying message timestamp is captured for headers.
+*/
+var toChannelFileSections = (messages) => {
+	const groups = [];
+	const groupIndexByKey = /* @__PURE__ */ new Map();
+	messages.forEach((message) => {
+		const createdAt = normalizeTimestamp(message.created_at);
+		const key = createdAt ? createdAt.slice(0, 7) : "unknown";
+		message.attachments?.forEach((attachment, index) => {
+			if (!isChannelFileAttachment(attachment)) return;
+			const item = {
+				attachment,
+				createdAt,
+				id: `${message.id}-${index}`
+			};
+			const existingIndex = groupIndexByKey.get(key);
+			if (existingIndex === void 0) {
+				groupIndexByKey.set(key, groups.length);
+				groups.push({
+					items: [item],
+					key,
+					timestamp: createdAt
+				});
+			} else groups[existingIndex].items.push(item);
+		});
+	});
+	groups.forEach((group) => {
+		group.items.sort(byCreatedAtDesc);
+		group.timestamp = group.items[0]?.createdAt;
+	});
+	groups.sort((a, b) => (b.timestamp ?? "").localeCompare(a.timestamp ?? ""));
+	return {
+		groupCounts: groups.map((group) => group.items.length),
+		items: groups.flatMap((group) => group.items),
+		sections: groups.map(({ key, timestamp }) => ({
+			key,
+			timestamp
+		}))
+	};
+};
+//#endregion
+export { FILE_ATTACHMENT_TYPES, toChannelFileSections };
+
+//# sourceMappingURL=ChannelFilesView.utils.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelFilesView.utils.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelFilesView/ChannelFilesView.utils.ts"],"sourcesContent":["import {\n  type Attachment,\n  isScrapedContent,\n  type LocalMessage,\n  type MessageResponse,\n} from 'stream-chat';\n\nimport { isDate } from '../../../../i18n/utils';\n\n/** Attachment types listed by the files view (everything that is not an image/video). */\nexport const FILE_ATTACHMENT_TYPES = ['file', 'audio'] as const;\n\nexport type ChannelFileAttachmentType = (typeof FILE_ATTACHMENT_TYPES)[number];\n\nconst FILE_ATTACHMENT_TYPE_SET = new Set<string>(FILE_ATTACHMENT_TYPES);\n\nexport type ChannelFileItem = {\n  /** Raw attachment to render (no transformation applied). */\n  attachment: Attachment;\n  /** Stable identity (messageId + attachment index). */\n  id: string;\n  /** ISO timestamp of the carrying message, used for the month sections. */\n  createdAt?: string;\n};\n\nexport type ChannelFileSection = {\n  /** Stable grouping key (`YYYY-MM` or `unknown`). */\n  key: string;\n  /** Representative timestamp used to render the section header. */\n  timestamp?: string;\n};\n\nexport type ChannelFileSections = {\n  /**\n   * Item counts per section, aligned 1:1 with `sections`. Maps directly onto\n   * GroupedVirtuoso's `groupCounts`; `sum(groupCounts) === items.length`.\n   */\n  groupCounts: number[];\n  /** Flat list of items in display order, grouped contiguously by section. */\n  items: ChannelFileItem[];\n  /** Section headers (month/year), aligned 1:1 with `groupCounts`. */\n  sections: ChannelFileSection[];\n};\n\nconst normalizeTimestamp = (timestamp?: string | Date) => {\n  if (!timestamp) return undefined;\n  return isDate(timestamp) ? timestamp.toISOString() : timestamp;\n};\n\nconst isChannelFileAttachment = (attachment: Attachment) =>\n  !isScrapedContent(attachment) &&\n  !!attachment.type &&\n  FILE_ATTACHMENT_TYPE_SET.has(attachment.type);\n\nconst byCreatedAtDesc = (a: ChannelFileItem, b: ChannelFileItem) =>\n  (b.createdAt ?? '').localeCompare(a.createdAt ?? '');\n\n/**\n * Flattens messages into file/audio attachment items organized into descending\n * month/year sections (newest first), in a single pass over the attachments.\n *\n * The result is shaped for GroupedVirtuoso: a single flat `items` array (items\n * grouped contiguously by section) plus `groupCounts`/`sections` aligned with\n * it, so the view never has to re-flatten. The raw attachment is kept\n * untransformed; only the carrying message timestamp is captured for headers.\n */\nexport const toChannelFileSections = (\n  messages: Array<MessageResponse | LocalMessage>,\n): ChannelFileSections => {\n  const groups: Array<ChannelFileSection & { items: ChannelFileItem[] }> = [];\n  const groupIndexByKey = new Map<string, number>();\n\n  messages.forEach((message) => {\n    const createdAt = normalizeTimestamp(message.created_at);\n    const key = createdAt ? createdAt.slice(0, 7) : 'unknown';\n\n    message.attachments?.forEach((attachment, index) => {\n      if (!isChannelFileAttachment(attachment)) return;\n\n      const item: ChannelFileItem = {\n        attachment,\n        createdAt,\n        id: `${message.id}-${index}`,\n      };\n      const existingIndex = groupIndexByKey.get(key);\n\n      if (existingIndex === undefined) {\n        groupIndexByKey.set(key, groups.length);\n        groups.push({ items: [item], key, timestamp: createdAt });\n      } else {\n        groups[existingIndex].items.push(item);\n      }\n    });\n  });\n\n  groups.forEach((group) => {\n    group.items.sort(byCreatedAtDesc);\n    group.timestamp = group.items[0]?.createdAt;\n  });\n  groups.sort((a, b) => (b.timestamp ?? '').localeCompare(a.timestamp ?? ''));\n\n  return {\n    groupCounts: groups.map((group) => group.items.length),\n    items: groups.flatMap((group) => group.items),\n    sections: groups.map(({ key, timestamp }) => ({ key, timestamp })),\n  };\n};\n"],"mappings":";;;;AAUA,IAAa,wBAAwB,CAAC,QAAQ,OAAO;AAIrD,IAAM,2BAA2B,IAAI,IAAY,qBAAqB;AA8BtE,IAAM,sBAAsB,cAA8B;CACxD,IAAI,CAAC,WAAW,OAAO,KAAA;CACvB,OAAO,OAAO,SAAS,IAAI,UAAU,YAAY,IAAI;AACvD;AAEA,IAAM,2BAA2B,eAC/B,CAAC,iBAAiB,UAAU,KAC5B,CAAC,CAAC,WAAW,QACb,yBAAyB,IAAI,WAAW,IAAI;AAE9C,IAAM,mBAAmB,GAAoB,OAC1C,EAAE,aAAa,GAAA,CAAI,cAAc,EAAE,aAAa,EAAE;;;;;;;;;;AAWrD,IAAa,yBACX,aACwB;CACxB,MAAM,SAAmE,CAAC;CAC1E,MAAM,kCAAkB,IAAI,IAAoB;CAEhD,SAAS,SAAS,YAAY;EAC5B,MAAM,YAAY,mBAAmB,QAAQ,UAAU;EACvD,MAAM,MAAM,YAAY,UAAU,MAAM,GAAG,CAAC,IAAI;EAEhD,QAAQ,aAAa,SAAS,YAAY,UAAU;GAClD,IAAI,CAAC,wBAAwB,UAAU,GAAG;GAE1C,MAAM,OAAwB;IAC5B;IACA;IACA,IAAI,GAAG,QAAQ,GAAG,GAAG;GACvB;GACA,MAAM,gBAAgB,gBAAgB,IAAI,GAAG;GAE7C,IAAI,kBAAkB,KAAA,GAAW;IAC/B,gBAAgB,IAAI,KAAK,OAAO,MAAM;IACtC,OAAO,KAAK;KAAE,OAAO,CAAC,IAAI;KAAG;KAAK,WAAW;IAAU,CAAC;GAC1D,OACE,OAAO,cAAc,CAAC,MAAM,KAAK,IAAI;EAEzC,CAAC;CACH,CAAC;CAED,OAAO,SAAS,UAAU;EACxB,MAAM,MAAM,KAAK,eAAe;EAChC,MAAM,YAAY,MAAM,MAAM,EAAE,EAAE;CACpC,CAAC;CACD,OAAO,MAAM,GAAG,OAAO,EAAE,aAAa,GAAA,CAAI,cAAc,EAAE,aAAa,EAAE,CAAC;CAE1E,OAAO;EACL,aAAa,OAAO,KAAK,UAAU,MAAM,MAAM,MAAM;EACrD,OAAO,OAAO,SAAS,UAAU,MAAM,KAAK;EAC5C,UAAU,OAAO,KAAK,EAAE,KAAK,iBAAiB;GAAE;GAAK;EAAU,EAAE;CACnE;AACF"}

package/dist/es/plugins/ChannelDetail/Views/ChannelFilesView/useChannelFilesSearch.mjs

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

package/dist/es/plugins/ChannelDetail/Views/ChannelFilesView/useChannelFilesSearch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChannelFilesSearch.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelFilesView/useChannelFilesSearch.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 { FILE_ATTACHMENT_TYPES, toChannelFileSections } from './ChannelFilesView.utils';\n\nconst CHANNEL_FILES_SEARCH_PAGE_SIZE = 30;\n\nconst channelFilesSearchSourceStateSelector = (\n  state: SearchSourceState<MessageResponse>,\n) => ({\n  isLoading: state.isLoading,\n  messages: state.items,\n});\n\nexport const useChannelFilesSearch = () => {\n  const { client } = useChatContext();\n  const { channel } = useChannelDetailContext();\n\n  const channelFilesSearchSource = useMemo(() => {\n    const source = new MessageSearchSource(client, {\n      allowEmptySearchString: true,\n      pageSize: CHANNEL_FILES_SEARCH_PAGE_SIZE,\n      resetOnNewSearchQuery: false,\n    });\n\n    source.messageSearchChannelFilters = { cid: channel.cid };\n    source.messageSearchFilters = {\n      'attachments.type': { $in: [...FILE_ATTACHMENT_TYPES] },\n    };\n\n    return source;\n  }, [channel.cid, client]);\n\n  const { isLoading, messages } = useStateStore(\n    channelFilesSearchSource.state,\n    channelFilesSearchSourceStateSelector,\n  );\n\n  const { groupCounts, items, sections } = useMemo(\n    () =>\n      toChannelFileSections((messages ?? []) as Array<MessageResponse | LocalMessage>),\n    [messages],\n  );\n\n  useEffect(() => {\n    channelFilesSearchSource.activate();\n    void channelFilesSearchSource.search('');\n\n    return () => {\n      channelFilesSearchSource.cancelScheduledQuery();\n    };\n  }, [channelFilesSearchSource]);\n\n  return {\n    channelFilesSearchSource,\n    fileItems: items,\n    groupCounts,\n    hasResultsLoaded: Array.isArray(messages),\n    isLoading,\n    sections,\n  };\n};\n"],"mappings":";;;;;;;AAaA,IAAM,iCAAiC;AAEvC,IAAM,yCACJ,WACI;CACJ,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,qBAAqB,EAAE,EACxD;EAEA,OAAO;CACT,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC;CAExB,MAAM,EAAE,WAAW,aAAa,cAC9B,yBAAyB,OACzB,qCACF;CAEA,MAAM,EAAE,aAAa,OAAO,aAAa,cAErC,sBAAuB,YAAY,CAAC,CAA2C,GACjF,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,WAAW;EACX;EACA,kBAAkB,MAAM,QAAQ,QAAQ;EACxC;EACA;CACF;AACF"}