stream-chat-react 14.11.0 → 14.12.0

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

@@ -0,0 +1,106 @@
+import { useChatContext } from "../../../context/ChatContext.mjs";
+import { useStateStore } from "../../../store/hooks/useStateStore.mjs";
+import { useCallback, useMemo } from "react";
+import { isLocalUploadAttachment, isPendingUpload } from "stream-chat";
+//#region src/components/Attachment/hooks/useAttachmentUploadState.ts
+/** Sentinel for "no live record for this id" inside the joined selector key. */
+var NO_RECORD = "-";
+var emptyUploadState = {
+	isUploading: false,
+	uploadConfirmationPending: false
+};
+/**
+* Whether an attachment *claims* to be mid-upload, judged purely from the message payload.
+*
+* This is the **structural** question — may this attachment render from its local preview at
+* all — and it is deliberately not reactive: it stays true across the microtask in which
+* `UploadManager` drops its record but the resolved URL has not been written back yet, so an
+* attachment never blinks out of the DOM between those two events.
+*
+* For "is a request actually running right now", use {@link useAttachmentsUploadState}.
+*/
+var hasPendingUploadState = (attachment) => isPendingUpload(attachment);
+/**
+* Reports whether a request for any of these attachments is in flight *right now*, and how far
+* along it is.
+*
+* The source of truth is `client.uploadManager`, which holds a record only for the lifetime of
+* the request. That has two consequences worth knowing:
+*
+* 1. **The UI is opt-in by construction.** An integration that never hands still-uploading
+*    attachments to a message never has a message referencing a live record, so none of the
+*    upload-progress UI ever renders — no config flag needed. Attachments returned by the API
+*    carry no `localMetadata` at all and can never match.
+*
+* 2. **No phantom progress.** A message can outlive its request — the upload was aborted,
+*    `disconnectUser` called `uploadManager.reset()`, or the message was rehydrated from an
+*    offline store with a stale `localMetadata.uploadState`. Keying off the frozen state would
+*    leave such an attachment showing an indeterminate spinner forever; keying off the live
+*    record makes it self-healing.
+*
+* `localMetadata.uploadProgress` is only a fallback for the progress *number*, never for
+* deciding whether an upload is running.
+*/
+var useAttachmentsUploadState = (attachments) => {
+	const { client } = useChatContext();
+	const pending = useMemo(() => attachments.filter(hasPendingUploadState).map((a) => a.localMetadata), [attachments]);
+	const pendingIdsKey = pending.map(({ id }) => id).join(",");
+	const selector = useCallback((state) => ({ recordsKey: pendingIdsKey.split(",").map((id) => {
+		const record = state.uploads[id];
+		if (!record) return NO_RECORD;
+		const awaiting = record.uploadConfirmationPending === void 0 ? "" : record.uploadConfirmationPending ? "1" : "0";
+		return `${record.uploadProgress ?? ""}:${awaiting}`;
+	}).join(",") }), [pendingIdsKey]);
+	const { recordsKey } = useStateStore(client?.uploadManager?.state, selector) ?? {};
+	if (!pending.length) return emptyUploadState;
+	const liveEntries = (recordsKey?.split(",") ?? []).map((entry, index) => {
+		if (entry === NO_RECORD) return void 0;
+		const [reportedProgress, reportedAwaiting] = entry.split(":");
+		const progress = reportedProgress === "" ? pending[index].uploadProgress : Number(reportedProgress);
+		return {
+			progress,
+			uploadConfirmationPending: reportedAwaiting === "" ? progress !== void 0 && progress >= 100 : reportedAwaiting === "1"
+		};
+	}).filter((entry) => !!entry);
+	if (!liveEntries.length) return emptyUploadState;
+	const values = liveEntries.map(({ progress }) => progress);
+	const known = values.filter((value) => typeof value === "number");
+	return {
+		isUploading: true,
+		progress: known.length === values.length && known.length ? Math.round(known.reduce((sum, value) => sum + value, 0) / known.length) : void 0,
+		uploadConfirmationPending: liveEntries.some(({ uploadConfirmationPending }) => uploadConfirmationPending)
+	};
+};
+/** Single-attachment convenience wrapper around {@link useAttachmentsUploadState}. */
+var useAttachmentUploadState = (attachment) => useAttachmentsUploadState(useMemo(() => [attachment], [attachment]));
+/**
+* Whether an attachment is in the window where every byte has been sent but the server has not
+* confirmed — read straight off `localMetadata`.
+*
+* This is the composer-side counterpart to {@link useAttachmentsUploadState}: for an attachment
+* still held by the composer, `AttachmentManager` mirrors the live `UploadRecord` into
+* `localMetadata`, so no store subscription is needed. On a *message* the mirrored value is a
+* frozen snapshot, which is why the message side reads the record instead.
+*
+* Falls back to inferring the window from a 100% reading when `uploadConfirmationPending` is absent,
+* i.e. against a resolved `stream-chat` older than v9.51.
+*/
+var isUploadConfirmationPending = (localMetadata) => {
+	if (!localMetadata || localMetadata.uploadState !== "uploading") return false;
+	if (localMetadata.uploadConfirmationPending !== void 0) return localMetadata.uploadConfirmationPending;
+	return localMetadata.uploadProgress !== void 0 && localMetadata.uploadProgress >= 100;
+};
+/**
+* The URL an attachment should be rendered from. Falls back to the local blob preview while
+* the upload is still in flight, so a pending attachment shows the user's own file rather than
+* nothing. Returns `undefined` when there is nothing to render yet.
+*/
+var getAttachmentPreviewUrl = (attachment, ...urls) => {
+	const resolved = urls.find(Boolean);
+	if (resolved) return resolved;
+	return isLocalUploadAttachment(attachment) ? attachment.localMetadata.previewUri : void 0;
+};
+//#endregion
+export { getAttachmentPreviewUrl, hasPendingUploadState, isUploadConfirmationPending, useAttachmentUploadState, useAttachmentsUploadState };
+
+//# sourceMappingURL=useAttachmentUploadState.mjs.map

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

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

