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

package/dist/es/components/MessageComposer/AttachmentPreviewList/AttachmentPreviewList.mjs

@@ -0,0 +1,91 @@
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { GlobalModal } from "../../Modal/GlobalModal.mjs";
+import { useMessageComposerController } from "../hooks/useMessageComposerController.mjs";
+import { toBaseImageDescriptors } from "../../BaseImage/toBaseImageDescriptors.mjs";
+import { Gallery } from "../../Gallery/Gallery.mjs";
+import { useAttachmentsForPreview } from "../hooks/useAttachmentsForPreview.mjs";
+import { UnsupportedAttachmentPreview } from "./UnsupportedAttachmentPreview.mjs";
+import { FileAttachmentPreview } from "./FileAttachmentPreview.mjs";
+import { MediaAttachmentPreview } from "./MediaAttachmentPreview.mjs";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { isLocalAttachment, isLocalAudioAttachment, isLocalFileAttachment, isLocalImageAttachment, isLocalVideoAttachment, isLocalVoiceRecordingAttachment, isScrapedContent, isVoiceRecordingAttachment } from "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageComposer/AttachmentPreviewList/AttachmentPreviewList.tsx
+var AttachmentPreviewList = ({ AudioAttachmentPreview = FileAttachmentPreview, FileAttachmentPreview: FileAttachmentPreview$1 = FileAttachmentPreview, ImageAttachmentPreview = MediaAttachmentPreview, UnsupportedAttachmentPreview: UnsupportedAttachmentPreview$1 = UnsupportedAttachmentPreview, VideoAttachmentPreview = MediaAttachmentPreview }) => {
+	const messageComposer = useMessageComposerController();
+	const { Modal = GlobalModal } = useComponentContext();
+	const [showPreview, setShowPreview] = useState(false);
+	const initialIndexRef = useRef(0);
+	const preventOverlayClose = useCallback((source) => source !== "overlay", []);
+	const { attachments } = useAttachmentsForPreview();
+	const filteredAttachments = useMemo(() => attachments.filter((a) => !isVoiceRecordingAttachment(a)), [attachments]);
+	const { galleryItems, previewIndexById } = useMemo(() => {
+		const items = [];
+		const indexById = {};
+		for (const a of attachments) if (isLocalImageAttachment(a) || isLocalVideoAttachment(a)) {
+			const descriptor = toBaseImageDescriptors(a);
+			if (descriptor) {
+				indexById[a.localMetadata.id] = items.length;
+				items.push(descriptor);
+			}
+		}
+		return {
+			galleryItems: items,
+			previewIndexById: indexById
+		};
+	}, [attachments]);
+	const openPreviewAtIndex = useCallback((index) => {
+		initialIndexRef.current = index;
+		setShowPreview(true);
+	}, []);
+	if (!filteredAttachments.length) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__attachment-preview-list",
+		"data-testid": "attachment-preview-list",
+		children: [attachments.map((attachment) => {
+			if (isScrapedContent(attachment)) return null;
+			if (isLocalVoiceRecordingAttachment(attachment)) return null;
+			if (isLocalAudioAttachment(attachment)) return /* @__PURE__ */ jsx(AudioAttachmentPreview, {
+				attachment,
+				handleRetry: messageComposer.attachmentManager.uploadAttachment,
+				removeAttachments: messageComposer.attachmentManager.removeAttachments
+			}, attachment.localMetadata.id || attachment.asset_url);
+			else if (isLocalVideoAttachment(attachment)) return /* @__PURE__ */ jsx(VideoAttachmentPreview, {
+				attachment,
+				handleRetry: messageComposer.attachmentManager.uploadAttachment,
+				openPreview: () => openPreviewAtIndex(previewIndexById[attachment.localMetadata.id] ?? 0),
+				removeAttachments: messageComposer.attachmentManager.removeAttachments
+			}, attachment.localMetadata.id || attachment.asset_url);
+			else if (isLocalImageAttachment(attachment)) return /* @__PURE__ */ jsx(ImageAttachmentPreview, {
+				attachment,
+				handleRetry: messageComposer.attachmentManager.uploadAttachment,
+				openPreview: () => openPreviewAtIndex(previewIndexById[attachment.localMetadata.id] ?? 0),
+				removeAttachments: messageComposer.attachmentManager.removeAttachments
+			}, attachment.localMetadata.id || attachment.image_url);
+			else if (isLocalFileAttachment(attachment)) return /* @__PURE__ */ jsx(FileAttachmentPreview$1, {
+				attachment,
+				handleRetry: messageComposer.attachmentManager.uploadAttachment,
+				removeAttachments: messageComposer.attachmentManager.removeAttachments
+			}, attachment.localMetadata.id || attachment.asset_url);
+			else if (isLocalAttachment(attachment)) return /* @__PURE__ */ jsx(UnsupportedAttachmentPreview$1, {
+				attachment,
+				handleRetry: messageComposer.attachmentManager.uploadAttachment,
+				removeAttachments: messageComposer.attachmentManager.removeAttachments
+			}, attachment.localMetadata.id);
+			return null;
+		}), galleryItems.length > 0 && /* @__PURE__ */ jsx(Modal, {
+			className: "str-chat__gallery-modal",
+			onClose: () => setShowPreview(false),
+			onCloseAttempt: preventOverlayClose,
+			open: showPreview,
+			children: /* @__PURE__ */ jsx(Gallery, {
+				initialIndex: initialIndexRef.current,
+				items: galleryItems
+			})
+		})]
+	});
+};
+//#endregion
+export { AttachmentPreviewList };
+
+//# sourceMappingURL=AttachmentPreviewList.mjs.map

