stream-chat-react 14.11.0 → 14.12.0

package/dist/es/components/Attachment/Audio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Audio.mjs","names":[],"sources":["../../../../src/components/Attachment/Audio.tsx"],"sourcesContent":["import React from 'react';\nimport type { Attachment } from 'stream-chat';\n\nimport {\n  AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator,\n  FileSizeIndicator as DefaultFileSizeIndicator,\n  DownloadButton,\n} from './components';\nimport {\n  getAttachmentPreviewUrl,\n  useAttachmentUploadState,\n} from './hooks/useAttachmentUploadState';\nimport type { AudioPlayerState } from '../AudioPlayback/AudioPlayer';\nimport { useAudioPlayer } from '../AudioPlayback/WithAudioPlayback';\nimport { useStateStore } from '../../store';\nimport { useComponentContext, useMessageContext } from '../../context';\nimport type { AudioPlayer } from '../AudioPlayback/AudioPlayer';\nimport { PlayButton } from '../Button/PlayButton';\nimport { FileIcon } from '../FileIcon';\nimport { DurationDisplay, ProgressBar } from '../AudioPlayback';\n\ntype AudioAttachmentUIProps = {\n  audioPlayer: AudioPlayer;\n  attachment?: Attachment;\n};\n\n// todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI\nconst AudioAttachmentUI = ({ attachment, audioPlayer }: AudioAttachmentUIProps) => {\n  const {\n    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,\n    FileSizeIndicator = DefaultFileSizeIndicator,\n  } = useComponentContext();\n  const { isUploading } = useAttachmentUploadState(attachment);\n  const dataTestId = 'audio-widget';\n  const rootClassName = 'str-chat__message-attachment-audio-widget';\n\n  const { durationSeconds, isPlaying, progress, secondsElapsed } =\n    useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};\n\n  return (\n    <div className={rootClassName} data-testid={dataTestId}>\n      <div className='str-chat__message-attachment-audio-widget--play-controls'>\n        <PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />\n      </div>\n      <div className='str-chat__message-attachment-audio-widget--data'>\n        <div className='str-chat__message-attachment-audio-widget--text-first-row'>\n          <div className='str-chat__message-attachment-audio-widget--title'>\n            {audioPlayer.title}\n          </div>\n        </div>\n        <div className='str-chat__message-attachment-audio-widget--text-second-row'>\n          {/*\n            While uploading, the upload progress takes this slot — ahead of both the duration and\n            the file size. It has to outrank the duration: an audio attachment can carry one\n            (`attachment.duration`, or the player reading it off the local blob), and showing it\n            instead would leave an upload in flight with no indication at all.\n          */}\n          {isUploading ? (\n            <AttachmentUploadProgressIndicator attachment={attachment} />\n          ) : durationSeconds ? (\n            <DurationDisplay\n              duration={durationSeconds}\n              isPlaying={!!isPlaying}\n              secondsElapsed={secondsElapsed}\n            />\n          ) : (\n            <FileSizeIndicator fileSize={audioPlayer.fileSize} />\n          )}\n          <ProgressBar\n            durationSeconds={durationSeconds}\n            progress={progress ?? 0}\n            secondsElapsed={secondsElapsed}\n            seek={audioPlayer.seek}\n          />\n        </div>\n      </div>\n      <FileIcon className='str-chat__file-icon' mimeType={audioPlayer.mimeType} />\n      <DownloadButton assetUrl={audioPlayer.src} suggestedFileName={audioPlayer.title} />\n    </div>\n  );\n};\n\nexport type AudioProps = {\n  attachment: Attachment;\n};\n\nconst audioPlayerStateSelector = (state: AudioPlayerState) => ({\n  durationSeconds: state.durationSeconds,\n  isPlaying: state.isPlaying,\n  progress: state.progressPercent,\n  secondsElapsed: state.secondsElapsed,\n});\n\n/**\n * Audio attachment with play/pause button and progress bar\n */\nexport const Audio = (props: AudioProps) => {\n  const {\n    attachment: { asset_url, duration, file_size, mime_type, title, waveform_data },\n  } = props;\n\n  /**\n   * Introducing message context. This could be breaking change, therefore the fallback to {} is provided.\n   * If this component is used outside the message context, then there will be no audio player namespacing\n   * => scrolling away from the message in virtualized ML would create a new AudioPlayer instance.\n   *\n   * Edge case: the requester (message) has multiple attachments with the same assetURL - does not happen\n   * with the default SDK components, but can be done with custom API calls.In this case all the Audio\n   * widgets will share the state.\n   */\n  const { message, threadList } = useMessageContext() ?? {};\n\n  const audioPlayer = useAudioPlayer({\n    durationSeconds: duration,\n    fileSize: file_size,\n    mimeType: mime_type,\n    requester:\n      message?.id &&\n      `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`,\n    // Falls back to the local blob preview while the upload is still in flight.\n    src: getAttachmentPreviewUrl(props.attachment, asset_url),\n    title,\n    waveformData: waveform_data,\n  });\n\n  return audioPlayer ? (\n    <AudioAttachmentUI attachment={props.attachment} audioPlayer={audioPlayer} />\n  ) : null;\n};\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,IAAM,qBAAqB,EAAE,YAAY,kBAA0C;CACjF,MAAM,EACJ,mCAAA,sCAAoC,mCACpC,mBAAA,sBAAoB,sBAClB,oBAAoB;CACxB,MAAM,EAAE,gBAAgB,yBAAyB,UAAU;CAC3D,MAAM,aAAa;CACnB,MAAM,gBAAgB;CAEtB,MAAM,EAAE,iBAAiB,WAAW,UAAU,mBAC5C,cAAc,aAAa,OAAO,wBAAwB,KAAK,CAAC;CAElE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,eAAa;YAA5C;GACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,YAAD;KAAY,WAAW,CAAC,CAAC;KAAW,SAAS,YAAY;IAAa,CAAA;GACnE,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MAAK,WAAU;gBACZ,YAAY;KACV,CAAA;IACF,CAAA,GACL,qBAAC,OAAD;KAAK,WAAU;eAAf,CAOG,cACC,oBAAC,qCAAD,EAA+C,WAAa,CAAA,IAC1D,kBACF,oBAAC,iBAAD;MACE,UAAU;MACV,WAAW,CAAC,CAAC;MACG;KACjB,CAAA,IAED,oBAAC,qBAAD,EAAmB,UAAU,YAAY,SAAW,CAAA,GAEtD,oBAAC,aAAD;MACmB;MACjB,UAAU,YAAY;MACN;MAChB,MAAM,YAAY;KACnB,CAAA,CACE;MACF;;GACL,oBAAC,UAAD;IAAU,WAAU;IAAsB,UAAU,YAAY;GAAW,CAAA;GAC3E,oBAAC,gBAAD;IAAgB,UAAU,YAAY;IAAK,mBAAmB,YAAY;GAAQ,CAAA;EAC/E;;AAET;AAMA,IAAM,4BAA4B,WAA6B;CAC7D,iBAAiB,MAAM;CACvB,WAAW,MAAM;CACjB,UAAU,MAAM;CAChB,gBAAgB,MAAM;AACxB;;;;AAKA,IAAa,SAAS,UAAsB;CAC1C,MAAM,EACJ,YAAY,EAAE,WAAW,UAAU,WAAW,WAAW,OAAO,oBAC9D;;;;;;;;;;CAWJ,MAAM,EAAE,SAAS,eAAe,kBAAkB,KAAK,CAAC;CAExD,MAAM,cAAc,eAAe;EACjC,iBAAiB;EACjB,UAAU;EACV,UAAU;EACV,WACE,SAAS,MACT,GAAG,aAAc,QAAQ,aAAa,QAAQ,KAAM,KAAK,QAAQ;EAEnE,KAAK,wBAAwB,MAAM,YAAY,SAAS;EACxD;EACA,cAAc;CAChB,CAAC;CAED,OAAO,cACL,oBAAC,mBAAD;EAAmB,YAAY,MAAM;EAAyB;CAAc,CAAA,IAC1E;AACN"}

