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

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

@@ -1,20 +1,19 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { PlayButton } from "../../Button/PlayButton.mjs";
-import { AttachmentUploadedSizeIndicator } from "../../Loading/AttachmentUploadedSizeIndicator.mjs";
 import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
-import { isUploadConfirmationPending } from "../../Attachment/hooks/useAttachmentUploadState.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";
-import { isVoiceRecordingAttachment } from "stream-chat";
 //#region src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx
 var audioPlayerStateSelector = (state) => ({
 	canPlayRecord: state.canPlayRecord,
@@ -28,13 +27,14 @@ var AudioAttachmentPreview = ({ attachment, handleRetry, removeAttachments }) =>
 	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 ?? attachment.file_size,
-		mimeType: attachment.localMetadata.file?.type ?? attachment.mime_type,
+		fileSize: attachment.localMetadata.file?.size ?? file_size,
+		mimeType: attachment.localMetadata.file?.type ?? mime_type,
 		requester: attachment.localMetadata.id,
 		src: url,
 		title: attachment.title,
-		waveformData: attachment.waveform_data
+		waveformData: waveform_data
 	});
 	useEffect(() => {
 		audioPlayer?.cancelScheduledRemoval();
@@ -43,7 +43,7 @@ var AudioAttachmentPreview = ({ attachment, handleRetry, removeAttachments }) =>
 		};
 	}, [audioPlayer]);
 	const { canPlayRecord, isPlaying, playbackRate, progressPercent, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
-	const resolvedDuration = audioPlayer?.durationSeconds ?? attachment.duration;
+	const resolvedDuration = audioPlayer?.durationSeconds ?? duration;
 	const hasWaveform = !!audioPlayer?.waveformData?.length;
 	const hasSizeLimitError = uploadPermissionCheck?.reason === "size_limit";
 	const hasFatalError = uploadState === "blocked" || hasSizeLimitError;
@@ -65,7 +65,7 @@ var AudioAttachmentPreview = ({ attachment, handleRetry, removeAttachments }) =>
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "str-chat__attachment-preview-file-name",
 					title: attachment.title,
-					children: isVoiceRecordingAttachment(attachment) ? t("Voice message") : 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, {
@@ -90,28 +90,28 @@ var AudioAttachmentPreview = ({ attachment, handleRetry, removeAttachments }) =>
 						secondsElapsed
 					})] }) : hasFatalError ? /* @__PURE__ */ jsxs("div", {
 						className: "str-chat__attachment-preview-file__fatal-error",
-						children: [/* @__PURE__ */ jsx(IconExclamationMark, {}), /* @__PURE__ */ jsx("span", { children: hasSizeLimitError ? t("File too large") : uploadState === "blocked" ? t("Upload blocked") : t("Upload failed") })]
+						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("Upload error") }),
+							/* @__PURE__ */ jsx("span", { children: t("messageComposer.audioAttachmentPreview.uploadError.text", "Upload error") }),
 							/* @__PURE__ */ jsx("button", {
-								"aria-label": t("aria/Retry upload"),
+								"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("Retry upload")
+								children: t("messageComposer.audioAttachmentPreview.retryUpload.text", "Retry upload")
 							})
 						]
 					})]
 				})]
 			}),
 			audioPlayer && canPlayRecord && /* @__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" }),
 				onClick: audioPlayer.increasePlaybackRate,
 				children: ["x", playbackRate?.toString()]
 			}),

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

@@ -1 +1 @@
-{"version":3,"file":"AudioAttachmentPreview.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/AttachmentPreviewList/AudioAttachmentPreview.tsx"],"sourcesContent":["import type { UploadAttachmentPreviewProps } from './types';\nimport {\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 { isUploadConfirmationPending } from '../../Attachment/hooks/useAttachmentUploadState';\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\n  const { t } = useTranslationContext();\n  const { id, previewUri, uploadPermissionCheck, uploadProgress, uploadState } =\n    attachment.localMetadata ?? {};\n  const url = attachment.asset_url || previewUri;\n\n  const audioPlayer = useAudioPlayer({\n    fileSize: attachment.localMetadata.file?.size ?? attachment.file_size,\n    mimeType: attachment.localMetadata.file?.type ?? attachment.mime_type,\n    requester: attachment.localMetadata.id,\n    src: url,\n    title: attachment.title,\n    waveformData: attachment.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 ?? attachment.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) ? t('Voice message') : 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('File too large')\n                  : uploadState === 'blocked'\n                    ? t('Upload blocked')\n                    : t('Upload failed')}\n              </span>\n            </div>\n          ) : (\n            <div className='str-chat__attachment-preview-file__retriable-error'>\n              <IconExclamationTriangleFill />\n              <span>{t('Upload error')}</span>\n              <button\n                aria-label={t('aria/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('Retry upload')}\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n      {audioPlayer && canPlayRecord && (\n        <PlaybackRateButton\n          aria-label={t('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":"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"}
+{"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":"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"}

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

@@ -1,17 +1,17 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
-import { AttachmentUploadedSizeIndicator } from "../../Loading/AttachmentUploadedSizeIndicator.mjs";
 import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
-import { isUploadConfirmationPending } from "../../Attachment/hooks/useAttachmentUploadState.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("FilePreview");
+	const { t } = useTranslationContext();
 	const { id, uploadPermissionCheck, uploadProgress, uploadState } = attachment.localMetadata ?? {};
 	const hasSizeLimitError = uploadPermissionCheck?.reason === "size_limit";
 	const hasFatalError = uploadState === "blocked" || hasSizeLimitError;
@@ -25,7 +25,7 @@ var FileAttachmentPreview = ({ attachment, handleRetry, removeAttachments }) =>
 				className: "str-chat__attachment-preview-file__icon",
 				children: /* @__PURE__ */ jsx(FileIcon, {
 					fileName: attachment.title,
-					mimeType: attachment.mime_type
+					mimeType: attachment.custom?.mime_type
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -44,22 +44,22 @@ var FileAttachmentPreview = ({ attachment, handleRetry, removeAttachments }) =>
 						/* @__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("File too large") : uploadState === "blocked" ? t("Upload blocked") : t("Upload failed") })]
+							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("Upload error") }),
+								/* @__PURE__ */ jsx("span", { children: t("messageComposer.audioAttachmentPreview.uploadError.text", "Upload error") }),
 								/* @__PURE__ */ jsx("button", {
-									"aria-label": t("aria/Retry upload"),
+									"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("Retry upload")
+									children: t("messageComposer.audioAttachmentPreview.retryUpload.text", "Retry upload")
 								})
 							]
 						})

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