package/dist/es/components/MessageComposer/AttachmentPreviewList/AttachmentPreviewList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentPreviewList.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/AttachmentPreviewList/AttachmentPreviewList.tsx"],"sourcesContent":["import React, { type ComponentType, useCallback, useMemo, useRef, useState } from 'react';\nimport {\n  isLocalAttachment,\n  isLocalAudioAttachment,\n  isLocalFileAttachment,\n  isLocalImageAttachment,\n  isLocalVideoAttachment,\n  isLocalVoiceRecordingAttachment,\n  isScrapedContent,\n  isVoiceRecordingAttachment,\n} from 'stream-chat';\nimport {\n  UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview,\n  type UnsupportedAttachmentPreviewProps,\n} from './UnsupportedAttachmentPreview';\nimport {\n  FileAttachmentPreview as DefaultFileAttachmentPreview,\n  type FileAttachmentPreviewProps,\n} from './FileAttachmentPreview';\nimport { type AudioAttachmentPreviewProps } from './AudioAttachmentPreview';\nimport { type ImageAttachmentPreviewProps } from './ImageAttachmentPreview';\nimport { useAttachmentsForPreview, useMessageComposerController } from '../hooks';\nimport {\n  MediaAttachmentPreview,\n  type MediaAttachmentPreviewProps,\n} from './MediaAttachmentPreview';\nimport { toBaseImageDescriptors } from '../../BaseImage';\nimport { Gallery } from '../../Gallery';\nimport { GlobalModal, type ModalCloseSource } from '../../Modal';\nimport { useComponentContext } from '../../../context';\n\nexport type AttachmentPreviewListProps = {\n  AudioAttachmentPreview?:\n    | ComponentType<AudioAttachmentPreviewProps>\n    | ComponentType<FileAttachmentPreviewProps>;\n  FileAttachmentPreview?: ComponentType<FileAttachmentPreviewProps>;\n  ImageAttachmentPreview?: ComponentType<ImageAttachmentPreviewProps>;\n  UnsupportedAttachmentPreview?: ComponentType<UnsupportedAttachmentPreviewProps>;\n  VideoAttachmentPreview?: ComponentType<MediaAttachmentPreviewProps>;\n};\n\nexport const AttachmentPreviewList = ({\n  AudioAttachmentPreview = DefaultFileAttachmentPreview,\n  FileAttachmentPreview = DefaultFileAttachmentPreview,\n  ImageAttachmentPreview = MediaAttachmentPreview,\n  UnsupportedAttachmentPreview = DefaultUnknownAttachmentPreview,\n  VideoAttachmentPreview = MediaAttachmentPreview,\n}: AttachmentPreviewListProps) => {\n  const messageComposer = useMessageComposerController();\n  const { Modal = GlobalModal } = useComponentContext();\n  const [showPreview, setShowPreview] = useState(false);\n  const initialIndexRef = useRef(0);\n  const preventOverlayClose = useCallback(\n    (source: ModalCloseSource) => source !== 'overlay',\n    [],\n  );\n\n  const { attachments } = useAttachmentsForPreview();\n  const filteredAttachments = useMemo(\n    () => attachments.filter((a) => !isVoiceRecordingAttachment(a)),\n    [attachments],\n  );\n\n  const { galleryItems, previewIndexById } = useMemo(() => {\n    const items: NonNullable<ReturnType<typeof toBaseImageDescriptors>>[] = [];\n    const indexById: Record<string, number> = {};\n    for (const a of attachments) {\n      if (isLocalImageAttachment(a) || isLocalVideoAttachment(a)) {\n        const descriptor = toBaseImageDescriptors(a);\n        if (descriptor) {\n          indexById[a.localMetadata.id] = items.length;\n          items.push(descriptor);\n        }\n      }\n    }\n    return { galleryItems: items, previewIndexById: indexById };\n  }, [attachments]);\n\n  const openPreviewAtIndex = useCallback((index: number) => {\n    initialIndexRef.current = index;\n    setShowPreview(true);\n  }, []);\n\n  if (!filteredAttachments.length) return null;\n\n  return (\n    <div\n      className='str-chat__attachment-preview-list'\n      data-testid='attachment-preview-list'\n    >\n      {attachments.map((attachment) => {\n        if (isScrapedContent(attachment)) return null;\n        // Voice recordings are rendered in the dedicated slot above (VoiceRecordingPreviewSlot)\n        if (isLocalVoiceRecordingAttachment(attachment)) return null;\n        if (isLocalAudioAttachment(attachment)) {\n          return (\n            <AudioAttachmentPreview\n              attachment={attachment}\n              handleRetry={messageComposer.attachmentManager.uploadAttachment}\n              key={attachment.localMetadata.id || attachment.asset_url}\n              removeAttachments={messageComposer.attachmentManager.removeAttachments}\n            />\n          );\n        } else if (isLocalVideoAttachment(attachment)) {\n          return (\n            <VideoAttachmentPreview\n              attachment={attachment}\n              handleRetry={messageComposer.attachmentManager.uploadAttachment}\n              key={attachment.localMetadata.id || attachment.asset_url}\n              openPreview={() =>\n                openPreviewAtIndex(previewIndexById[attachment.localMetadata.id] ?? 0)\n              }\n              removeAttachments={messageComposer.attachmentManager.removeAttachments}\n            />\n          );\n        } else if (isLocalImageAttachment(attachment)) {\n          return (\n            <ImageAttachmentPreview\n              attachment={attachment}\n              handleRetry={messageComposer.attachmentManager.uploadAttachment}\n              key={attachment.localMetadata.id || attachment.image_url}\n              openPreview={() =>\n                openPreviewAtIndex(previewIndexById[attachment.localMetadata.id] ?? 0)\n              }\n              removeAttachments={messageComposer.attachmentManager.removeAttachments}\n            />\n          );\n        } else if (isLocalFileAttachment(attachment)) {\n          return (\n            <FileAttachmentPreview\n              attachment={attachment}\n              handleRetry={messageComposer.attachmentManager.uploadAttachment}\n              key={attachment.localMetadata.id || attachment.asset_url}\n              removeAttachments={messageComposer.attachmentManager.removeAttachments}\n            />\n          );\n        } else if (isLocalAttachment(attachment)) {\n          return (\n            <UnsupportedAttachmentPreview\n              attachment={attachment}\n              handleRetry={messageComposer.attachmentManager.uploadAttachment}\n              key={attachment.localMetadata.id}\n              removeAttachments={messageComposer.attachmentManager.removeAttachments}\n            />\n          );\n        }\n        return null;\n      })}\n      {galleryItems.length > 0 && (\n        <Modal\n          className='str-chat__gallery-modal'\n          onClose={() => setShowPreview(false)}\n          onCloseAttempt={preventOverlayClose}\n          open={showPreview}\n        >\n          <Gallery initialIndex={initialIndexRef.current} items={galleryItems} />\n        </Modal>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAyCA,IAAa,yBAAyB,EACpC,yBAAyB,uBACzB,uBAAA,0BAAwB,uBACxB,yBAAyB,wBACzB,8BAAA,iCAA+B,8BAC/B,yBAAyB,6BACO;CAChC,MAAM,kBAAkB,6BAA6B;CACrD,MAAM,EAAE,QAAQ,gBAAgB,oBAAoB;CACpD,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,kBAAkB,OAAO,CAAC;CAChC,MAAM,sBAAsB,aACzB,WAA6B,WAAW,WACzC,CAAC,CACH;CAEA,MAAM,EAAE,gBAAgB,yBAAyB;CACjD,MAAM,sBAAsB,cACpB,YAAY,QAAQ,MAAM,CAAC,2BAA2B,CAAC,CAAC,GAC9D,CAAC,WAAW,CACd;CAEA,MAAM,EAAE,cAAc,qBAAqB,cAAc;EACvD,MAAM,QAAkE,CAAC;EACzE,MAAM,YAAoC,CAAC;EAC3C,KAAK,MAAM,KAAK,aACd,IAAI,uBAAuB,CAAC,KAAK,uBAAuB,CAAC,GAAG;GAC1D,MAAM,aAAa,uBAAuB,CAAC;GAC3C,IAAI,YAAY;IACd,UAAU,EAAE,cAAc,MAAM,MAAM;IACtC,MAAM,KAAK,UAAU;GACvB;EACF;EAEF,OAAO;GAAE,cAAc;GAAO,kBAAkB;EAAU;CAC5D,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,qBAAqB,aAAa,UAAkB;EACxD,gBAAgB,UAAU;EAC1B,eAAe,IAAI;CACrB,GAAG,CAAC,CAAC;CAEL,IAAI,CAAC,oBAAoB,QAAQ,OAAO;CAExC,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIG,YAAY,KAAK,eAAe;GAC/B,IAAI,iBAAiB,UAAU,GAAG,OAAO;GAEzC,IAAI,gCAAgC,UAAU,GAAG,OAAO;GACxD,IAAI,uBAAuB,UAAU,GACnC,OACE,oBAAC,wBAAD;IACc;IACZ,aAAa,gBAAgB,kBAAkB;IAE/C,mBAAmB,gBAAgB,kBAAkB;GACtD,GAFM,WAAW,cAAc,MAAM,WAAW,SAEhD;QAEE,IAAI,uBAAuB,UAAU,GAC1C,OACE,oBAAC,wBAAD;IACc;IACZ,aAAa,gBAAgB,kBAAkB;IAE/C,mBACE,mBAAmB,iBAAiB,WAAW,cAAc,OAAO,CAAC;IAEvE,mBAAmB,gBAAgB,kBAAkB;GACtD,GALM,WAAW,cAAc,MAAM,WAAW,SAKhD;QAEE,IAAI,uBAAuB,UAAU,GAC1C,OACE,oBAAC,wBAAD;IACc;IACZ,aAAa,gBAAgB,kBAAkB;IAE/C,mBACE,mBAAmB,iBAAiB,WAAW,cAAc,OAAO,CAAC;IAEvE,mBAAmB,gBAAgB,kBAAkB;GACtD,GALM,WAAW,cAAc,MAAM,WAAW,SAKhD;QAEE,IAAI,sBAAsB,UAAU,GACzC,OACE,oBAAC,yBAAD;IACc;IACZ,aAAa,gBAAgB,kBAAkB;IAE/C,mBAAmB,gBAAgB,kBAAkB;GACtD,GAFM,WAAW,cAAc,MAAM,WAAW,SAEhD;QAEE,IAAI,kBAAkB,UAAU,GACrC,OACE,oBAAC,gCAAD;IACc;IACZ,aAAa,gBAAgB,kBAAkB;IAE/C,mBAAmB,gBAAgB,kBAAkB;GACtD,GAFM,WAAW,cAAc,EAE/B;GAGL,OAAO;EACT,CAAC,GACA,aAAa,SAAS,KACrB,oBAAC,OAAD;GACE,WAAU;GACV,eAAe,eAAe,KAAK;GACnC,gBAAgB;GAChB,MAAM;aAEN,oBAAC,SAAD;IAAS,cAAc,gBAAgB;IAAS,OAAO;GAAe,CAAA;EACjE,CAAA,CAEN;;AAET"}

package/dist/es/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.mjs

@@ -0,0 +1,131 @@
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { PlayButton } from "../../Button/PlayButton.mjs";
+import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
+import { AttachmentUploadedSizeIndicator } from "../../Loading/AttachmentUploadedSizeIndicator.mjs";
+import { useAudioPlayer } from "../../AudioPlayback/WithAudioPlayback.mjs";
+import { DurationDisplay } from "../../AudioPlayback/components/DurationDisplay.mjs";
+import { PlaybackRateButton } from "../../AudioPlayback/components/PlaybackRateButton.mjs";
+import { WaveProgressBar } from "../../AudioPlayback/components/WaveProgressBar.mjs";
+import { RemoveAttachmentPreviewButton } from "../RemoveAttachmentPreviewButton.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { AttachmentPreviewRoot } from "./utils/AttachmentPreviewRoot.mjs";
+import { useEffect } from "react";
+import { isUploadConfirmationPending, isVoiceRecordingAttachment } from "stream-chat";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
+var audioPlayerStateSelector = (state) => ({
+	canPlayRecord: state.canPlayRecord,
+	isPlaying: state.isPlaying,
+	playbackRate: state.currentPlaybackRate,
+	progressPercent: state.progressPercent,
+	secondsElapsed: state.secondsElapsed
+});
+var AudioAttachmentPreview = ({ attachment, handleRetry, removeAttachments }) => {
+	const { IconExclamationMark, IconExclamationTriangleFill } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { id, previewUri, uploadPermissionCheck, uploadProgress, uploadState } = attachment.localMetadata ?? {};
+	const url = attachment.asset_url || previewUri;
+	const { duration, file_size, mime_type, waveform_data } = attachment.custom ?? {};
+	const audioPlayer = useAudioPlayer({
+		fileSize: attachment.localMetadata.file?.size ?? file_size,
+		mimeType: attachment.localMetadata.file?.type ?? mime_type,
+		requester: attachment.localMetadata.id,
+		src: url,
+		title: attachment.title,
+		waveformData: waveform_data
+	});
+	useEffect(() => {
+		audioPlayer?.cancelScheduledRemoval();
+		return () => {
+			audioPlayer?.scheduleRemoval();
+		};
+	}, [audioPlayer]);
+	const { canPlayRecord, isPlaying, playbackRate, progressPercent, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
+	const resolvedDuration = audioPlayer?.durationSeconds ?? duration;
+	const hasWaveform = !!audioPlayer?.waveformData?.length;
+	const hasSizeLimitError = uploadPermissionCheck?.reason === "size_limit";
+	const hasFatalError = uploadState === "blocked" || hasSizeLimitError;
+	const hasError = uploadState === "failed" && !!handleRetry || hasFatalError;
+	const showProgressControls = !hasError || hasError && isPlaying;
+	return /* @__PURE__ */ jsxs(AttachmentPreviewRoot, {
+		attachment,
+		className: clsx("str-chat__attachment-preview-audio"),
+		"data-testid": "attachment-preview-audio",
+		children: [
+			/* @__PURE__ */ jsx(PlayButton, {
+				isPlaying: Boolean(isPlaying),
+				onClick: () => {
+					audioPlayer?.togglePlay();
+				}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__attachment-preview-file__info",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__attachment-preview-file-name",
+					title: attachment.title,
+					children: isVoiceRecordingAttachment(attachment) ? t("common.voiceMessage.label", "Voice message") : attachment.title
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__attachment-preview-file__data",
+					children: [uploadState === "uploading" && /* @__PURE__ */ jsx(UploadProgressIndicator, {
+						uploadConfirmationPending: isUploadConfirmationPending(attachment.localMetadata),
+						uploadProgress
+					}), showProgressControls ? /* @__PURE__ */ jsxs(Fragment$1, { children: [!resolvedDuration && !progressPercent && !isPlaying && /* @__PURE__ */ jsx(AttachmentUploadedSizeIndicator, { attachment }), hasWaveform ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DurationDisplay, {
+						duration: resolvedDuration,
+						isPlaying: Boolean(isPlaying),
+						secondsElapsed,
+						showRemaining: true
+					}), /* @__PURE__ */ jsx(WaveProgressBar, {
+						durationSeconds: resolvedDuration,
+						progress: progressPercent,
+						relativeAmplitudeBarWidth: 1,
+						relativeAmplitudeGap: 1,
+						secondsElapsed,
+						seek: audioPlayer.seek,
+						waveformData: audioPlayer.waveformData
+					})] }) : /* @__PURE__ */ jsx(DurationDisplay, {
+						duration: resolvedDuration,
+						isPlaying: Boolean(isPlaying),
+						secondsElapsed
+					})] }) : hasFatalError ? /* @__PURE__ */ jsxs("div", {
+						className: "str-chat__attachment-preview-file__fatal-error",
+						children: [/* @__PURE__ */ jsx(IconExclamationMark, {}), /* @__PURE__ */ jsx("span", { children: hasSizeLimitError ? t("messageComposer.audioAttachmentPreview.fileTooLarge.text", "File too large") : uploadState === "blocked" ? t("messageComposer.audioAttachmentPreview.uploadBlocked.text", "Upload blocked") : t("messageComposer.audioAttachmentPreview.uploadFailed.text", "Upload failed") })]
+					}) : /* @__PURE__ */ jsxs("div", {
+						className: "str-chat__attachment-preview-file__retriable-error",
+						children: [
+							/* @__PURE__ */ jsx(IconExclamationTriangleFill, {}),
+							/* @__PURE__ */ jsx("span", { children: t("messageComposer.audioAttachmentPreview.uploadError.text", "Upload error") }),
+							/* @__PURE__ */ jsx("button", {
+								"aria-label": t("common.retryUpload.ariaLabel", "Retry upload"),
+								className: "str-chat__attachment-preview-file__retry-upload-button",
+								"data-testid": "file-preview-item-retry-button",
+								onClick: () => {
+									handleRetry(attachment);
+								},
+								type: "button",
+								children: t("messageComposer.audioAttachmentPreview.retryUpload.text", "Retry upload")
+							})
+						]
+					})]
+				})]
+			}),
+			audioPlayer && canPlayRecord && /* @__PURE__ */ jsxs(PlaybackRateButton, {
+				"aria-label": t("common.playbackSpeedX.label", "Playback speed {{ rate }}x", { rate: playbackRate?.toString() ?? "1" }),
+				onClick: audioPlayer.increasePlaybackRate,
+				children: ["x", playbackRate?.toString()]
+			}),
+			/* @__PURE__ */ jsx(RemoveAttachmentPreviewButton, {
+				"data-testid": "audio-preview-item-delete-button",
+				onClick: () => {
+					if (id) removeAttachments([id]);
+				},
+				uploadState
+			})
+		]
+	});
+};
+//#endregion
+export { AudioAttachmentPreview };
+
+//# sourceMappingURL=AudioAttachmentPreview.mjs.map

