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

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

@@ -0,0 +1,109 @@
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { MessageContext } from "../../context/MessageContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.mjs";
+import { PlayButton } from "../Button/PlayButton.mjs";
+import { FileSizeIndicator } from "./components/FileSizeIndicator.mjs";
+import { DownloadButton } from "./components/DownloadButton.mjs";
+import { useAttachmentUploadState } from "./hooks/useAttachmentUploadState.mjs";
+import { AttachmentUploadProgressIndicator } from "./components/AttachmentUploadProgressIndicator.mjs";
+import { useAudioPlayer } from "../AudioPlayback/WithAudioPlayback.mjs";
+import { FileIcon } from "../FileIcon/FileIcon.mjs";
+import { DurationDisplay } from "../AudioPlayback/components/DurationDisplay.mjs";
+import { ProgressBar } from "../AudioPlayback/components/ProgressBar.mjs";
+import { useContext } from "react";
+import { getAttachmentPreviewUrl } from "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Attachment/Audio.tsx
+var AudioAttachmentUI = ({ attachment, audioPlayer }) => {
+	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$1 = AttachmentUploadProgressIndicator, FileSizeIndicator: FileSizeIndicator$1 = FileSizeIndicator } = useComponentContext();
+	const { isUploading } = useAttachmentUploadState(attachment);
+	const dataTestId = "audio-widget";
+	const rootClassName = "str-chat__message-attachment-audio-widget";
+	const { durationSeconds, isPlaying, progress, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: rootClassName,
+		"data-testid": dataTestId,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-attachment-audio-widget--play-controls",
+				children: /* @__PURE__ */ jsx(PlayButton, {
+					isPlaying: !!isPlaying,
+					onClick: audioPlayer.togglePlay
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__message-attachment-audio-widget--data",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__message-attachment-audio-widget--text-first-row",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "str-chat__message-attachment-audio-widget--title",
+						children: audioPlayer.title
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__message-attachment-audio-widget--text-second-row",
+					children: [isUploading ? /* @__PURE__ */ jsx(AttachmentUploadProgressIndicator$1, { attachment }) : durationSeconds ? /* @__PURE__ */ jsx(DurationDisplay, {
+						duration: durationSeconds,
+						isPlaying: !!isPlaying,
+						secondsElapsed
+					}) : /* @__PURE__ */ jsx(FileSizeIndicator$1, { fileSize: audioPlayer.fileSize }), /* @__PURE__ */ jsx(ProgressBar, {
+						durationSeconds,
+						progress: progress ?? 0,
+						secondsElapsed,
+						seek: audioPlayer.seek
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(FileIcon, {
+				className: "str-chat__file-icon",
+				mimeType: audioPlayer.mimeType
+			}),
+			/* @__PURE__ */ jsx(DownloadButton, {
+				assetUrl: audioPlayer.src,
+				suggestedFileName: audioPlayer.title
+			})
+		]
+	});
+};
+var audioPlayerStateSelector = (state) => ({
+	durationSeconds: state.durationSeconds,
+	isPlaying: state.isPlaying,
+	progress: state.progressPercent,
+	secondsElapsed: state.secondsElapsed
+});
+/**
+* Audio attachment with play/pause button and progress bar
+*/
+var Audio = (props) => {
+	const { attachment } = props;
+	const { asset_url, title } = attachment;
+	const { duration, file_size, mime_type, waveform_data } = attachment.custom ?? {};
+	/**
+	* Introducing message context. This could be breaking change, therefore the fallback to {} is provided.
+	* If this component is used outside the message context, then there will be no audio player namespacing
+	* => scrolling away from the message in virtualized ML would create a new AudioPlayer instance.
+	*
+	* Edge case: the requester (message) has multiple attachments with the same assetURL - does not happen
+	* with the default SDK components, but can be done with custom API calls.In this case all the Audio
+	* widgets will share the state.
+	*/
+	const { message } = useContext(MessageContext) ?? {};
+	const threadInstance = useThreadContext();
+	const audioPlayer = useAudioPlayer({
+		durationSeconds: duration,
+		fileSize: file_size,
+		mimeType: mime_type,
+		requester: message?.id && `${threadInstance ? message.parent_id ?? message.id : ""}${message.id}`,
+		src: getAttachmentPreviewUrl(attachment, asset_url),
+		title,
+		waveformData: waveform_data
+	});
+	return audioPlayer ? /* @__PURE__ */ jsx(AudioAttachmentUI, {
+		attachment,
+		audioPlayer
+	}) : null;
+};
+//#endregion
+export { Audio };
+
+//# sourceMappingURL=Audio.mjs.map

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, { useContext } from 'react';\nimport type { Attachment, VoiceRecordingAttachment } from 'stream-chat';\n\nimport {\n  AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator,\n  FileSizeIndicator as DefaultFileSizeIndicator,\n  DownloadButton,\n} from './components';\nimport type { AudioPlayerState } from '../AudioPlayback/AudioPlayer';\nimport { useAudioPlayer } from '../AudioPlayback/WithAudioPlayback';\nimport { useStateStore } from '../../store';\nimport { MessageContext, useComponentContext } from '../../context';\nimport type { AudioPlayer } from '../AudioPlayback/AudioPlayer';\nimport { PlayButton } from '../Button/PlayButton';\nimport { FileIcon } from '../FileIcon';\nimport { DurationDisplay, ProgressBar } from '../AudioPlayback';\nimport { useThreadContext } from '../Threads';\nimport { getAttachmentPreviewUrl } from 'stream-chat';\nimport { useAttachmentUploadState } from './hooks/useAttachmentUploadState';\n\ntype AudioAttachmentUIProps = {\n  attachment?: Attachment;\n  audioPlayer: AudioPlayer;\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            would leave an uploading attachment with no upload indication at all.\n          */}\n          {isUploading ? (\n            <AttachmentUploadProgressIndicator attachment={attachment} />\n          ) : durationSeconds ? (\n            <DurationDisplay\n              duration={durationSeconds}\n              isPlaying={!!isPlaying}\n              secondsElapsed={secondsElapsed}\n            />\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 { attachment } = props;\n  const { asset_url, title } = attachment;\n  const { duration, file_size, mime_type, waveform_data } =\n    (attachment as VoiceRecordingAttachment).custom ?? {};\n\n  /**\n   * Introducing message context. This could be breaking change, therefore the fallback to {} is provided.\n   * If this component is used outside the message context, then there will be no audio player namespacing\n   * => scrolling away from the message in virtualized ML would create a new AudioPlayer instance.\n   *\n   * Edge case: the requester (message) has multiple attachments with the same assetURL - does not happen\n   * with the default SDK components, but can be done with custom API calls.In this case all the Audio\n   * widgets will share the state.\n   */\n  // also rendered from composer previews, where there is no message\n  const { message } = useContext(MessageContext) ?? {};\n  const threadInstance = useThreadContext();\n\n  const audioPlayer = useAudioPlayer({\n    durationSeconds: duration,\n    fileSize: file_size,\n    mimeType: mime_type,\n    requester:\n      message?.id &&\n      `${threadInstance ? (message.parent_id ?? message.id) : ''}${message.id}`,\n    // Falls back to the local blob preview while the upload is still in flight.\n    src: getAttachmentPreviewUrl(attachment, asset_url),\n    title,\n    waveformData: waveform_data,\n  });\n\n  return audioPlayer ? (\n    <AudioAttachmentUI attachment={attachment} audioPlayer={audioPlayer} />\n  ) : null;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA0BA,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,EAAE,eAAe;CACvB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,EAAE,UAAU,WAAW,WAAW,kBACrC,WAAwC,UAAU,CAAC;;;;;;;;;;CAYtD,MAAM,EAAE,YAAY,WAAW,cAAc,KAAK,CAAC;CACnD,MAAM,iBAAiB,iBAAiB;CAExC,MAAM,cAAc,eAAe;EACjC,iBAAiB;EACjB,UAAU;EACV,UAAU;EACV,WACE,SAAS,MACT,GAAG,iBAAkB,QAAQ,aAAa,QAAQ,KAAM,KAAK,QAAQ;EAEvE,KAAK,wBAAwB,YAAY,SAAS;EAClD;EACA,cAAc;CAChB,CAAC;CAED,OAAO,cACL,oBAAC,mBAAD;EAA+B;EAAyB;CAAc,CAAA,IACpE;AACN"}

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

@@ -0,0 +1,46 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { FileSizeIndicator } from "./components/FileSizeIndicator.mjs";
+import { DownloadButton } from "./components/DownloadButton.mjs";
+import { useAttachmentUploadState } from "./hooks/useAttachmentUploadState.mjs";
+import { AttachmentUploadProgressIndicator } from "./components/AttachmentUploadProgressIndicator.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 { isUploading } = useAttachmentUploadState(attachment);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__message-attachment-file--item",
+		"data-testid": "attachment-file",
+		children: [
+			/* @__PURE__ */ jsx(AttachmentFileIcon ?? FileIcon, {
+				className: "str-chat__file-icon",
+				fileName: attachment.title,
+				mimeType: attachment.custom?.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.custom?.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 { isUploading } = useAttachmentUploadState(attachment);\n  const FileIconComponent = AttachmentFileIcon ?? FileIcon;\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.custom?.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.custom?.file_size} />\n          )}\n        </div>\n      </div>\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,EAAE,gBAAgB,yBAAyB,UAAU;CAE3D,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd;GAIE,oBANsB,sBAAsB,UAM5C;IACE,WAAU;IACV,UAAU,WAAW;IACrB,UAAU,WAAW,QAAQ;GAC9B,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,QAAQ,UAAY,CAAA;IAE3D,CAAA,CACF;;GACL,oBAAC,gBAAD;IACE,UAAU,WAAW;IACrB,mBAAmB,WAAW;GAC/B,CAAA;EACE;;AAET"}

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

@@ -0,0 +1,89 @@
+import { useChatContext } from "../../context/ChatContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { ExternalLinkIcon } from "./icons.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useEffect, useRef, useState } from "react";
+import { convertTimestampToDate, nowNs, nsToMs } from "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Attachment/Geolocation.tsx
+/** `setTimeout` silently clamps a longer delay to 1 ms, so longer waits are armed in steps. */
+var MAX_TIMEOUT_MS = 2 ** 31 - 1;
+/** Whether a live location's expiry is a usable instant to schedule against. */
+var isSchedulableExpiry = (endAt) => endAt != null && Number.isFinite(endAt);
+var Geolocation = ({ GeolocationAttachmentMapPlaceholder = DefaultGeolocationAttachmentMapPlaceholder, GeolocationMap, location }) => {
+	const { client } = useChatContext();
+	const channel = useChannel();
+	const { t } = useTranslationContext();
+	const [stoppedSharing, setStoppedSharing] = useState(isSchedulableExpiry(location.end_at) && location.end_at < nowNs());
+	const timeoutRef = useRef(void 0);
+	const isMyLocation = location.user_id === client.userID;
+	const isLiveLocation = location.end_at != null;
+	const endAt = location.end_at;
+	useEffect(() => {
+		if (!isSchedulableExpiry(endAt)) return;
+		const arm = () => {
+			const remaining = Math.max(0, nsToMs(endAt - nowNs()));
+			timeoutRef.current = remaining > MAX_TIMEOUT_MS ? setTimeout(arm, MAX_TIMEOUT_MS) : setTimeout(() => setStoppedSharing(true), remaining);
+		};
+		arm();
+		return () => clearTimeout(timeoutRef.current);
+	}, [endAt]);
+	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("attachment.geolocation.locationSharingEnded.text", "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({ message_id: location.message_id }),
+					size: "sm",
+					variant: "secondary",
+					children: t("attachment.geolocation.stopSharing.text", "Stop sharing")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "str-chat__message-attachment-geolocation__status--active-until",
+					children: t("attachment.geolocation.liveUntil.text", "Live until {{ timestamp }}", { timestamp: t("timestamp.LiveLocation", { timestamp: convertTimestampToDate(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("common.liveLocation.text", "Live location")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "str-chat__message-attachment-geolocation__status--active-until",
+					children: t("attachment.geolocation.liveUntil.text", "Live until {{ timestamp }}", { timestamp: t("timestamp.LiveLocation", { timestamp: convertTimestampToDate(location.end_at) }) })
+				})]
+			}) : t("common.currentLocation.text", "Current location")
+		})]
+	});
+};
+var DefaultGeolocationAttachmentMapPlaceholder = ({ location }) => {
+	const { IconLocation } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	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("attachment.geolocation.openLocationMap.ariaLabel", "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, SharedLocationResponseData } from 'stream-chat';\nimport {\n  useChannel,\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { ExternalLinkIcon } from './icons';\nimport { Button } from '../Button';\nimport { convertTimestampToDate, nowNs, nsToMs } from 'stream-chat';\n\nexport type GeolocationMapProps = Coords;\n\n/** `setTimeout` silently clamps a longer delay to 1 ms, so longer waits are armed in steps. */\nconst MAX_TIMEOUT_MS = 2 ** 31 - 1;\n\n/** Whether a live location's expiry is a usable instant to schedule against. */\nconst isSchedulableExpiry = (endAt?: number): endAt is number =>\n  endAt != null && Number.isFinite(endAt);\n\nexport type GeolocationProps = {\n  location: SharedLocationResponseData;\n  GeolocationAttachmentMapPlaceholder?: ComponentType<GeolocationAttachmentMapPlaceholderProps>;\n  GeolocationMap?: ComponentType<GeolocationMapProps>;\n};\n\nexport const Geolocation = ({\n  GeolocationAttachmentMapPlaceholder = DefaultGeolocationAttachmentMapPlaceholder,\n  GeolocationMap,\n  location,\n}: GeolocationProps) => {\n  const { client } = useChatContext();\n  const channel = useChannel();\n  const { t } = useTranslationContext();\n\n  const [stoppedSharing, setStoppedSharing] = useState(\n    isSchedulableExpiry(location.end_at) && location.end_at < nowNs(),\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 != null;\n  const endAt = location.end_at;\n\n  useEffect(() => {\n    if (!isSchedulableExpiry(endAt)) return;\n\n    const arm = () => {\n      // Both operands are wire timestamps, so the difference is in nanoseconds. Passing it raw\n      // made `setTimeout` fire immediately and end sharing on mount.\n      const remaining = Math.max(0, nsToMs(endAt - nowNs()));\n      timeoutRef.current =\n        remaining > MAX_TIMEOUT_MS\n          ? // Wait the maximum, then re-arm. One call would be clamped to 1 ms, showing\n            // \"sharing ended\" on mount for any share longer than ~24.9 days.\n            setTimeout(arm, MAX_TIMEOUT_MS)\n          : setTimeout(() => setStoppedSharing(true), remaining);\n    };\n\n    arm();\n    return () => clearTimeout(timeoutRef.current);\n  }, [endAt]);\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(\n              'attachment.geolocation.locationSharingEnded.text',\n              'Location sharing ended',\n            )\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={() =>\n                  // The request shape, not the whole response: `stopLiveLocationSharing` stamps\n                  // `end_at` itself, and the response's timestamps are wire numbers a request\n                  // field cannot take.\n                  channel?.stopLiveLocationSharing({ message_id: location.message_id })\n                }\n                size='sm'\n                variant='secondary'\n              >\n                {t('attachment.geolocation.stopSharing.text', 'Stop sharing')}\n              </Button>\n              <div className='str-chat__message-attachment-geolocation__status--active-until'>\n                {t(\n                  'attachment.geolocation.liveUntil.text',\n                  'Live until {{ timestamp }}',\n                  {\n                    timestamp: t('timestamp.LiveLocation', {\n                      timestamp: convertTimestampToDate(location.end_at),\n                    }),\n                  },\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('common.liveLocation.text', 'Live location')}\n              </div>\n              <div className='str-chat__message-attachment-geolocation__status--active-until'>\n                {t(\n                  'attachment.geolocation.liveUntil.text',\n                  'Live until {{ timestamp }}',\n                  {\n                    timestamp: t('timestamp.LiveLocation', {\n                      timestamp: convertTimestampToDate(location.end_at),\n                    }),\n                  },\n                )}\n              </div>\n            </div>\n          )\n        ) : (\n          t('common.currentLocation.text', 'Current location')\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport type GeolocationAttachmentMapPlaceholderProps = {\n  location: SharedLocationResponseData;\n};\n\nconst DefaultGeolocationAttachmentMapPlaceholder = ({\n  location,\n}: GeolocationAttachmentMapPlaceholderProps) => {\n  const { IconLocation } = useComponentContextIcons();\n  const { t } = useTranslationContext();\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(\n          'attachment.geolocation.openLocationMap.ariaLabel',\n          'Open location in a map',\n        )}\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":";;;;;;;;;;;AAkBA,IAAM,iBAAiB,KAAK,KAAK;;AAGjC,IAAM,uBAAuB,UAC3B,SAAS,QAAQ,OAAO,SAAS,KAAK;AAQxC,IAAa,eAAe,EAC1B,sCAAsC,4CACtC,gBACA,eACsB;CACtB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,CAAC,gBAAgB,qBAAqB,SAC1C,oBAAoB,SAAS,MAAM,KAAK,SAAS,SAAS,MAAM,CAClE;CACA,MAAM,aAAa,OAAkD,KAAA,CAAS;CAE9E,MAAM,eAAe,SAAS,YAAY,OAAO;CACjD,MAAM,iBAAiB,SAAS,UAAU;CAC1C,MAAM,QAAQ,SAAS;CAEvB,gBAAgB;EACd,IAAI,CAAC,oBAAoB,KAAK,GAAG;EAEjC,MAAM,YAAY;GAGhB,MAAM,YAAY,KAAK,IAAI,GAAG,OAAO,QAAQ,MAAM,CAAC,CAAC;GACrD,WAAW,UACT,YAAY,iBAGR,WAAW,KAAK,cAAc,IAC9B,iBAAiB,kBAAkB,IAAI,GAAG,SAAS;EAC3D;EAEA,IAAI;EACJ,aAAa,aAAa,WAAW,OAAO;CAC9C,GAAG,CAAC,KAAK,CAAC;CAEV,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,EACE,oDACA,wBACF,IACE,eACF,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,YAAW;KACX,WAAU;KACV,eAIE,SAAS,wBAAwB,EAAE,YAAY,SAAS,WAAW,CAAC;KAEtE,MAAK;KACL,SAAQ;eAEP,EAAE,2CAA2C,cAAc;IACtD,CAAA,GACR,oBAAC,OAAD;KAAK,WAAU;eACZ,EACC,yCACA,8BACA,EACE,WAAW,EAAE,0BAA0B,EACrC,WAAW,uBAAuB,SAAS,MAAM,EACnD,CAAC,EACH,CACF;IACG,CAAA,CACF;QAEL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ,EAAE,4BAA4B,eAAe;IAC3C,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;eACZ,EACC,yCACA,8BACA,EACE,WAAW,EAAE,0BAA0B,EACrC,WAAW,uBAAuB,SAAS,MAAM,EACnD,CAAC,EACH,CACF;IACG,CAAA,CACF;QAGP,EAAE,+BAA+B,kBAAkB;EAElD,CAAA,CACF;;AAET;AAMA,IAAM,8CAA8C,EAClD,eAC8C;CAC9C,MAAM,EAAE,iBAAiB,yBAAyB;CAClD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,KAAD;GACE,cAAY,EACV,oDACA,wBACF;GACA,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 { useAttachmentContext } from "../../context/AttachmentContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.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 { useComponentContextIcons } from "../../context/useComponentContextIcons.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 } = useAttachmentContext();
+	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("attachment.giphy.animatedGif.withTitle.ariaLabel", "Animated GIF: {{ title }}", { title: descriptiveTitle }) : t("attachment.giphy.animatedGif.ariaLabel", "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  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { type CSSProperties, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport {\n  type ImageAttachmentConfiguration,\n  useAttachmentContext,\n} from '../../context/AttachmentContext';\n\nexport type GiphyAttachmentProps = {\n  attachment: Attachment;\n};\n\nexport const Giphy = ({ attachment }: GiphyAttachmentProps) => {\n  const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } =\n    useAttachmentContext();\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('attachment.giphy.animatedGif.withTitle.ariaLabel', 'Animated GIF: {{ title }}', {\n        title: descriptiveTitle,\n      })\n    : t('attachment.giphy.animatedGif.ariaLabel', '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\n  return (\n    <div className='str-chat__giphy-badge'>\n      <IconGiphy />\n      Giphy\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,SAAS,EAAE,iBAAuC;CAC7D,MAAM,EAAE,cAAc,kBAAkB,+BACtC,qBAAqB;CACvB,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,oDAAoD,6BAA6B,EACjF,OAAO,iBACT,CAAC,IACD,EAAE,0CAA0C,cAAc;CAC9D,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;CAE/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 { useAttachmentContext } from "../../../context/AttachmentContext.mjs";
+import { BaseImage } from "../../BaseImage/BaseImage.mjs";
+import { SafeAnchor } from "../../SafeAnchor/SafeAnchor.mjs";
+import { UnableToRenderCard } from "./UnableToRenderCard.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.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 { IconLink } = useComponentContextIcons();
+	const { og_scrape_url, text, title, title_link } = props;
+	const url = title_link || og_scrape_url;
+	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 } = useAttachmentContext();
+	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 { useAttachmentContext } from '../../../context/AttachmentContext';\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';\nimport { useComponentContextIcons } from '../../../context';\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 { IconLink } = useComponentContextIcons();\n  const { og_scrape_url, text, title, title_link } = props;\n  const url = title_link || og_scrape_url;\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 } = useAttachmentContext();\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,aAAa,yBAAyB;CAC9C,MAAM,EAAE,eAAe,MAAM,OAAO,eAAe;CACnD,MAAM,MAAM,cAAc;CAE1B,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,qBAAqB;CAChE,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();
+	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("attachment.unableRenderCard.text", "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();\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('attachment.unableRenderCard.text', '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;CAEpC,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,qCAAqC,GAClD,sCAAsC,SAAS,KAClD,CAAC;YAED,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACZ,EAAE,oCAAoC,qCAAqC;GACzE,CAAA;EACF,CAAA;CACF,CAAA;AAET"}