@@ -1 +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 { isUploadConfirmationPending } from '../../Attachment/hooks/useAttachmentUploadState';\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';\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\n  const { t } = useTranslationContext('FilePreview');\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.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('File too large')\n                  : uploadState === 'blocked'\n                    ? t('Upload blocked')\n                    : t('Upload failed')}\n              </span>\n            </div>\n          )}\n          {hasRetriableError && (\n            <div className='str-chat__attachment-preview-file__retriable-error'>\n              <IconExclamationTriangleFill />\n              <span>{t('Upload error')}</span>\n              <button\n                aria-label={t('aria/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('Retry upload')}\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;CAEtF,MAAM,EAAE,MAAM,sBAAsB,aAAa;CACjD,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;IAAY,CAAA;GACpE,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,EAAE,gBAAgB,IAClB,gBAAgB,YACd,EAAE,gBAAgB,IAClB,EAAE,eAAe,EACnB,CAAA,CACH;;MAEN,qBACC,qBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,oBAAC,6BAAD,CAA8B,CAAA;QAC9B,oBAAC,QAAD,EAAA,UAAO,EAAE,cAAc,EAAQ,CAAA;QAC/B,oBAAC,UAAD;SACE,cAAY,EAAE,mBAAmB;SACjC,WAAU;SACV,eAAY;SACZ,eAAe;UACb,YAAY,UAAU;SACxB;SACA,MAAK;mBAEJ,EAAE,cAAc;QACX,CAAA;OACL;;KAEJ;MACF;;GAEL,oBAAC,+BAAD;IACE,eAAY;IACZ,eAAe;KACb,IAAI,IAAI,kBAAkB,CAAC,EAAE,CAAC;IAChC;IACa;GACd,CAAA;EACoB;;AAE3B"}
+{"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

@@ -1,6 +1,6 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 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
@@ -14,7 +14,7 @@ var GeolocationPreviewImage = () => {
 var GeolocationPreview = ({ location, PreviewImage = GeolocationPreviewImage, remove }) => {
 	const { t } = useTranslationContext();
 	const shareDuration = location.durationMs;
-	const title = shareDuration ? t("Live location") : t("Current location");
+	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",
@@ -25,21 +25,21 @@ var GeolocationPreview = ({ location, PreviewImage = GeolocationPreviewImage, re
 				children: [
 					/* @__PURE__ */ jsx("div", {
 						className: "str-chat__location-preview__data__title",
-						title: t("Shared location"),
+						title: t("messageComposer.geolocationPreview.sharedLocation.title", "Shared location"),
 						children: title
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "str-chat__location-preview__data__subtitle",
-						children: t("Location: {{ coordinates }}", { coordinates: `${location.latitude}, ${location.longitude}` })
+						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("Live for {{duration}}", { duration: t("duration/Share Location", { milliseconds: shareDuration }) })
+						children: t("messageComposer.geolocationPreview.live.text", "Live for {{duration}}", { duration: t("duration.shareLocation", { milliseconds: shareDuration }) })
 					})
 				]
 			}),
 			remove && /* @__PURE__ */ jsx(RemoveAttachmentPreviewButton, {
-				"aria-label": t("aria/Remove location attachment"),
+				"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

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

@@ -1 +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 { useComponentContextIcons, useTranslationContext } from '../../../context';\nimport { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';\n\ntype GeolocationPreviewImageProps = {\n  location: StaticLocationPreview | LiveLocationPreview;\n};\n\nconst GeolocationPreviewImage = () => {\n  const { IconLocation } = useComponentContextIcons();\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 ? t('Live location') : t('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('Shared location')}\n        >\n          {title}\n        </div>\n        <div className='str-chat__location-preview__data__subtitle'>\n          {t('Location: {{ coordinates }}', {\n            coordinates: `${location.latitude}, ${location.longitude}`,\n          })}\n        </div>\n        {shareDuration && (\n          <div className='str-chat__location-preview__data__sharing-duration'>\n            {t('Live for {{duration}}', {\n              duration: t('duration/Share Location', {\n                milliseconds: shareDuration,\n              }),\n            })}\n          </div>\n        )}\n      </div>\n      {remove && (\n        <RemoveAttachmentPreviewButton\n          aria-label={t('aria/Remove location attachment')}\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":";;;;;;AAUA,IAAM,gCAAgC;CACpC,MAAM,EAAE,iBAAiB,yBAAyB;CAClD,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,gBAAgB,EAAE,eAAe,IAAI,EAAE,kBAAkB;CAEvE,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,EAAE,iBAAiB;gBAEzB;KACE,CAAA;KACL,oBAAC,OAAD;MAAK,WAAU;gBACZ,EAAE,+BAA+B,EAChC,aAAa,GAAG,SAAS,SAAS,IAAI,SAAS,YACjD,CAAC;KACE,CAAA;KACJ,iBACC,oBAAC,OAAD;MAAK,WAAU;gBACZ,EAAE,yBAAyB,EAC1B,UAAU,EAAE,2BAA2B,EACrC,cAAc,cAChB,CAAC,EACH,CAAC;KACE,CAAA;IAEJ;;GACJ,UACC,oBAAC,+BAAD;IACE,cAAY,EAAE,iCAAiC;IAC/C,WAAU;IACV,eAAY;IACZ,SAAS;GACV,CAAA;EAEA;;AAET"}
+{"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

@@ -1,17 +1,16 @@
 import { useComponentContext } from "../../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../../context/TranslationContext.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { UploadProgressIndicator } from "../../Loading/UploadProgressIndicator.mjs";
-import { isUploadConfirmationPending } from "../../Attachment/hooks/useAttachmentUploadState.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";
-import { isVideoAttachment } from "stream-chat";
 //#region src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
 var MediaAttachmentPreview = ({ attachment, handleRetry, openPreview, removeAttachments }) => {
 	const { IconExclamationMark, IconRetry } = useComponentContextIcons();
@@ -71,7 +70,7 @@ var MediaAttachmentPreview = ({ attachment, handleRetry, openPreview, removeAtta
 					hasFatalError && /* @__PURE__ */ jsx(IconExclamationMark, {}),
 					hasRetriableError && /* @__PURE__ */ jsx(Button, {
 						appearance: "solid",
-						"aria-label": t("aria/Retry upload"),
+						"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",

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

@@ -1 +1 @@
-{"version":3,"file":"MediaAttachmentPreview.mjs","names":[],"sources":["../../../../../src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx"],"sourcesContent":["import type { UploadAttachmentPreviewProps } from './types';\nimport {\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 { isUploadConfirmationPending } from '../../Attachment/hooks/useAttachmentUploadState';\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\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('aria/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;CAEpE,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,mBAAmB;MACjC,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"}
+{"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

@@ -1,6 +1,6 @@
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 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
@@ -18,7 +18,7 @@ var UnsupportedAttachmentPreview = ({ attachment, removeAttachments }) => {
 				children: /* @__PURE__ */ jsx("div", {
 					className: "str-chat__attachment-preview-unsupported__title",
 					"data-testid": "unsupported-attachment-preview-title",
-					children: t("Unsupported attachment")
+					children: t("common.unsupportedAttachment.text", "Unsupported attachment")
 				})
 			}),
 			/* @__PURE__ */ jsx(RemoveAttachmentPreviewButton, {

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

@@ -1 +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\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('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;CAE/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,wBAAwB;IACxB,CAAA;GACF,CAAA;GACL,oBAAC,+BAAD;IACE,eAAY;IACZ,eAAe;KACb,IAAI,IAAI,kBAAkB,CAAC,EAAE,CAAC;IAChC;GACD,CAAA;EACE;;AAET"}
+{"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

@@ -1,9 +1,9 @@
+import { useMessageComposerController } from "../hooks/useMessageComposerController.mjs";
 import { useAttachmentsForPreview } from "../hooks/useAttachmentsForPreview.mjs";
 import { AudioAttachmentPreview } from "./AudioAttachmentPreview.mjs";
-import { useMessageComposerController } from "../hooks/useMessageComposerController.mjs";
 import "react";
-import { jsx } from "react/jsx-runtime";
 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

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

@@ -1,7 +1,7 @@
 import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { isImageAttachment, isVideoAttachment } from "stream-chat";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/MessageComposer/AttachmentPreviewList/utils/AttachmentPreviewRoot.tsx
 var INTERACTIVE_SELECTOR = "button, a, input, textarea, select, [role=\"button\"], [role=\"link\"], [data-interactive=\"true\"]";
 function hasInteractiveAncestorBeforeRoot(target, root) {
@@ -33,7 +33,7 @@ var AttachmentPreviewRoot = ({ attachment, onPressed, openPreview, tabIndex = 0,
 	};
 	const isInteractive = canPreviewAttachment || canDownloadAttachment;
 	return /* @__PURE__ */ jsx("div", {
-		"aria-label": isInteractive ? t(canPreviewAttachment ? "aria/Show preview" : "aria/Download attachment") : void 0,
+		"aria-label": !isInteractive ? void 0 : canPreviewAttachment ? t("messageComposer.attachmentPreviewRoot.showPreview.ariaLabel", "Show preview") : t("common.downloadAttachment.ariaLabel", "Download attachment"),
 		...props,
 		onClick: handlePressed,
 		onKeyDown: isInteractive ? (e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentPreviewRoot.mjs","names":[],"sources":["../../../../../../src/components/MessageComposer/AttachmentPreviewList/utils/AttachmentPreviewRoot.tsx"],"sourcesContent":["import React, {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  useState,\n} from 'react';\nimport { useTranslationContext } from '../../../../context';\nimport {\n  isImageAttachment,\n  isVideoAttachment,\n  type LocalUploadAttachment,\n} from 'stream-chat';\n\ntype AttachmentPreviewRootProps = Omit<ComponentProps<'div'>, 'onClick' | 'onKeyDown'> & {\n  attachment: LocalUploadAttachment;\n  /**\n   * Called when the attachment preview is pressed and can be previewed.\n   * The parent is responsible for opening the gallery at the correct index.\n   */\n  openPreview?: () => void;\n  /**\n   * Returns boolean value to signal whether the event handling should be terminated immediately (return false)\n   *  or default logic can be executed next (return true)\n   */\n  onPressed?: (e: MouseEvent<Element> | KeyboardEvent<Element>) => boolean;\n};\n\nconst INTERACTIVE_SELECTOR =\n  'button, a, input, textarea, select, [role=\"button\"], [role=\"link\"], [data-interactive=\"true\"]';\n\nfunction hasInteractiveAncestorBeforeRoot(\n  target: EventTarget | null,\n  root: HTMLElement | null,\n): boolean {\n  if (!(target instanceof Element) || !root) return false;\n\n  let el: Element | null = target;\n  while (el && el !== root) {\n    if (el.matches(INTERACTIVE_SELECTOR)) return true;\n    el = el.parentElement;\n  }\n  return false;\n}\n\n// todo: use this component for all the attachment previews\nexport const AttachmentPreviewRoot = ({\n  attachment,\n  onPressed,\n  openPreview,\n  tabIndex = 0,\n  ...props\n}: AttachmentPreviewRootProps) => {\n  const { t } = useTranslationContext();\n  const [root, setRoot] = useState<HTMLDivElement | null>(null);\n  const url =\n    attachment.asset_url || attachment.image_url || attachment.localMetadata.previewUri;\n\n  const canDownloadAttachment = false; //!!url;\n\n  const canPreviewAttachment =\n    !!openPreview &&\n    ((!!url && isImageAttachment(attachment)) || isVideoAttachment(attachment));\n\n  const handlePressed = (e: MouseEvent<Element> | KeyboardEvent<Element>) => {\n    if (e.defaultPrevented) return;\n\n    if (hasInteractiveAncestorBeforeRoot(e.target as Element, root)) return;\n\n    if (onPressed) {\n      const shouldContinue = onPressed(e);\n      if (!shouldContinue) return;\n    }\n\n    if (canPreviewAttachment) {\n      openPreview();\n      return;\n    }\n\n    if (canDownloadAttachment) {\n      window.open(url, '_blank', 'noopener,noreferrer');\n    }\n  };\n\n  const isInteractive = canPreviewAttachment || canDownloadAttachment;\n\n  return (\n    <div\n      aria-label={\n        isInteractive\n          ? t(canPreviewAttachment ? 'aria/Show preview' : 'aria/Download attachment')\n          : undefined\n      }\n      {...props}\n      onClick={handlePressed}\n      onKeyDown={\n        isInteractive\n          ? (e) => {\n              if (e.key !== 'Enter' && e.key !== ' ') return;\n              handlePressed(e);\n              e.preventDefault();\n            }\n          : undefined\n      }\n      ref={setRoot}\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={isInteractive ? tabIndex : -1}\n    >\n      {props.children}\n    </div>\n  );\n};\n"],"mappings":";;;;;AA2BA,IAAM,uBACJ;AAEF,SAAS,iCACP,QACA,MACS;CACT,IAAI,EAAE,kBAAkB,YAAY,CAAC,MAAM,OAAO;CAElD,IAAI,KAAqB;CACzB,OAAO,MAAM,OAAO,MAAM;EACxB,IAAI,GAAG,QAAQ,oBAAoB,GAAG,OAAO;EAC7C,KAAK,GAAG;CACV;CACA,OAAO;AACT;AAGA,IAAa,yBAAyB,EACpC,YACA,WACA,aACA,WAAW,GACX,GAAG,YAC6B;CAChC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,CAAC,MAAM,WAAW,SAAgC,IAAI;CAC5D,MAAM,MACJ,WAAW,aAAa,WAAW,aAAa,WAAW,cAAc;CAE3E,MAAM,wBAAwB;;CAE9B,MAAM,uBACJ,CAAC,CAAC,gBACA,CAAC,CAAC,OAAO,kBAAkB,UAAU,KAAM,kBAAkB,UAAU;CAE3E,MAAM,iBAAiB,MAAoD;EACzE,IAAI,EAAE,kBAAkB;EAExB,IAAI,iCAAiC,EAAE,QAAmB,IAAI,GAAG;EAEjE,IAAI;OAEE,CADmB,UAAU,CAC5B,GAAgB;EAAA;EAGvB,IAAI,sBAAsB;GACxB,YAAY;GACZ;EACF;CAKF;CAEA,MAAM,gBAAgB,wBAAwB;CAE9C,OACE,oBAAC,OAAD;EACE,cACE,gBACI,EAAE,uBAAuB,sBAAsB,0BAA0B,IACzE,KAAA;EAEN,GAAI;EACJ,SAAS;EACT,WACE,iBACK,MAAM;GACL,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;GACxC,cAAc,CAAC;GACf,EAAE,eAAe;EACnB,IACA,KAAA;EAEN,KAAK;EACL,MAAM,gBAAgB,WAAW,KAAA;EACjC,UAAU,gBAAgB,WAAW;YAEpC,MAAM;CACJ,CAAA;AAET"}
+{"version":3,"file":"AttachmentPreviewRoot.mjs","names":[],"sources":["../../../../../../src/components/MessageComposer/AttachmentPreviewList/utils/AttachmentPreviewRoot.tsx"],"sourcesContent":["import React, {\n  type ComponentProps,\n  type KeyboardEvent,\n  type MouseEvent,\n  useState,\n} from 'react';\nimport { useTranslationContext } from '../../../../context';\nimport {\n  isImageAttachment,\n  isVideoAttachment,\n  type LocalUploadAttachment,\n} from 'stream-chat';\n\ntype AttachmentPreviewRootProps = Omit<ComponentProps<'div'>, 'onClick' | 'onKeyDown'> & {\n  attachment: LocalUploadAttachment;\n  /**\n   * Called when the attachment preview is pressed and can be previewed.\n   * The parent is responsible for opening the gallery at the correct index.\n   */\n  openPreview?: () => void;\n  /**\n   * Returns boolean value to signal whether the event handling should be terminated immediately (return false)\n   *  or default logic can be executed next (return true)\n   */\n  onPressed?: (e: MouseEvent<Element> | KeyboardEvent<Element>) => boolean;\n};\n\nconst INTERACTIVE_SELECTOR =\n  'button, a, input, textarea, select, [role=\"button\"], [role=\"link\"], [data-interactive=\"true\"]';\n\nfunction hasInteractiveAncestorBeforeRoot(\n  target: EventTarget | null,\n  root: HTMLElement | null,\n): boolean {\n  if (!(target instanceof Element) || !root) return false;\n\n  let el: Element | null = target;\n  while (el && el !== root) {\n    if (el.matches(INTERACTIVE_SELECTOR)) return true;\n    el = el.parentElement;\n  }\n  return false;\n}\n\n// todo: use this component for all the attachment previews\nexport const AttachmentPreviewRoot = ({\n  attachment,\n  onPressed,\n  openPreview,\n  tabIndex = 0,\n  ...props\n}: AttachmentPreviewRootProps) => {\n  const { t } = useTranslationContext();\n  const [root, setRoot] = useState<HTMLDivElement | null>(null);\n  const url =\n    attachment.asset_url || attachment.image_url || attachment.localMetadata.previewUri;\n\n  const canDownloadAttachment = false; //!!url;\n\n  const canPreviewAttachment =\n    !!openPreview &&\n    ((!!url && isImageAttachment(attachment)) || isVideoAttachment(attachment));\n\n  const handlePressed = (e: MouseEvent<Element> | KeyboardEvent<Element>) => {\n    if (e.defaultPrevented) return;\n\n    if (hasInteractiveAncestorBeforeRoot(e.target as Element, root)) return;\n\n    if (onPressed) {\n      const shouldContinue = onPressed(e);\n      if (!shouldContinue) return;\n    }\n\n    if (canPreviewAttachment) {\n      openPreview();\n      return;\n    }\n\n    if (canDownloadAttachment) {\n      window.open(url, '_blank', 'noopener,noreferrer');\n    }\n  };\n\n  const isInteractive = canPreviewAttachment || canDownloadAttachment;\n\n  return (\n    <div\n      aria-label={\n        !isInteractive\n          ? undefined\n          : canPreviewAttachment\n            ? t(\n                'messageComposer.attachmentPreviewRoot.showPreview.ariaLabel',\n                'Show preview',\n              )\n            : t('common.downloadAttachment.ariaLabel', 'Download attachment')\n      }\n      {...props}\n      onClick={handlePressed}\n      onKeyDown={\n        isInteractive\n          ? (e) => {\n              if (e.key !== 'Enter' && e.key !== ' ') return;\n              handlePressed(e);\n              e.preventDefault();\n            }\n          : undefined\n      }\n      ref={setRoot}\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={isInteractive ? tabIndex : -1}\n    >\n      {props.children}\n    </div>\n  );\n};\n"],"mappings":";;;;;AA2BA,IAAM,uBACJ;AAEF,SAAS,iCACP,QACA,MACS;CACT,IAAI,EAAE,kBAAkB,YAAY,CAAC,MAAM,OAAO;CAElD,IAAI,KAAqB;CACzB,OAAO,MAAM,OAAO,MAAM;EACxB,IAAI,GAAG,QAAQ,oBAAoB,GAAG,OAAO;EAC7C,KAAK,GAAG;CACV;CACA,OAAO;AACT;AAGA,IAAa,yBAAyB,EACpC,YACA,WACA,aACA,WAAW,GACX,GAAG,YAC6B;CAChC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,CAAC,MAAM,WAAW,SAAgC,IAAI;CAC5D,MAAM,MACJ,WAAW,aAAa,WAAW,aAAa,WAAW,cAAc;CAE3E,MAAM,wBAAwB;;CAE9B,MAAM,uBACJ,CAAC,CAAC,gBACA,CAAC,CAAC,OAAO,kBAAkB,UAAU,KAAM,kBAAkB,UAAU;CAE3E,MAAM,iBAAiB,MAAoD;EACzE,IAAI,EAAE,kBAAkB;EAExB,IAAI,iCAAiC,EAAE,QAAmB,IAAI,GAAG;EAEjE,IAAI;OAEE,CADmB,UAAU,CAC5B,GAAgB;EAAA;EAGvB,IAAI,sBAAsB;GACxB,YAAY;GACZ;EACF;CAKF;CAEA,MAAM,gBAAgB,wBAAwB;CAE9C,OACE,oBAAC,OAAD;EACE,cACE,CAAC,gBACG,KAAA,IACA,uBACE,EACE,+DACA,cACF,IACA,EAAE,uCAAuC,qBAAqB;EAEtE,GAAI;EACJ,SAAS;EACT,WACE,iBACK,MAAM;GACL,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;GACxC,cAAc,CAAC;GACf,EAAE,eAAe;EACnB,IACA,KAAA;EAEN,KAAK;EACL,MAAM,gBAAgB,WAAW,KAAA;EACjC,UAAU,gBAAgB,WAAW;YAEpC,MAAM;CACJ,CAAA;AAET"}