package/dist/es/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioAttachmentPreview.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx"],"sourcesContent":["import type { UploadAttachmentPreviewProps } from './types';\nimport {\n  isUploadConfirmationPending,\n  isVoiceRecordingAttachment,\n  type LocalAudioAttachment,\n  type LocalVoiceRecordingAttachment,\n} from 'stream-chat';\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\nimport React, { useEffect } from 'react';\nimport clsx from 'clsx';\nimport { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';\nimport { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';\nimport { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';\nimport { PlayButton } from '../../Button';\nimport {\n  type AudioPlayerState,\n  DurationDisplay,\n  PlaybackRateButton,\n  WaveProgressBar,\n} from '../../AudioPlayback';\nimport { useAudioPlayer } from '../../AudioPlayback/WithAudioPlayback';\nimport { useStateStore } from '../../../store';\nimport { AttachmentUploadedSizeIndicator } from '../../Loading/AttachmentUploadedSizeIndicator';\n\nexport type AudioAttachmentPreviewProps<CustomLocalMetadata = Record<string, unknown>> =\n  UploadAttachmentPreviewProps<\n    | LocalAudioAttachment<CustomLocalMetadata>\n    | LocalVoiceRecordingAttachment<CustomLocalMetadata>\n  >;\n\nconst audioPlayerStateSelector = (state: AudioPlayerState) => ({\n  canPlayRecord: state.canPlayRecord,\n  isPlaying: state.isPlaying,\n  playbackRate: state.currentPlaybackRate,\n  progressPercent: state.progressPercent,\n  secondsElapsed: state.secondsElapsed,\n});\n\nexport const AudioAttachmentPreview = ({\n  attachment,\n  handleRetry,\n  removeAttachments,\n}: AudioAttachmentPreviewProps) => {\n  const { IconExclamationMark, IconExclamationTriangleFill } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { id, previewUri, uploadPermissionCheck, uploadProgress, uploadState } =\n    attachment.localMetadata ?? {};\n  const url = attachment.asset_url || previewUri;\n  const { duration, file_size, mime_type, waveform_data } =\n    (attachment as LocalVoiceRecordingAttachment).custom ?? {};\n\n  const audioPlayer = useAudioPlayer({\n    fileSize: attachment.localMetadata.file?.size ?? file_size,\n    mimeType: attachment.localMetadata.file?.type ?? mime_type,\n    requester: attachment.localMetadata.id,\n    src: url,\n    title: attachment.title,\n    waveformData: waveform_data,\n  });\n\n  useEffect(() => {\n    audioPlayer?.cancelScheduledRemoval();\n    return () => {\n      audioPlayer?.scheduleRemoval();\n    };\n  }, [audioPlayer]);\n\n  const { canPlayRecord, isPlaying, playbackRate, progressPercent, secondsElapsed } =\n    useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};\n\n  const resolvedDuration = audioPlayer?.durationSeconds ?? duration;\n\n  const hasWaveform = !!audioPlayer?.waveformData?.length;\n  const hasSizeLimitError = uploadPermissionCheck?.reason === 'size_limit';\n  const hasFatalError = uploadState === 'blocked' || hasSizeLimitError;\n  const hasRetriableError = uploadState === 'failed' && !!handleRetry;\n  const hasError = hasRetriableError || hasFatalError;\n\n  const showProgressControls = !hasError || (hasError && isPlaying);\n\n  return (\n    <AttachmentPreviewRoot\n      attachment={attachment}\n      className={clsx('str-chat__attachment-preview-audio')}\n      data-testid='attachment-preview-audio'\n    >\n      <PlayButton\n        isPlaying={Boolean(isPlaying)}\n        onClick={() => {\n          audioPlayer?.togglePlay();\n        }}\n      />\n\n      <div className='str-chat__attachment-preview-file__info'>\n        <div className='str-chat__attachment-preview-file-name' title={attachment.title}>\n          {isVoiceRecordingAttachment(attachment)\n            ? t('common.voiceMessage.label', 'Voice message')\n            : attachment.title}\n        </div>\n        <div className='str-chat__attachment-preview-file__data'>\n          {uploadState === 'uploading' && (\n            <UploadProgressIndicator\n              uploadConfirmationPending={isUploadConfirmationPending(\n                attachment.localMetadata,\n              )}\n              uploadProgress={uploadProgress}\n            />\n          )}\n          {showProgressControls ? (\n            <>\n              {!resolvedDuration && !progressPercent && !isPlaying && (\n                <AttachmentUploadedSizeIndicator attachment={attachment} />\n              )}\n              {hasWaveform ? (\n                <>\n                  <DurationDisplay\n                    duration={resolvedDuration}\n                    isPlaying={Boolean(isPlaying)}\n                    secondsElapsed={secondsElapsed}\n                    showRemaining\n                  />\n                  <WaveProgressBar\n                    durationSeconds={resolvedDuration}\n                    progress={progressPercent}\n                    relativeAmplitudeBarWidth={1}\n                    relativeAmplitudeGap={1}\n                    secondsElapsed={secondsElapsed}\n                    seek={audioPlayer.seek}\n                    waveformData={audioPlayer.waveformData}\n                  />\n                </>\n              ) : (\n                <DurationDisplay\n                  duration={resolvedDuration}\n                  isPlaying={Boolean(isPlaying)}\n                  secondsElapsed={secondsElapsed}\n                />\n              )}\n            </>\n          ) : hasFatalError ? (\n            <div className='str-chat__attachment-preview-file__fatal-error'>\n              <IconExclamationMark />\n              <span>\n                {hasSizeLimitError\n                  ? t(\n                      'messageComposer.audioAttachmentPreview.fileTooLarge.text',\n                      'File too large',\n                    )\n                  : uploadState === 'blocked'\n                    ? t(\n                        'messageComposer.audioAttachmentPreview.uploadBlocked.text',\n                        'Upload blocked',\n                      )\n                    : t(\n                        'messageComposer.audioAttachmentPreview.uploadFailed.text',\n                        'Upload failed',\n                      )}\n              </span>\n            </div>\n          ) : (\n            <div className='str-chat__attachment-preview-file__retriable-error'>\n              <IconExclamationTriangleFill />\n              <span>\n                {t(\n                  'messageComposer.audioAttachmentPreview.uploadError.text',\n                  'Upload error',\n                )}\n              </span>\n              <button\n                aria-label={t('common.retryUpload.ariaLabel', 'Retry upload')}\n                className='str-chat__attachment-preview-file__retry-upload-button'\n                data-testid='file-preview-item-retry-button'\n                onClick={() => {\n                  handleRetry(attachment);\n                }}\n                type='button'\n              >\n                {t(\n                  'messageComposer.audioAttachmentPreview.retryUpload.text',\n                  'Retry upload',\n                )}\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n      {audioPlayer && canPlayRecord && (\n        <PlaybackRateButton\n          aria-label={t('common.playbackSpeedX.label', 'Playback speed {{ rate }}x', {\n            rate: playbackRate?.toString() ?? '1',\n          })}\n          onClick={audioPlayer.increasePlaybackRate}\n        >\n          x{playbackRate?.toString()}\n        </PlaybackRateButton>\n      )}\n      <RemoveAttachmentPreviewButton\n        data-testid='audio-preview-item-delete-button'\n        onClick={() => {\n          if (id) removeAttachments([id]);\n        }}\n        uploadState={uploadState}\n      />\n    </AttachmentPreviewRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA8BA,IAAM,4BAA4B,WAA6B;CAC7D,eAAe,MAAM;CACrB,WAAW,MAAM;CACjB,cAAc,MAAM;CACpB,iBAAiB,MAAM;CACvB,gBAAgB,MAAM;AACxB;AAEA,IAAa,0BAA0B,EACrC,YACA,aACA,wBACiC;CACjC,MAAM,EAAE,qBAAqB,gCAAgC,yBAAyB;CACtF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,IAAI,YAAY,uBAAuB,gBAAgB,gBAC7D,WAAW,iBAAiB,CAAC;CAC/B,MAAM,MAAM,WAAW,aAAa;CACpC,MAAM,EAAE,UAAU,WAAW,WAAW,kBACrC,WAA6C,UAAU,CAAC;CAE3D,MAAM,cAAc,eAAe;EACjC,UAAU,WAAW,cAAc,MAAM,QAAQ;EACjD,UAAU,WAAW,cAAc,MAAM,QAAQ;EACjD,WAAW,WAAW,cAAc;EACpC,KAAK;EACL,OAAO,WAAW;EAClB,cAAc;CAChB,CAAC;CAED,gBAAgB;EACd,aAAa,uBAAuB;EACpC,aAAa;GACX,aAAa,gBAAgB;EAC/B;CACF,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,EAAE,eAAe,WAAW,cAAc,iBAAiB,mBAC/D,cAAc,aAAa,OAAO,wBAAwB,KAAK,CAAC;CAElE,MAAM,mBAAmB,aAAa,mBAAmB;CAEzD,MAAM,cAAc,CAAC,CAAC,aAAa,cAAc;CACjD,MAAM,oBAAoB,uBAAuB,WAAW;CAC5D,MAAM,gBAAgB,gBAAgB,aAAa;CAEnD,MAAM,WADoB,gBAAgB,YAAY,CAAC,CAAC,eAClB;CAEtC,MAAM,uBAAuB,CAAC,YAAa,YAAY;CAEvD,OACE,qBAAC,uBAAD;EACc;EACZ,WAAW,KAAK,oCAAoC;EACpD,eAAY;YAHd;GAKE,oBAAC,YAAD;IACE,WAAW,QAAQ,SAAS;IAC5B,eAAe;KACb,aAAa,WAAW;IAC1B;GACD,CAAA;GAED,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;KAAyC,OAAO,WAAW;eACvE,2BAA2B,UAAU,IAClC,EAAE,6BAA6B,eAAe,IAC9C,WAAW;IACZ,CAAA,GACL,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,gBAAgB,eACf,oBAAC,yBAAD;MACE,2BAA2B,4BACzB,WAAW,aACb;MACgB;KACjB,CAAA,GAEF,uBACC,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,aACzC,oBAAC,iCAAD,EAA6C,WAAa,CAAA,GAE3D,cACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,iBAAD;MACE,UAAU;MACV,WAAW,QAAQ,SAAS;MACZ;MAChB,eAAA;KACD,CAAA,GACD,oBAAC,iBAAD;MACE,iBAAiB;MACjB,UAAU;MACV,2BAA2B;MAC3B,sBAAsB;MACN;MAChB,MAAM,YAAY;MAClB,cAAc,YAAY;KAC3B,CAAA,CACD,EAAA,CAAA,IAEF,oBAAC,iBAAD;MACE,UAAU;MACV,WAAW,QAAQ,SAAS;MACZ;KACjB,CAAA,CAEH,EAAA,CAAA,IACA,gBACF,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,qBAAD,CAAsB,CAAA,GACtB,oBAAC,QAAD,EAAA,UACG,oBACG,EACE,4DACA,gBACF,IACA,gBAAgB,YACd,EACE,6DACA,gBACF,IACA,EACE,4DACA,eACF,EACF,CAAA,CACH;UAEL,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,oBAAC,6BAAD,CAA8B,CAAA;OAC9B,oBAAC,QAAD,EAAA,UACG,EACC,2DACA,cACF,EACI,CAAA;OACN,oBAAC,UAAD;QACE,cAAY,EAAE,gCAAgC,cAAc;QAC5D,WAAU;QACV,eAAY;QACZ,eAAe;SACb,YAAY,UAAU;QACxB;QACA,MAAK;kBAEJ,EACC,2DACA,cACF;OACM,CAAA;MACL;OAEJ;MACF;;GACJ,eAAe,iBACd,qBAAC,oBAAD;IACE,cAAY,EAAE,+BAA+B,8BAA8B,EACzE,MAAM,cAAc,SAAS,KAAK,IACpC,CAAC;IACD,SAAS,YAAY;cAJvB,CAKC,KACG,cAAc,SAAS,CACP;;GAEtB,oBAAC,+BAAD;IACE,eAAY;IACZ,eAAe;KACb,IAAI,IAAI,kBAAkB,CAAC,EAAE,CAAC;IAChC;IACa;GACd,CAAA;EACoB;;AAE3B"}

package/dist/es/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.mjs

@@ -0,0 +1,82 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
+import { AttachmentUploadedSizeIndicator } from "../../Loading/AttachmentUploadedSizeIndicator.mjs";
+import { FileIcon } from "../../FileIcon/FileIcon.mjs";
+import { RemoveAttachmentPreviewButton } from "../RemoveAttachmentPreviewButton.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { AttachmentPreviewRoot } from "./utils/AttachmentPreviewRoot.mjs";
+import "react";
+import { isUploadConfirmationPending } from "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx
+var FileAttachmentPreview = ({ attachment, handleRetry, removeAttachments }) => {
+	const { IconExclamationMark, IconExclamationTriangleFill } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { id, uploadPermissionCheck, uploadProgress, uploadState } = attachment.localMetadata ?? {};
+	const hasSizeLimitError = uploadPermissionCheck?.reason === "size_limit";
+	const hasFatalError = uploadState === "blocked" || hasSizeLimitError;
+	const hasRetriableError = uploadState === "failed" && !!handleRetry;
+	return /* @__PURE__ */ jsxs(AttachmentPreviewRoot, {
+		attachment,
+		className: "str-chat__attachment-preview-file",
+		"data-testid": "attachment-preview-file",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__attachment-preview-file__icon",
+				children: /* @__PURE__ */ jsx(FileIcon, {
+					fileName: attachment.title,
+					mimeType: attachment.custom?.mime_type
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__attachment-preview-file__info",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__attachment-preview-file-name",
+					title: attachment.title,
+					children: attachment.title
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__attachment-preview-file__data",
+					children: [
+						uploadState === "uploading" && /* @__PURE__ */ jsx(UploadProgressIndicator, {
+							uploadConfirmationPending: isUploadConfirmationPending(attachment.localMetadata),
+							uploadProgress
+						}),
+						/* @__PURE__ */ jsx(AttachmentUploadedSizeIndicator, { attachment }),
+						hasFatalError && /* @__PURE__ */ jsxs("div", {
+							className: "str-chat__attachment-preview-file__fatal-error",
+							children: [/* @__PURE__ */ jsx(IconExclamationMark, {}), /* @__PURE__ */ jsx("span", { children: hasSizeLimitError ? t("messageComposer.audioAttachmentPreview.fileTooLarge.text", "File too large") : uploadState === "blocked" ? t("messageComposer.audioAttachmentPreview.uploadBlocked.text", "Upload blocked") : t("messageComposer.audioAttachmentPreview.uploadFailed.text", "Upload failed") })]
+						}),
+						hasRetriableError && /* @__PURE__ */ jsxs("div", {
+							className: "str-chat__attachment-preview-file__retriable-error",
+							children: [
+								/* @__PURE__ */ jsx(IconExclamationTriangleFill, {}),
+								/* @__PURE__ */ jsx("span", { children: t("messageComposer.audioAttachmentPreview.uploadError.text", "Upload error") }),
+								/* @__PURE__ */ jsx("button", {
+									"aria-label": t("common.retryUpload.ariaLabel", "Retry upload"),
+									className: "str-chat__attachment-preview-file__retry-upload-button",
+									"data-testid": "file-preview-item-retry-button",
+									onClick: () => {
+										handleRetry(attachment);
+									},
+									type: "button",
+									children: t("messageComposer.audioAttachmentPreview.retryUpload.text", "Retry upload")
+								})
+							]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(RemoveAttachmentPreviewButton, {
+				"data-testid": "file-preview-item-delete-button",
+				onClick: () => {
+					if (id) removeAttachments([id]);
+				},
+				uploadState
+			})
+		]
+	});
+};
+//#endregion
+export { FileAttachmentPreview };
+
+//# sourceMappingURL=FileAttachmentPreview.mjs.map

package/dist/es/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileAttachmentPreview.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/AttachmentPreviewList/FileAttachmentPreview.tsx"],"sourcesContent":["import React from 'react';\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\nimport { FileIcon } from '../../FileIcon';\nimport { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';\nimport { AttachmentUploadedSizeIndicator } from '../../Loading/AttachmentUploadedSizeIndicator';\nimport type { LocalAudioAttachment, LocalFileAttachment } from 'stream-chat';\nimport type { UploadAttachmentPreviewProps } from './types';\nimport { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';\nimport { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';\nimport { isUploadConfirmationPending } from 'stream-chat';\n\nexport type FileAttachmentPreviewProps<CustomLocalMetadata = unknown> =\n  UploadAttachmentPreviewProps<\n    LocalFileAttachment<CustomLocalMetadata> | LocalAudioAttachment<CustomLocalMetadata>\n  >;\n\nexport const FileAttachmentPreview = ({\n  attachment,\n  handleRetry,\n  removeAttachments,\n}: FileAttachmentPreviewProps) => {\n  const { IconExclamationMark, IconExclamationTriangleFill } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { id, uploadPermissionCheck, uploadProgress, uploadState } =\n    attachment.localMetadata ?? {};\n\n  const hasSizeLimitError = uploadPermissionCheck?.reason === 'size_limit';\n  const hasFatalError = uploadState === 'blocked' || hasSizeLimitError;\n  const hasRetriableError = uploadState === 'failed' && !!handleRetry;\n\n  return (\n    <AttachmentPreviewRoot\n      attachment={attachment}\n      className='str-chat__attachment-preview-file'\n      data-testid='attachment-preview-file'\n    >\n      <div className='str-chat__attachment-preview-file__icon'>\n        <FileIcon fileName={attachment.title} mimeType={attachment.custom?.mime_type} />\n      </div>\n\n      <div className='str-chat__attachment-preview-file__info'>\n        <div className='str-chat__attachment-preview-file-name' title={attachment.title}>\n          {attachment.title}\n        </div>\n        <div className='str-chat__attachment-preview-file__data'>\n          {uploadState === 'uploading' && (\n            <UploadProgressIndicator\n              uploadConfirmationPending={isUploadConfirmationPending(\n                attachment.localMetadata,\n              )}\n              uploadProgress={uploadProgress}\n            />\n          )}\n          <AttachmentUploadedSizeIndicator attachment={attachment} />\n          {hasFatalError && (\n            <div className='str-chat__attachment-preview-file__fatal-error'>\n              <IconExclamationMark />\n              <span>\n                {hasSizeLimitError\n                  ? t(\n                      'messageComposer.audioAttachmentPreview.fileTooLarge.text',\n                      'File too large',\n                    )\n                  : uploadState === 'blocked'\n                    ? t(\n                        'messageComposer.audioAttachmentPreview.uploadBlocked.text',\n                        'Upload blocked',\n                      )\n                    : t(\n                        'messageComposer.audioAttachmentPreview.uploadFailed.text',\n                        'Upload failed',\n                      )}\n              </span>\n            </div>\n          )}\n          {hasRetriableError && (\n            <div className='str-chat__attachment-preview-file__retriable-error'>\n              <IconExclamationTriangleFill />\n              <span>\n                {t(\n                  'messageComposer.audioAttachmentPreview.uploadError.text',\n                  'Upload error',\n                )}\n              </span>\n              <button\n                aria-label={t('common.retryUpload.ariaLabel', 'Retry upload')}\n                className='str-chat__attachment-preview-file__retry-upload-button'\n                data-testid='file-preview-item-retry-button'\n                onClick={() => {\n                  handleRetry(attachment);\n                }}\n                type='button'\n              >\n                {t(\n                  'messageComposer.audioAttachmentPreview.retryUpload.text',\n                  'Retry upload',\n                )}\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n\n      <RemoveAttachmentPreviewButton\n        data-testid='file-preview-item-delete-button'\n        onClick={() => {\n          if (id) removeAttachments([id]);\n        }}\n        uploadState={uploadState}\n      />\n    </AttachmentPreviewRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAgBA,IAAa,yBAAyB,EACpC,YACA,aACA,wBACgC;CAChC,MAAM,EAAE,qBAAqB,gCAAgC,yBAAyB;CACtF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,IAAI,uBAAuB,gBAAgB,gBACjD,WAAW,iBAAiB,CAAC;CAE/B,MAAM,oBAAoB,uBAAuB,WAAW;CAC5D,MAAM,gBAAgB,gBAAgB,aAAa;CACnD,MAAM,oBAAoB,gBAAgB,YAAY,CAAC,CAAC;CAExD,OACE,qBAAC,uBAAD;EACc;EACZ,WAAU;EACV,eAAY;YAHd;GAKE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,UAAD;KAAU,UAAU,WAAW;KAAO,UAAU,WAAW,QAAQ;IAAY,CAAA;GAC5E,CAAA;GAEL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;KAAyC,OAAO,WAAW;eACvE,WAAW;IACT,CAAA,GACL,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,gBAAgB,eACf,oBAAC,yBAAD;OACE,2BAA2B,4BACzB,WAAW,aACb;OACgB;MACjB,CAAA;MAEH,oBAAC,iCAAD,EAA6C,WAAa,CAAA;MACzD,iBACC,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,qBAAD,CAAsB,CAAA,GACtB,oBAAC,QAAD,EAAA,UACG,oBACG,EACE,4DACA,gBACF,IACA,gBAAgB,YACd,EACE,6DACA,gBACF,IACA,EACE,4DACA,eACF,EACF,CAAA,CACH;;MAEN,qBACC,qBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,oBAAC,6BAAD,CAA8B,CAAA;QAC9B,oBAAC,QAAD,EAAA,UACG,EACC,2DACA,cACF,EACI,CAAA;QACN,oBAAC,UAAD;SACE,cAAY,EAAE,gCAAgC,cAAc;SAC5D,WAAU;SACV,eAAY;SACZ,eAAe;UACb,YAAY,UAAU;SACxB;SACA,MAAK;mBAEJ,EACC,2DACA,cACF;QACM,CAAA;OACL;;KAEJ;MACF;;GAEL,oBAAC,+BAAD;IACE,eAAY;IACZ,eAAe;KACb,IAAI,IAAI,kBAAkB,CAAC,EAAE,CAAC;IAChC;IACa;GACd,CAAA;EACoB;;AAE3B"}

package/dist/es/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.mjs

@@ -0,0 +1,53 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { RemoveAttachmentPreviewButton } from "../RemoveAttachmentPreviewButton.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx
+var GeolocationPreviewImage = () => {
+	const { IconLocation } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__location-preview-image",
+		children: /* @__PURE__ */ jsx(IconLocation, {})
+	});
+};
+var GeolocationPreview = ({ location, PreviewImage = GeolocationPreviewImage, remove }) => {
+	const { t } = useTranslationContext();
+	const shareDuration = location.durationMs;
+	const title = shareDuration ? t("common.liveLocation.text", "Live location") : t("common.currentLocation.text", "Current location");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__location-preview",
+		"data-testid": "location-preview",
+		children: [
+			/* @__PURE__ */ jsx(PreviewImage, { location }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__location-preview__data",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "str-chat__location-preview__data__title",
+						title: t("messageComposer.geolocationPreview.sharedLocation.title", "Shared location"),
+						children: title
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "str-chat__location-preview__data__subtitle",
+						children: t("messageComposer.geolocationPreview.location.text", "Location: {{ coordinates }}", { coordinates: `${location.latitude}, ${location.longitude}` })
+					}),
+					shareDuration && /* @__PURE__ */ jsx("div", {
+						className: "str-chat__location-preview__data__sharing-duration",
+						children: t("messageComposer.geolocationPreview.live.text", "Live for {{duration}}", { duration: t("duration.shareLocation", { milliseconds: shareDuration }) })
+					})
+				]
+			}),
+			remove && /* @__PURE__ */ jsx(RemoveAttachmentPreviewButton, {
+				"aria-label": t("messageComposer.geolocationPreview.removeLocationAttachment.ariaLabel", "Remove location attachment"),
+				className: "str-chat__attachment-preview__remove-button",
+				"data-testid": "location-preview-item-delete-button",
+				onClick: remove
+			})
+		]
+	});
+};
+//#endregion
+export { GeolocationPreview };
+
+//# sourceMappingURL=GeolocationPreview.mjs.map

