stream-chat-react 14.11.0 → 14.12.0

package/dist/cjs/{useInertWhenHidden.22151beb.js → useInertWhenHidden.1a2a6a2b.js}

@@ -1,4 +1,4 @@
-const require_NotificationList = require("./NotificationList.6abbee1c.js");
+const require_NotificationList = require("./NotificationList.4ce251ea.js");
 const require_audioProcessing = require("./audioProcessing.22303d69.js");
 let react = require("react");
 react = require_NotificationList.__toESM(react);
@@ -230,6 +230,46 @@ var PlayButton = ({ className, isPlaying, ...props }) => {
 	});
 };
 //#endregion
+//#region src/components/Loading/UploadedSizeIndicator.tsx
+var UploadedSizeIndicator = ({ fullBytes, uploadedBytes }) => {
+	const { FileSizeIndicator: FileSizeIndicator$2 = require_NotificationList.FileSizeIndicator } = require_NotificationList.useComponentContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "str-chat__attachment-preview-file__upload-size-fraction",
+		"data-testid": "upload-size-fraction",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileSizeIndicator$2, { fileSize: uploadedBytes }),
+			" ",
+			` / `,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileSizeIndicator$2, { fileSize: fullBytes })
+		]
+	});
+};
+//#endregion
+//#region src/components/Loading/AttachmentUploadedSizeIndicator.tsx
+function resolveAttachmentFullByteSize(attachment) {
+	const fromFile = attachment.localMetadata?.file?.size;
+	if (typeof fromFile === "number" && Number.isFinite(fromFile) && fromFile >= 0) return fromFile;
+	const raw = attachment.file_size;
+	if (typeof raw === "number" && Number.isFinite(raw) && raw >= 0) return raw;
+	if (typeof raw === "string") {
+		const n = parseFloat(raw);
+		if (Number.isFinite(n) && n >= 0) return n;
+	}
+}
+var AttachmentUploadedSizeIndicator = ({ attachment, uploadProgress: liveUploadProgress }) => {
+	const { FileSizeIndicator: FileSizeIndicator$1 = require_NotificationList.FileSizeIndicator, UploadedSizeIndicator: UploadedSizeIndicator$1 = UploadedSizeIndicator } = require_NotificationList.useComponentContext();
+	const { uploadState } = attachment.localMetadata ?? {};
+	const uploadProgress = liveUploadProgress ?? attachment.localMetadata?.uploadProgress;
+	const fullBytes = resolveAttachmentFullByteSize(attachment);
+	const uploaded = uploadProgress !== void 0 && fullBytes !== void 0 ? Math.round(uploadProgress / 100 * fullBytes) : void 0;
+	if (uploadState === "uploading" && uploaded !== void 0 && fullBytes !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadedSizeIndicator$1, {
+		fullBytes,
+		uploadedBytes: uploaded
+	});
+	if (uploadState === "finished") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileSizeIndicator$1, { fileSize: attachment.file_size });
+	return null;
+};
+//#endregion
 //#region src/components/Loading/progress-indicators.tsx
 var RING_RADIUS = 12;
 var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
@@ -275,27 +315,12 @@ var CircularProgressIndicator = ({ percent }) => {
 };
 //#endregion
 //#region src/components/Loading/UploadProgressIndicator.tsx
-var UploadProgressIndicator = ({ uploadProgress }) => {
+var UploadProgressIndicator = ({ uploadConfirmationPending, uploadProgress }) => {
 	const { LoadingIndicator: LoadingIndicator$1 = require_NotificationList.LoadingIndicator, ProgressIndicator = CircularProgressIndicator } = require_NotificationList.useComponentContext();
-	if (uploadProgress === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingIndicator$1, { "data-testid": "loading-indicator" });
+	if (uploadConfirmationPending || uploadProgress === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingIndicator$1, { "data-testid": "loading-indicator" });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressIndicator, { percent: uploadProgress });
 };
 //#endregion