package/dist/es/components/Attachment/hooks/useLocalVideoDimensions.mjs

@@ -0,0 +1,79 @@
+import { useEffect, useState } from "react";
+import { FixedSizeQueueCache, withoutConcurrency } from "stream-chat";
+//#region src/components/Attachment/hooks/useLocalVideoDimensions.ts
+/**
+* Probing creates a media element, and browsers cap how many can exist at once (Chrome allows a
+* few dozen per page), so the rendered players of other attachments compete for the same budget.
+* Two guards keep this bounded no matter how many videos are in flight:
+*
+* - results are cached by source, so a blob is probed once even if its widget remounts (a
+*   virtualized list unmounts and remounts widgets as the user scrolls) or is rendered twice;
+* - probes run one at a time under a shared tag, so N uploading videos never hold N extra media
+*   elements open. Each is a metadata read off an in-memory blob, so the queue drains fast.
+*/
+var dimensionsBySource = new FixedSizeQueueCache(100);
+var PROBE_TAG = "stream-chat-react/local-video-dimensions";
+/** A file the browser cannot decode never fires `loadedmetadata`; do not block the queue on it. */
+var PROBE_TIMEOUT_MS = 5e3;
+var probeDimensions = (src) => new Promise((resolve) => {
+	const probe = document.createElement("video");
+	const finish = (dimensions) => {
+		clearTimeout(timeout);
+		probe.removeEventListener("loadedmetadata", handleLoadedMetadata);
+		probe.removeEventListener("error", handleError);
+		probe.removeAttribute("src");
+		probe.load();
+		resolve(dimensions);
+	};
+	const handleLoadedMetadata = () => {
+		const { videoHeight, videoWidth } = probe;
+		finish(videoWidth > 0 && videoHeight > 0 ? {
+			height: videoHeight,
+			width: videoWidth
+		} : void 0);
+	};
+	const handleError = () => finish();
+	const timeout = setTimeout(handleError, PROBE_TIMEOUT_MS);
+	probe.addEventListener("loadedmetadata", handleLoadedMetadata);
+	probe.addEventListener("error", handleError);
+	probe.preload = "metadata";
+	probe.src = src;
+});
+/**
+* Reads the intrinsic dimensions of a video that is not on the CDN yet.
+*
+* Sizing normally comes from the `oh`/`ow` parameters on the attachment's CDN `thumb_url`
+* (`getCssDimensionsVariables`). A video whose upload is still in flight has no `thumb_url`, so
+* the box falls back to `1000000x1000000` and lays out square — and then resizes the moment the
+* real dimensions arrive. The local file answers the same question without a network request.
+*
+* Returns `undefined` until the metadata is in, or if the file cannot be decoded.
+*/
+var useLocalVideoDimensions = (src) => {
+	const [dimensions, setDimensions] = useState(() => src ? dimensionsBySource.get(src) : void 0);
+	useEffect(() => {
+		if (!src) {
+			setDimensions(void 0);
+			return;
+		}
+		const cached = dimensionsBySource.get(src);
+		if (cached) {
+			setDimensions(cached);
+			return;
+		}
+		let cancelled = false;
+		withoutConcurrency(PROBE_TAG, async () => {
+			const resolved = dimensionsBySource.get(src) ?? await probeDimensions(src);
+			if (resolved) dimensionsBySource.add(src, resolved);
+			if (!cancelled) setDimensions(resolved);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [src]);
+	return dimensions;
+};
+//#endregion
+export { useLocalVideoDimensions };
+
+//# sourceMappingURL=useLocalVideoDimensions.mjs.map

package/dist/es/components/Attachment/hooks/useLocalVideoDimensions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLocalVideoDimensions.mjs","names":[],"sources":["../../../../../src/components/Attachment/hooks/useLocalVideoDimensions.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { FixedSizeQueueCache, withoutConcurrency } from 'stream-chat';\n\nexport type LocalVideoDimensions = { height: number; width: number };\n\n/**\n * Probing creates a media element, and browsers cap how many can exist at once (Chrome allows a\n * few dozen per page), so the rendered players of other attachments compete for the same budget.\n * Two guards keep this bounded no matter how many videos are in flight:\n *\n * - results are cached by source, so a blob is probed once even if its widget remounts (a\n *   virtualized list unmounts and remounts widgets as the user scrolls) or is rendered twice;\n * - probes run one at a time under a shared tag, so N uploading videos never hold N extra media\n *   elements open. Each is a metadata read off an in-memory blob, so the queue drains fast.\n */\nconst dimensionsBySource = new FixedSizeQueueCache<string, LocalVideoDimensions>(100);\nconst PROBE_TAG = 'stream-chat-react/local-video-dimensions';\n/** A file the browser cannot decode never fires `loadedmetadata`; do not block the queue on it. */\nconst PROBE_TIMEOUT_MS = 5000;\n\nconst probeDimensions = (src: string) =>\n  new Promise<LocalVideoDimensions | undefined>((resolve) => {\n    const probe = document.createElement('video');\n\n    const finish = (dimensions?: LocalVideoDimensions) => {\n      clearTimeout(timeout);\n      probe.removeEventListener('loadedmetadata', handleLoadedMetadata);\n      probe.removeEventListener('error', handleError);\n      // Detach the source so the element stops holding the blob and frees its media slot.\n      probe.removeAttribute('src');\n      probe.load();\n      resolve(dimensions);\n    };\n\n    const handleLoadedMetadata = () => {\n      const { videoHeight, videoWidth } = probe;\n      // An undecodable file reports 0x0 — no better than the CSS fallback.\n      finish(\n        videoWidth > 0 && videoHeight > 0\n          ? { height: videoHeight, width: videoWidth }\n          : undefined,\n      );\n    };\n    const handleError = () => finish();\n\n    const timeout = setTimeout(handleError, PROBE_TIMEOUT_MS);\n    probe.addEventListener('loadedmetadata', handleLoadedMetadata);\n    probe.addEventListener('error', handleError);\n    probe.preload = 'metadata';\n    probe.src = src;\n  });\n\n/**\n * Reads the intrinsic dimensions of a video that is not on the CDN yet.\n *\n * Sizing normally comes from the `oh`/`ow` parameters on the attachment's CDN `thumb_url`\n * (`getCssDimensionsVariables`). A video whose upload is still in flight has no `thumb_url`, so\n * the box falls back to `1000000x1000000` and lays out square — and then resizes the moment the\n * real dimensions arrive. The local file answers the same question without a network request.\n *\n * Returns `undefined` until the metadata is in, or if the file cannot be decoded.\n */\nexport const useLocalVideoDimensions = (src?: string) => {\n  const [dimensions, setDimensions] = useState<LocalVideoDimensions | undefined>(() =>\n    src ? dimensionsBySource.get(src) : undefined,\n  );\n\n  useEffect(() => {\n    if (!src) {\n      setDimensions(undefined);\n      return;\n    }\n\n    const cached = dimensionsBySource.get(src);\n    if (cached) {\n      setDimensions(cached);\n      return;\n    }\n\n    let cancelled = false;\n\n    withoutConcurrency(PROBE_TAG, async () => {\n      // Another widget may have probed this source while this one waited its turn.\n      const resolved = dimensionsBySource.get(src) ?? (await probeDimensions(src));\n\n      if (resolved) dimensionsBySource.add(src, resolved);\n      if (!cancelled) setDimensions(resolved);\n    });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [src]);\n\n  return dimensions;\n};\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,qBAAqB,IAAI,oBAAkD,GAAG;AACpF,IAAM,YAAY;;AAElB,IAAM,mBAAmB;AAEzB,IAAM,mBAAmB,QACvB,IAAI,SAA2C,YAAY;CACzD,MAAM,QAAQ,SAAS,cAAc,OAAO;CAE5C,MAAM,UAAU,eAAsC;EACpD,aAAa,OAAO;EACpB,MAAM,oBAAoB,kBAAkB,oBAAoB;EAChE,MAAM,oBAAoB,SAAS,WAAW;EAE9C,MAAM,gBAAgB,KAAK;EAC3B,MAAM,KAAK;EACX,QAAQ,UAAU;CACpB;CAEA,MAAM,6BAA6B;EACjC,MAAM,EAAE,aAAa,eAAe;EAEpC,OACE,aAAa,KAAK,cAAc,IAC5B;GAAE,QAAQ;GAAa,OAAO;EAAW,IACzC,KAAA,CACN;CACF;CACA,MAAM,oBAAoB,OAAO;CAEjC,MAAM,UAAU,WAAW,aAAa,gBAAgB;CACxD,MAAM,iBAAiB,kBAAkB,oBAAoB;CAC7D,MAAM,iBAAiB,SAAS,WAAW;CAC3C,MAAM,UAAU;CAChB,MAAM,MAAM;AACd,CAAC;;;;;;;;;;;AAYH,IAAa,2BAA2B,QAAiB;CACvD,MAAM,CAAC,YAAY,iBAAiB,eAClC,MAAM,mBAAmB,IAAI,GAAG,IAAI,KAAA,CACtC;CAEA,gBAAgB;EACd,IAAI,CAAC,KAAK;GACR,cAAc,KAAA,CAAS;GACvB;EACF;EAEA,MAAM,SAAS,mBAAmB,IAAI,GAAG;EACzC,IAAI,QAAQ;GACV,cAAc,MAAM;GACpB;EACF;EAEA,IAAI,YAAY;EAEhB,mBAAmB,WAAW,YAAY;GAExC,MAAM,WAAW,mBAAmB,IAAI,GAAG,KAAM,MAAM,gBAAgB,GAAG;GAE1E,IAAI,UAAU,mBAAmB,IAAI,KAAK,QAAQ;GAClD,IAAI,CAAC,WAAW,cAAc,QAAQ;EACxC,CAAC;EAED,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,GAAG,CAAC;CAER,OAAO;AACT"}

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

@@ -0,0 +1,13 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Attachment/icons.tsx
+var ExternalLinkIcon = () => /* @__PURE__ */ jsx("svg", {
+	fill: "currentColor",
+	viewBox: "0 0 16 16",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: /* @__PURE__ */ jsx("path", { d: "M12.586 2H10a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V3.414l-6.793 6.793a1 1 0 0 1-1.414-1.414L12.586 2zM6 1a1 1 0 1 1 0 2H3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h8.967a1 1 0 0 0 1-.99L13 9.99a1 1 0 1 1 2 .02l-.033 3.023a3 3 0 0 1-3 2.967H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h3z" })
+});
+//#endregion
+export { ExternalLinkIcon };
+
+//# sourceMappingURL=icons.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.mjs","names":[],"sources":["../../../../src/components/Attachment/icons.tsx"],"sourcesContent":["import React from 'react';\nimport type { IconProps } from '../../types/types';\n\nexport const DownloadIcon = ({ className }: IconProps) => (\n  <svg\n    className={className}\n    data-testid='download'\n    fill='none'\n    height='24'\n    viewBox='0 0 24 24'\n    width='24'\n    xmlns='http://www.w3.org/2000/svg'\n  >\n    <path\n      d='M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z'\n      fill='black'\n    />\n  </svg>\n);\n\nexport const ExternalLinkIcon = () => (\n  <svg fill='currentColor' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'>\n    <path d='M12.586 2H10a1 1 0 1 1 0-2h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V3.414l-6.793 6.793a1 1 0 0 1-1.414-1.414L12.586 2zM6 1a1 1 0 1 1 0 2H3a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h8.967a1 1 0 0 0 1-.99L13 9.99a1 1 0 1 1 2 .02l-.033 3.023a3 3 0 0 1-3 2.967H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h3z' />\n  </svg>\n);\n"],"mappings":";;;AAoBA,IAAa,yBACX,oBAAC,OAAD;CAAK,MAAK;CAAe,SAAQ;CAAY,OAAM;WACjD,oBAAC,QAAD,EAAM,GAAE,iRAAkR,CAAA;AACvR,CAAA"}

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

@@ -0,0 +1,41 @@
+import * as linkify from "linkifyjs";
+//#region src/components/Attachment/utils.tsx
+var SUPPORTED_VIDEO_FORMATS = [
+	"video/mp4",
+	"video/ogg",
+	"video/webm",
+	"video/quicktime"
+];
+var isGalleryAttachmentType = (attachment) => Array.isArray(attachment.items);
+var isSvgAttachment = (attachment) => {
+	return (attachment.fallback || "").toLowerCase().endsWith(".svg");
+};
+var divMod = (num, divisor) => [Math.floor(num / divisor), num % divisor];
+var displayDuration = (totalSeconds) => {
+	if (!totalSeconds || totalSeconds < 0) return "00:00";
+	const [hours, hoursLeftover] = divMod(totalSeconds, 3600);
+	const [minutes, seconds] = divMod(hoursLeftover, 60);
+	const roundedSeconds = Math.ceil(seconds);
+	const prependHrsZero = String(hours).padStart(2, "0");
+	const minSec = `${String(minutes).padStart(2, "0")}:${String(roundedSeconds).padStart(2, "0")}`;
+	return hours ? `${prependHrsZero}:` + minSec : minSec;
+};
+function getCssDimensionsVariables(url) {
+	const cssVars = {
+		"--original-height": 1e6,
+		"--original-width": 1e6
+	};
+	if (linkify.test(url, "url")) {
+		const urlParams = new URL(url).searchParams;
+		const oh = Number(urlParams.get("oh"));
+		const ow = Number(urlParams.get("ow"));
+		const originalHeight = oh > 1 ? oh : 1e6;
+		cssVars["--original-width"] = ow > 1 ? ow : 1e6;
+		cssVars["--original-height"] = originalHeight;
+	}
+	return cssVars;
+}
+//#endregion
+export { SUPPORTED_VIDEO_FORMATS, displayDuration, divMod, getCssDimensionsVariables, isGalleryAttachmentType, isSvgAttachment };
+
+//# sourceMappingURL=utils.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../../src/components/Attachment/utils.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Attachment, SharedLocationResponse } from 'stream-chat';\nimport type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';\nimport * as linkify from 'linkifyjs';\n\nexport const SUPPORTED_VIDEO_FORMATS = [\n  'video/mp4',\n  'video/ogg',\n  'video/webm',\n  'video/quicktime',\n];\n\nexport type AttachmentComponentType =\n  | 'card'\n  | 'gallery'\n  | 'giphy'\n  | 'image'\n  | 'media'\n  | 'audio'\n  | 'voiceRecording'\n  | 'file'\n  | 'geolocation'\n  | 'unsupported';\n\nexport type AttachmentContainerType = (typeof ATTACHMENT_GROUPS_ORDER)[number];\n\nexport type GroupedRenderedAttachment = Record<AttachmentContainerType, ReactNode[]>;\n\nexport type GalleryAttachment = {\n  items: Attachment[];\n  type: 'gallery';\n};\n\nexport type RenderAttachmentProps = Omit<AttachmentProps, 'attachments'> & {\n  attachment: Attachment;\n};\n\nexport type RenderGalleryProps = Omit<AttachmentProps, 'attachments'> & {\n  attachment: GalleryAttachment;\n};\n\nexport type RenderMediaProps = Omit<AttachmentProps, 'attachments'> & {\n  attachments: Attachment[];\n};\n\nexport type GeolocationContainerProps = Omit<AttachmentProps, 'attachments'> & {\n  location: SharedLocationResponse;\n};\n\n// This identity function determines attachment type specific to React.\n// Once made sure other SDKs support the same logic, move to stream-chat-js\nexport const isGalleryAttachmentType = (\n  attachment: Attachment | GalleryAttachment,\n): attachment is GalleryAttachment =>\n  Array.isArray((attachment as GalleryAttachment).items);\n\nexport const isSvgAttachment = (attachment: Attachment) => {\n  const filename = attachment.fallback || '';\n  return filename.toLowerCase().endsWith('.svg');\n};\n\nexport const divMod = (num: number, divisor: number) => [\n  Math.floor(num / divisor),\n  num % divisor,\n];\n\nexport const displayDuration = (totalSeconds?: number) => {\n  if (!totalSeconds || totalSeconds < 0) return '00:00';\n\n  const [hours, hoursLeftover] = divMod(totalSeconds, 3600);\n  const [minutes, seconds] = divMod(hoursLeftover, 60);\n  const roundedSeconds = Math.ceil(seconds);\n  const prependHrsZero = String(hours).padStart(2, '0');\n  const prependMinZero = String(minutes).padStart(2, '0');\n  const prependSecZero = String(roundedSeconds).padStart(2, '0');\n  const minSec = `${prependMinZero}:${prependSecZero}`;\n\n  return hours ? `${prependHrsZero}:` + minSec : minSec;\n};\nexport function getCssDimensionsVariables(url: string) {\n  const cssVars = {\n    '--original-height': 1000000,\n    '--original-width': 1000000,\n  } as Record<string, number>;\n\n  if (linkify.test(url, 'url')) {\n    const urlParams = new URL(url).searchParams;\n    const oh = Number(urlParams.get('oh'));\n    const ow = Number(urlParams.get('ow'));\n    const originalHeight = oh > 1 ? oh : 1000000;\n    const originalWidth = ow > 1 ? ow : 1000000;\n    cssVars['--original-width'] = originalWidth;\n    cssVars['--original-height'] = originalHeight;\n  }\n\n  return cssVars;\n}\n"],"mappings":";;AAKA,IAAa,0BAA0B;CACrC;CACA;CACA;CACA;AACF;AAyCA,IAAa,2BACX,eAEA,MAAM,QAAS,WAAiC,KAAK;AAEvD,IAAa,mBAAmB,eAA2B;CAEzD,QADiB,WAAW,YAAY,GAAA,CACxB,YAAY,CAAC,CAAC,SAAS,MAAM;AAC/C;AAEA,IAAa,UAAU,KAAa,YAAoB,CACtD,KAAK,MAAM,MAAM,OAAO,GACxB,MAAM,OACR;AAEA,IAAa,mBAAmB,iBAA0B;CACxD,IAAI,CAAC,gBAAgB,eAAe,GAAG,OAAO;CAE9C,MAAM,CAAC,OAAO,iBAAiB,OAAO,cAAc,IAAI;CACxD,MAAM,CAAC,SAAS,WAAW,OAAO,eAAe,EAAE;CACnD,MAAM,iBAAiB,KAAK,KAAK,OAAO;CACxC,MAAM,iBAAiB,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;CAGpD,MAAM,SAAS,GAFQ,OAAO,OAAO,CAAC,CAAC,SAAS,GAAG,GAEjC,EAAe,GADV,OAAO,cAAc,CAAC,CAAC,SAAS,GAAG,GACtB;CAEpC,OAAO,QAAQ,GAAG,eAAe,KAAK,SAAS;AACjD;AACA,SAAgB,0BAA0B,KAAa;CACrD,MAAM,UAAU;EACd,qBAAqB;EACrB,oBAAoB;CACtB;CAEA,IAAI,QAAQ,KAAK,KAAK,KAAK,GAAG;EAC5B,MAAM,YAAY,IAAI,IAAI,GAAG,CAAC,CAAC;EAC/B,MAAM,KAAK,OAAO,UAAU,IAAI,IAAI,CAAC;EACrC,MAAM,KAAK,OAAO,UAAU,IAAI,IAAI,CAAC;EACrC,MAAM,iBAAiB,KAAK,IAAI,KAAK;EAErC,QAAQ,sBADc,KAAK,IAAI,KAAK;EAEpC,QAAQ,uBAAuB;CACjC;CAEA,OAAO;AACT"}