package/dist/es/components/Attachment/FileAttachment.mjs

@@ -0,0 +1,47 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { FileSizeIndicator } from "./components/FileSizeIndicator.mjs";
+import { useAttachmentUploadState } from "./hooks/useAttachmentUploadState.mjs";
+import { AttachmentUploadProgressIndicator } from "./components/AttachmentUploadProgressIndicator.mjs";
+import { DownloadButton } from "./components/DownloadButton.mjs";
+import { FileIcon } from "../FileIcon/FileIcon.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Attachment/FileAttachment.tsx
+var FileAttachment = ({ attachment }) => {
+	const { AttachmentFileIcon, AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$1 = AttachmentUploadProgressIndicator, FileSizeIndicator: FileSizeIndicator$1 = FileSizeIndicator } = useComponentContext();
+	const FileIconComponent = AttachmentFileIcon ?? FileIcon;
+	const { isUploading } = useAttachmentUploadState(attachment);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-attachment-file--item",
+		"data-testid": "attachment-file",
+		children: [
+			/* @__PURE__ */ jsx(FileIconComponent, {
+				className: "str-chat__file-icon",
+				fileName: attachment.title,
+				mimeType: attachment.mime_type
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__message-attachment-file--item__info",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__message-attachment-file--item__first-row",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "str-chat__message-attachment-file--item__name",
+						"data-testid": "file-title",
+						children: attachment.title
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "str-chat__message-attachment-file--item__data",
+					children: isUploading ? /* @__PURE__ */ jsx(AttachmentUploadProgressIndicator$1, { attachment }) : /* @__PURE__ */ jsx(FileSizeIndicator$1, { fileSize: attachment.file_size })
+				})]
+			}),
+			/* @__PURE__ */ jsx(DownloadButton, {
+				assetUrl: attachment.asset_url,
+				suggestedFileName: attachment.title
+			})
+		]
+	});
+};
+//#endregion
+export { FileAttachment };
+
+//# sourceMappingURL=FileAttachment.mjs.map

package/dist/es/components/Attachment/FileAttachment.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileAttachment.mjs","names":[],"sources":["../../../../src/components/Attachment/FileAttachment.tsx"],"sourcesContent":["import React from 'react';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { FileIcon } from '../FileIcon';\nimport type { Attachment } from 'stream-chat';\n\nimport {\n  AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator,\n  FileSizeIndicator as DefaultFileSizeIndicator,\n  DownloadButton,\n} from './components';\nimport { useAttachmentUploadState } from './hooks/useAttachmentUploadState';\n\nexport type FileAttachmentProps = {\n  attachment: Attachment;\n};\n\nexport const FileAttachment = ({ attachment }: FileAttachmentProps) => {\n  const {\n    AttachmentFileIcon,\n    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,\n    FileSizeIndicator = DefaultFileSizeIndicator,\n  } = useComponentContext();\n  const FileIconComponent = AttachmentFileIcon ?? FileIcon;\n  const { isUploading } = useAttachmentUploadState(attachment);\n  return (\n    <div\n      className='str-chat__message-attachment-file--item'\n      data-testid='attachment-file'\n    >\n      <FileIconComponent\n        className='str-chat__file-icon'\n        fileName={attachment.title}\n        mimeType={attachment.mime_type}\n      />\n      <div className='str-chat__message-attachment-file--item__info'>\n        <div className='str-chat__message-attachment-file--item__first-row'>\n          <div\n            className='str-chat__message-attachment-file--item__name'\n            data-testid='file-title'\n          >\n            {attachment.title}\n          </div>\n        </div>\n        <div className='str-chat__message-attachment-file--item__data'>\n          {/* While uploading, the upload progress takes the place of the file size. */}\n          {isUploading ? (\n            <AttachmentUploadProgressIndicator attachment={attachment} />\n          ) : (\n            <FileSizeIndicator fileSize={attachment.file_size} />\n          )}\n        </div>\n      </div>\n      {/* DownloadButton renders nothing without an asset_url, which a pending upload lacks. */}\n      <DownloadButton\n        assetUrl={attachment.asset_url}\n        suggestedFileName={attachment.title}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAgBA,IAAa,kBAAkB,EAAE,iBAAsC;CACrE,MAAM,EACJ,oBACA,mCAAA,sCAAoC,mCACpC,mBAAA,sBAAoB,sBAClB,oBAAoB;CACxB,MAAM,oBAAoB,sBAAsB;CAChD,MAAM,EAAE,gBAAgB,yBAAyB,UAAU;CAC3D,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd;GAIE,oBAAC,mBAAD;IACE,WAAU;IACV,UAAU,WAAW;IACrB,UAAU,WAAW;GACtB,CAAA;GACD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MACE,WAAU;MACV,eAAY;gBAEX,WAAW;KACT,CAAA;IACF,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;eAEZ,cACC,oBAAC,qCAAD,EAA+C,WAAa,CAAA,IAE5D,oBAAC,qBAAD,EAAmB,UAAU,WAAW,UAAY,CAAA;IAEnD,CAAA,CACF;;GAEL,oBAAC,gBAAD;IACE,UAAU,WAAW;IACrB,mBAAmB,WAAW;GAC/B,CAAA;EACE;;AAET"}

package/dist/es/components/Attachment/Geolocation.mjs

@@ -0,0 +1,77 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { ExternalLinkIcon } from "./icons.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Attachment/Geolocation.tsx
+var Geolocation = ({ GeolocationAttachmentMapPlaceholder = DefaultGeolocationAttachmentMapPlaceholder, GeolocationMap, location }) => {
+	const { channel, client } = useChatContext();
+	const { t } = useTranslationContext();
+	const [stoppedSharing, setStoppedSharing] = useState(!!location.end_at && new Date(location.end_at).getTime() < (/* @__PURE__ */ new Date()).getTime());
+	const timeoutRef = useRef(void 0);
+	const isMyLocation = location.user_id === client.userID;
+	const isLiveLocation = !!location.end_at;
+	useEffect(() => {
+		if (!location.end_at) return;
+		clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => setStoppedSharing(true), new Date(location.end_at).getTime() - Date.now());
+	}, [location.end_at]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-attachment-geolocation",
+		"data-testid": "attachment-geolocation",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "str-chat__message-attachment-geolocation__location-preview",
+			children: GeolocationMap ? /* @__PURE__ */ jsx(GeolocationMap, {
+				latitude: location.latitude,
+				longitude: location.longitude
+			}) : /* @__PURE__ */ jsx(GeolocationAttachmentMapPlaceholder, { location })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "str-chat__message-attachment-geolocation__status",
+			children: isLiveLocation ? stoppedSharing ? t("Location sharing ended") : isMyLocation ? /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__message-attachment-geolocation__status--active",
+				children: [/* @__PURE__ */ jsx(Button, {
+					appearance: "outline",
+					className: "str-chat__message-attachment-geolocation__stop-sharing-button",
+					onClick: () => channel?.stopLiveLocationSharing(location),
+					size: "sm",
+					variant: "secondary",
+					children: t("Stop sharing")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "str-chat__message-attachment-geolocation__status--active-until",
+					children: t("Live until {{ timestamp }}", { timestamp: t("timestamp/LiveLocation", { timestamp: location.end_at }) })
+				})]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__message-attachment-geolocation__status--active",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__message-attachment-geolocation__status--active-status",
+					children: t("Live location")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "str-chat__message-attachment-geolocation__status--active-until",
+					children: t("Live until {{ timestamp }}", { timestamp: t("timestamp/LiveLocation", { timestamp: location.end_at }) })
+				})]
+			}) : t("Current location")
+		})]
+	});
+};
+var DefaultGeolocationAttachmentMapPlaceholder = ({ location }) => {
+	const { t } = useTranslationContext();
+	const { IconLocation } = useComponentContextIcons();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-attachment-geolocation__placeholder",
+		"data-testid": "geolocation-attachment-map-placeholder",
+		children: [/* @__PURE__ */ jsx(IconLocation, {}), /* @__PURE__ */ jsx("a", {
+			"aria-label": t("Open location in a map"),
+			className: "str-chat__message-attachment-geolocation__placeholder-link",
+			href: `https://maps.google.com?q=${[location.latitude, location.longitude].join()}`,
+			rel: "noreferrer",
+			target: "_blank",
+			children: /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+		})]
+	});
+};
+//#endregion
+export { Geolocation };
+
+//# sourceMappingURL=Geolocation.mjs.map