package/dist/es/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeolocationPreview.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/AttachmentPreviewList/GeolocationPreview.tsx"],"sourcesContent":["import type { LiveLocationPreview, StaticLocationPreview } from 'stream-chat';\nimport type { ComponentType } from 'react';\nimport React from 'react';\nimport { useTranslationContext } from '../../../context';\nimport { useComponentContextIcons } from '../../../context';\nimport { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';\n\ntype GeolocationPreviewImageProps = {\n  location: StaticLocationPreview | LiveLocationPreview;\n};\n\nconst GeolocationPreviewImage = () => {\n  const { IconLocation } = useComponentContextIcons();\n\n  return (\n    <div className='str-chat__location-preview-image'>\n      <IconLocation />\n    </div>\n  );\n};\n\nexport type GeolocationPreviewProps = {\n  location: StaticLocationPreview | LiveLocationPreview;\n  PreviewImage?: ComponentType<GeolocationPreviewImageProps>;\n  remove?: () => void;\n};\n\nexport const GeolocationPreview = ({\n  location,\n  PreviewImage = GeolocationPreviewImage,\n  remove,\n}: GeolocationPreviewProps) => {\n  const { t } = useTranslationContext();\n  const shareDuration = (location as LiveLocationPreview).durationMs;\n  const title = shareDuration\n    ? t('common.liveLocation.text', 'Live location')\n    : t('common.currentLocation.text', 'Current location');\n\n  return (\n    <div className='str-chat__location-preview' data-testid='location-preview'>\n      <PreviewImage location={location} />\n      <div className='str-chat__location-preview__data'>\n        <div\n          className='str-chat__location-preview__data__title'\n          title={t(\n            'messageComposer.geolocationPreview.sharedLocation.title',\n            'Shared location',\n          )}\n        >\n          {title}\n        </div>\n        <div className='str-chat__location-preview__data__subtitle'>\n          {t(\n            'messageComposer.geolocationPreview.location.text',\n            'Location: {{ coordinates }}',\n            {\n              coordinates: `${location.latitude}, ${location.longitude}`,\n            },\n          )}\n        </div>\n        {shareDuration && (\n          <div className='str-chat__location-preview__data__sharing-duration'>\n            {t('messageComposer.geolocationPreview.live.text', 'Live for {{duration}}', {\n              duration: t('duration.shareLocation', {\n                milliseconds: shareDuration,\n              }),\n            })}\n          </div>\n        )}\n      </div>\n      {remove && (\n        <RemoveAttachmentPreviewButton\n          aria-label={t(\n            'messageComposer.geolocationPreview.removeLocationAttachment.ariaLabel',\n            'Remove location attachment',\n          )}\n          className='str-chat__attachment-preview__remove-button'\n          data-testid='location-preview-item-delete-button'\n          onClick={remove}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAWA,IAAM,gCAAgC;CACpC,MAAM,EAAE,iBAAiB,yBAAyB;CAElD,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,cAAD,CAAe,CAAA;CACZ,CAAA;AAET;AAQA,IAAa,sBAAsB,EACjC,UACA,eAAe,yBACf,aAC6B;CAC7B,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,gBAAiB,SAAiC;CACxD,MAAM,QAAQ,gBACV,EAAE,4BAA4B,eAAe,IAC7C,EAAE,+BAA+B,kBAAkB;CAEvD,OACE,qBAAC,OAAD;EAAK,WAAU;EAA6B,eAAY;YAAxD;GACE,oBAAC,cAAD,EAAwB,SAAW,CAAA;GACnC,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,OAAD;MACE,WAAU;MACV,OAAO,EACL,2DACA,iBACF;gBAEC;KACE,CAAA;KACL,oBAAC,OAAD;MAAK,WAAU;gBACZ,EACC,oDACA,+BACA,EACE,aAAa,GAAG,SAAS,SAAS,IAAI,SAAS,YACjD,CACF;KACG,CAAA;KACJ,iBACC,oBAAC,OAAD;MAAK,WAAU;gBACZ,EAAE,gDAAgD,yBAAyB,EAC1E,UAAU,EAAE,0BAA0B,EACpC,cAAc,cAChB,CAAC,EACH,CAAC;KACE,CAAA;IAEJ;;GACJ,UACC,oBAAC,+BAAD;IACE,cAAY,EACV,yEACA,4BACF;IACA,WAAU;IACV,eAAY;IACZ,SAAS;GACV,CAAA;EAEA;;AAET"}

package/dist/es/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.mjs

@@ -0,0 +1,96 @@
+import { useComponentContext } from "../../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
+import { BaseImage } from "../../BaseImage/BaseImage.mjs";
+import { RemoveAttachmentPreviewButton } from "../RemoveAttachmentPreviewButton.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { AttachmentPreviewRoot } from "./utils/AttachmentPreviewRoot.mjs";
+import { MediaBadge } from "../../Badge/MediaBadge.mjs";
+import { useCallback, useMemo, useState } from "react";
+import { isUploadConfirmationPending, isVideoAttachment } from "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
+var MediaAttachmentPreview = ({ attachment, handleRetry, openPreview, removeAttachments }) => {
+	const { IconExclamationMark, IconRetry } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { BaseImage: BaseImage$1 = BaseImage } = useComponentContext();
+	const [thumbnailPreviewError, setThumbnailPreviewError] = useState(false);
+	const { id, uploadPermissionCheck, uploadProgress, uploadState } = attachment.localMetadata ?? {};
+	const isUploading = uploadState === "uploading";
+	const handleThumbnailLoadError = useCallback(() => setThumbnailPreviewError(true), []);
+	const hasSizeLimitError = uploadPermissionCheck?.reason === "size_limit";
+	const hasFatalError = uploadState === "blocked" || hasSizeLimitError;
+	const hasRetriableError = uploadState === "failed" && !!handleRetry;
+	const hasUploadError = hasRetriableError || hasFatalError;
+	const retry = (e) => {
+		e.stopPropagation();
+		handleRetry(attachment);
+		return false;
+	};
+	const thumbnail = useMemo(() => isVideoAttachment(attachment) ? {
+		alt: attachment.title,
+		title: attachment.title,
+		url: attachment.thumb_url
+	} : {
+		alt: attachment.fallback,
+		title: attachment.fallback,
+		url: attachment.image_url || attachment.localMetadata.previewUri
+	}, [attachment]);
+	return /* @__PURE__ */ jsxs(AttachmentPreviewRoot, {
+		attachment,
+		className: clsx("str-chat__attachment-preview-media", {
+			"str-chat__attachment-preview-media--thumbnail-preview-error": thumbnailPreviewError,
+			"str-chat__attachment-preview-media--upload-error": hasUploadError,
+			"str-chat__attachment-preview-media--uploading": isUploading
+		}),
+		"data-testid": "attachment-preview-media",
+		onPressed: hasRetriableError ? retry : void 0,
+		openPreview: !isUploading && !hasUploadError ? openPreview : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "str-chat__attachment-preview-media__thumbnail-wrapper",
+			children: [thumbnail.url && /* @__PURE__ */ jsx(BaseImage$1, {
+				alt: thumbnail.alt,
+				className: "str-chat__attachment-preview-media__thumbnail",
+				onError: handleThumbnailLoadError,
+				src: thumbnail.url,
+				title: thumbnail.title
+			}), /* @__PURE__ */ jsxs("div", {
+				className: clsx("str-chat__attachment-preview-media__overlay"),
+				children: [
+					isUploading && /* @__PURE__ */ jsx(UploadProgressIndicator, {
+						uploadConfirmationPending: isUploadConfirmationPending(attachment.localMetadata),
+						uploadProgress
+					}),
+					isVideoAttachment(attachment) && !hasUploadError && uploadState !== "uploading" && /* @__PURE__ */ jsx(MediaBadge, {
+						attachment,
+						variant: "video"
+					}),
+					hasFatalError && /* @__PURE__ */ jsx(IconExclamationMark, {}),
+					hasRetriableError && /* @__PURE__ */ jsx(Button, {
+						appearance: "solid",
+						"aria-label": t("common.retryUpload.ariaLabel", "Retry upload"),
+						circular: true,
+						className: "str-chat__attachment-preview-media__retry-upload-button",
+						"data-testid": "video-preview-item-retry-button",
+						onClick: retry,
+						size: "sm",
+						variant: "danger",
+						children: /* @__PURE__ */ jsx(IconRetry, {})
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx(RemoveAttachmentPreviewButton, {
+			"data-testid": "video-preview-item-delete-button",
+			onClick: () => {
+				if (id) removeAttachments([id]);
+			},
+			uploadState
+		})]
+	});
+};
+//#endregion
+export { MediaAttachmentPreview };
+
+//# sourceMappingURL=MediaAttachmentPreview.mjs.map

package/dist/es/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaAttachmentPreview.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx"],"sourcesContent":["import type { UploadAttachmentPreviewProps } from './types';\nimport {\n  isUploadConfirmationPending,\n  isVideoAttachment,\n  type LocalImageAttachment,\n  type LocalVideoAttachment,\n} from 'stream-chat';\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../context';\nimport { BaseImage as DefaultBaseImage } from '../../BaseImage';\nimport React, {\n  type KeyboardEvent,\n  type MouseEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\nimport { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';\nimport { Button } from '../../Button';\nimport { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';\nimport { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';\nimport { MediaBadge } from '../../Badge/MediaBadge';\n\nexport type MediaAttachmentPreviewProps<CustomLocalMetadata = Record<string, unknown>> =\n  UploadAttachmentPreviewProps<\n    LocalVideoAttachment<CustomLocalMetadata> | LocalImageAttachment<CustomLocalMetadata>\n  > & {\n    openPreview?: () => void;\n  };\n\nexport const MediaAttachmentPreview = ({\n  attachment,\n  handleRetry,\n  openPreview,\n  removeAttachments,\n}: MediaAttachmentPreviewProps) => {\n  const { IconExclamationMark, IconRetry } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { BaseImage = DefaultBaseImage } = useComponentContext();\n  const [thumbnailPreviewError, setThumbnailPreviewError] = useState(false);\n\n  const { id, uploadPermissionCheck, uploadProgress, uploadState } =\n    attachment.localMetadata ?? {};\n\n  const isUploading = uploadState === 'uploading';\n  const handleThumbnailLoadError = useCallback(() => setThumbnailPreviewError(true), []);\n  const hasSizeLimitError = uploadPermissionCheck?.reason === 'size_limit';\n  const hasFatalError = uploadState === 'blocked' || hasSizeLimitError;\n  const hasRetriableError = uploadState === 'failed' && !!handleRetry;\n  const hasUploadError = hasRetriableError || hasFatalError;\n\n  const retry = (e: MouseEvent<Element> | KeyboardEvent<Element>) => {\n    e.stopPropagation();\n    handleRetry(attachment);\n    return false;\n  };\n\n  const thumbnail = useMemo(\n    () =>\n      isVideoAttachment(attachment)\n        ? {\n            alt: attachment.title,\n            title: attachment.title,\n            url: attachment.thumb_url,\n          }\n        : {\n            alt: attachment.fallback,\n            title: attachment.fallback,\n            url: attachment.image_url || attachment.localMetadata.previewUri,\n          },\n    [attachment],\n  );\n\n  return (\n    <AttachmentPreviewRoot\n      attachment={attachment}\n      className={clsx('str-chat__attachment-preview-media', {\n        'str-chat__attachment-preview-media--thumbnail-preview-error':\n          thumbnailPreviewError,\n        'str-chat__attachment-preview-media--upload-error': hasUploadError,\n        'str-chat__attachment-preview-media--uploading': isUploading,\n      })}\n      data-testid='attachment-preview-media'\n      onPressed={hasRetriableError ? retry : undefined}\n      openPreview={!isUploading && !hasUploadError ? openPreview : undefined}\n    >\n      <div className='str-chat__attachment-preview-media__thumbnail-wrapper'>\n        {thumbnail.url && (\n          <BaseImage\n            alt={thumbnail.alt}\n            className='str-chat__attachment-preview-media__thumbnail'\n            onError={handleThumbnailLoadError}\n            src={thumbnail.url}\n            title={thumbnail.title}\n          />\n        )}\n\n        <div className={clsx('str-chat__attachment-preview-media__overlay')}>\n          {isUploading && (\n            <UploadProgressIndicator\n              uploadConfirmationPending={isUploadConfirmationPending(\n                attachment.localMetadata,\n              )}\n              uploadProgress={uploadProgress}\n            />\n          )}\n\n          {isVideoAttachment(attachment) &&\n            !hasUploadError &&\n            uploadState !== 'uploading' && (\n              <MediaBadge attachment={attachment} variant='video' />\n            )}\n\n          {hasFatalError && <IconExclamationMark />}\n\n          {hasRetriableError && (\n            <Button\n              appearance='solid'\n              aria-label={t('common.retryUpload.ariaLabel', 'Retry upload')}\n              circular\n              className='str-chat__attachment-preview-media__retry-upload-button'\n              data-testid='video-preview-item-retry-button'\n              onClick={retry}\n              size='sm'\n              variant='danger'\n            >\n              <IconRetry />\n            </Button>\n          )}\n        </div>\n      </div>\n\n      <RemoveAttachmentPreviewButton\n        data-testid='video-preview-item-delete-button'\n        onClick={() => {\n          if (id) removeAttachments([id]);\n        }}\n        uploadState={uploadState}\n      />\n    </AttachmentPreviewRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAkCA,IAAa,0BAA0B,EACrC,YACA,aACA,aACA,wBACiC;CACjC,MAAM,EAAE,qBAAqB,cAAc,yBAAyB;CACpE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,WAAA,cAAY,cAAqB,oBAAoB;CAC7D,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,EAAE,IAAI,uBAAuB,gBAAgB,gBACjD,WAAW,iBAAiB,CAAC;CAE/B,MAAM,cAAc,gBAAgB;CACpC,MAAM,2BAA2B,kBAAkB,yBAAyB,IAAI,GAAG,CAAC,CAAC;CACrF,MAAM,oBAAoB,uBAAuB,WAAW;CAC5D,MAAM,gBAAgB,gBAAgB,aAAa;CACnD,MAAM,oBAAoB,gBAAgB,YAAY,CAAC,CAAC;CACxD,MAAM,iBAAiB,qBAAqB;CAE5C,MAAM,SAAS,MAAoD;EACjE,EAAE,gBAAgB;EAClB,YAAY,UAAU;EACtB,OAAO;CACT;CAEA,MAAM,YAAY,cAEd,kBAAkB,UAAU,IACxB;EACE,KAAK,WAAW;EAChB,OAAO,WAAW;EAClB,KAAK,WAAW;CAClB,IACA;EACE,KAAK,WAAW;EAChB,OAAO,WAAW;EAClB,KAAK,WAAW,aAAa,WAAW,cAAc;CACxD,GACN,CAAC,UAAU,CACb;CAEA,OACE,qBAAC,uBAAD;EACc;EACZ,WAAW,KAAK,sCAAsC;GACpD,+DACE;GACF,oDAAoD;GACpD,iDAAiD;EACnD,CAAC;EACD,eAAY;EACZ,WAAW,oBAAoB,QAAQ,KAAA;EACvC,aAAa,CAAC,eAAe,CAAC,iBAAiB,cAAc,KAAA;YAV/D,CAYE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,UAAU,OACT,oBAAC,aAAD;IACE,KAAK,UAAU;IACf,WAAU;IACV,SAAS;IACT,KAAK,UAAU;IACf,OAAO,UAAU;GAClB,CAAA,GAGH,qBAAC,OAAD;IAAK,WAAW,KAAK,6CAA6C;cAAlE;KACG,eACC,oBAAC,yBAAD;MACE,2BAA2B,4BACzB,WAAW,aACb;MACgB;KACjB,CAAA;KAGF,kBAAkB,UAAU,KAC3B,CAAC,kBACD,gBAAgB,eACd,oBAAC,YAAD;MAAwB;MAAY,SAAQ;KAAS,CAAA;KAGxD,iBAAiB,oBAAC,qBAAD,CAAsB,CAAA;KAEvC,qBACC,oBAAC,QAAD;MACE,YAAW;MACX,cAAY,EAAE,gCAAgC,cAAc;MAC5D,UAAA;MACA,WAAU;MACV,eAAY;MACZ,SAAS;MACT,MAAK;MACL,SAAQ;gBAER,oBAAC,WAAD,CAAY,CAAA;KACN,CAAA;IAEP;KACF;MAEL,oBAAC,+BAAD;GACE,eAAY;GACZ,eAAe;IACb,IAAI,IAAI,kBAAkB,CAAC,EAAE,CAAC;GAChC;GACa;EACd,CAAA,CACoB;;AAE3B"}

package/dist/es/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.mjs

@@ -0,0 +1,36 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import { RemoveAttachmentPreviewButton } from "../RemoveAttachmentPreviewButton.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx
+var UnsupportedAttachmentPreview = ({ attachment, removeAttachments }) => {
+	const { IconUnsupportedAttachment } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { id } = attachment.localMetadata ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__attachment-preview-unsupported",
+		"data-testid": "attachment-preview-unsupported",
+		children: [
+			/* @__PURE__ */ jsx(IconUnsupportedAttachment, {}),
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__attachment-preview-unsupported__metadata",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "str-chat__attachment-preview-unsupported__title",
+					"data-testid": "unsupported-attachment-preview-title",
+					children: t("common.unsupportedAttachment.text", "Unsupported attachment")
+				})
+			}),
+			/* @__PURE__ */ jsx(RemoveAttachmentPreviewButton, {
+				"data-testid": "file-preview-item-delete-button",
+				onClick: () => {
+					if (id) removeAttachments([id]);
+				}
+			})
+		]
+	});
+};
+//#endregion
+export { UnsupportedAttachmentPreview };
+
+//# sourceMappingURL=UnsupportedAttachmentPreview.mjs.map

package/dist/es/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnsupportedAttachmentPreview.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/AttachmentPreviewList/UnsupportedAttachmentPreview.tsx"],"sourcesContent":["import React from 'react';\nimport type { AnyLocalAttachment, LocalUploadAttachment } from 'stream-chat';\nimport { useComponentContextIcons, useTranslationContext } from '../../../context';\nimport { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';\n\nexport type UnsupportedAttachmentPreviewProps<\n  CustomLocalMetadata = Record<string, unknown>,\n> = {\n  attachment: AnyLocalAttachment<CustomLocalMetadata>;\n  handleRetry: (\n    attachment: LocalUploadAttachment,\n  ) => void | Promise<LocalUploadAttachment | undefined>;\n  removeAttachments: (ids: string[]) => void;\n};\n\nexport const UnsupportedAttachmentPreview = ({\n  attachment,\n  removeAttachments,\n}: UnsupportedAttachmentPreviewProps) => {\n  const { IconUnsupportedAttachment } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n  const { id } = attachment.localMetadata ?? {};\n\n  return (\n    <div\n      className='str-chat__attachment-preview-unsupported'\n      data-testid='attachment-preview-unsupported'\n    >\n      <IconUnsupportedAttachment />\n      <div className='str-chat__attachment-preview-unsupported__metadata'>\n        <div\n          className='str-chat__attachment-preview-unsupported__title'\n          data-testid='unsupported-attachment-preview-title'\n        >\n          {t('common.unsupportedAttachment.text', 'Unsupported attachment')}\n        </div>\n      </div>\n      <RemoveAttachmentPreviewButton\n        data-testid='file-preview-item-delete-button'\n        onClick={() => {\n          if (id) removeAttachments([id]);\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAeA,IAAa,gCAAgC,EAC3C,YACA,wBACuC;CACvC,MAAM,EAAE,8BAA8B,yBAAyB;CAC/D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,OAAO,WAAW,iBAAiB,CAAC;CAE5C,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd;GAIE,oBAAC,2BAAD,CAA4B,CAAA;GAC5B,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KACE,WAAU;KACV,eAAY;eAEX,EAAE,qCAAqC,wBAAwB;IAC7D,CAAA;GACF,CAAA;GACL,oBAAC,+BAAD;IACE,eAAY;IACZ,eAAe;KACb,IAAI,IAAI,kBAAkB,CAAC,EAAE,CAAC;IAChC;GACD,CAAA;EACE;;AAET"}

package/dist/es/components/MessageComposer/AttachmentPreviewList/VoiceRecordingPreviewSlot.mjs

@@ -0,0 +1,29 @@
+import { useMessageComposerController } from "../hooks/useMessageComposerController.mjs";
+import { useAttachmentsForPreview } from "../hooks/useAttachmentsForPreview.mjs";
+import { AudioAttachmentPreview } from "./AudioAttachmentPreview.mjs";
+import "react";
+import { isLocalVoiceRecordingAttachment } from "stream-chat";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/MessageComposer/AttachmentPreviewList/VoiceRecordingPreviewSlot.tsx
+/**
+* Dedicated slot for voice recording preview(s), rendered apart from the main attachment preview list
+*/
+var VoiceRecordingPreviewSlot = ({ VoiceRecordingPreview = AudioAttachmentPreview }) => {
+	const messageComposer = useMessageComposerController();
+	const { attachments } = useAttachmentsForPreview();
+	const firstVoice = attachments.filter(isLocalVoiceRecordingAttachment)[0];
+	if (!firstVoice) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__message-composer-voice-preview-slot",
+		"data-testid": "voice-preview-slot",
+		children: /* @__PURE__ */ jsx(VoiceRecordingPreview, {
+			attachment: firstVoice,
+			handleRetry: messageComposer.attachmentManager.uploadAttachment,
+			removeAttachments: messageComposer.attachmentManager.removeAttachments
+		})
+	});
+};
+//#endregion
+export { VoiceRecordingPreviewSlot };
+
+//# sourceMappingURL=VoiceRecordingPreviewSlot.mjs.map