npm - stream-chat-react - Versions diffs - 14.12.0 → 15.0.0-rc.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1428) hide show

package/dist/es/components/Attachment/ModalGallery.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { MessageContext } from "../../context/MessageContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { LoadingIndicator } from "../Loading/LoadingIndicator.mjs";
 import { GlobalModal } from "../Modal/GlobalModal.mjs";
@@ -7,7 +7,9 @@ import { BaseImage } from "../BaseImage/BaseImage.mjs";
 import { VideoThumbnail } from "../VideoPlayer/VideoThumbnail.mjs";
 import { GalleryUI } from "../Gallery/GalleryUI.mjs";
 import { Gallery } from "../Gallery/Gallery.mjs";
-import { useCallback, useState } from "react";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useCallback, useContext, useMemo, useState } from "react";
+import { convertTimestampToDate } from "stream-chat";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/Attachment/ModalGallery.tsx
@@ -33,8 +35,18 @@ var BASE_IMAGE_PROP_KEYS = [
 ];
 var ModalGallery = ({ className, closeOnBackgroundClick = true, items, modalClassName }) => {
 	const { BaseImage: BaseImage$1 = BaseImage, Gallery: Gallery$1 = Gallery, Modal = GlobalModal } = useComponentContext();
+	const { message } = useContext(MessageContext) ?? {};
 	const [modalOpen, setModalOpen] = useState(false);
 	const [selectedIndex, setSelectedIndex] = useState(0);
+	const itemsWithSender = useMemo(() => items.map((item) => ({
+		...item,
+		createdAt: item.createdAt ?? convertTimestampToDate(message?.created_at),
+		user: item.user ?? message?.user ?? void 0
+	})), [
+		items,
+		message?.created_at,
+		message?.user
+	]);
 	const usesDefaultBaseImage = BaseImage$1 === BaseImage;
 	const closeModal = useCallback(() => {
 		setModalOpen(false);
@@ -73,14 +85,14 @@ var ModalGallery = ({ className, closeOnBackgroundClick = true, items, modalClas
 			closeOnBackgroundClick,
 			GalleryUI,
 			initialIndex: selectedIndex,
-			items,
+			items: itemsWithSender,
 			onRequestClose: closeModal
 		})
 	})] });
 };
 var ThumbnailButton = ({ BaseImage, baseImageUsesDefaultBehavior, index, item, itemCount, onClick, overflowCount, showOverlay }) => {
-	const { t } = useTranslationContext();
 	const { IconRetry } = useComponentContextIcons();
+	const { t } = useTranslationContext();
 	const imageUrl = item.imageUrl;
 	const [isLoadFailed, setIsLoadFailed] = useState(false);
 	const [isImageLoading, setIsImageLoading] = useState(Boolean(imageUrl));
@@ -98,7 +110,7 @@ var ThumbnailButton = ({ BaseImage, baseImageUsesDefaultBehavior, index, item, i
 		onClick();
 	};
 	return /* @__PURE__ */ jsxs("button", {
-		"aria-label": showRetryIndicator ? t("aria/Retry upload") : itemCountAwareLabel({
+		"aria-label": showRetryIndicator ? t("common.retryUpload.ariaLabel", "Retry upload") : itemCountAwareLabel({
 			imageIndex: index + 1,
 			itemCount,
 			t
@@ -111,11 +123,11 @@ var ThumbnailButton = ({ BaseImage, baseImageUsesDefaultBehavior, index, item, i
 		type: "button",
 		children: [
 			item.videoThumbnailUrl ? /* @__PURE__ */ jsx(VideoThumbnail, {
-				alt: t("User uploaded content"),
+				alt: t("common.userUploadedContent.label", "User uploaded content"),
 				src: item.videoThumbnailUrl
 			}) : /* @__PURE__ */ jsx(BaseImage, {
 				...baseImageProps,
-				alt: item.alt ?? t("User uploaded content"),
+				alt: item.alt ?? t("common.userUploadedContent.label", "User uploaded content"),
 				onError: (event) => {
 					setIsImageLoading(false);
 					setIsLoadFailed(true);
@@ -151,7 +163,7 @@ var ThumbnailButton = ({ BaseImage, baseImageUsesDefaultBehavior, index, item, i
 		]
 	});
 };
-var itemCountAwareLabel = ({ imageIndex, itemCount, t }) => itemCount === 1 ? t("Open image in gallery") : t("Open gallery at image {{ index }}", { index: imageIndex });
+var itemCountAwareLabel = ({ imageIndex, itemCount, t }) => itemCount === 1 ? t("attachment.modalGallery.openImageGallery.label", "Open image in gallery") : t("attachment.modalGallery.openGalleryImage.label", "Open gallery at image {{ index }}", { index: imageIndex });
 var getBaseImageProps = (item) => {
 	const baseImageProps = {};
 	for (const key of BASE_IMAGE_PROP_KEYS) {

package/dist/es/components/Attachment/ModalGallery.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalGallery.mjs","names":[],"sources":["../../../../src/components/Attachment/ModalGallery.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport clsx from 'clsx';\n\nimport type { BaseImageProps } from '../BaseImage';\nimport type { GalleryItem } from '../Gallery/GalleryContext';\nimport { BaseImage as DefaultBaseImage } from '../BaseImage';\nimport { Gallery as DefaultGallery, GalleryUI } from '../Gallery';\nimport { LoadingIndicator } from '../Loading';\nimport { GlobalModal, type ModalCloseSource } from '../Modal';\nimport {\n useComponentContext,\n useComponentContextIcons,\n useTranslationContext,\n} from '../../context';\nimport { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';\n\nconst MAX_VISIBLE_THUMBNAILS = 4;\nconst BASE_IMAGE_PROP_KEYS = [\n 'className',\n 'crossOrigin',\n 'decoding',\n 'draggable',\n 'fetchPriority',\n 'height',\n 'loading',\n 'onError',\n 'onLoad',\n 'ref',\n 'showDownloadButtonOnError',\n 'sizes',\n 'srcSet',\n 'style',\n 'title',\n 'useMap',\n 'width',\n] as const satisfies ReadonlyArray<keyof Omit<BaseImageProps, 'src'>>;\ntype BaseImagePropsWithoutSrc = Omit<BaseImageProps, 'src'>;\ntype PartialBaseImagePropMap = Partial<\n Record<(typeof BASE_IMAGE_PROP_KEYS)[number], unknown>\n>;\n\nexport type ModalGalleryProps = {\n /** Array of media attachments to display /\n items: GalleryItem[];\n className?: string;\n /* Whether clicking the empty gallery background should close the modal (default: true) */\n closeOnBackgroundClick?: boolean;\n modalClassName?: string;\n};\n\nexport const ModalGallery = ({\n className,\n closeOnBackgroundClick = true,\n items,\n modalClassName,\n}: ModalGalleryProps) => {\n const {\n BaseImage = DefaultBaseImage,\n Gallery = DefaultGallery,\n Modal = GlobalModal,\n } = useComponentContext();\n const [modalOpen, setModalOpen] = useState(false);\n const [selectedIndex, setSelectedIndex] = useState(0);\n const usesDefaultBaseImage = BaseImage === DefaultBaseImage;\n\n const closeModal = useCallback(() => {\n setModalOpen(false);\n }, []);\n const preventOverlayClose = useCallback(\n (source: ModalCloseSource) => source !== 'overlay',\n [],\n );\n\n const handleThumbnailClick = useCallback((index: number) => {\n setSelectedIndex(index);\n setModalOpen(true);\n }, []);\n\n const itemCount = items.length;\n const visibleItems = items.slice(0, MAX_VISIBLE_THUMBNAILS);\n const overflowCount = itemCount - MAX_VISIBLE_THUMBNAILS;\n\n return (\n <>\n <div\n className={clsx('str-chat__modal-gallery', className, {\n 'str-chat__modal-gallery--three-images': itemCount === 3,\n 'str-chat__modal-gallery--two-images': itemCount === 2,\n })}\n >\n {visibleItems.map((item, index) => {\n const isLastVisible = index === MAX_VISIBLE_THUMBNAILS - 1;\n const showOverlay = isLastVisible && overflowCount > 0;\n\n return (\n <ThumbnailButton\n BaseImage={BaseImage}\n baseImageUsesDefaultBehavior={usesDefaultBaseImage}\n index={index}\n item={item}\n itemCount={itemCount}\n key={index}\n onClick={() => handleThumbnailClick(index)}\n overflowCount={overflowCount}\n showOverlay={showOverlay}\n />\n );\n })}\n </div>\n <Modal\n className={clsx('str-chat__gallery-modal', modalClassName)}\n onClose={closeModal}\n onCloseAttempt={preventOverlayClose}\n open={modalOpen}\n >\n <Gallery\n closeOnBackgroundClick={closeOnBackgroundClick}\n GalleryUI={GalleryUI}\n initialIndex={selectedIndex}\n items={items}\n onRequestClose={closeModal}\n />\n </Modal>\n </>\n );\n};\n\ntype ThumbnailButtonProps = {\n BaseImage: React.ComponentType<BaseImageProps>;\n baseImageUsesDefaultBehavior: boolean;\n index: number;\n item: GalleryItem;\n itemCount: number;\n onClick: () => void;\n overflowCount: number;\n showOverlay: boolean;\n};\n\nconst ThumbnailButton = ({\n BaseImage,\n baseImageUsesDefaultBehavior,\n index,\n item,\n itemCount,\n onClick,\n overflowCount,\n showOverlay,\n}: ThumbnailButtonProps) => {\n const { t } = useTranslationContext();\n const { IconRetry } = useComponentContextIcons();\n const imageUrl = item.imageUrl;\n const [isLoadFailed, setIsLoadFailed] = useState(false);\n const [isImageLoading, setIsImageLoading] = useState(Boolean(imageUrl));\n // Cache-busting suffix appended to image src on retry. Using a suffix instead of\n // a React key remount keeps the component (and its placeholder) mounted, preventing\n // layout shifts and height collapse during the reload attempt.\n const [retrySuffix, setRetrySuffix] = useState('');\n\n const {\n onError: itemOnError,\n onLoad: itemOnLoad,\n ...baseImageProps\n } = getBaseImageProps(item);\n const showRetryIndicator = isLoadFailed && !showOverlay;\n const showLoadingIndicator = isImageLoading && !showRetryIndicator && !showOverlay;\n\n const handleButtonClick = () => {\n if (showRetryIndicator) {\n setIsLoadFailed(false);\n setIsImageLoading(true);\n setRetrySuffix(`&retry=${Date.now()}`);\n return;\n }\n\n onClick();\n };\n\n const buttonLabel = showRetryIndicator\n ? t('aria/Retry upload')\n : itemCountAwareLabel({ imageIndex: index + 1, itemCount, t });\n\n return (\n <button\n aria-label={buttonLabel}\n className={clsx('str-chat__modal-gallery__image', {\n 'str-chat__modal-gallery__image--load-failed': showRetryIndicator,\n 'str-chat__modal-gallery__image--loading': showLoadingIndicator,\n })}\n onClick={handleButtonClick}\n type='button'\n >\n {item.videoThumbnailUrl ? (\n <VideoThumbnail alt={t('User uploaded content')} src={item.videoThumbnailUrl} />\n ) : (\n <BaseImage\n {...baseImageProps}\n alt={item.alt ?? t('User uploaded content')}\n onError={(event) => {\n setIsImageLoading(false);\n setIsLoadFailed(true);\n itemOnError?.(event);\n }}\n onLoad={(event) => {\n setIsImageLoading(false);\n setIsLoadFailed(false);\n itemOnLoad?.(event);\n }}\n src={imageUrl ? `${imageUrl}${retrySuffix}` : imageUrl}\n {...(baseImageUsesDefaultBehavior ? { showDownloadButtonOnError: false } : {})}\n />\n )}\n {showLoadingIndicator && (\n <div\n aria-hidden='true'\n className='str-chat__modal-gallery__image-loading-overlay'\n data-testid='str-chat__modal-gallery__image-loading-overlay'\n >\n <LoadingIndicator />\n </div>\n )}\n {showRetryIndicator && (\n <div\n aria-hidden='true'\n className='str-chat__modal-gallery__image-load-failed-overlay'\n data-testid='str-chat__modal-gallery__image-load-failed-overlay'\n >\n <div className='str-chat__modal-gallery__image-retry-indicator'>\n <IconRetry />\n </div>\n </div>\n )}\n {showOverlay && (\n <div className='str-chat__modal-gallery__placeholder'>+{overflowCount}</div>\n )}\n </button>\n );\n};\n\nconst itemCountAwareLabel = ({\n imageIndex,\n itemCount,\n t,\n}: {\n imageIndex: number;\n itemCount: number;\n t: ReturnType<typeof useTranslationContext>['t'];\n}) =>\n itemCount === 1\n ? t('Open image in gallery')\n : t('Open gallery at image {{ index }}', {\n index: imageIndex,\n });\n\nconst getBaseImageProps = (item: GalleryItem): BaseImagePropsWithoutSrc => {\n const baseImageProps: PartialBaseImagePropMap = {};\n for (const key of BASE_IMAGE_PROP_KEYS) {\n const value = item[key];\n if (value !== undefined) {\n baseImageProps[key] = value;\n }\n }\n\n return baseImageProps as BaseImagePropsWithoutSrc;\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"ModalGallery.mjs","names":[],"sources":["../../../../src/components/Attachment/ModalGallery.tsx"],"sourcesContent":["import { convertTimestampToDate } from 'stream-chat';\nimport React, { useCallback, useContext, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport type { BaseImageProps } from '../BaseImage';\nimport type { GalleryItem } from '../Gallery/GalleryContext';\nimport { BaseImage as DefaultBaseImage } from '../BaseImage';\nimport { Gallery as DefaultGallery, GalleryUI } from '../Gallery';\nimport { LoadingIndicator } from '../Loading';\nimport { GlobalModal, type ModalCloseSource } from '../Modal';\nimport {\n MessageContext,\n useComponentContext,\n useComponentContextIcons,\n useTranslationContext,\n} from '../../context';\nimport { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';\n\nconst MAX_VISIBLE_THUMBNAILS = 4;\nconst BASE_IMAGE_PROP_KEYS = [\n 'className',\n 'crossOrigin',\n 'decoding',\n 'draggable',\n 'fetchPriority',\n 'height',\n 'loading',\n 'onError',\n 'onLoad',\n 'ref',\n 'showDownloadButtonOnError',\n 'sizes',\n 'srcSet',\n 'style',\n 'title',\n 'useMap',\n 'width',\n] as const satisfies ReadonlyArray<keyof Omit<BaseImageProps, 'src'>>;\ntype BaseImagePropsWithoutSrc = Omit<BaseImageProps, 'src'>;\ntype PartialBaseImagePropMap = Partial<\n Record<(typeof BASE_IMAGE_PROP_KEYS)[number], unknown>\n>;\n\nexport type ModalGalleryProps = {\n /** Array of media attachments to display /\n items: GalleryItem[];\n className?: string;\n /* Whether clicking the empty gallery background should close the modal (default: true) */\n closeOnBackgroundClick?: boolean;\n modalClassName?: string;\n};\n\nexport const ModalGallery = ({\n className,\n closeOnBackgroundClick = true,\n items,\n modalClassName,\n}: ModalGalleryProps) => {\n const {\n BaseImage = DefaultBaseImage,\n Gallery = DefaultGallery,\n Modal = GlobalModal,\n } = useComponentContext();\n // ModalGallery is also usable standalone, outside a message\n const { message } = useContext(MessageContext) ?? {};\n const [modalOpen, setModalOpen] = useState(false);\n const [selectedIndex, setSelectedIndex] = useState(0);\n // the gallery header renders outside this provider, so sender and timestamp travel on the items\n const itemsWithSender = useMemo(\n () =>\n items.map((item) => ({\n ...item,\n createdAt: item.createdAt ?? convertTimestampToDate(message?.created_at),\n user: item.user ?? message?.user ?? undefined,\n })),\n [items, message?.created_at, message?.user],\n );\n const usesDefaultBaseImage = BaseImage === DefaultBaseImage;\n\n const closeModal = useCallback(() => {\n setModalOpen(false);\n }, []);\n const preventOverlayClose = useCallback(\n (source: ModalCloseSource) => source !== 'overlay',\n [],\n );\n\n const handleThumbnailClick = useCallback((index: number) => {\n setSelectedIndex(index);\n setModalOpen(true);\n }, []);\n\n const itemCount = items.length;\n const visibleItems = items.slice(0, MAX_VISIBLE_THUMBNAILS);\n const overflowCount = itemCount - MAX_VISIBLE_THUMBNAILS;\n\n return (\n <>\n <div\n className={clsx('str-chat__modal-gallery', className, {\n 'str-chat__modal-gallery--three-images': itemCount === 3,\n 'str-chat__modal-gallery--two-images': itemCount === 2,\n })}\n >\n {visibleItems.map((item, index) => {\n const isLastVisible = index === MAX_VISIBLE_THUMBNAILS - 1;\n const showOverlay = isLastVisible && overflowCount > 0;\n\n return (\n <ThumbnailButton\n BaseImage={BaseImage}\n baseImageUsesDefaultBehavior={usesDefaultBaseImage}\n index={index}\n item={item}\n itemCount={itemCount}\n key={index}\n onClick={() => handleThumbnailClick(index)}\n overflowCount={overflowCount}\n showOverlay={showOverlay}\n />\n );\n })}\n </div>\n <Modal\n className={clsx('str-chat__gallery-modal', modalClassName)}\n onClose={closeModal}\n onCloseAttempt={preventOverlayClose}\n open={modalOpen}\n >\n <Gallery\n closeOnBackgroundClick={closeOnBackgroundClick}\n GalleryUI={GalleryUI}\n initialIndex={selectedIndex}\n items={itemsWithSender}\n onRequestClose={closeModal}\n />\n </Modal>\n </>\n );\n};\n\ntype ThumbnailButtonProps = {\n BaseImage: React.ComponentType<BaseImageProps>;\n baseImageUsesDefaultBehavior: boolean;\n index: number;\n item: GalleryItem;\n itemCount: number;\n onClick: () => void;\n overflowCount: number;\n showOverlay: boolean;\n};\n\nconst ThumbnailButton = ({\n BaseImage,\n baseImageUsesDefaultBehavior,\n index,\n item,\n itemCount,\n onClick,\n overflowCount,\n showOverlay,\n}: ThumbnailButtonProps) => {\n const { IconRetry } = useComponentContextIcons();\n const { t } = useTranslationContext();\n const imageUrl = item.imageUrl;\n const [isLoadFailed, setIsLoadFailed] = useState(false);\n const [isImageLoading, setIsImageLoading] = useState(Boolean(imageUrl));\n // Cache-busting suffix appended to image src on retry. Using a suffix instead of\n // a React key remount keeps the component (and its placeholder) mounted, preventing\n // layout shifts and height collapse during the reload attempt.\n const [retrySuffix, setRetrySuffix] = useState('');\n\n const {\n onError: itemOnError,\n onLoad: itemOnLoad,\n ...baseImageProps\n } = getBaseImageProps(item);\n const showRetryIndicator = isLoadFailed && !showOverlay;\n const showLoadingIndicator = isImageLoading && !showRetryIndicator && !showOverlay;\n\n const handleButtonClick = () => {\n if (showRetryIndicator) {\n setIsLoadFailed(false);\n setIsImageLoading(true);\n setRetrySuffix(`&retry=${Date.now()}`);\n return;\n }\n\n onClick();\n };\n\n const buttonLabel = showRetryIndicator\n ? t('common.retryUpload.ariaLabel', 'Retry upload')\n : itemCountAwareLabel({ imageIndex: index + 1, itemCount, t });\n\n return (\n <button\n aria-label={buttonLabel}\n className={clsx('str-chat__modal-gallery__image', {\n 'str-chat__modal-gallery__image--load-failed': showRetryIndicator,\n 'str-chat__modal-gallery__image--loading': showLoadingIndicator,\n })}\n onClick={handleButtonClick}\n type='button'\n >\n {item.videoThumbnailUrl ? (\n <VideoThumbnail\n alt={t('common.userUploadedContent.label', 'User uploaded content')}\n src={item.videoThumbnailUrl}\n />\n ) : (\n <BaseImage\n {...baseImageProps}\n alt={item.alt ?? t('common.userUploadedContent.label', 'User uploaded content')}\n onError={(event) => {\n setIsImageLoading(false);\n setIsLoadFailed(true);\n itemOnError?.(event);\n }}\n onLoad={(event) => {\n setIsImageLoading(false);\n setIsLoadFailed(false);\n itemOnLoad?.(event);\n }}\n src={imageUrl ? `${imageUrl}${retrySuffix}` : imageUrl}\n {...(baseImageUsesDefaultBehavior ? { showDownloadButtonOnError: false } : {})}\n />\n )}\n {showLoadingIndicator && (\n <div\n aria-hidden='true'\n className='str-chat__modal-gallery__image-loading-overlay'\n data-testid='str-chat__modal-gallery__image-loading-overlay'\n >\n <LoadingIndicator />\n </div>\n )}\n {showRetryIndicator && (\n <div\n aria-hidden='true'\n className='str-chat__modal-gallery__image-load-failed-overlay'\n data-testid='str-chat__modal-gallery__image-load-failed-overlay'\n >\n <div className='str-chat__modal-gallery__image-retry-indicator'>\n <IconRetry />\n </div>\n </div>\n )}\n {showOverlay && (\n <div className='str-chat__modal-gallery__placeholder'>+{overflowCount}</div>\n )}\n </button>\n );\n};\n\nconst itemCountAwareLabel = ({\n imageIndex,\n itemCount,\n t,\n}: {\n imageIndex: number;\n itemCount: number;\n t: ReturnType<typeof useTranslationContext>['t'];\n}) =>\n itemCount === 1\n ? t('attachment.modalGallery.openImageGallery.label', 'Open image in gallery')\n : t(\n 'attachment.modalGallery.openGalleryImage.label',\n 'Open gallery at image {{ index }}',\n {\n index: imageIndex,\n },\n );\n\nconst getBaseImageProps = (item: GalleryItem): BaseImagePropsWithoutSrc => {\n const baseImageProps: PartialBaseImagePropMap = {};\n for (const key of BASE_IMAGE_PROP_KEYS) {\n const value = item[key];\n if (value !== undefined) {\n baseImageProps[key] = value;\n }\n }\n\n return baseImageProps as BaseImagePropsWithoutSrc;\n};\n"],"mappings":"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"}

package/dist/es/components/Attachment/UnsupportedAttachment.mjs CHANGED Viewed

@@ -1,11 +1,11 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Attachment/UnsupportedAttachment.tsx
 var UnsupportedAttachment = () => {
 	const { IconUnsupportedAttachment } = useComponentContextIcons();
-	const { t } = useTranslationContext("UnsupportedAttachment");
+	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__message-attachment-unsupported",
 		"data-testid": "attachment-unsupported",
@@ -14,7 +14,7 @@ var UnsupportedAttachment = () => {
 			children: /* @__PURE__ */ jsx("div", {
 				className: "str-chat__message-attachment-unsupported__title",
 				"data-testid": "unsupported-attachment-title",
-				children: t("Unsupported attachment")
+				children: t("common.unsupportedAttachment.text", "Unsupported attachment")
 			})
 		})]
 	});

package/dist/es/components/Attachment/UnsupportedAttachment.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UnsupportedAttachment.mjs","names":[],"sources":["../../../../src/components/Attachment/UnsupportedAttachment.tsx"],"sourcesContent":["import React from 'react';\nimport type { Attachment } from 'stream-chat';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nexport type UnsupportedAttachmentProps = {\n attachment: Attachment;\n};\n\nexport const UnsupportedAttachment = () => {\n const { IconUnsupportedAttachment } = useComponentContextIcons();\n\n const { t } = useTranslationContext(~~'UnsupportedAttachment'~~);\n return (\n <div\n className='str-chat__message-attachment-unsupported'\n data-testid='attachment-unsupported'\n >\n <IconUnsupportedAttachment />\n <div className='str-chat__message-attachment-unsupported__metadata'>\n <div\n className='str-chat__message-attachment-unsupported__title'\n data-testid='unsupported-attachment-title'\n >\n {t('Unsupported attachment')}\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;AAQA,IAAa,8BAA8B;CACzC,MAAM,EAAE,8BAA8B,yBAAyB;~~CAE~~/D,MAAM,EAAE,MAAM,sBAAsB~~,uBAAuB~~;~~CAC3D~~,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,2BAAD,CAA4B,CAAA,GAC5B,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IACE,WAAU;IACV,eAAY;cAEX,EAAE,wBAAwB;~~GACxB~~,CAAA;EACF,CAAA,CACF;;AAET"}
1	+ {"version":3,"file":"UnsupportedAttachment.mjs","names":[],"sources":["../../../../src/components/Attachment/UnsupportedAttachment.tsx"],"sourcesContent":["import React from 'react';\nimport type { Attachment } from 'stream-chat';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nexport type UnsupportedAttachmentProps = {\n attachment: Attachment;\n};\n\nexport const UnsupportedAttachment = () => {\n const { IconUnsupportedAttachment } = useComponentContextIcons();\n const { t } = useTranslationContext();\n return (\n <div\n className='str-chat__message-attachment-unsupported'\n data-testid='attachment-unsupported'\n >\n <IconUnsupportedAttachment />\n <div className='str-chat__message-attachment-unsupported__metadata'>\n <div\n className='str-chat__message-attachment-unsupported__title'\n data-testid='unsupported-attachment-title'\n >\n {t('common.unsupportedAttachment.text', 'Unsupported attachment')}\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;AAQA,IAAa,8BAA8B;CACzC,MAAM,EAAE,8BAA8B,yBAAyB;CAC/D,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,2BAAD,CAA4B,CAAA,GAC5B,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IACE,WAAU;IACV,eAAY;cAEX,EAAE,qCAAqC,wBAAwB;GAC7D,CAAA;EACF,CAAA,CACF;;AAET"}

package/dist/es/components/Attachment/VideoAttachment.mjs CHANGED Viewed

@@ -1,20 +1,25 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
-import { getAttachmentPreviewUrl, hasPendingUploadState } from "./hooks/useAttachmentUploadState.mjs";
+import { useAttachmentContext } from "../../context/AttachmentContext.mjs";
 import { getCssDimensionsVariables } from "./utils.mjs";
 import { VideoPlayer } from "../VideoPlayer/VideoPlayer.mjs";
 import { VideoThumbnail } from "../VideoPlayer/VideoThumbnail.mjs";
 import { useLocalVideoDimensions } from "./hooks/useLocalVideoDimensions.mjs";
 import React, { useLayoutEffect, useRef, useState } from "react";
+import { getAttachmentPreviewUrl, isPendingUpload } from "stream-chat";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/Attachment/VideoAttachment.tsx
 var VideoAttachment = ({ attachment, VideoPlayer: VideoPlayer$1 = VideoPlayer }) => {
-	const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = useChannelStateContext();
+	const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } = useAttachmentContext();
 	const videoElement = useRef(null);
 	const [attachmentConfiguration, setAttachmentConfiguration] = useState();
-	const [showVideo, setShowVideo] = React.useState(() => !shouldGenerateVideoThumbnail || hasPendingUploadState(attachment));
+	const [showVideo, setShowVideo] = React.useState(() => !shouldGenerateVideoThumbnail || isPendingUpload(attachment));
 	const [playbackRequested, setPlaybackRequested] = React.useState(false);
-	const isUploading = hasPendingUploadState(attachment);
+	const isUploading = isPendingUpload(attachment);
+	const localDimensions = useLocalVideoDimensions(isUploading ? getAttachmentPreviewUrl(attachment) : void 0);
+	const dimensionVariables = localDimensions ? {
+		"--original-height": localDimensions.height,
+		"--original-width": localDimensions.width
+	} : getCssDimensionsVariables(attachment.thumb_url || "");
 	useLayoutEffect(() => {
 		if (videoElement.current && videoAttachmentSizeHandler) setAttachmentConfiguration(videoAttachmentSizeHandler(attachment, videoElement.current, shouldGenerateVideoThumbnail));
 	}, [
@@ -24,11 +29,6 @@ var VideoAttachment = ({ attachment, VideoPlayer: VideoPlayer$1 = VideoPlayer })
 		shouldGenerateVideoThumbnail
 	]);
 	const renderThumbnailFirst = Boolean(attachment.thumb_url && shouldGenerateVideoThumbnail);
-	const localDimensions = useLocalVideoDimensions(isUploading ? getAttachmentPreviewUrl(attachment) : void 0);
-	const dimensionVariables = localDimensions ? {
-		"--original-height": localDimensions.height,
-		"--original-width": localDimensions.width
-	} : getCssDimensionsVariables(attachment.thumb_url || "");
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("str-chat__player-wrapper", { "str-chat__player-wrapper--uploading": isUploading && !localDimensions }),
 		"data-testid": "video-wrapper",

package/dist/es/components/Attachment/VideoAttachment.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoAttachment.mjs","names":[],"sources":["../../../../src/components/Attachment/VideoAttachment.tsx"],"sourcesContent":["import type { VideoAttachment as VideoAttachmentType } from 'stream-chat';\nimport ~~{ useChannelStateContext } from '../../context';\nimport~~ React, { type ComponentType, useLayoutEffect, useRef, useState } from 'react';\nimport ~~type~~ { ~~VideoAttachmentConfiguration } from '../../types/types';\nimport {~~ getCssDimensionsVariables } from './utils';\nimport type { VideoPlayerProps } from '../VideoPlayer';\nimport { VideoPlayer as DefaultVideoPlayer } from '../VideoPlayer';\nimport { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';\nimport clsx from 'clsx';\nimport {~~\n getAttachmentPreviewUrl,\n hasPendingUploadState,\n~~} from './hooks/~~useAttachmentUploadState~~';\nimport { ~~useLocalVideoDimensions~~ } from '~~./hooks~~/~~useLocalVideoDimensions~~';\n\nexport type VideoAttachmentProps = {\n attachment: VideoAttachmentType;\n VideoPlayer?: ComponentType<VideoPlayerProps>;\n};\n\nexport const VideoAttachment = ({\n attachment,\n VideoPlayer = DefaultVideoPlayer,\n}: VideoAttachmentProps) => {\n const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } =\n ~~useChannelStateContext~~();\n const videoElement = useRef<HTMLDivElement>(null);\n const [attachmentConfiguration, setAttachmentConfiguration] =\n useState<VideoAttachmentConfiguration>();\n // A video that mounted while uploading has been showing its player all along, so it stays on\n // the player once the upload lands. Falling back to the thumbnail would swap the rendered\n // element twice — once when `thumb_url` arrives, once when the user clicks play — and each swap\n // resizes the bubble, because the bubble is `fit-content` and the three renderings (local\n // `<video>`, CDN thumbnail `<img>`, CDN `<video>`) contribute different intrinsic widths.\n const [showVideo, setShowVideo] = React.useState(\n () => !shouldGenerateVideoThumbnail \|\| ~~hasPendingUploadState~~(attachment),\n );\n // Only a click on the thumbnail's play button asks for playback. Kept separate from\n // `showVideo`, which is also true for a video that never had a thumbnail to click.\n const [playbackRequested, setPlaybackRequested] = React.useState(false);\n // Structural: the bytes are not on the CDN, so there is nothing to play — independent of\n // whether a request happens to be running this instant.\n const isUploading = ~~hasPendingUploadState~~(attachment);\n\n useLayoutEffect(() => {\n if (videoElement.current && videoAttachmentSizeHandler) {\n const config = videoAttachmentSizeHandler(\n attachment,\n videoElement.current,\n shouldGenerateVideoThumbnail,\n );\n setAttachmentConfiguration(config);\n }\n }, [\n videoElement,\n videoAttachmentSizeHandler,\n attachment,\n shouldGenerateVideoThumbnail,\n ]);\n\n const renderThumbnailFirst = Boolean(\n attachment.thumb_url && shouldGenerateVideoThumbnail,\n );\n\n // While the upload is in flight there is no CDN `thumb_url` to read `oh`/`ow` from, so the box\n // would lay out from the 1000000x1000000 fallback and then resize once the real dimensions\n // arrive. The local file knows them already.\n const localDimensions = useLocalVideoDimensions(\n isUploading ? getAttachmentPreviewUrl(attachment) : undefined,\n );\n const dimensionVariables = localDimensions\n ? {\n '--original-height': localDimensions.height,\n '--original-width': localDimensions.width,\n }\n : getCssDimensionsVariables(attachment.thumb_url \|\| '');\n\n // todo: handle failed thumbnail loading\n return (\n <div\n className={clsx('str-chat__player-wrapper', {\n // Only until the dimensions are known — the class lets the element lay out at its own\n // aspect ratio instead of the square the fallback would produce.\n 'str-chat__player-wrapper--uploading': isUploading && !localDimensions,\n })}\n data-testid='video-wrapper'\n ref={videoElement}\n style={dimensionVariables}\n >\n {renderThumbnailFirst && !showVideo ? (\n <VideoThumbnail\n alt={attachment.title}\n data-testid='image-test'\n onPlay={() => {\n setPlaybackRequested(true);\n setShowVideo(true);\n }}\n src={attachment.thumb_url}\n title={attachment.title}\n />\n ) : (\n <VideoPlayer\n // Playback stays available while the upload runs: the local blob plays, and every\n // message-list widget behaves this way (audio too), as does stream-chat-react-native.\n // The progress overlay is positioned clear of the transport controls.\n //\n // Autoplay only when the user asked for it by clicking the thumbnail. This used to be\n // `renderThumbnailFirst`, which stands for \"a thumbnail exists\" — so a video watched\n // from its local blob started playing again by itself the moment the upload finished\n // and `thumb_url` arrived.\n isPlaying={playbackRequested}\n thumbnailUrl={attachmentConfiguration?.thumbUrl}\n // Falls back to the local blob preview while the upload is still in flight.\n videoUrl={getAttachmentPreviewUrl(attachment, attachmentConfiguration?.url)}\n />\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;~~AAoBA~~,IAAa,mBAAmB,EAC9B,YACA,aAAA,gBAAc,kBACY;CAC1B,MAAM,EAAE,8BAA8B,+BACpC,~~uBAAuB~~;~~CACzB~~,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,yBAAyB,8BAC9B,SAAuC;CAMzC,MAAM,CAAC,WAAW,gBAAgB,MAAM,eAChC,CAAC,gCAAgC,~~sBAAsB~~,UAAU,~~CACzE~~;CAGA,MAAM,CAAC,mBAAmB,wBAAwB,MAAM,SAAS,KAAK;CAGtE,MAAM,cAAc,~~sBAAsB~~,UAAU;~~CAEpD~~,sBAAsB;EACpB,IAAI,aAAa,WAAW,4BAM1B,2BALe,2BACb,YACA,aAAa,SACb,4BAEyB,CAAM;CAErC,GAAG;EACD;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,uBAAuB,QAC3B,WAAW,aAAa,4BAC1B;~~CAKA~~,~~MAAM,kBAAkB,wBACtB,cAAc,wBAAwB,UAAU,IAAI,KAAA,CACtD;CACA,MAAM,qBAAqB,kBACvB;EACE,qBAAqB,gBAAgB;EACrC,oBAAoB,gBAAgB;CACtC,IACA,0BAA0B,WAAW,aAAa,EAAE;CAGxD,~~OACE,oBAAC,OAAD;EACE,WAAW,KAAK,4BAA4B,EAG1C,uCAAuC,eAAe,CAAC,gBACzD,CAAC;EACD,eAAY;EACZ,KAAK;EACL,OAAO;YAEN,wBAAwB,CAAC,YACxB,oBAAC,gBAAD;GACE,KAAK,WAAW;GAChB,eAAY;GACZ,cAAc;IACZ,qBAAqB,IAAI;IACzB,aAAa,IAAI;GACnB;GACA,KAAK,WAAW;GAChB,OAAO,WAAW;EACnB,CAAA,IAED,oBAAC,eAAD;GASE,WAAW;GACX,cAAc,yBAAyB;GAEvC,UAAU,wBAAwB,YAAY,yBAAyB,GAAG;EAC3E,CAAA;CAEA,CAAA;AAET"}
1	+ {"version":3,"file":"VideoAttachment.mjs","names":[],"sources":["../../../../src/components/Attachment/VideoAttachment.tsx"],"sourcesContent":["import type { VideoAttachment as VideoAttachmentType } from 'stream-chat';\nimport React, { type ComponentType, useLayoutEffect, useRef, useState } from 'react';\nimport { getCssDimensionsVariables } from './utils';\nimport type { VideoPlayerProps } from '../VideoPlayer';\nimport { VideoPlayer as DefaultVideoPlayer } from '../VideoPlayer';\nimport { VideoThumbnail } from '../VideoPlayer/VideoThumbnail';\nimport clsx from 'clsx';\nimport { useLocalVideoDimensions } from './hooks/useLocalVideoDimensions';\nimport { getAttachmentPreviewUrl, isPendingUpload } from 'stream-chat';\nimport {\n useAttachmentContext,\n type VideoAttachmentConfiguration,\n} from '../../context/AttachmentContext';\n\nexport type VideoAttachmentProps = {\n attachment: VideoAttachmentType;\n VideoPlayer?: ComponentType<VideoPlayerProps>;\n};\n\nexport const VideoAttachment = ({\n attachment,\n VideoPlayer = DefaultVideoPlayer,\n}: VideoAttachmentProps) => {\n const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } =\n useAttachmentContext();\n const videoElement = useRef<HTMLDivElement>(null);\n const [attachmentConfiguration, setAttachmentConfiguration] =\n useState<VideoAttachmentConfiguration>();\n // A video that mounted while uploading has been showing its player all along, so it stays on\n // the player once the upload lands. Falling back to the thumbnail would swap the rendered\n // element twice — once when `thumb_url` arrives, once when the user clicks play — and each swap\n // resizes the bubble, because the bubble is `fit-content` and the three renderings (local\n // `<video>`, CDN thumbnail `<img>`, CDN `<video>`) contribute different intrinsic widths.\n const [showVideo, setShowVideo] = React.useState(\n () => !shouldGenerateVideoThumbnail \|\| isPendingUpload(attachment),\n );\n // Only a click on the thumbnail's play button asks for playback. Kept separate from\n // `showVideo`, which is also true for a video that never had a thumbnail to click.\n const [playbackRequested, setPlaybackRequested] = React.useState(false);\n // Structural: the bytes are not on the CDN, so there is nothing to play — independent of\n // whether a request happens to be running this instant.\n const isUploading = isPendingUpload(attachment);\n // While the upload is in flight there is no CDN `thumb_url` to read `oh`/`ow` from, so the box\n // would lay out from the 1000000x1000000 fallback and then resize once the real dimensions\n // arrive. The local file knows them already.\n const localDimensions = useLocalVideoDimensions(\n isUploading ? getAttachmentPreviewUrl(attachment) : undefined,\n );\n const dimensionVariables = localDimensions\n ? {\n '--original-height': localDimensions.height,\n '--original-width': localDimensions.width,\n }\n : getCssDimensionsVariables(attachment.thumb_url \|\| '');\n\n useLayoutEffect(() => {\n if (videoElement.current && videoAttachmentSizeHandler) {\n const config = videoAttachmentSizeHandler(\n attachment,\n videoElement.current,\n shouldGenerateVideoThumbnail,\n );\n setAttachmentConfiguration(config);\n }\n }, [\n videoElement,\n videoAttachmentSizeHandler,\n attachment,\n shouldGenerateVideoThumbnail,\n ]);\n\n const renderThumbnailFirst = Boolean(\n attachment.thumb_url && shouldGenerateVideoThumbnail,\n );\n\n // todo: handle failed thumbnail loading\n return (\n <div\n className={clsx('str-chat__player-wrapper', {\n // Only until the dimensions are known — the class lets the element lay out at its own\n // aspect ratio instead of the square the fallback would produce.\n 'str-chat__player-wrapper--uploading': isUploading && !localDimensions,\n })}\n data-testid='video-wrapper'\n ref={videoElement}\n style={dimensionVariables}\n >\n {renderThumbnailFirst && !showVideo ? (\n <VideoThumbnail\n alt={attachment.title}\n data-testid='image-test'\n onPlay={() => {\n setPlaybackRequested(true);\n setShowVideo(true);\n }}\n src={attachment.thumb_url}\n title={attachment.title}\n />\n ) : (\n <VideoPlayer\n // Playback stays available while the upload runs: the local blob plays, and every\n // message-list widget behaves this way (audio too), as does stream-chat-react-native.\n // The progress overlay is positioned clear of the transport controls.\n //\n // Autoplay only when the user asked for it by clicking the thumbnail. This used to be\n // `renderThumbnailFirst`, which stands for \"a thumbnail exists\" — so a video watched\n // from its local blob started playing again by itself the moment the upload finished\n // and `thumb_url` arrived.\n isPlaying={playbackRequested}\n thumbnailUrl={attachmentConfiguration?.thumbUrl}\n // Falls back to the local blob preview while the upload is still in flight.\n videoUrl={getAttachmentPreviewUrl(attachment, attachmentConfiguration?.url)}\n />\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,mBAAmB,EAC9B,YACA,aAAA,gBAAc,kBACY;CAC1B,MAAM,EAAE,8BAA8B,+BACpC,qBAAqB;CACvB,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,yBAAyB,8BAC9B,SAAuC;CAMzC,MAAM,CAAC,WAAW,gBAAgB,MAAM,eAChC,CAAC,gCAAgC,gBAAgB,UAAU,CACnE;CAGA,MAAM,CAAC,mBAAmB,wBAAwB,MAAM,SAAS,KAAK;CAGtE,MAAM,cAAc,gBAAgB,UAAU;CAI9C,MAAM,kBAAkB,wBACtB,cAAc,wBAAwB,UAAU,IAAI,KAAA,CACtD;CACA,MAAM,qBAAqB,kBACvB;EACE,qBAAqB,gBAAgB;EACrC,oBAAoB,gBAAgB;CACtC,IACA,0BAA0B,WAAW,aAAa,EAAE;CAExD,sBAAsB;EACpB,IAAI,aAAa,WAAW,4BAM1B,2BALe,2BACb,YACA,aAAa,SACb,4BAEyB,CAAM;CAErC,GAAG;EACD;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,uBAAuB,QAC3B,WAAW,aAAa,4BAC1B;CAGA,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,4BAA4B,EAG1C,uCAAuC,eAAe,CAAC,gBACzD,CAAC;EACD,eAAY;EACZ,KAAK;EACL,OAAO;YAEN,wBAAwB,CAAC,YACxB,oBAAC,gBAAD;GACE,KAAK,WAAW;GAChB,eAAY;GACZ,cAAc;IACZ,qBAAqB,IAAI;IACzB,aAAa,IAAI;GACnB;GACA,KAAK,WAAW;GAChB,OAAO,WAAW;EACnB,CAAA,IAED,oBAAC,eAAD;GASE,WAAW;GACX,cAAc,yBAAyB;GAEvC,UAAU,wBAAwB,YAAY,yBAAyB,GAAG;EAC3E,CAAA;CAEA,CAAA;AAET"}

package/dist/es/components/Attachment/VisibilityDisclaimer.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Attachment/VisibilityDisclaimer.tsx
@@ -8,7 +8,7 @@ var VisibilityDisclaimer = () => {
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__visibility-disclaimer",
-		children: [/* @__PURE__ */ jsx(IconEyeFill, {}), t("Only visible to you")]
+		children: [/* @__PURE__ */ jsx(IconEyeFill, {}), t("attachment.visibilityDisclaimer.onlyVisible.text", "Only visible to you")]
 	});
 };
 //#endregion

package/dist/es/components/Attachment/VisibilityDisclaimer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VisibilityDisclaimer.mjs","names":[],"sources":["../../../../src/components/Attachment/VisibilityDisclaimer.tsx"],"sourcesContent":["import React from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nexport const VisibilityDisclaimer = () => {\n const { IconEyeFill } = useComponentContextIcons();\n\n const { t } = useTranslationContext();\n return (\n <div className='str-chat__visibility-disclaimer'>\n <IconEyeFill />\n {t('Only visible to you')}\n </div>\n );\n};\n"],"mappings":";;;;;AAGA,IAAa,6BAA6B;CACxC,MAAM,EAAE,gBAAgB,yBAAyB;~~CAEjD~~,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,aAAD,CAAc,CAAA,GACb,EAAE,qBAAqB,~~CACrB~~;;AAET"}
1	+ {"version":3,"file":"VisibilityDisclaimer.mjs","names":[],"sources":["../../../../src/components/Attachment/VisibilityDisclaimer.tsx"],"sourcesContent":["import React from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../context';\n\nexport const VisibilityDisclaimer = () => {\n const { IconEyeFill } = useComponentContextIcons();\n const { t } = useTranslationContext();\n return (\n <div className='str-chat__visibility-disclaimer'>\n <IconEyeFill />\n {t('attachment.visibilityDisclaimer.onlyVisible.text', 'Only visible to you')}\n </div>\n );\n};\n"],"mappings":";;;;;AAGA,IAAa,6BAA6B;CACxC,MAAM,EAAE,gBAAgB,yBAAyB;CACjD,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,aAAD,CAAc,CAAA,GACb,EAAE,oDAAoD,qBAAqB,CACzE;;AAET"}

package/dist/es/components/Attachment/VoiceRecording.mjs CHANGED Viewed

@@ -1,17 +1,19 @@
-import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
-import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { MessageContext } from "../../context/MessageContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { PlayButton } from "../Button/PlayButton.mjs";
 import { FileSizeIndicator } from "./components/FileSizeIndicator.mjs";
-import { getAttachmentPreviewUrl, useAttachmentUploadState } from "./hooks/useAttachmentUploadState.mjs";
+import { useAttachmentUploadState } from "./hooks/useAttachmentUploadState.mjs";
 import { AttachmentUploadProgressIndicator } from "./components/AttachmentUploadProgressIndicator.mjs";
 import { useAudioPlayer } from "../AudioPlayback/WithAudioPlayback.mjs";
 import { FileIcon } from "../FileIcon/FileIcon.mjs";
 import { DurationDisplay } from "../AudioPlayback/components/DurationDisplay.mjs";
 import { PlaybackRateButton } from "../AudioPlayback/components/PlaybackRateButton.mjs";
 import { WaveProgressBar } from "../AudioPlayback/components/WaveProgressBar.mjs";
-import "react";
+import { useContext } from "react";
+import { getAttachmentPreviewUrl } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Attachment/VoiceRecording.tsx
 var rootClassName = "str-chat__message-attachment__voice-recording-widget";
@@ -66,7 +68,7 @@ var VoiceRecordingPlayerUI = ({ attachment, audioPlayer }) => {
 			/* @__PURE__ */ jsx("div", {
 				className: "str-chat__message-attachment__voice-recording-widget__right-section",
 				children: /* @__PURE__ */ jsxs(PlaybackRateButton, {
-					"aria-label": t("Playback speed {{ rate }}x", { rate: playbackRate?.toString() ?? "1" }),
+					"aria-label": t("common.playbackSpeedX.label", "Playback speed {{ rate }}x", { rate: playbackRate?.toString() ?? "1" }),
 					disabled: !canPlayRecord,
 					onClick: audioPlayer.increasePlaybackRate,
 					children: ["x", playbackRate?.toString()]
@@ -77,7 +79,8 @@ var VoiceRecordingPlayerUI = ({ attachment, audioPlayer }) => {
 };
 var VoiceRecordingPlayer = ({ attachment, playbackRates }) => {
 	const { t } = useTranslationContext();
-	const { asset_url, duration = 0, file_size, mime_type, title = t("Voice message"), waveform_data } = attachment;
+	const { asset_url, title = t("common.voiceMessage.label", "Voice message") } = attachment;
+	const { duration = 0, file_size, mime_type, waveform_data } = attachment.custom ?? {};
 	/**
 	* Introducing message context. This could be breaking change, therefore the fallback to {} is provided.
 	* If this component is used outside the message context, then there will be no audio player namespacing
@@ -87,13 +90,14 @@ var VoiceRecordingPlayer = ({ attachment, playbackRates }) => {
 	* with the default SDK components, but can be done with custom API calls.In this case all the Audio
 	* widgets will share the state.
 	*/
-	const { message, threadList } = useMessageContext() ?? {};
+	const { message } = useContext(MessageContext) ?? {};
+	const threadInstance = useThreadContext();
 	const audioPlayer = useAudioPlayer({
 		durationSeconds: duration ?? 0,
 		fileSize: file_size,
 		mimeType: mime_type,
 		playbackRates,
-		requester: message?.id && `${threadList ? message.parent_id ?? message.id : ""}${message.id}`,
+		requester: message?.id && `${threadInstance ? message.parent_id ?? message.id : ""}${message.id}`,
 		src: getAttachmentPreviewUrl(attachment, asset_url),
 		title,
 		waveformData: waveform_data
@@ -105,6 +109,7 @@ var VoiceRecordingPlayer = ({ attachment, playbackRates }) => {
 };
 var QuotedVoiceRecording = ({ attachment }) => {
 	const { FileSizeIndicator: FileSizeIndicator$2 = FileSizeIndicator } = useComponentContext();
+	const { duration, file_size, mime_type } = attachment.custom ?? {};
 	return /* @__PURE__ */ jsxs("div", {
 		className: rootClassName,
 		"data-testid": "quoted-voice-recording-widget",
@@ -114,17 +119,17 @@ var QuotedVoiceRecording = ({ attachment }) => {
 				className: "str-chat__message-attachment__voice-recording-widget__audio-state",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "str-chat__message-attachment__voice-recording-widget__timer",
-					children: attachment.duration ? /* @__PURE__ */ jsx(DurationDisplay, {
-						duration: attachment.duration,
+					children: duration ? /* @__PURE__ */ jsx(DurationDisplay, {
+						duration,
 						isPlaying: false,
 						secondsElapsed: void 0
 					}) : /* @__PURE__ */ jsx(FileSizeIndicator$2, {
-						fileSize: attachment.file_size,
+						fileSize: file_size,
 						maximumFractionDigits: 0
 					})
 				})
 			})
-		}), /* @__PURE__ */ jsx(FileIcon, { mimeType: attachment.mime_type })]
+		}), /* @__PURE__ */ jsx(FileIcon, { mimeType: mime_type })]
 	});
 };
 var VoiceRecording = ({ attachment, isQuoted }) => isQuoted ? /* @__PURE__ */ jsx(QuotedVoiceRecording, { attachment }) : /* @__PURE__ */ jsx(VoiceRecordingPlayer, { attachment });

package/dist/es/components/Attachment/VoiceRecording.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VoiceRecording.mjs","names":[],"sources":["../../../../src/components/Attachment/VoiceRecording.tsx"],"sourcesContent":["import React from 'react';\nimport type { Attachment } from 'stream-chat';\n\nimport {\n AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator,\n FileSizeIndicator as DefaultFileSizeIndicator,\n} from './components';\nimport {\n getAttachmentPreviewUrl,\n useAttachmentUploadState,\n} from './hooks/useAttachmentUploadState';\nimport { FileIcon } from '../FileIcon';\nimport {\n useComponentContext,\n useMessageContext,\n useTranslationContext,\n} from '../../context';\nimport {\n type AudioPlayer,\n type AudioPlayerState,\n DurationDisplay,\n PlaybackRateButton,\n WaveProgressBar,\n} from '../AudioPlayback';\nimport { useAudioPlayer } from '../AudioPlayback/WithAudioPlayback';\nimport { useStateStore } from '../../store';\nimport { PlayButton } from '../Button';\n\nconst rootClassName = 'str-chat__message-attachment__voice-recording-widget';\n\nconst audioPlayerStateSelector = (state: AudioPlayerState) => ({\n canPlayRecord: state.canPlayRecord,\n durationSeconds: state.durationSeconds,\n isPlaying: state.isPlaying,\n playbackRate: state.currentPlaybackRate,\n progress: state.progressPercent,\n secondsElapsed: state.secondsElapsed,\n});\n\ntype VoiceRecordingPlayerUIProps = {\n audioPlayer: AudioPlayer;\n attachment?: Attachment;\n};\n\n// todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI\nconst VoiceRecordingPlayerUI = ({\n attachment,\n audioPlayer,\n}: VoiceRecordingPlayerUIProps) => {\n const {\n AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,\n FileSizeIndicator = DefaultFileSizeIndicator,\n } = useComponentContext();\n const { isUploading } = useAttachmentUploadState(attachment);\n const { t } = useTranslationContext();\n const {\n canPlayRecord,\n durationSeconds,\n isPlaying,\n playbackRate,\n progress,\n secondsElapsed,\n } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};\n\n return (\n <div className={rootClassName} data-testid='voice-recording-widget'>\n <div className='str-chat__message-attachment__voice-recording-widget__play-button-container'>\n <PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />\n </div>\n <div className='str-chat__message-attachment__voice-recording-widget__metadata'>\n <div className='str-chat__message-attachment__voice-recording-widget__audio-state'>\n <div className='str-chat__message-attachment__voice-recording-widget__timer'>\n {/\n While uploading, the upload progress takes this slot. It has to outrank the\n duration: `MediaRecorderController` stamps `duration` on every recording before it\n is ever uploaded, so checking the duration first meant an uploading voice message\n showed no upload indication at all.\n /}\n {isUploading ? (\n <AttachmentUploadProgressIndicator attachment={attachment} />\n ) : durationSeconds ? (\n <DurationDisplay\n duration={durationSeconds}\n isPlaying={!!isPlaying}\n secondsElapsed={secondsElapsed}\n showRemaining\n />\n ) : (\n <FileSizeIndicator\n fileSize={audioPlayer.fileSize}\n maximumFractionDigits={0}\n />\n )}\n </div>\n <WaveProgressBar\n durationSeconds={durationSeconds}\n progress={progress}\n secondsElapsed={secondsElapsed}\n seek={audioPlayer.seek}\n waveformData={audioPlayer.waveformData \|\| []}\n />\n </div>\n </div>\n <div className='str-chat__message-attachment__voice-recording-widget__right-section'>\n <PlaybackRateButton\n aria-label={t('Playback speed {{ rate }}x', {\n rate: playbackRate?.toString() ?? '1',\n })}\n disabled={!canPlayRecord}\n onClick={audioPlayer.increasePlaybackRate}\n >\n x{playbackRate?.toString()}\n </PlaybackRateButton>\n </div>\n </div>\n );\n};\n\nexport type VoiceRecordingPlayerProps = Pick<VoiceRecordingProps, 'attachment'> & {\n /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) /\n playbackRates?: number[];\n};\n\nexport const VoiceRecordingPlayer = ({\n attachment,\n playbackRates,\n}: VoiceRecordingPlayerProps) => {\n const { t } = useTranslationContext();\n const {\n asset_url,\n duration = 0,\n file_size,\n mime_type,\n title = t('Voice message'),\n waveform_data,\n } = attachment;\n\n /\n Introducing message context. This could be breaking change, therefore the fallback to {} is provided.\n * If this component is used outside the message context, then there will be no audio player namespacing\n * => scrolling away from the message in virtualized ML would create a new AudioPlayer instance.\n \n Edge case: the requester (message) has multiple attachments with the same assetURL - does not happen\n * with the default SDK components, but can be done with custom API calls.In this case all the Audio\n * widgets will share the state.\n /\n const { message, threadList } = useMessageContext() ?? {};\n\n const audioPlayer = useAudioPlayer({\n durationSeconds: duration ?? 0,\n fileSize: file_size,\n mimeType: mime_type,\n playbackRates,\n requester:\n message?.id &&\n `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`,\n // Falls back to the local blob preview while the upload is still in flight.\n src: getAttachmentPreviewUrl(attachment, asset_url),\n title,\n waveformData: waveform_data,\n });\n\n return audioPlayer ? (\n <VoiceRecordingPlayerUI attachment={attachment} audioPlayer={audioPlayer} />\n ) : null;\n};\n\nexport type QuotedVoiceRecordingProps = Pick<VoiceRecordingProps, 'attachment'>;\n\nexport const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps) => {\n const { FileSizeIndicator = DefaultFileSizeIndicator } = useComponentContext();\n return (\n <div className={rootClassName} data-testid='quoted-voice-recording-widget'>\n <div className='str-chat__message-attachment__voice-recording-widget__metadata'>\n <div className='str-chat__message-attachment__voice-recording-widget__audio-state'>\n <div className='str-chat__message-attachment__voice-recording-widget__timer'>\n {attachment.duration ? (\n <DurationDisplay\n duration={attachment.duration}\n isPlaying={false}\n secondsElapsed={undefined}\n />\n ) : (\n <FileSizeIndicator\n fileSize={attachment.file_size}\n maximumFractionDigits={0}\n />\n )}\n </div>\n </div>\n </div>\n <FileIcon mimeType={attachment.mime_type} />\n </div>\n );\n};\n\nexport type VoiceRecordingProps = {\n /* The attachment object from the message's attachment list. /\n attachment: Attachment;\n /* A boolean flag to signal whether the attachment will be rendered inside the quoted reply. */\n isQuoted?: boolean;\n};\n\nexport const VoiceRecording = ({ attachment, isQuoted }: VoiceRecordingProps) =>\n isQuoted ? (\n <QuotedVoiceRecording attachment={attachment} />\n ) : (\n <VoiceRecordingPlayer attachment={attachment} />\n );\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,IAAM,gBAAgB;AAEtB,IAAM,4BAA4B,WAA6B;CAC7D,eAAe,MAAM;CACrB,iBAAiB,MAAM;CACvB,WAAW,MAAM;CACjB,cAAc,MAAM;CACpB,UAAU,MAAM;CAChB,gBAAgB,MAAM;AACxB;AAQA,IAAM,0BAA0B,EAC9B,YACA,kBACiC;CACjC,MAAM,EACJ,mCAAA,sCAAoC,mCACpC,mBAAA,sBAAoB,sBAClB,oBAAoB;CACxB,MAAM,EAAE,gBAAgB,yBAAyB,UAAU;CAC3D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,eACA,iBACA,WACA,cACA,UACA,mBACE,cAAc,aAAa,OAAO,wBAAwB,KAAK,CAAC;CAEpE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,eAAY;YAA3C;GACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,YAAD;KAAY,WAAW,CAAC,CAAC;KAAW,SAAS,YAAY;IAAa,CAAA;GACnE,CAAA;GACL,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBAOZ,cACC,oBAAC,qCAAD,EAA+C,WAAa,CAAA,IAC1D,kBACF,oBAAC,iBAAD;OACE,UAAU;OACV,WAAW,CAAC,CAAC;OACG;OAChB,eAAA;MACD,CAAA,IAED,oBAAC,qBAAD;OACE,UAAU,YAAY;OACtB,uBAAuB;MACxB,CAAA;KAEA,CAAA,GACL,oBAAC,iBAAD;MACmB;MACP;MACM;MAChB,MAAM,YAAY;MAClB,cAAc,YAAY,gBAAgB,CAAC;KAC5C,CAAA,CACE;;GACF,CAAA;GACL,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,oBAAD;KACE,cAAY,EAAE,8BAA8B,EAC1C,MAAM,cAAc,SAAS,KAAK,IACpC,CAAC;KACD,UAAU,CAAC;KACX,SAAS,YAAY;eALvB,CAMC,KACG,cAAc,SAAS,CACP;;GACjB,CAAA;EACF;;AAET;AAOA,IAAa,wBAAwB,EACnC,YACA,oBAC+B;CAC/B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EACJ,WACA,WAAW,GACX,WACA,WACA,QAAQ,EAAE,eAAe,GACzB,kBACE;;;;;;;;;;CAWJ,MAAM,EAAE,SAAS,eAAe,kBAAkB,KAAK,CAAC;CAExD,MAAM,cAAc,eAAe;EACjC,iBAAiB,YAAY;EAC7B,UAAU;EACV,UAAU;EACV;EACA,WACE,SAAS,MACT,GAAG,aAAc,QAAQ,aAAa,QAAQ,KAAM,KAAK,QAAQ;EAEnE,KAAK,wBAAwB,YAAY,SAAS;EAClD;EACA,cAAc;CAChB,CAAC;CAED,OAAO,cACL,oBAAC,wBAAD;EAAoC;EAAyB;CAAc,CAAA,IACzE;AACN;AAIA,IAAa,wBAAwB,EAAE,iBAA4C;CACjF,MAAM,EAAE,mBAAA,sBAAoB,sBAA6B,oBAAoB;CAC7E,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,eAAY;YAA3C,CACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACZ,WAAW,WACV,oBAAC,iBAAD;MACE,UAAU,WAAW;MACrB,WAAW;MACX,gBAAgB,KAAA;KACjB,CAAA,IAED,oBAAC,qBAAD;MACE,UAAU,WAAW;MACrB,uBAAuB;KACxB,CAAA;IAEA,CAAA;GACF,CAAA;EACF,CAAA,GACL,oBAAC,UAAD,EAAU,UAAU,WAAW,UAAY,CAAA,CACxC;;AAET;AASA,IAAa,kBAAkB,EAAE,YAAY,eAC3C,WACE,oBAAC,sBAAD,EAAkC,WAAa,CAAA,IAE/C,oBAAC,sBAAD,EAAkC,WAAa,CAAA"}
1	+ {"version":3,"file":"VoiceRecording.mjs","names":[],"sources":["../../../../src/components/Attachment/VoiceRecording.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport type { Attachment, VoiceRecordingAttachment } from 'stream-chat';\n\nimport {\n AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator,\n FileSizeIndicator as DefaultFileSizeIndicator,\n} from './components';\nimport { FileIcon } from '../FileIcon';\nimport {\n MessageContext,\n useComponentContext,\n useTranslationContext,\n} from '../../context';\nimport {\n type AudioPlayer,\n type AudioPlayerState,\n DurationDisplay,\n PlaybackRateButton,\n WaveProgressBar,\n} from '../AudioPlayback';\nimport { useAudioPlayer } from '../AudioPlayback/WithAudioPlayback';\nimport { useStateStore } from '../../store';\nimport { PlayButton } from '../Button';\nimport { useThreadContext } from '../Threads';\nimport { getAttachmentPreviewUrl } from 'stream-chat';\nimport { useAttachmentUploadState } from './hooks/useAttachmentUploadState';\n\nconst rootClassName = 'str-chat__message-attachment__voice-recording-widget';\n\nconst audioPlayerStateSelector = (state: AudioPlayerState) => ({\n canPlayRecord: state.canPlayRecord,\n durationSeconds: state.durationSeconds,\n isPlaying: state.isPlaying,\n playbackRate: state.currentPlaybackRate,\n progress: state.progressPercent,\n secondsElapsed: state.secondsElapsed,\n});\n\ntype VoiceRecordingPlayerUIProps = {\n attachment?: Attachment;\n audioPlayer: AudioPlayer;\n};\n\n// todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI\nconst VoiceRecordingPlayerUI = ({\n attachment,\n audioPlayer,\n}: VoiceRecordingPlayerUIProps) => {\n const {\n AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,\n FileSizeIndicator = DefaultFileSizeIndicator,\n } = useComponentContext();\n const { isUploading } = useAttachmentUploadState(attachment);\n const { t } = useTranslationContext();\n const {\n canPlayRecord,\n durationSeconds,\n isPlaying,\n playbackRate,\n progress,\n secondsElapsed,\n } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};\n\n return (\n <div className={rootClassName} data-testid='voice-recording-widget'>\n <div className='str-chat__message-attachment__voice-recording-widget__play-button-container'>\n <PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />\n </div>\n <div className='str-chat__message-attachment__voice-recording-widget__metadata'>\n <div className='str-chat__message-attachment__voice-recording-widget__audio-state'>\n <div className='str-chat__message-attachment__voice-recording-widget__timer'>\n {/\n While uploading, the upload progress takes this slot. It has to outrank the\n duration: `MediaRecorderController` stamps `duration` on every recording before it\n is ever uploaded, so checking the duration first meant an uploading voice message\n showed no upload indication at all.\n /}\n {isUploading ? (\n <AttachmentUploadProgressIndicator attachment={attachment} />\n ) : durationSeconds ? (\n <DurationDisplay\n duration={durationSeconds}\n isPlaying={!!isPlaying}\n secondsElapsed={secondsElapsed}\n showRemaining\n />\n ) : (\n <FileSizeIndicator\n fileSize={audioPlayer.fileSize}\n maximumFractionDigits={0}\n />\n )}\n </div>\n <WaveProgressBar\n durationSeconds={durationSeconds}\n progress={progress}\n secondsElapsed={secondsElapsed}\n seek={audioPlayer.seek}\n waveformData={audioPlayer.waveformData \|\| []}\n />\n </div>\n </div>\n <div className='str-chat__message-attachment__voice-recording-widget__right-section'>\n <PlaybackRateButton\n aria-label={t('common.playbackSpeedX.label', 'Playback speed {{ rate }}x', {\n rate: playbackRate?.toString() ?? '1',\n })}\n disabled={!canPlayRecord}\n onClick={audioPlayer.increasePlaybackRate}\n >\n x{playbackRate?.toString()}\n </PlaybackRateButton>\n </div>\n </div>\n );\n};\n\nexport type VoiceRecordingPlayerProps = Pick<VoiceRecordingProps, 'attachment'> & {\n /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) /\n playbackRates?: number[];\n};\n\nexport const VoiceRecordingPlayer = ({\n attachment,\n playbackRates,\n}: VoiceRecordingPlayerProps) => {\n const { t } = useTranslationContext();\n const { asset_url, title = t('common.voiceMessage.label', 'Voice message') } =\n attachment;\n const {\n duration = 0,\n file_size,\n mime_type,\n waveform_data,\n } = (attachment as VoiceRecordingAttachment).custom ?? {};\n\n /\n Introducing message context. This could be breaking change, therefore the fallback to {} is provided.\n * If this component is used outside the message context, then there will be no audio player namespacing\n * => scrolling away from the message in virtualized ML would create a new AudioPlayer instance.\n \n Edge case: the requester (message) has multiple attachments with the same assetURL - does not happen\n * with the default SDK components, but can be done with custom API calls.In this case all the Audio\n * widgets will share the state.\n /\n // also rendered from composer previews, where there is no message\n const { message } = useContext(MessageContext) ?? {};\n const threadInstance = useThreadContext();\n\n const audioPlayer = useAudioPlayer({\n durationSeconds: duration ?? 0,\n fileSize: file_size,\n mimeType: mime_type,\n playbackRates,\n requester:\n message?.id &&\n `${threadInstance ? (message.parent_id ?? message.id) : ''}${message.id}`,\n // Falls back to the local blob preview while the upload is still in flight.\n src: getAttachmentPreviewUrl(attachment, asset_url),\n title,\n waveformData: waveform_data,\n });\n\n return audioPlayer ? (\n <VoiceRecordingPlayerUI attachment={attachment} audioPlayer={audioPlayer} />\n ) : null;\n};\n\nexport type QuotedVoiceRecordingProps = Pick<VoiceRecordingProps, 'attachment'>;\n\nexport const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps) => {\n const { FileSizeIndicator = DefaultFileSizeIndicator } = useComponentContext();\n const { duration, file_size, mime_type } =\n (attachment as VoiceRecordingAttachment).custom ?? {};\n return (\n <div className={rootClassName} data-testid='quoted-voice-recording-widget'>\n <div className='str-chat__message-attachment__voice-recording-widget__metadata'>\n <div className='str-chat__message-attachment__voice-recording-widget__audio-state'>\n <div className='str-chat__message-attachment__voice-recording-widget__timer'>\n {duration ? (\n <DurationDisplay\n duration={duration}\n isPlaying={false}\n secondsElapsed={undefined}\n />\n ) : (\n <FileSizeIndicator fileSize={file_size} maximumFractionDigits={0} />\n )}\n </div>\n </div>\n </div>\n <FileIcon mimeType={mime_type} />\n </div>\n );\n};\n\nexport type VoiceRecordingProps = {\n /* The attachment object from the message's attachment list. /\n attachment: Attachment;\n /* A boolean flag to signal whether the attachment will be rendered inside the quoted reply. */\n isQuoted?: boolean;\n};\n\nexport const VoiceRecording = ({ attachment, isQuoted }: VoiceRecordingProps) =>\n isQuoted ? (\n <QuotedVoiceRecording attachment={attachment} />\n ) : (\n <VoiceRecordingPlayer attachment={attachment} />\n );\n"],"mappings":"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"}

package/dist/es/components/Attachment/components/AttachmentUploadProgressIndicator.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
-import { AttachmentUploadedSizeIndicator } from "../../Loading/AttachmentUploadedSizeIndicator.mjs";
 import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
+import { AttachmentUploadedSizeIndicator } from "../../Loading/AttachmentUploadedSizeIndicator.mjs";
 import { useAttachmentsUploadState } from "../hooks/useAttachmentUploadState.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/es/components/Attachment/components/DownloadButton.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -16,13 +16,13 @@ var DownloadButton = ({ assetUrl, className, suggestedFileName, tooltipTitle })
 	const href = sanitizeUrl(assetUrl);
 	if (!href) return null;
 	return /* @__PURE__ */ jsx("a", {
-		"aria-label": t("aria/Download attachment"),
+		"aria-label": t("common.downloadAttachment.ariaLabel", "Download attachment"),
 		className: clsx("str-chat__button", "str-chat__button--secondary", "str-chat__button--outline", "str-chat__button--circular", "str-chat__button--size-sm", "str-chat__audio-attachment-download-button", className),
 		download: suggestedFileName ?? "",
 		href,
 		rel: "noopener noreferrer",
 		target: "_blank",
-		title: tooltipTitle ?? t("Download Attachment"),
+		title: tooltipTitle ?? t("common.downloadAttachment.title", "Download Attachment"),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "str-chat__button__content",
 			children: /* @__PURE__ */ jsx(IconDownload, { className: "str-chat__icon str-chat__audio-attachment-download-button__icon" })

package/dist/es/components/Attachment/components/DownloadButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DownloadButton.mjs","names":[],"sources":["../../../../../src/components/Attachment/components/DownloadButton.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\n\nexport type DownloadButtonProps = {\n /** Attachment asset URL (e.g. `asset_url`). /\n assetUrl?: string;\n className?: string;\n /* Suggested filename for the `download` attribute (not the HTML `title` tooltip). /\n suggestedFileName?: string;\n /* Native browser tooltip; defaults to translated “Download Attachment”. /\n tooltipTitle?: string;\n};\n\n/\n Icon download control for {@link Audio} and {@link FileAttachment} rows.\n * (BaseImage defines its own small download link when `showDownloadButtonOnError` is used.)\n */\nexport const DownloadButton = ({\n assetUrl,\n className,\n suggestedFileName,\n tooltipTitle,\n}: DownloadButtonProps) => {\n const { IconDownload } = useComponentContextIcons();\n\n const { t } = useTranslationContext();\n if (!assetUrl) return null;\n const href = sanitizeUrl(assetUrl);\n if (!href) return null;\n\n return (\n <a\n aria-label={t('~~aria/~~Download attachment')}\n className={clsx(\n 'str-chat__button',\n 'str-chat__button--secondary',\n 'str-chat__button--outline',\n 'str-chat__button--circular',\n 'str-chat__button--size-sm',\n 'str-chat__audio-attachment-download-button',\n className,\n )}\n download={suggestedFileName ?? ''}\n href={href}\n rel='noopener noreferrer'\n target='_blank'\n title={tooltipTitle ?? t('Download Attachment')}\n >\n <div className='str-chat__button__content'>\n <IconDownload className='str-chat__icon str-chat__audio-attachment-download-button__icon' />\n </div>\n </a>\n );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,kBAAkB,EAC7B,UACA,WACA,mBACA,mBACyB;CACzB,MAAM,EAAE,iBAAiB,yBAAyB;~~CAElD~~,MAAM,EAAE,MAAM,sBAAsB;CACpC,IAAI,CAAC,UAAU,OAAO;CACtB,MAAM,OAAO,YAAY,QAAQ;CACjC,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,oBAAC,KAAD;EACE,cAAY,EAAE,~~0BAA0B~~;~~EACxC~~,WAAW,KACT,oBACA,+BACA,6BACA,8BACA,6BACA,8CACA,SACF;EACA,UAAU,qBAAqB;EACzB;EACN,KAAI;EACJ,QAAO;EACP,OAAO,gBAAgB,EAAE,qBAAqB;~~YAE9C~~,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,cAAD,EAAc,WAAU,kEAAmE,CAAA;EACxF,CAAA;CACJ,CAAA;AAEP"}
1	+ {"version":3,"file":"DownloadButton.mjs","names":[],"sources":["../../../../../src/components/Attachment/components/DownloadButton.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\n\nexport type DownloadButtonProps = {\n /** Attachment asset URL (e.g. `asset_url`). /\n assetUrl?: string;\n className?: string;\n /* Suggested filename for the `download` attribute (not the HTML `title` tooltip). /\n suggestedFileName?: string;\n /* Native browser tooltip; defaults to translated “Download Attachment”. /\n tooltipTitle?: string;\n};\n\n/\n Icon download control for {@link Audio} and {@link FileAttachment} rows.\n * (BaseImage defines its own small download link when `showDownloadButtonOnError` is used.)\n */\nexport const DownloadButton = ({\n assetUrl,\n className,\n suggestedFileName,\n tooltipTitle,\n}: DownloadButtonProps) => {\n const { IconDownload } = useComponentContextIcons();\n const { t } = useTranslationContext();\n if (!assetUrl) return null;\n const href = sanitizeUrl(assetUrl);\n if (!href) return null;\n\n return (\n <a\n aria-label={t('common.downloadAttachment.ariaLabel', 'Download attachment')}\n className={clsx(\n 'str-chat__button',\n 'str-chat__button--secondary',\n 'str-chat__button--outline',\n 'str-chat__button--circular',\n 'str-chat__button--size-sm',\n 'str-chat__audio-attachment-download-button',\n className,\n )}\n download={suggestedFileName ?? ''}\n href={href}\n rel='noopener noreferrer'\n target='_blank'\n title={tooltipTitle ?? t('common.downloadAttachment.title', 'Download Attachment')}\n >\n <div className='str-chat__button__content'>\n <IconDownload className='str-chat__icon str-chat__audio-attachment-download-button__icon' />\n </div>\n </a>\n );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,kBAAkB,EAC7B,UACA,WACA,mBACA,mBACyB;CACzB,MAAM,EAAE,iBAAiB,yBAAyB;CAClD,MAAM,EAAE,MAAM,sBAAsB;CACpC,IAAI,CAAC,UAAU,OAAO;CACtB,MAAM,OAAO,YAAY,QAAQ;CACjC,IAAI,CAAC,MAAM,OAAO;CAElB,OACE,oBAAC,KAAD;EACE,cAAY,EAAE,uCAAuC,qBAAqB;EAC1E,WAAW,KACT,oBACA,+BACA,6BACA,8BACA,6BACA,8CACA,SACF;EACA,UAAU,qBAAqB;EACzB;EACN,KAAI;EACJ,QAAO;EACP,OAAO,gBAAgB,EAAE,mCAAmC,qBAAqB;YAEjF,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,cAAD,EAAc,WAAU,kEAAmE,CAAA;EACxF,CAAA;CACJ,CAAA;AAEP"}

package/dist/es/components/Attachment/hooks/useAttachmentUploadState.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
-import { useChatContext } from "../../../context/ChatContext.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../context/ChatContext.mjs";
 import { useCallback, useMemo } from "react";
-import { isLocalUploadAttachment, isPendingUpload } from "stream-chat";
+import { isPendingUpload } from "stream-chat";
 //#region src/components/Attachment/hooks/useAttachmentUploadState.ts
 /** Sentinel for "no live record for this id" inside the joined selector key. */
 var NO_RECORD = "-";
@@ -10,17 +10,6 @@ var emptyUploadState = {
 	uploadConfirmationPending: false
 };
 /**
-* Whether an attachment *claims* to be mid-upload, judged purely from the message payload.
-*
-* This is the **structural** question — may this attachment render from its local preview at
-* all — and it is deliberately not reactive: it stays true across the microtask in which
-* `UploadManager` drops its record but the resolved URL has not been written back yet, so an
-* attachment never blinks out of the DOM between those two events.
-*
-* For "is a request actually running right now", use {@link useAttachmentsUploadState}.
-*/
-var hasPendingUploadState = (attachment) => isPendingUpload(attachment);
-/**
 * Reports whether a request for any of these attachments is in flight *right now*, and how far
 * along it is.
 *
@@ -43,7 +32,7 @@ var hasPendingUploadState = (attachment) => isPendingUpload(attachment);
 */
 var useAttachmentsUploadState = (attachments) => {
 	const { client } = useChatContext();
-	const pending = useMemo(() => attachments.filter(hasPendingUploadState).map((a) => a.localMetadata), [attachments]);
+	const pending = useMemo(() => attachments.filter(isPendingUpload).map((a) => a.localMetadata), [attachments]);
 	const pendingIdsKey = pending.map(({ id }) => id).join(",");
 	const selector = useCallback((state) => ({ recordsKey: pendingIdsKey.split(",").map((id) => {
 		const record = state.uploads[id];
@@ -85,22 +74,7 @@ var useAttachmentUploadState = (attachment) => useAttachmentsUploadState(useMemo
 * Falls back to inferring the window from a 100% reading when `uploadConfirmationPending` is absent,
 * i.e. against a resolved `stream-chat` older than v9.51.
 */
-var isUploadConfirmationPending = (localMetadata) => {
-	if (!localMetadata || localMetadata.uploadState !== "uploading") return false;
-	if (localMetadata.uploadConfirmationPending !== void 0) return localMetadata.uploadConfirmationPending;
-	return localMetadata.uploadProgress !== void 0 && localMetadata.uploadProgress >= 100;
-};
-/**
-* The URL an attachment should be rendered from. Falls back to the local blob preview while
-* the upload is still in flight, so a pending attachment shows the user's own file rather than
-* nothing. Returns `undefined` when there is nothing to render yet.
-*/
-var getAttachmentPreviewUrl = (attachment, ...urls) => {
-	const resolved = urls.find(Boolean);
-	if (resolved) return resolved;
-	return isLocalUploadAttachment(attachment) ? attachment.localMetadata.previewUri : void 0;
-};
 //#endregion
-export { getAttachmentPreviewUrl, hasPendingUploadState, isUploadConfirmationPending, useAttachmentUploadState, useAttachmentsUploadState };
+export { useAttachmentUploadState, useAttachmentsUploadState };
 //# sourceMappingURL=useAttachmentUploadState.mjs.map

package/dist/es/components/Attachment/hooks/useAttachmentUploadState.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAttachmentUploadState.mjs","names":[],"sources":["../../../../../src/components/Attachment/hooks/useAttachmentUploadState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport { isLocalUploadAttachment, isPendingUpload } from 'stream-chat';\nimport type {\n Attachment,\n LocalAttachment,\n SharedLocationResponse,\n UploadManagerState,\n} from 'stream-chat';\n\nimport { useChatContext } from '../../../context/ChatContext';\nimport { useStateStore } from '../../../store';\n\nexport type AttachmentUploadState = {\n /*\n `true` once every byte has been handed to the socket but the server has not answered yet.\n \n Browser upload progress measures bytes written to the connection, not bytes the server\n * acknowledged, so it reaches 100% the instant the request body is flushed — then the\n * connection sits idle while the CDN ingests the file and the response travels back. On a\n * large file over a slow link that dead zone is long, and a bar parked at 100% claims the\n * upload is done when nothing is confirmed. Nothing measurable is happening during it, so the\n * honest rendering is indeterminate.\n /\n uploadConfirmationPending: boolean;\n /\n `true` only while `client.uploadManager` holds a live record for at least one of the\n * attachments — i.e. a request really is in flight right now.\n /\n isUploading: boolean;\n /\n 0–100 while uploading and the transfer length is known; `undefined` otherwise. For several\n * attachments this is their mean, so a gallery shows one combined bar.\n /\n progress?: number;\n};\n\n/* Sentinel for \"no live record for this id\" inside the joined selector key. /\nconst NO_RECORD = '-';\n\n/\n `UploadRecord.uploadConfirmationPending` was added in stream-chat v9.51 — see the field's docs there.\n * Widened locally so this SDK still compiles against an older resolved `stream-chat`, in which\n * case the flag is absent and {@link useAttachmentsUploadState} infers it instead.\n /\ntype UploadRecordWithConfirmationPending = {\n uploadConfirmationPending?: boolean;\n uploadProgress?: number;\n};\n\nconst emptyUploadState: AttachmentUploadState = {\n isUploading: false,\n uploadConfirmationPending: false,\n};\n\ntype PendingUpload = Extract<LocalAttachment, { localMetadata: { uploadState: string } }>;\n\n/\n Whether an attachment claims to be mid-upload, judged purely from the message payload.\n \n This is the structural question — may this attachment render from its local preview at\n * all — and it is deliberately not reactive: it stays true across the microtask in which\n * `UploadManager` drops its record but the resolved URL has not been written back yet, so an\n * attachment never blinks out of the DOM between those two events.\n \n For \"is a request actually running right now\", use {@link useAttachmentsUploadState}.\n /\nexport const hasPendingUploadState = (\n attachment?: Attachment \| LocalAttachment \| SharedLocationResponse,\n): attachment is PendingUpload => isPendingUpload(attachment);\n\n/\n Reports whether a request for any of these attachments is in flight right now, and how far\n * along it is.\n \n The source of truth is `client.uploadManager`, which holds a record only for the lifetime of\n * the request. That has two consequences worth knowing:\n \n 1. The UI is opt-in by construction. An integration that never hands still-uploading\n * attachments to a message never has a message referencing a live record, so none of the\n * upload-progress UI ever renders — no config flag needed. Attachments returned by the API\n * carry no `localMetadata` at all and can never match.\n \n 2. No phantom progress. A message can outlive its request — the upload was aborted,\n * `disconnectUser` called `uploadManager.reset()`, or the message was rehydrated from an\n * offline store with a stale `localMetadata.uploadState`. Keying off the frozen state would\n * leave such an attachment showing an indeterminate spinner forever; keying off the live\n * record makes it self-healing.\n \n `localMetadata.uploadProgress` is only a fallback for the progress number, never for\n * deciding whether an upload is running.\n /\nexport const useAttachmentsUploadState = (\n attachments: (Attachment \| LocalAttachment \| SharedLocationResponse \| undefined)[],\n): AttachmentUploadState => {\n const { client } = useChatContext();\n\n const pending = useMemo(\n () => attachments.filter(hasPendingUploadState).map((a) => a.localMetadata),\n [attachments],\n );\n // Stable primitive so the selector identity does not change on every render.\n const pendingIdsKey = pending.map(({ id }) => id).join(',');\n\n const selector = useCallback(\n (state: UploadManagerState) => ({\n // One joined string rather than an array: useStateStore shallow-compares the selected\n // keys, and a fresh array would compare unequal on every store update.\n // Per id: `-` when there is no live record, else `<progress>:<uploadConfirmationPending>`.\n recordsKey: pendingIdsKey\n .split(',')\n .map((id) => {\n const record = state.uploads[id] as\n \| UploadRecordWithConfirmationPending\n \| undefined;\n if (!record) return NO_RECORD;\n\n const awaiting =\n record.uploadConfirmationPending === undefined\n ? ''\n : record.uploadConfirmationPending\n ? '1'\n : '0';\n\n return `${record.uploadProgress ?? ''}:${awaiting}`;\n })\n .join(','),\n }),\n [pendingIdsKey],\n );\n\n // `client` is absent when rendered outside <Chat>; useStateStore tolerates an undefined store.\n const { recordsKey } = useStateStore(client?.uploadManager?.state, selector) ?? {};\n\n if (!pending.length) return emptyUploadState;\n\n // A record exists only while the request runs — that, not the message payload, is what\n // \"uploading\" means here.\n const entries = (recordsKey?.split(',') ?? []).map((entry, index) => {\n if (entry === NO_RECORD) return undefined;\n\n const [reportedProgress, reportedAwaiting] = entry.split(':');\n const progress =\n reportedProgress === '' ? pending[index].uploadProgress : Number(reportedProgress);\n\n return {\n progress,\n // Prefer the explicit signal from `UploadRecord.uploadConfirmationPending`. It is absent\n // when the resolved `stream-chat` predates it, so fall back to inferring the same thing:\n // the record is still live, therefore 100% can only mean \"all bytes sent, confirmation\n // still pending\".\n uploadConfirmationPending:\n reportedAwaiting === ''\n ? progress !== undefined && progress >= 100\n : reportedAwaiting === '1',\n };\n });\n\n const liveEntries = entries.filter((entry) => !!entry);\n if (!liveEntries.length) return emptyUploadState;\n\n const values = liveEntries.map(({ progress }) => progress);\n const known = values.filter((value): value is number => typeof value === 'number');\n\n return {\n isUploading: true,\n // Only report a number once every pending upload has one, so the bar does not jump between\n // determinate and indeterminate mid-flight.\n progress:\n known.length === values.length && known.length\n ? Math.round(known.reduce((sum, value) => sum + value, 0) / known.length)\n : undefined,\n uploadConfirmationPending: liveEntries.some(\n ({ uploadConfirmationPending }) => uploadConfirmationPending,\n ),\n };\n};\n\n/* Single-attachment convenience wrapper around {@link useAttachmentsUploadState}. /\nexport const useAttachmentUploadState = (\n attachment?: Attachment \| LocalAttachment \| SharedLocationResponse,\n): AttachmentUploadState =>\n useAttachmentsUploadState(useMemo(() => [attachment], [attachment]));\n\n/\n Whether an attachment is in the window where every byte has been sent but the server has not\n * confirmed — read straight off `localMetadata`.\n \n This is the composer-side counterpart to {@link useAttachmentsUploadState}: for an attachment\n * still held by the composer, `AttachmentManager` mirrors the live `UploadRecord` into\n * `localMetadata`, so no store subscription is needed. On a message the mirrored value is a\n * frozen snapshot, which is why the message side reads the record instead.\n \n Falls back to inferring the window from a 100% reading when `uploadConfirmationPending` is absent,\n * i.e. against a resolved `stream-chat` older than v9.51.\n /\nexport const isUploadConfirmationPending = (localMetadata?: {\n uploadConfirmationPending?: boolean;\n uploadProgress?: number;\n uploadState?: string;\n}) => {\n if (!localMetadata \|\| localMetadata.uploadState !== 'uploading') return false;\n if (localMetadata.uploadConfirmationPending !== undefined)\n return localMetadata.uploadConfirmationPending;\n\n return (\n localMetadata.uploadProgress !== undefined && localMetadata.uploadProgress >= 100\n );\n};\n\n/\n The URL an attachment should be rendered from. Falls back to the local blob preview while\n * the upload is still in flight, so a pending attachment shows the user's own file rather than\n * nothing. Returns `undefined` when there is nothing to render yet.\n */\nexport const getAttachmentPreviewUrl = (\n attachment?: Attachment \| LocalAttachment,\n ...urls: (string \| undefined)[]\n): string \| undefined => {\n const resolved = urls.find(Boolean);\n if (resolved) return resolved;\n\n return isLocalUploadAttachment(attachment)\n ? attachment.localMetadata.previewUri\n : undefined;\n};\n"],"mappings":";;;;;;AAqCA,IAAM,YAAY;AAYlB,IAAM,mBAA0C;CAC9C,aAAa;CACb,2BAA2B;AAC7B;;;;;;;;;;;AAcA,IAAa,yBACX,eACgC,gBAAgB,UAAU;;;;;;;;;;;;;;;;;;;;;;AAuB5D,IAAa,6BACX,gBAC0B;CAC1B,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,UAAU,cACR,YAAY,OAAO,qBAAqB,CAAC,CAAC,KAAK,MAAM,EAAE,aAAa,GAC1E,CAAC,WAAW,CACd;CAEA,MAAM,gBAAgB,QAAQ,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,GAAG;CAE1D,MAAM,WAAW,aACd,WAA+B,EAI9B,YAAY,cACT,MAAM,GAAG,CAAC,CACV,KAAK,OAAO;EACX,MAAM,SAAS,MAAM,QAAQ;EAG7B,IAAI,CAAC,QAAQ,OAAO;EAEpB,MAAM,WACJ,OAAO,8BAA8B,KAAA,IACjC,KACA,OAAO,4BACL,MACA;EAER,OAAO,GAAG,OAAO,kBAAkB,GAAG,GAAG;CAC3C,CAAC,CAAC,CACD,KAAK,GAAG,EACb,IACA,CAAC,aAAa,CAChB;CAGA,MAAM,EAAE,eAAe,cAAc,QAAQ,eAAe,OAAO,QAAQ,KAAK,CAAC;CAEjF,IAAI,CAAC,QAAQ,QAAQ,OAAO;CAwB5B,MAAM,eApBW,YAAY,MAAM,GAAG,KAAK,CAAC,EAAA,CAAG,KAAK,OAAO,UAAU;EACnE,IAAI,UAAU,WAAW,OAAO,KAAA;EAEhC,MAAM,CAAC,kBAAkB,oBAAoB,MAAM,MAAM,GAAG;EAC5D,MAAM,WACJ,qBAAqB,KAAK,QAAQ,MAAM,CAAC,iBAAiB,OAAO,gBAAgB;EAEnF,OAAO;GACL;GAKA,2BACE,qBAAqB,KACjB,aAAa,KAAA,KAAa,YAAY,MACtC,qBAAqB;EAC7B;CACF,CAEoB,CAAA,CAAQ,QAAQ,UAAU,CAAC,CAAC,KAAK;CACrD,IAAI,CAAC,YAAY,QAAQ,OAAO;CAEhC,MAAM,SAAS,YAAY,KAAK,EAAE,eAAe,QAAQ;CACzD,MAAM,QAAQ,OAAO,QAAQ,UAA2B,OAAO,UAAU,QAAQ;CAEjF,OAAO;EACL,aAAa;EAGb,UACE,MAAM,WAAW,OAAO,UAAU,MAAM,SACpC,KAAK,MAAM,MAAM,QAAQ,KAAK,UAAU,MAAM,OAAO,CAAC,IAAI,MAAM,MAAM,IACtE,KAAA;EACN,2BAA2B,YAAY,MACpC,EAAE,gCAAgC,yBACrC;CACF;AACF;;AAGA,IAAa,4BACX,eAEA,0BAA0B,cAAc,CAAC,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;;;;;;;;;;;;;AAcrE,IAAa,+BAA+B,kBAItC;CACJ,IAAI,CAAC,iBAAiB,cAAc,gBAAgB,aAAa,OAAO;CACxE,IAAI,cAAc,8BAA8B,KAAA,GAC9C,OAAO,cAAc;CAEvB,OACE,cAAc,mBAAmB,KAAA,KAAa,cAAc,kBAAkB;AAElF;;;;;;AAOA,IAAa,2BACX,YACA,GAAG,SACoB;CACvB,MAAM,WAAW,KAAK,KAAK,OAAO;CAClC,IAAI,UAAU,OAAO;CAErB,OAAO,wBAAwB,UAAU,IACrC,WAAW,cAAc,aACzB,KAAA;AACN"}
1	+ {"version":3,"file":"useAttachmentUploadState.mjs","names":[],"sources":["../../../../../src/components/Attachment/hooks/useAttachmentUploadState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport { isPendingUpload } from 'stream-chat';\nimport type {\n Attachment,\n LocalAttachment,\n SharedLocationResponse,\n UploadManagerState,\n} from 'stream-chat';\n\nimport { useChatContext } from '../../../context/ChatContext';\nimport { useStateStore } from '../../../store';\n\nexport type AttachmentUploadState = {\n /*\n `true` once every byte has been handed to the socket but the server has not answered yet.\n \n Browser upload progress measures bytes written to the connection, not bytes the server\n * acknowledged, so it reaches 100% the instant the request body is flushed — then the\n * connection sits idle while the CDN ingests the file and the response travels back. On a\n * large file over a slow link that dead zone is long, and a bar parked at 100% claims the\n * upload is done when nothing is confirmed. Nothing measurable is happening during it, so the\n * honest rendering is indeterminate.\n /\n uploadConfirmationPending: boolean;\n /\n `true` only while `client.uploadManager` holds a live record for at least one of the\n * attachments — i.e. a request really is in flight right now.\n /\n isUploading: boolean;\n /\n 0–100 while uploading and the transfer length is known; `undefined` otherwise. For several\n * attachments this is their mean, so a gallery shows one combined bar.\n /\n progress?: number;\n};\n\n/* Sentinel for \"no live record for this id\" inside the joined selector key. /\nconst NO_RECORD = '-';\n\n/\n `UploadRecord.uploadConfirmationPending` was added in stream-chat v9.51 — see the field's docs there.\n * Widened locally so this SDK still compiles against an older resolved `stream-chat`, in which\n * case the flag is absent and {@link useAttachmentsUploadState} infers it instead.\n /\ntype UploadRecordWithConfirmationPending = {\n uploadConfirmationPending?: boolean;\n uploadProgress?: number;\n};\n\nconst emptyUploadState: AttachmentUploadState = {\n isUploading: false,\n uploadConfirmationPending: false,\n};\n\n/\n Reports whether a request for any of these attachments is in flight right now, and how far\n * along it is.\n \n The source of truth is `client.uploadManager`, which holds a record only for the lifetime of\n * the request. That has two consequences worth knowing:\n \n 1. The UI is opt-in by construction. An integration that never hands still-uploading\n * attachments to a message never has a message referencing a live record, so none of the\n * upload-progress UI ever renders — no config flag needed. Attachments returned by the API\n * carry no `localMetadata` at all and can never match.\n \n 2. No phantom progress. A message can outlive its request — the upload was aborted,\n * `disconnectUser` called `uploadManager.reset()`, or the message was rehydrated from an\n * offline store with a stale `localMetadata.uploadState`. Keying off the frozen state would\n * leave such an attachment showing an indeterminate spinner forever; keying off the live\n * record makes it self-healing.\n \n `localMetadata.uploadProgress` is only a fallback for the progress number, never for\n * deciding whether an upload is running.\n /\nexport const useAttachmentsUploadState = (\n attachments: (Attachment \| LocalAttachment \| SharedLocationResponse \| undefined)[],\n): AttachmentUploadState => {\n const { client } = useChatContext();\n\n const pending = useMemo(\n () => attachments.filter(isPendingUpload).map((a) => a.localMetadata),\n [attachments],\n );\n // Stable primitive so the selector identity does not change on every render.\n const pendingIdsKey = pending.map(({ id }) => id).join(',');\n\n const selector = useCallback(\n (state: UploadManagerState) => ({\n // One joined string rather than an array: useStateStore shallow-compares the selected\n // keys, and a fresh array would compare unequal on every store update.\n // Per id: `-` when there is no live record, else `<progress>:<uploadConfirmationPending>`.\n recordsKey: pendingIdsKey\n .split(',')\n .map((id) => {\n const record = state.uploads[id] as\n \| UploadRecordWithConfirmationPending\n \| undefined;\n if (!record) return NO_RECORD;\n\n const awaiting =\n record.uploadConfirmationPending === undefined\n ? ''\n : record.uploadConfirmationPending\n ? '1'\n : '0';\n\n return `${record.uploadProgress ?? ''}:${awaiting}`;\n })\n .join(','),\n }),\n [pendingIdsKey],\n );\n\n // `client` is absent when rendered outside <Chat>; useStateStore tolerates an undefined store.\n const { recordsKey } = useStateStore(client?.uploadManager?.state, selector) ?? {};\n\n if (!pending.length) return emptyUploadState;\n\n // A record exists only while the request runs — that, not the message payload, is what\n // \"uploading\" means here.\n const entries = (recordsKey?.split(',') ?? []).map((entry, index) => {\n if (entry === NO_RECORD) return undefined;\n\n const [reportedProgress, reportedAwaiting] = entry.split(':');\n const progress =\n reportedProgress === '' ? pending[index].uploadProgress : Number(reportedProgress);\n\n return {\n progress,\n // Prefer the explicit signal from `UploadRecord.uploadConfirmationPending`. It is absent\n // when the resolved `stream-chat` predates it, so fall back to inferring the same thing:\n // the record is still live, therefore 100% can only mean \"all bytes sent, confirmation\n // still pending\".\n uploadConfirmationPending:\n reportedAwaiting === ''\n ? progress !== undefined && progress >= 100\n : reportedAwaiting === '1',\n };\n });\n\n const liveEntries = entries.filter((entry) => !!entry);\n if (!liveEntries.length) return emptyUploadState;\n\n const values = liveEntries.map(({ progress }) => progress);\n const known = values.filter((value): value is number => typeof value === 'number');\n\n return {\n isUploading: true,\n // Only report a number once every pending upload has one, so the bar does not jump between\n // determinate and indeterminate mid-flight.\n progress:\n known.length === values.length && known.length\n ? Math.round(known.reduce((sum, value) => sum + value, 0) / known.length)\n : undefined,\n uploadConfirmationPending: liveEntries.some(\n ({ uploadConfirmationPending }) => uploadConfirmationPending,\n ),\n };\n};\n\n/* Single-attachment convenience wrapper around {@link useAttachmentsUploadState}. /\nexport const useAttachmentUploadState = (\n attachment?: Attachment \| LocalAttachment \| SharedLocationResponse,\n): AttachmentUploadState =>\n useAttachmentsUploadState(useMemo(() => [attachment], [attachment]));\n\n/\n Whether an attachment is in the window where every byte has been sent but the server has not\n * confirmed — read straight off `localMetadata`.\n \n This is the composer-side counterpart to {@link useAttachmentsUploadState}: for an attachment\n * still held by the composer, `AttachmentManager` mirrors the live `UploadRecord` into\n * `localMetadata`, so no store subscription is needed. On a message the mirrored value is a\n * frozen snapshot, which is why the message side reads the record instead.\n \n Falls back to inferring the window from a 100% reading when `uploadConfirmationPending` is absent,\n * i.e. against a resolved `stream-chat` older than v9.51.\n */\n"],"mappings":";;;;;;AAqCA,IAAM,YAAY;AAYlB,IAAM,mBAA0C;CAC9C,aAAa;CACb,2BAA2B;AAC7B;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAa,6BACX,gBAC0B;CAC1B,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,UAAU,cACR,YAAY,OAAO,eAAe,CAAC,CAAC,KAAK,MAAM,EAAE,aAAa,GACpE,CAAC,WAAW,CACd;CAEA,MAAM,gBAAgB,QAAQ,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,GAAG;CAE1D,MAAM,WAAW,aACd,WAA+B,EAI9B,YAAY,cACT,MAAM,GAAG,CAAC,CACV,KAAK,OAAO;EACX,MAAM,SAAS,MAAM,QAAQ;EAG7B,IAAI,CAAC,QAAQ,OAAO;EAEpB,MAAM,WACJ,OAAO,8BAA8B,KAAA,IACjC,KACA,OAAO,4BACL,MACA;EAER,OAAO,GAAG,OAAO,kBAAkB,GAAG,GAAG;CAC3C,CAAC,CAAC,CACD,KAAK,GAAG,EACb,IACA,CAAC,aAAa,CAChB;CAGA,MAAM,EAAE,eAAe,cAAc,QAAQ,eAAe,OAAO,QAAQ,KAAK,CAAC;CAEjF,IAAI,CAAC,QAAQ,QAAQ,OAAO;CAwB5B,MAAM,eApBW,YAAY,MAAM,GAAG,KAAK,CAAC,EAAA,CAAG,KAAK,OAAO,UAAU;EACnE,IAAI,UAAU,WAAW,OAAO,KAAA;EAEhC,MAAM,CAAC,kBAAkB,oBAAoB,MAAM,MAAM,GAAG;EAC5D,MAAM,WACJ,qBAAqB,KAAK,QAAQ,MAAM,CAAC,iBAAiB,OAAO,gBAAgB;EAEnF,OAAO;GACL;GAKA,2BACE,qBAAqB,KACjB,aAAa,KAAA,KAAa,YAAY,MACtC,qBAAqB;EAC7B;CACF,CAEoB,CAAA,CAAQ,QAAQ,UAAU,CAAC,CAAC,KAAK;CACrD,IAAI,CAAC,YAAY,QAAQ,OAAO;CAEhC,MAAM,SAAS,YAAY,KAAK,EAAE,eAAe,QAAQ;CACzD,MAAM,QAAQ,OAAO,QAAQ,UAA2B,OAAO,UAAU,QAAQ;CAEjF,OAAO;EACL,aAAa;EAGb,UACE,MAAM,WAAW,OAAO,UAAU,MAAM,SACpC,KAAK,MAAM,MAAM,QAAQ,KAAK,UAAU,MAAM,OAAO,CAAC,IAAI,MAAM,MAAM,IACtE,KAAA;EACN,2BAA2B,YAAY,MACpC,EAAE,gCAAgC,yBACrC;CACF;AACF;;AAGA,IAAa,4BACX,eAEA,0BAA0B,cAAc,CAAC,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC"}