-//#region src/components/Loading/UploadedSizeIndicator.tsx
-var UploadedSizeIndicator = ({ fullBytes, uploadedBytes }) => {
-	const { FileSizeIndicator: FileSizeIndicator$2 = require_NotificationList.FileSizeIndicator } = require_NotificationList.useComponentContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "str-chat__attachment-preview-file__upload-size-fraction",
-		"data-testid": "upload-size-fraction",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileSizeIndicator$2, { fileSize: uploadedBytes }),
-			" ",
-			` / `,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileSizeIndicator$2, { fileSize: fullBytes })
-		]
-	});
-};
-//#endregion
 //#region src/components/Dialog/components/Callout.tsx
 /**
 * Callout is a general purpose component that displays content in dialog that has been previously opened by clicking on a reference element
@@ -512,6 +537,105 @@ function mentionsMarkdownPlugin(mentionEntitiesOrUsers) {
 	return createMentionPluginAndDisplayTextSet(mentionEntitiesOrUsers).plugin;
 }
 //#endregion
+//#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) => (0, stream_chat.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 } = require_NotificationList.useChatContext();
+	const pending = (0, react.useMemo)(() => attachments.filter(hasPendingUploadState).map((a) => a.localMetadata), [attachments]);
+	const pendingIdsKey = pending.map(({ id }) => id).join(",");
+	const selector = (0, react.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 } = require_NotificationList.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((0, react.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 (0, stream_chat.isLocalUploadAttachment)(attachment) ? attachment.localMetadata.previewUri : void 0;
+};
+//#endregion
 //#region src/components/AudioPlayback/components/DurationDisplay.tsx
 function DurationDisplay({ className, duration, isPlaying, secondsElapsed, showRemaining = false }) {
 	const remainingSeconds = duration != null && secondsElapsed != null ? Math.max(0, duration - secondsElapsed) : void 0;
@@ -989,6 +1113,7 @@ var useSubmitHandler = (props) => {
 					pollId: null
 				});
 				else messageComposer.clear();
+				if (messageComposer.config.text.publishTypingEvents) messageComposer.channel.stopTyping().catch(() => void 0);
 				if (overrideSubmitHandler) await overrideSubmitHandler({
 					cid: messageComposer.channel.cid,
 					localMessage,
@@ -1000,7 +1125,6 @@ var useSubmitHandler = (props) => {
 					message,
 					options: sendOptions
 				});
-				if (messageComposer.config.text.publishTypingEvents) await messageComposer.channel.stopTyping();
 			} catch (err) {
 				restoreComposerStateSnapshot();
 				addNotification({
@@ -1782,15 +1906,16 @@ var useMessageContentIsEmpty = () => {
 };
 //#endregion
 //#region src/components/MessageComposer/RemoveAttachmentPreviewButton.tsx
+/** Upload states in which the request is still running, so removing also cancels it. */
+var IN_FLIGHT_UPLOAD_STATES = ["pending", "uploading"];
 var RemoveAttachmentPreviewButton = ({ className, uploadState, ...props }) => {
 	const { IconXmarkSmall } = require_NotificationList.useComponentContextIcons();
 	const { t } = require_NotificationList.useTranslationContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationList.Button, {
-		"aria-label": t("aria/Remove attachment"),
+		"aria-label": !!uploadState && IN_FLIGHT_UPLOAD_STATES.includes(uploadState) ? t("aria/Cancel upload") : t("aria/Remove attachment"),
 		circular: true,
 		className: (0, clsx.default)("str-chat__attachment-preview__remove-button", className),
 		"data-testid": "preview-item-delete-button",
-		disabled: uploadState === "uploading",
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconXmarkSmall, {})
 	});
@@ -3564,30 +3689,6 @@ var UnsupportedAttachmentPreview = ({ attachment, removeAttachments }) => {
 	});
 };
 //#endregion