package/dist/es/components/Attachment/Geolocation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Geolocation.mjs","names":[],"sources":["../../../../src/components/Attachment/Geolocation.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport { useEffect } from 'react';\nimport { useRef, useState } from 'react';\nimport React from 'react';\nimport type { Coords, SharedLocationResponse } from 'stream-chat';\nimport {\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { ExternalLinkIcon } from './icons';\nimport { Button } from '../Button';\n\nexport type GeolocationMapProps = Coords;\n\nexport type GeolocationProps = {\n  location: SharedLocationResponse;\n  GeolocationAttachmentMapPlaceholder?: ComponentType<GeolocationAttachmentMapPlaceholderProps>;\n  GeolocationMap?: ComponentType<GeolocationMapProps>;\n};\n\nexport const Geolocation = ({\n  GeolocationAttachmentMapPlaceholder = DefaultGeolocationAttachmentMapPlaceholder,\n  GeolocationMap,\n  location,\n}: GeolocationProps) => {\n  const { channel, client } = useChatContext();\n  const { t } = useTranslationContext();\n\n  const [stoppedSharing, setStoppedSharing] = useState(\n    !!location.end_at && new Date(location.end_at).getTime() < new Date().getTime(),\n  );\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const isMyLocation = location.user_id === client.userID;\n  const isLiveLocation = !!location.end_at;\n\n  useEffect(() => {\n    if (!location.end_at) return;\n    clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(\n      () => setStoppedSharing(true),\n      new Date(location.end_at).getTime() - Date.now(),\n    );\n  }, [location.end_at]);\n\n  return (\n    <div\n      className='str-chat__message-attachment-geolocation'\n      data-testid='attachment-geolocation'\n    >\n      <div className='str-chat__message-attachment-geolocation__location-preview'>\n        {GeolocationMap ? (\n          <GeolocationMap latitude={location.latitude} longitude={location.longitude} />\n        ) : (\n          <GeolocationAttachmentMapPlaceholder location={location} />\n        )}\n      </div>\n      <div className='str-chat__message-attachment-geolocation__status'>\n        {isLiveLocation ? (\n          stoppedSharing ? (\n            t('Location sharing ended')\n          ) : isMyLocation ? (\n            <div className='str-chat__message-attachment-geolocation__status--active'>\n              <Button\n                appearance='outline'\n                className='str-chat__message-attachment-geolocation__stop-sharing-button'\n                onClick={() => channel?.stopLiveLocationSharing(location)}\n                size='sm'\n                variant='secondary'\n              >\n                {t('Stop sharing')}\n              </Button>\n              <div className='str-chat__message-attachment-geolocation__status--active-until'>\n                {t('Live until {{ timestamp }}', {\n                  timestamp: t('timestamp/LiveLocation', { timestamp: location.end_at }),\n                })}\n              </div>\n            </div>\n          ) : (\n            <div className='str-chat__message-attachment-geolocation__status--active'>\n              <div className='str-chat__message-attachment-geolocation__status--active-status'>\n                {t('Live location')}\n              </div>\n              <div className='str-chat__message-attachment-geolocation__status--active-until'>\n                {t('Live until {{ timestamp }}', {\n                  timestamp: t('timestamp/LiveLocation', { timestamp: location.end_at }),\n                })}\n              </div>\n            </div>\n          )\n        ) : (\n          t('Current location')\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport type GeolocationAttachmentMapPlaceholderProps = {\n  location: SharedLocationResponse;\n};\n\nconst DefaultGeolocationAttachmentMapPlaceholder = ({\n  location,\n}: GeolocationAttachmentMapPlaceholderProps) => {\n  const { t } = useTranslationContext();\n  const { IconLocation } = useComponentContextIcons();\n\n  return (\n    <div\n      className='str-chat__message-attachment-geolocation__placeholder'\n      data-testid='geolocation-attachment-map-placeholder'\n    >\n      <IconLocation />\n      <a\n        aria-label={t('Open location in a map')}\n        className='str-chat__message-attachment-geolocation__placeholder-link'\n        href={`https://maps.google.com?q=${[location.latitude, location.longitude].join()}`}\n        rel='noreferrer'\n        target='_blank'\n      >\n        <ExternalLinkIcon />\n      </a>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAqBA,IAAa,eAAe,EAC1B,sCAAsC,4CACtC,gBACA,eACsB;CACtB,MAAM,EAAE,SAAS,WAAW,eAAe;CAC3C,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,CAAC,gBAAgB,qBAAqB,SAC1C,CAAC,CAAC,SAAS,UAAU,IAAI,KAAK,SAAS,MAAM,CAAC,CAAC,QAAQ,qBAAI,IAAI,KAAK,EAAA,CAAE,QAAQ,CAChF;CACA,MAAM,aAAa,OAAkD,KAAA,CAAS;CAE9E,MAAM,eAAe,SAAS,YAAY,OAAO;CACjD,MAAM,iBAAiB,CAAC,CAAC,SAAS;CAElC,gBAAgB;EACd,IAAI,CAAC,SAAS,QAAQ;EACtB,aAAa,WAAW,OAAO;EAC/B,WAAW,UAAU,iBACb,kBAAkB,IAAI,GAC5B,IAAI,KAAK,SAAS,MAAM,CAAC,CAAC,QAAQ,IAAI,KAAK,IAAI,CACjD;CACF,GAAG,CAAC,SAAS,MAAM,CAAC;CAEpB,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,OAAD;GAAK,WAAU;aACZ,iBACC,oBAAC,gBAAD;IAAgB,UAAU,SAAS;IAAU,WAAW,SAAS;GAAY,CAAA,IAE7E,oBAAC,qCAAD,EAA+C,SAAW,CAAA;EAEzD,CAAA,GACL,oBAAC,OAAD;GAAK,WAAU;aACZ,iBACC,iBACE,EAAE,wBAAwB,IACxB,eACF,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,YAAW;KACX,WAAU;KACV,eAAe,SAAS,wBAAwB,QAAQ;KACxD,MAAK;KACL,SAAQ;eAEP,EAAE,cAAc;IACX,CAAA,GACR,oBAAC,OAAD;KAAK,WAAU;eACZ,EAAE,8BAA8B,EAC/B,WAAW,EAAE,0BAA0B,EAAE,WAAW,SAAS,OAAO,CAAC,EACvE,CAAC;IACE,CAAA,CACF;QAEL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ,EAAE,eAAe;IACf,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;eACZ,EAAE,8BAA8B,EAC/B,WAAW,EAAE,0BAA0B,EAAE,WAAW,SAAS,OAAO,CAAC,EACvE,CAAC;IACE,CAAA,CACF;QAGP,EAAE,kBAAkB;EAEnB,CAAA,CACF;;AAET;AAMA,IAAM,8CAA8C,EAClD,eAC8C;CAC9C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,iBAAiB,yBAAyB;CAElD,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,KAAD;GACE,cAAY,EAAE,wBAAwB;GACtC,WAAU;GACV,MAAM,6BAA6B,CAAC,SAAS,UAAU,SAAS,SAAS,CAAC,CAAC,KAAK;GAChF,KAAI;GACJ,QAAO;aAEP,oBAAC,kBAAD,CAAmB,CAAA;EAClB,CAAA,CACA;;AAET"}

package/dist/es/components/Attachment/Giphy.mjs

@@ -0,0 +1,62 @@
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { getGiphyDescriptiveTitle } from "./giphyAccessibility.mjs";
+import { BaseImage } from "../BaseImage/BaseImage.mjs";
+import { toGalleryItemDescriptors } from "../Gallery/GalleryContext.mjs";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Attachment/Giphy.tsx
+var Giphy = ({ attachment }) => {
+	const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } = useChannelStateContext();
+	const { BaseImage: BaseImage$1 = BaseImage } = useComponentContext();
+	const { t } = useTranslationContext();
+	const usesDefaultBaseImage = BaseImage$1 === BaseImage;
+	const imageElement = useRef(null);
+	const [attachmentConfiguration, setAttachmentConfiguration] = useState(void 0);
+	const imageDescriptors = useMemo(() => toGalleryItemDescriptors(attachment, { giphyVersionName }), [attachment, giphyVersionName]);
+	const dimensions = imageDescriptors && imageDescriptors.dimensions;
+	const imageUrl = imageDescriptors && imageDescriptors.imageUrl;
+	const title = imageDescriptors && imageDescriptors.title;
+	const resolvedImageUrl = attachmentConfiguration?.url || imageUrl;
+	const descriptiveTitle = getGiphyDescriptiveTitle(title);
+	const accessibleName = descriptiveTitle ? t("aria/Animated GIF: {{ title }}", { title: descriptiveTitle }) : t("aria/Animated GIF");
+	const imageStyleVariables = useMemo(() => {
+		const originalHeight = Number(dimensions?.height);
+		const originalWidth = Number(dimensions?.width);
+		return {
+			"--original-height": String(originalHeight > 1 ? originalHeight : 1e6),
+			"--original-width": String(originalWidth > 1 ? originalWidth : 1e6)
+		};
+	}, [dimensions?.height, dimensions?.width]);
+	useLayoutEffect(() => {
+		if (!imageElement.current || !imageAttachmentSizeHandler) return;
+		setAttachmentConfiguration(imageAttachmentSizeHandler(attachment, imageElement.current));
+	}, [attachment, imageAttachmentSizeHandler]);
+	if (!imageUrl) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(`str-chat__message-attachment-giphy`),
+		children: [/* @__PURE__ */ jsx(BaseImage$1, {
+			alt: accessibleName,
+			height: dimensions?.height,
+			ref: imageElement,
+			src: resolvedImageUrl,
+			style: imageStyleVariables,
+			width: dimensions?.width,
+			...usesDefaultBaseImage ? { showDownloadButtonOnError: false } : {}
+		}), /* @__PURE__ */ jsx(GiphyBadge, {})]
+	});
+};
+var GiphyBadge = () => {
+	const { IconGiphy } = useComponentContextIcons();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__giphy-badge",
+		children: [/* @__PURE__ */ jsx(IconGiphy, {}), "Giphy"]
+	});
+};
+//#endregion
+export { Giphy };
+
+//# sourceMappingURL=Giphy.mjs.map

package/dist/es/components/Attachment/Giphy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Giphy.mjs","names":[],"sources":["../../../../src/components/Attachment/Giphy.tsx"],"sourcesContent":["import type { Attachment } from 'stream-chat';\nimport { BaseImage as DefaultBaseImage } from '../BaseImage';\nimport { toGalleryItemDescriptors } from '../Gallery';\nimport { getGiphyDescriptiveTitle } from './giphyAccessibility';\nimport clsx from 'clsx';\nimport {\n  useChannelStateContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { type CSSProperties, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { ImageAttachmentConfiguration } from '../../types/types';\n\nexport type GiphyAttachmentProps = {\n  attachment: Attachment;\n};\n\nexport const Giphy = ({ attachment }: GiphyAttachmentProps) => {\n  const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } =\n    useChannelStateContext();\n  const { BaseImage = DefaultBaseImage } = useComponentContext();\n  const { t } = useTranslationContext();\n  const usesDefaultBaseImage = BaseImage === DefaultBaseImage;\n  const imageElement = useRef<HTMLImageElement>(null);\n  const [attachmentConfiguration, setAttachmentConfiguration] = useState<\n    ImageAttachmentConfiguration | undefined\n  >(undefined);\n\n  const imageDescriptors = useMemo(\n    () => toGalleryItemDescriptors(attachment, { giphyVersionName }),\n    [attachment, giphyVersionName],\n  );\n  const dimensions = imageDescriptors && imageDescriptors.dimensions;\n  const imageUrl = imageDescriptors && imageDescriptors.imageUrl;\n  const title = imageDescriptors && imageDescriptors.title;\n  const resolvedImageUrl = attachmentConfiguration?.url || imageUrl;\n  // For giphy attachments `imageDescriptors.alt`/`title` may both resolve to a raw\n  // media URL (Giphy payloads rarely carry a human title), which is useless to\n  // screen-reader users. Prefer a real, non-URL title; otherwise fall back to a\n  // localized generic label instead of exposing the URL as the accessible name.\n  const descriptiveTitle = getGiphyDescriptiveTitle(title);\n  const accessibleName = descriptiveTitle\n    ? t('aria/Animated GIF: {{ title }}', { title: descriptiveTitle })\n    : t('aria/Animated GIF');\n  const imageStyleVariables = useMemo(() => {\n    const originalHeight = Number(dimensions?.height);\n    const originalWidth = Number(dimensions?.width);\n\n    return {\n      '--original-height': String(originalHeight > 1 ? originalHeight : 1000000),\n      '--original-width': String(originalWidth > 1 ? originalWidth : 1000000),\n    } as CSSProperties;\n  }, [dimensions?.height, dimensions?.width]);\n\n  useLayoutEffect(() => {\n    if (!imageElement.current || !imageAttachmentSizeHandler) return;\n\n    const config = imageAttachmentSizeHandler(attachment, imageElement.current);\n    setAttachmentConfiguration(config);\n  }, [attachment, imageAttachmentSizeHandler]);\n\n  if (!imageUrl) return null;\n\n  return (\n    <div className={clsx(`str-chat__message-attachment-giphy`)}>\n      <BaseImage\n        alt={accessibleName}\n        height={dimensions?.height}\n        ref={imageElement}\n        src={resolvedImageUrl}\n        style={imageStyleVariables}\n        width={dimensions?.width}\n        {...(usesDefaultBaseImage ? { showDownloadButtonOnError: false } : {})}\n      />\n      <GiphyBadge />\n    </div>\n  );\n};\n\nconst GiphyBadge = () => {\n  const { IconGiphy } = useComponentContextIcons();\n  return (\n    <div className='str-chat__giphy-badge'>\n      <IconGiphy />\n      Giphy\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,SAAS,EAAE,iBAAuC;CAC7D,MAAM,EAAE,cAAc,kBAAkB,+BACtC,uBAAuB;CACzB,MAAM,EAAE,WAAA,cAAY,cAAqB,oBAAoB;CAC7D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,uBAAuB,gBAAc;CAC3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,CAAC,yBAAyB,8BAA8B,SAE5D,KAAA,CAAS;CAEX,MAAM,mBAAmB,cACjB,yBAAyB,YAAY,EAAE,iBAAiB,CAAC,GAC/D,CAAC,YAAY,gBAAgB,CAC/B;CACA,MAAM,aAAa,oBAAoB,iBAAiB;CACxD,MAAM,WAAW,oBAAoB,iBAAiB;CACtD,MAAM,QAAQ,oBAAoB,iBAAiB;CACnD,MAAM,mBAAmB,yBAAyB,OAAO;CAKzD,MAAM,mBAAmB,yBAAyB,KAAK;CACvD,MAAM,iBAAiB,mBACnB,EAAE,kCAAkC,EAAE,OAAO,iBAAiB,CAAC,IAC/D,EAAE,mBAAmB;CACzB,MAAM,sBAAsB,cAAc;EACxC,MAAM,iBAAiB,OAAO,YAAY,MAAM;EAChD,MAAM,gBAAgB,OAAO,YAAY,KAAK;EAE9C,OAAO;GACL,qBAAqB,OAAO,iBAAiB,IAAI,iBAAiB,GAAO;GACzE,oBAAoB,OAAO,gBAAgB,IAAI,gBAAgB,GAAO;EACxE;CACF,GAAG,CAAC,YAAY,QAAQ,YAAY,KAAK,CAAC;CAE1C,sBAAsB;EACpB,IAAI,CAAC,aAAa,WAAW,CAAC,4BAA4B;EAG1D,2BADe,2BAA2B,YAAY,aAAa,OACxC,CAAM;CACnC,GAAG,CAAC,YAAY,0BAA0B,CAAC;CAE3C,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAW,KAAK,oCAAoC;YAAzD,CACE,oBAAC,aAAD;GACE,KAAK;GACL,QAAQ,YAAY;GACpB,KAAK;GACL,KAAK;GACL,OAAO;GACP,OAAO,YAAY;GACnB,GAAK,uBAAuB,EAAE,2BAA2B,MAAM,IAAI,CAAC;EACrE,CAAA,GACD,oBAAC,YAAD,CAAa,CAAA,CACV;;AAET;AAEA,IAAM,mBAAmB;CACvB,MAAM,EAAE,cAAc,yBAAyB;CAC/C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,WAAD,CAAY,CAAA,GAAC,OAEV;;AAET"}

package/dist/es/components/Attachment/Image.mjs

@@ -0,0 +1,19 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { ModalGallery } from "./ModalGallery.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Attachment/Image.tsx
+/**
+* Display image with tap-to-expand modal gallery.
+*/
+var ImageComponent = (galleryItem) => {
+	const { ModalGallery: ModalGallery$1 = ModalGallery } = useComponentContext();
+	return /* @__PURE__ */ jsx(ModalGallery$1, {
+		items: [galleryItem],
+		modalClassName: "str-chat__image-modal"
+	});
+};
+//#endregion
+export { ImageComponent };
+
+//# sourceMappingURL=Image.mjs.map

package/dist/es/components/Attachment/Image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.mjs","names":[],"sources":["../../../../src/components/Attachment/Image.tsx"],"sourcesContent":["import React from 'react';\nimport { ModalGallery as DefaultModalGallery } from './ModalGallery';\nimport { useComponentContext } from '../../context';\nimport type { GalleryItem } from '../Gallery/GalleryContext';\n\nexport type ImageProps = GalleryItem;\n\n/**\n * Display image with tap-to-expand modal gallery.\n */\nexport const ImageComponent = (galleryItem: ImageProps) => {\n  const { ModalGallery = DefaultModalGallery } = useComponentContext();\n\n  return <ModalGallery items={[galleryItem]} modalClassName='str-chat__image-modal' />;\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,kBAAkB,gBAA4B;CACzD,MAAM,EAAE,cAAA,iBAAe,iBAAwB,oBAAoB;CAEnE,OAAO,oBAAC,gBAAD;EAAc,OAAO,CAAC,WAAW;EAAG,gBAAe;CAAyB,CAAA;AACrF"}

package/dist/es/components/Attachment/LinkPreview/Card.mjs

@@ -0,0 +1,93 @@
+import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { BaseImage } from "../../BaseImage/BaseImage.mjs";
+import { SafeAnchor } from "../../SafeAnchor/SafeAnchor.mjs";
+import { UnableToRenderCard } from "./UnableToRenderCard.mjs";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Attachment/LinkPreview/Card.tsx
+var CardRoot = ({ cardUrl, children, type }) => {
+	const className = clsx(`str-chat__message-attachment-card str-chat__message-attachment-card--${type}`);
+	return cardUrl ? /* @__PURE__ */ jsx(SafeAnchor, {
+		className,
+		href: cardUrl,
+		rel: "noopener noreferrer",
+		target: "_blank",
+		children
+	}) : /* @__PURE__ */ jsx("div", {
+		className,
+		children
+	});
+};
+var CardHeader = (props) => {
+	const { dimensions, image, image_url, thumb_url, title } = props;
+	return image ? /* @__PURE__ */ jsx("div", {
+		className: "str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header",
+		"data-testid": "card-header",
+		children: /* @__PURE__ */ jsx(BaseImage, {
+			alt: title || image,
+			"data-testid": "image-test",
+			src: image_url ?? thumb_url,
+			title: title || image,
+			...dimensions
+		})
+	}) : null;
+};
+var CardContent = (props) => {
+	const { og_scrape_url, text, title, title_link } = props;
+	const url = title_link || og_scrape_url;
+	const { IconLink } = useComponentContextIcons();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-attachment-card--content",
+		children: [
+			title && /* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-attachment-card--title",
+				children: title
+			}),
+			text && /* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-attachment-card--text",
+				children: text
+			}),
+			url && /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__message-attachment-card--source-link",
+				"data-testid": "card-source-link",
+				children: [/* @__PURE__ */ jsx(IconLink, {}), /* @__PURE__ */ jsx("div", {
+					className: "str-chat__message-attachment-card--url",
+					children: url
+				})]
+			})
+		]
+	});
+};
+var UnMemoizedCard = (props) => {
+	const { giphy, image_url, og_scrape_url, thumb_url, title, title_link, type } = props;
+	const { giphyVersion: giphyVersionName } = useChannelStateContext("");
+	const cardUrl = title_link || og_scrape_url;
+	let image = thumb_url || image_url;
+	const dimensions = {};
+	if (type === "giphy" && typeof giphy !== "undefined") {
+		const giphyVersion = giphy[giphyVersionName];
+		image = giphyVersion.url;
+		dimensions.height = giphyVersion.height;
+		dimensions.width = giphyVersion.width;
+	}
+	if (!title && !cardUrl && !image) return /* @__PURE__ */ jsx(UnableToRenderCard, {});
+	return /* @__PURE__ */ jsxs(CardRoot, {
+		cardUrl,
+		type,
+		children: [/* @__PURE__ */ jsx(CardHeader, {
+			...props,
+			dimensions,
+			image
+		}), /* @__PURE__ */ jsx(CardContent, { ...props })]
+	});
+};
+/**
+* Simple Card Layout for displaying links
+*/
+var Card = React.memo(UnMemoizedCard);
+//#endregion
+export { Card };
+
+//# sourceMappingURL=Card.mjs.map