-//#region src/components/MessageComposer/AttachmentPreviewList/AttachmentUploadedSizeIndicator.tsx
-function resolveAttachmentFullByteSize(attachment) {
-	const fromFile = attachment.localMetadata?.file?.size;
-	if (typeof fromFile === "number" && Number.isFinite(fromFile) && fromFile >= 0) return fromFile;
-	const raw = attachment.file_size;
-	if (typeof raw === "number" && Number.isFinite(raw) && raw >= 0) return raw;
-	if (typeof raw === "string") {
-		const n = parseFloat(raw);
-		if (Number.isFinite(n) && n >= 0) return n;
-	}
-}
-var AttachmentUploadedSizeIndicator = ({ attachment }) => {
-	const { FileSizeIndicator: FileSizeIndicator$1 = require_NotificationList.FileSizeIndicator, UploadedSizeIndicator: UploadedSizeIndicator$1 = UploadedSizeIndicator } = require_NotificationList.useComponentContext();
-	const { uploadProgress, uploadState } = attachment.localMetadata ?? {};
-	const fullBytes = resolveAttachmentFullByteSize(attachment);
-	const uploaded = uploadProgress !== void 0 && fullBytes !== void 0 ? Math.round(uploadProgress / 100 * fullBytes) : void 0;
-	if (uploadState === "uploading" && uploaded !== void 0 && fullBytes !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadedSizeIndicator$1, {
-		fullBytes,
-		uploadedBytes: uploaded
-	});
-	if (uploadState === "finished") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileSizeIndicator$1, { fileSize: attachment.file_size });
-	return null;
-};
-//#endregion
 //#region src/components/MessageComposer/AttachmentPreviewList/utils/AttachmentPreviewRoot.tsx
 var INTERACTIVE_SELECTOR = "button, a, input, textarea, select, [role=\"button\"], [role=\"link\"], [data-interactive=\"true\"]";
 function hasInteractiveAncestorBeforeRoot(target, root) {
@@ -3663,7 +3764,10 @@ var FileAttachmentPreview = ({ attachment, handleRetry, removeAttachments }) =>
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "str-chat__attachment-preview-file__data",
 					children: [
-						uploadState === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadProgressIndicator, { uploadProgress }),
+						uploadState === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadProgressIndicator, {
+							uploadConfirmationPending: isUploadConfirmationPending(attachment.localMetadata),
+							uploadProgress
+						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentUploadedSizeIndicator, { attachment }),
 						hasFatalError && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "str-chat__attachment-preview-file__fatal-error",
@@ -3753,7 +3857,10 @@ var AudioAttachmentPreview = ({ attachment, handleRetry, removeAttachments }) =>
 					children: (0, stream_chat.isVoiceRecordingAttachment)(attachment) ? t("Voice message") : attachment.title
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "str-chat__attachment-preview-file__data",
-					children: [uploadState === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadProgressIndicator, { uploadProgress }), showProgressControls ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!resolvedDuration && !progressPercent && !isPlaying && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentUploadedSizeIndicator, { attachment }), hasWaveform ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DurationDisplay, {
+					children: [uploadState === "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadProgressIndicator, {
+						uploadConfirmationPending: isUploadConfirmationPending(attachment.localMetadata),
+						uploadProgress
+					}), showProgressControls ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!resolvedDuration && !progressPercent && !isPlaying && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentUploadedSizeIndicator, { attachment }), hasWaveform ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DurationDisplay, {
 						duration: resolvedDuration,
 						isPlaying: Boolean(isPlaying),
 						secondsElapsed,
@@ -3869,7 +3976,10 @@ var MediaAttachmentPreview = ({ attachment, handleRetry, openPreview, removeAtta
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: (0, clsx.default)("str-chat__attachment-preview-media__overlay"),
 				children: [
-					isUploading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadProgressIndicator, { uploadProgress }),
+					isUploading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadProgressIndicator, {
+						uploadConfirmationPending: isUploadConfirmationPending(attachment.localMetadata),
+						uploadProgress
+					}),
 					(0, stream_chat.isVideoAttachment)(attachment) && !hasUploadError && uploadState !== "uploading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MediaBadge, {
 						attachment,
 						variant: "video"
@@ -5035,6 +5145,7 @@ var TextareaComposerWithLiveAnnouncements = ({ className, closeSuggestionsOnClic
 	const minRows = minRowsProp ?? minRowsContext;
 	const shouldSubmit = shouldSubmitProp ?? shouldSubmitContext ?? defaultShouldSubmit;
 	const messageComposer = useMessageComposerController();
+	const hasSendableData = useMessageComposerHasSendableData();
 	const { textComposer } = messageComposer;
 	const { selection, suggestions, text } = require_NotificationList.useStateStore(textComposer.state, textComposerStateSelector$1);
 	const ariaLabel = text ? t("aria/Message input") : placeholder;
@@ -5119,18 +5230,18 @@ var TextareaComposerWithLiveAnnouncements = ({ className, closeSuggestionsOnClic
 		} else if (textComposer.command && (event.key === "Escape" || event.key === "Backspace" && shouldBackspaceExitCommandMode(textareaValue))) {
 			event.preventDefault();
 			textComposer.clearCommand();
-		} else if (shouldSubmit(event) && textareaRef.current && messageComposer.hasSendableData) {
+		} else if (shouldSubmit(event) && textareaRef.current && hasSendableData) {
 			if (event.key === "Enter") event.preventDefault();
 			handleSubmit();
 		}
 	}, [
 		focusedItemIndex,
 		handleSubmit,
-		messageComposer,
+		hasSendableData,
 		onKeyDown,
 		shouldSubmit,
-		textComposer,
-		textareaRef
+		textareaRef,
+		textComposer
 	]);
 	const scrollHandler = (0, react.useCallback)((event) => {
 		if (onScroll) onScroll(event);
@@ -5804,6 +5915,12 @@ Object.defineProperty(exports, "AttachmentSelectorContextProvider", {
 		return AttachmentSelectorContextProvider;
 	}
 });
+Object.defineProperty(exports, "AttachmentUploadedSizeIndicator", {
+	enumerable: true,
+	get: function() {
+		return AttachmentUploadedSizeIndicator;
+	}
+});
 Object.defineProperty(exports, "AudioRecorder", {
 	enumerable: true,
 	get: function() {
@@ -6206,6 +6323,12 @@ Object.defineProperty(exports, "escapeRegExp", {
 		return escapeRegExp;
 	}
 });
+Object.defineProperty(exports, "getAttachmentPreviewUrl", {
+	enumerable: true,
+	get: function() {
+		return getAttachmentPreviewUrl;
+	}
+});
 Object.defineProperty(exports, "getAudioTrackSliderAriaValueText", {
 	enumerable: true,
 	get: function() {
@@ -6248,6 +6371,12 @@ Object.defineProperty(exports, "hasEnabledCommandSuggestions", {
 		return hasEnabledCommandSuggestions;
 	}
 });
+Object.defineProperty(exports, "hasPendingUploadState", {
+	enumerable: true,
+	get: function() {
+		return hasPendingUploadState;
+	}
+});
 Object.defineProperty(exports, "isGalleryAttachmentType", {
 	enumerable: true,
 	get: function() {
@@ -6260,6 +6389,12 @@ Object.defineProperty(exports, "isSvgAttachment", {
 		return isSvgAttachment;
 	}
 });
+Object.defineProperty(exports, "isUploadConfirmationPending", {
+	enumerable: true,
+	get: function() {
+		return isUploadConfirmationPending;
+	}
+});
 Object.defineProperty(exports, "matchMarkdownLinks", {
 	enumerable: true,
 	get: function() {
@@ -6326,12 +6461,24 @@ Object.defineProperty(exports, "useAttachmentSelectorContext", {
 		return useAttachmentSelectorContext;
 	}
 });
+Object.defineProperty(exports, "useAttachmentUploadState", {
+	enumerable: true,
+	get: function() {
+		return useAttachmentUploadState;
+	}
+});
 Object.defineProperty(exports, "useAttachmentsForPreview", {
 	enumerable: true,
 	get: function() {
 		return useAttachmentsForPreview;
 	}
 });
+Object.defineProperty(exports, "useAttachmentsUploadState", {
+	enumerable: true,
+	get: function() {
+		return useAttachmentsUploadState;
+	}
+});
 Object.defineProperty(exports, "useCanCreatePoll", {
 	enumerable: true,
 	get: function() {
@@ -6423,4 +6570,4 @@ Object.defineProperty(exports, "useSettledAnnouncement", {
 	}
 });
 
-//# sourceMappingURL=useInertWhenHidden.22151beb.js.map
+//# sourceMappingURL=useInertWhenHidden.1a2a6a2b.js.map