package/dist/es/components/Attachment/LinkPreview/Card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.mjs","names":[],"sources":["../../../../../src/components/Attachment/LinkPreview/Card.tsx"],"sourcesContent":["import React from 'react';\nimport { BaseImage } from '../../BaseImage';\nimport { SafeAnchor } from '../../SafeAnchor';\nimport { useChannelStateContext } from '../../../context/ChannelStateContext';\nimport { useComponentContextIcons } from '../../../context';\n\nimport type { Attachment } from 'stream-chat';\nimport type { RenderAttachmentProps } from '../utils';\nimport type { Dimensions } from '../../../types/types';\nimport { UnableToRenderCard } from './UnableToRenderCard';\nimport clsx from 'clsx';\n\ntype CardRootProps = {\n  cardUrl: string | undefined;\n  children: React.ReactNode;\n  type?: CardProps['type'];\n};\n\nconst CardRoot = ({ cardUrl, children, type }: CardRootProps) => {\n  const className = clsx(\n    `str-chat__message-attachment-card str-chat__message-attachment-card--${type}`,\n  );\n\n  return cardUrl ? (\n    <SafeAnchor\n      className={className}\n      href={cardUrl}\n      rel='noopener noreferrer'\n      target='_blank'\n    >\n      {children}\n    </SafeAnchor>\n  ) : (\n    <div className={className}>{children}</div>\n  );\n};\n\ntype CardHeaderProps = Pick<CardProps, 'title' | 'type' | 'image_url' | 'thumb_url'> & {\n  dimensions: Dimensions;\n  image?: string;\n};\n\nconst CardHeader = (props: CardHeaderProps) => {\n  const { dimensions, image, image_url, thumb_url, title } = props;\n\n  return image ? (\n    <div\n      className='str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header'\n      data-testid={'card-header'}\n    >\n      <BaseImage\n        alt={title || image}\n        data-testid='image-test'\n        src={image_url ?? thumb_url}\n        title={title || image}\n        {...dimensions}\n      />\n    </div>\n  ) : null;\n};\n\ntype CardContentProps = RenderAttachmentProps['attachment'];\n\nconst CardContent = (props: CardContentProps) => {\n  const { og_scrape_url, text, title, title_link } = props;\n  const url = title_link || og_scrape_url;\n  const { IconLink } = useComponentContextIcons();\n\n  return (\n    <div className='str-chat__message-attachment-card--content'>\n      {title && <div className='str-chat__message-attachment-card--title'>{title}</div>}\n      {text && <div className='str-chat__message-attachment-card--text'>{text}</div>}\n      {url && (\n        <div\n          className='str-chat__message-attachment-card--source-link'\n          data-testid='card-source-link'\n        >\n          <IconLink />\n          <div className='str-chat__message-attachment-card--url'>{url}</div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type CardProps = RenderAttachmentProps['attachment'] & {\n  compact?: boolean;\n};\n\nconst UnMemoizedCard = (props: CardProps) => {\n  const { giphy, image_url, og_scrape_url, thumb_url, title, title_link, type } = props;\n  const { giphyVersion: giphyVersionName } = useChannelStateContext('');\n  const cardUrl = title_link || og_scrape_url;\n\n  let image = thumb_url || image_url;\n  const dimensions: { height?: string; width?: string } = {};\n\n  if (type === 'giphy' && typeof giphy !== 'undefined') {\n    const giphyVersion =\n      giphy[giphyVersionName as keyof NonNullable<Attachment['giphy']>];\n    image = giphyVersion.url;\n    dimensions.height = giphyVersion.height;\n    dimensions.width = giphyVersion.width;\n  }\n\n  if (!title && !cardUrl && !image) {\n    return <UnableToRenderCard />;\n  }\n\n  return (\n    <CardRoot cardUrl={cardUrl} type={type}>\n      <CardHeader {...props} dimensions={dimensions} image={image} />\n      <CardContent {...props} />\n    </CardRoot>\n  );\n};\n\n/**\n * Simple Card Layout for displaying links\n */\nexport const Card = React.memo(UnMemoizedCard) as typeof UnMemoizedCard;\n"],"mappings":";;;;;;;;;AAkBA,IAAM,YAAY,EAAE,SAAS,UAAU,WAA0B;CAC/D,MAAM,YAAY,KAChB,wEAAwE,MAC1E;CAEA,OAAO,UACL,oBAAC,YAAD;EACa;EACX,MAAM;EACN,KAAI;EACJ,QAAO;EAEN;CACS,CAAA,IAEZ,oBAAC,OAAD;EAAgB;EAAY;CAAc,CAAA;AAE9C;AAOA,IAAM,cAAc,UAA2B;CAC7C,MAAM,EAAE,YAAY,OAAO,WAAW,WAAW,UAAU;CAE3D,OAAO,QACL,oBAAC,OAAD;EACE,WAAU;EACV,eAAa;YAEb,oBAAC,WAAD;GACE,KAAK,SAAS;GACd,eAAY;GACZ,KAAK,aAAa;GAClB,OAAO,SAAS;GAChB,GAAI;EACL,CAAA;CACE,CAAA,IACH;AACN;AAIA,IAAM,eAAe,UAA4B;CAC/C,MAAM,EAAE,eAAe,MAAM,OAAO,eAAe;CACnD,MAAM,MAAM,cAAc;CAC1B,MAAM,EAAE,aAAa,yBAAyB;CAE9C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SAAS,oBAAC,OAAD;IAAK,WAAU;cAA4C;GAAW,CAAA;GAC/E,QAAQ,oBAAC,OAAD;IAAK,WAAU;cAA2C;GAAU,CAAA;GAC5E,OACC,qBAAC,OAAD;IACE,WAAU;IACV,eAAY;cAFd,CAIE,oBAAC,UAAD,CAAW,CAAA,GACX,oBAAC,OAAD;KAAK,WAAU;eAA0C;IAAS,CAAA,CAC/D;;EAEJ;;AAET;AAMA,IAAM,kBAAkB,UAAqB;CAC3C,MAAM,EAAE,OAAO,WAAW,eAAe,WAAW,OAAO,YAAY,SAAS;CAChF,MAAM,EAAE,cAAc,qBAAqB,uBAAuB,EAAE;CACpE,MAAM,UAAU,cAAc;CAE9B,IAAI,QAAQ,aAAa;CACzB,MAAM,aAAkD,CAAC;CAEzD,IAAI,SAAS,WAAW,OAAO,UAAU,aAAa;EACpD,MAAM,eACJ,MAAM;EACR,QAAQ,aAAa;EACrB,WAAW,SAAS,aAAa;EACjC,WAAW,QAAQ,aAAa;CAClC;CAEA,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OACzB,OAAO,oBAAC,oBAAD,CAAqB,CAAA;CAG9B,OACE,qBAAC,UAAD;EAAmB;EAAe;YAAlC,CACE,oBAAC,YAAD;GAAY,GAAI;GAAmB;GAAmB;EAAQ,CAAA,GAC9D,oBAAC,aAAD,EAAa,GAAI,MAAQ,CAAA,CACjB;;AAEd;;;;AAKA,IAAa,OAAO,MAAM,KAAK,cAAc"}

package/dist/es/components/Attachment/LinkPreview/UnableToRenderCard.mjs

@@ -0,0 +1,22 @@
+import { useTranslationContext } from "../../../context/TranslationContext.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Attachment/LinkPreview/UnableToRenderCard.tsx
+var UnableToRenderCard = ({ type }) => {
+	const { t } = useTranslationContext("Card");
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__message-attachment-card", { [`str-chat__message-attachment-card--${type}`]: type }),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "str-chat__message-attachment-card--content",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-attachment-card--text",
+				children: t("this content could not be displayed")
+			})
+		})
+	});
+};
+//#endregion
+export { UnableToRenderCard };
+
+//# sourceMappingURL=UnableToRenderCard.mjs.map

package/dist/es/components/Attachment/LinkPreview/UnableToRenderCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnableToRenderCard.mjs","names":[],"sources":["../../../../../src/components/Attachment/LinkPreview/UnableToRenderCard.tsx"],"sourcesContent":["import type { Attachment } from 'stream-chat';\nimport { useTranslationContext } from '../../../context';\nimport clsx from 'clsx';\nimport React from 'react';\n\nexport const UnableToRenderCard = ({ type }: { type?: Attachment['type'] }) => {\n  const { t } = useTranslationContext('Card');\n\n  return (\n    <div\n      className={clsx('str-chat__message-attachment-card', {\n        [`str-chat__message-attachment-card--${type}`]: type,\n      })}\n    >\n      <div className='str-chat__message-attachment-card--content'>\n        <div className='str-chat__message-attachment-card--text'>\n          {t('this content could not be displayed')}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,sBAAsB,EAAE,WAA0C;CAC7E,MAAM,EAAE,MAAM,sBAAsB,MAAM;CAE1C,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,qCAAqC,GAClD,sCAAsC,SAAS,KAClD,CAAC;YAED,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACZ,EAAE,qCAAqC;GACrC,CAAA;EACF,CAAA;CACF,CAAA;AAET"}

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

@@ -0,0 +1,166 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { LoadingIndicator } from "../Loading/LoadingIndicator.mjs";
+import { GlobalModal } from "../Modal/GlobalModal.mjs";
+import { BaseImage } from "../BaseImage/BaseImage.mjs";
+import { VideoThumbnail } from "../VideoPlayer/VideoThumbnail.mjs";
+import { GalleryUI } from "../Gallery/GalleryUI.mjs";
+import { Gallery } from "../Gallery/Gallery.mjs";
+import { useCallback, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Attachment/ModalGallery.tsx
+var MAX_VISIBLE_THUMBNAILS = 4;
+var BASE_IMAGE_PROP_KEYS = [
+	"className",
+	"crossOrigin",
+	"decoding",
+	"draggable",
+	"fetchPriority",
+	"height",
+	"loading",
+	"onError",
+	"onLoad",
+	"ref",
+	"showDownloadButtonOnError",
+	"sizes",
+	"srcSet",
+	"style",
+	"title",
+	"useMap",
+	"width"
+];
+var ModalGallery = ({ className, closeOnBackgroundClick = true, items, modalClassName }) => {
+	const { BaseImage: BaseImage$1 = BaseImage, Gallery: Gallery$1 = Gallery, Modal = GlobalModal } = useComponentContext();
+	const [modalOpen, setModalOpen] = useState(false);
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const usesDefaultBaseImage = BaseImage$1 === BaseImage;
+	const closeModal = useCallback(() => {
+		setModalOpen(false);
+	}, []);
+	const preventOverlayClose = useCallback((source) => source !== "overlay", []);
+	const handleThumbnailClick = useCallback((index) => {
+		setSelectedIndex(index);
+		setModalOpen(true);
+	}, []);
+	const itemCount = items.length;
+	const visibleItems = items.slice(0, MAX_VISIBLE_THUMBNAILS);
+	const overflowCount = itemCount - MAX_VISIBLE_THUMBNAILS;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__modal-gallery", className, {
+			"str-chat__modal-gallery--three-images": itemCount === 3,
+			"str-chat__modal-gallery--two-images": itemCount === 2
+		}),
+		children: visibleItems.map((item, index) => {
+			return /* @__PURE__ */ jsx(ThumbnailButton, {
+				BaseImage: BaseImage$1,
+				baseImageUsesDefaultBehavior: usesDefaultBaseImage,
+				index,
+				item,
+				itemCount,
+				onClick: () => handleThumbnailClick(index),
+				overflowCount,
+				showOverlay: index === MAX_VISIBLE_THUMBNAILS - 1 && overflowCount > 0
+			}, index);
+		})
+	}), /* @__PURE__ */ jsx(Modal, {
+		className: clsx("str-chat__gallery-modal", modalClassName),
+		onClose: closeModal,
+		onCloseAttempt: preventOverlayClose,
+		open: modalOpen,
+		children: /* @__PURE__ */ jsx(Gallery$1, {
+			closeOnBackgroundClick,
+			GalleryUI,
+			initialIndex: selectedIndex,
+			items,
+			onRequestClose: closeModal
+		})
+	})] });
+};
+var ThumbnailButton = ({ BaseImage, baseImageUsesDefaultBehavior, index, item, itemCount, onClick, overflowCount, showOverlay }) => {
+	const { t } = useTranslationContext();
+	const { IconRetry } = useComponentContextIcons();
+	const imageUrl = item.imageUrl;
+	const [isLoadFailed, setIsLoadFailed] = useState(false);
+	const [isImageLoading, setIsImageLoading] = useState(Boolean(imageUrl));
+	const [retrySuffix, setRetrySuffix] = useState("");
+	const { onError: itemOnError, onLoad: itemOnLoad, ...baseImageProps } = getBaseImageProps(item);
+	const showRetryIndicator = isLoadFailed && !showOverlay;
+	const showLoadingIndicator = isImageLoading && !showRetryIndicator && !showOverlay;
+	const handleButtonClick = () => {
+		if (showRetryIndicator) {
+			setIsLoadFailed(false);
+			setIsImageLoading(true);
+			setRetrySuffix(`&retry=${Date.now()}`);
+			return;
+		}
+		onClick();
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-label": showRetryIndicator ? t("aria/Retry upload") : itemCountAwareLabel({
+			imageIndex: index + 1,
+			itemCount,
+			t
+		}),
+		className: clsx("str-chat__modal-gallery__image", {
+			"str-chat__modal-gallery__image--load-failed": showRetryIndicator,
+			"str-chat__modal-gallery__image--loading": showLoadingIndicator
+		}),
+		onClick: handleButtonClick,
+		type: "button",
+		children: [
+			item.videoThumbnailUrl ? /* @__PURE__ */ jsx(VideoThumbnail, {
+				alt: t("User uploaded content"),
+				src: item.videoThumbnailUrl
+			}) : /* @__PURE__ */ jsx(BaseImage, {
+				...baseImageProps,
+				alt: item.alt ?? t("User uploaded content"),
+				onError: (event) => {
+					setIsImageLoading(false);
+					setIsLoadFailed(true);
+					itemOnError?.(event);
+				},
+				onLoad: (event) => {
+					setIsImageLoading(false);
+					setIsLoadFailed(false);
+					itemOnLoad?.(event);
+				},
+				src: imageUrl ? `${imageUrl}${retrySuffix}` : imageUrl,
+				...baseImageUsesDefaultBehavior ? { showDownloadButtonOnError: false } : {}
+			}),
+			showLoadingIndicator && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "str-chat__modal-gallery__image-loading-overlay",
+				"data-testid": "str-chat__modal-gallery__image-loading-overlay",
+				children: /* @__PURE__ */ jsx(LoadingIndicator, {})
+			}),
+			showRetryIndicator && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "str-chat__modal-gallery__image-load-failed-overlay",
+				"data-testid": "str-chat__modal-gallery__image-load-failed-overlay",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "str-chat__modal-gallery__image-retry-indicator",
+					children: /* @__PURE__ */ jsx(IconRetry, {})
+				})
+			}),
+			showOverlay && /* @__PURE__ */ jsxs("div", {
+				className: "str-chat__modal-gallery__placeholder",
+				children: ["+", overflowCount]
+			})
+		]
+	});
+};
+var itemCountAwareLabel = ({ imageIndex, itemCount, t }) => itemCount === 1 ? t("Open image in gallery") : t("Open gallery at image {{ index }}", { index: imageIndex });
+var getBaseImageProps = (item) => {
+	const baseImageProps = {};
+	for (const key of BASE_IMAGE_PROP_KEYS) {
+		const value = item[key];
+		if (value !== void 0) baseImageProps[key] = value;
+	}
+	return baseImageProps;
+};
+//#endregion
+export { ModalGallery };
+
+//# sourceMappingURL=ModalGallery.mjs.map

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

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

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

@@ -0,0 +1,25 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Attachment/UnsupportedAttachment.tsx
+var UnsupportedAttachment = () => {
+	const { IconUnsupportedAttachment } = useComponentContextIcons();
+	const { t } = useTranslationContext("UnsupportedAttachment");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-attachment-unsupported",
+		"data-testid": "attachment-unsupported",
+		children: [/* @__PURE__ */ jsx(IconUnsupportedAttachment, {}), /* @__PURE__ */ jsx("div", {
+			className: "str-chat__message-attachment-unsupported__metadata",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-attachment-unsupported__title",
+				"data-testid": "unsupported-attachment-title",
+				children: t("Unsupported attachment")
+			})
+		})]
+	});
+};
+//#endregion
+export { UnsupportedAttachment };
+
+//# sourceMappingURL=UnsupportedAttachment.mjs.map

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

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