@droppii-org/chat-sdk 0.7.6 → 0.7.8

package/dist/hooks/message/useSendMessage.js

@@ -18,6 +18,7 @@ import { updateSession } from "../../hooks/session/useUpdateSession";
 import { invalidateSessionQueries } from "../../utils/queryHelpers";
 import { resolveConversationBotId } from "../../utils/conversation";
 import { QUERY_KEYS } from "../../services/query";
+import { enqueue } from "../../utils/sendQueue";
 const messageFileStore = new Map();
 const MEDIA_CONTENT_TYPES = new Set([
     MessageType.PictureMessage,
@@ -149,6 +150,120 @@ export const createQuoteMessage = async (text, quotedMessage, urls) => {
     });
     return textMessage;
 };
+// Rebuilds a failed message under a new clientMsgID, re-attaching its stored files.
+const recreateFailedMessage = async (failedMessage) => {
+    var _a, _b;
+    const storedFiles = messageFileStore.get(failedMessage.clientMsgID);
+    if (!storedFiles) {
+        const textContent = ((_a = failedMessage.textElem) === null || _a === void 0 ? void 0 : _a.content) || failedMessage.content || "";
+        if (failedMessage.contentType === MessageType.CustomMessage) {
+            return failedMessage.customElem
+                ? createCustomMessageByParams({
+                    data: failedMessage.customElem.data,
+                    extension: failedMessage.customElem.extension,
+                    description: failedMessage.customElem.description,
+                })
+                : null;
+        }
+        if (failedMessage.contentType === MessageType.UrlTextMessage &&
+            failedMessage.urlTextElem) {
+            return createUrlTextMessage(textContent, failedMessage.urlTextElem.urls);
+        }
+        if (failedMessage.contentType === MessageType.StickerMessage) {
+            return ((_b = failedMessage.stickerElem) === null || _b === void 0 ? void 0 : _b.content)
+                ? createStickerMessage(failedMessage.stickerElem.content)
+                : null;
+        }
+        return createTextMessage(textContent);
+    }
+    let newPayload = null;
+    if (storedFiles.type === "image" && failedMessage.pictureElem) {
+        const { sourcePicture, bigPicture, snapshotPicture, sourcePath } = failedMessage.pictureElem;
+        newPayload = await createImageMessageByFile({
+            sourcePicture,
+            bigPicture,
+            snapshotPicture,
+            sourcePath,
+            file: storedFiles.file,
+        });
+    }
+    else if (storedFiles.type === "video" && failedMessage.videoElem) {
+        const elem = failedMessage.videoElem;
+        newPayload = await createVideoMessageByFile({
+            videoPath: elem.videoPath,
+            duration: elem.duration,
+            videoType: elem.videoType,
+            snapshotPath: elem.snapshotPath,
+            videoUUID: elem.videoUUID,
+            videoUrl: elem.videoUrl,
+            videoSize: elem.videoSize,
+            snapshotUUID: elem.snapshotUUID,
+            snapshotSize: elem.snapshotSize,
+            snapshotUrl: elem.snapshotUrl,
+            snapshotWidth: elem.snapshotWidth,
+            snapshotHeight: elem.snapshotHeight,
+            videoFile: storedFiles.videoFile,
+            snapshotFile: storedFiles.snapshotFile,
+        });
+    }
+    else if (storedFiles.type === "file" && failedMessage.fileElem) {
+        const elem = failedMessage.fileElem;
+        newPayload = await createFileMessageByFile({
+            filePath: elem.filePath,
+            fileName: elem.fileName,
+            uuid: elem.uuid,
+            sourceUrl: elem.sourceUrl,
+            fileSize: elem.fileSize,
+            file: storedFiles.file,
+        });
+    }
+    if (newPayload) {
+        messageFileStore.delete(failedMessage.clientMsgID);
+        messageFileStore.set(newPayload.clientMsgID, storedFiles);
+    }
+    return newPayload;
+};
+const SEND_HOLD_BASE_MS = 60000;
+// About a 2 Mbps upload.
+const SEND_HOLD_MIN_BYTES_PER_MS = 250;
+const storedFileBytes = (clientMsgID) => {
+    const stored = messageFileStore.get(clientMsgID);
+    if (!stored)
+        return 0;
+    return stored.type === "video"
+        ? stored.videoFile.size + stored.snapshotFile.size
+        : stored.file.size;
+};
+// How long a send may hold back the next queued message. Past this the next one goes
+// anyway, so a stalled upload cannot block the thread for good.
+const sendHoldLimitMs = (message) => {
+    var _a, _b;
+    const items = (_b = (_a = message.mergeElem) === null || _a === void 0 ? void 0 : _a.multiMessage) !== null && _b !== void 0 ? _b : [message];
+    const bytes = items.reduce((sum, item) => sum + storedFileBytes(item.clientMsgID), 0);
+    return SEND_HOLD_BASE_MS + bytes / SEND_HOLD_MIN_BYTES_PER_MS;
+};
+const settleOrTimeout = (promise, ms) => new Promise((resolve) => {
+    const timer = setTimeout(resolve, ms);
+    void promise.finally(() => {
+        clearTimeout(timer);
+        resolve();
+    });
+});
+let unsentCount = 0;
+const warnUnsent = (event) => {
+    event.preventDefault();
+    event.returnValue = "";
+};
+// Queued messages live only in memory until the SDK takes them, so a reload would drop them.
+const trackUnsent = (sending) => {
+    if (unsentCount++ === 0)
+        window.addEventListener("beforeunload", warnUnsent);
+    return sending.finally(() => {
+        if (--unsentCount === 0) {
+            window.removeEventListener("beforeunload", warnUnsent);
+        }
+    });
+};
 export const useSendMessage = (options) => {
     var _a;
     const { t } = useTranslation("common");
@@ -185,7 +300,7 @@ export const useSendMessage = (options) => {
             console.error("syncSessionAfterPublicMessage", error);
         }
     }, [queryClient]);
-    const dispatchMessage = useCallback(async (message, currentSession) => {
+    const dispatchMessage = useCallback(async (message) => {
         var _a, _b, _c, _d, _e, _f;
         const plainText = ((_a = message === null || message === void 0 ? void 0 : message.textElem) === null || _a === void 0 ? void 0 : _a.content) ||
             ((_b = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _b === void 0 ? void 0 : _b.text) ||
@@ -225,14 +340,10 @@ export const useSendMessage = (options) => {
             },
         });
         updateOneMessage(Object.assign(Object.assign({}, successMessage), { ex: successMessage.ex || message.ex || "{}", isInternal: (_f = successMessage.isInternal) !== null && _f !== void 0 ? _f : message.isInternal }));
-        if (!message.isInternal) {
-            await syncSessionAfterPublicMessage(currentSession);
-        }
         messageFileStore.delete(message.clientMsgID);
     }, [
         groupID,
         recvID,
-        syncSessionAfterPublicMessage,
         t,
         conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName,
         conversationData === null || conversationData === void 0 ? void 0 : conversationData.faceURL,
@@ -240,334 +351,290 @@ export const useSendMessage = (options) => {
         conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationType,
         userId,
     ]);
-    const sendMessage = useCallback(async (message, currentSession) => {
-        pushNewMessage(message);
-        emit(scrollEvent);
-        try {
-            await dispatchMessage(message, currentSession);
-            return true;
-        }
-        catch (error) {
-            console.error("sendMessage", error);
-            updateOneMessage(Object.assign(Object.assign({}, message), { status: MessageStatus.Failed }));
-            return false;
-        }
-    }, [dispatchMessage, scrollEvent]);
-    const resendMessage = useCallback(async (failedMessage) => {
-        var _a, _b;
-        const storedFiles = messageFileStore.get(failedMessage.clientMsgID);
-        if (!storedFiles) {
-            let newTextPayload = null;
-            const textContent = ((_a = failedMessage.textElem) === null || _a === void 0 ? void 0 : _a.content) || failedMessage.content || "";
-            if (failedMessage.contentType === MessageType.CustomMessage) {
-                newTextPayload = failedMessage.customElem
-                    ? await createCustomMessageByParams({
-                        data: failedMessage.customElem.data,
-                        extension: failedMessage.customElem.extension,
-                        description: failedMessage.customElem.description,
-                    })
-                    : null;
-            }
-            else if (failedMessage.contentType === MessageType.UrlTextMessage &&
-                failedMessage.urlTextElem) {
-                newTextPayload = await createUrlTextMessage(textContent, failedMessage.urlTextElem.urls);
-            }
-            else if (failedMessage.contentType === MessageType.StickerMessage) {
-                newTextPayload = ((_b = failedMessage.stickerElem) === null || _b === void 0 ? void 0 : _b.content)
-                    ? await createStickerMessage(failedMessage.stickerElem.content)
-                    : null;
-            }
-            else {
-                newTextPayload = await createTextMessage(textContent);
-            }
-            if (!newTextPayload) {
-                updateOneMessage(Object.assign(Object.assign({}, failedMessage), { status: MessageStatus.Failed }));
-                return;
-            }
-            const conversationID = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
-            await DChatSDK.deleteMessageFromLocalStorage({
-                conversationID,
-                clientMsgID: failedMessage.clientMsgID,
-            });
-            removeOneMessage(failedMessage.clientMsgID);
-            await sendMessage(Object.assign(Object.assign({}, newTextPayload), { ex: failedMessage.ex, isInternal: failedMessage.isInternal }));
-            return;
-        }
-        let newPayload = null;
-        if (storedFiles.type === "image" && failedMessage.pictureElem) {
-            const { sourcePicture, bigPicture, snapshotPicture, sourcePath } = failedMessage.pictureElem;
-            newPayload = await createImageMessageByFile({
-                sourcePicture,
-                bigPicture,
-                snapshotPicture,
-                sourcePath,
-                file: storedFiles.file,
-            });
-        }
-        else if (storedFiles.type === "video" && failedMessage.videoElem) {
-            const elem = failedMessage.videoElem;
-            newPayload = await createVideoMessageByFile({
-                videoPath: elem.videoPath,
-                duration: elem.duration,
-                videoType: elem.videoType,
-                snapshotPath: elem.snapshotPath,
-                videoUUID: elem.videoUUID,
-                videoUrl: elem.videoUrl,
-                videoSize: elem.videoSize,
-                snapshotUUID: elem.snapshotUUID,
-                snapshotSize: elem.snapshotSize,
-                snapshotUrl: elem.snapshotUrl,
-                snapshotWidth: elem.snapshotWidth,
-                snapshotHeight: elem.snapshotHeight,
-                videoFile: storedFiles.videoFile,
-                snapshotFile: storedFiles.snapshotFile,
-            });
-        }
-        else if (storedFiles.type === "file" && failedMessage.fileElem) {
-            const elem = failedMessage.fileElem;
-            newPayload = await createFileMessageByFile({
-                filePath: elem.filePath,
-                fileName: elem.fileName,
-                uuid: elem.uuid,
-                sourceUrl: elem.sourceUrl,
-                fileSize: elem.fileSize,
-                file: storedFiles.file,
+    const sendQueueKey = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
+    // Bubbles show in call order and reach the server one at a time in that same order,
+    // so a text sent right after a large video cannot overtake the video's upload.
+    const queueSend = useCallback((build, currentSession) => {
+        const shown = enqueue(`show:${sendQueueKey}`, async () => {
+            const messages = await build();
+            if (!(messages === null || messages === void 0 ? void 0 : messages.length))
+                return null;
+            messages.forEach((message) => pushNewMessage(message));
+            emit(scrollEvent);
+            return messages;
+        });
+        const outcomes = [];
+        let isSessionSynced = false;
+        const queued = enqueue(`send:${sendQueueKey}`, async () => {
+            const messages = await shown.catch((error) => {
+                console.error("sendMessage", error);
+                return null;
             });
-        }
+            for (const message of messages !== null && messages !== void 0 ? messages : []) {
+                const holdLimitMs = sendHoldLimitMs(message);
+                const outcome = dispatchMessage(message).then(() => {
+                    if (!message.isInternal && !isSessionSynced) {
+                        isSessionSynced = true;
+                        void syncSessionAfterPublicMessage(currentSession);
+                    }
+                    return true;
+                }, (error) => {
+                    console.error("sendMessage", error);
+                    updateOneMessage(Object.assign(Object.assign({}, message), { status: MessageStatus.Failed }));
+                    return false;
+                });
+                outcomes.push(outcome);
+                await settleOrTimeout(outcome, holdLimitMs);
+            }
+        });
+        return trackUnsent(queued
+            .then(() => Promise.all(outcomes))
+            .then((results) => results.length > 0 && results.every(Boolean)));
+    }, [sendQueueKey, dispatchMessage, scrollEvent, syncSessionAfterPublicMessage]);
+    const resendMessage = useCallback((failedMessage) => queueSend(async () => {
+        const newPayload = await recreateFailedMessage(failedMessage);
         if (!newPayload) {
             updateOneMessage(Object.assign(Object.assign({}, failedMessage), { status: MessageStatus.Failed }));
-            return;
+            return null;
         }
-        messageFileStore.delete(failedMessage.clientMsgID);
-        messageFileStore.set(newPayload.clientMsgID, storedFiles);
-        const conversationID = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
         await DChatSDK.deleteMessageFromLocalStorage({
-            conversationID,
+            conversationID: sendQueueKey,
             clientMsgID: failedMessage.clientMsgID,
         });
         removeOneMessage(failedMessage.clientMsgID);
-        await sendMessage(Object.assign(Object.assign({}, newPayload), { ex: failedMessage.ex }));
-    }, [sendMessage]);
+        return [
+            Object.assign(Object.assign({}, newPayload), { ex: failedMessage.ex, isInternal: failedMessage.isInternal }),
+        ];
+    }), [queueSend, sendQueueKey]);
     const sendCustomMessage = useCallback(async (payload, sendOptions) => {
         if (!conversationData || (!recvID && !groupID))
             return false;
-        const customMessage = await createCustomMessage(payload);
-        if (!customMessage)
-            return false;
         const extendMessageInfo = generateExtendMessageInfo({
             currentSession: sendOptions === null || sendOptions === void 0 ? void 0 : sendOptions.currentSession,
         });
-        return sendMessage(Object.assign(Object.assign({}, customMessage), { ex: JSON.stringify(extendMessageInfo) || "{}", isInternal: false }), sendOptions === null || sendOptions === void 0 ? void 0 : sendOptions.currentSession);
-    }, [conversationData, recvID, groupID, sendMessage]);
+        return queueSend(async () => {
+            const customMessage = await createCustomMessage(payload);
+            if (!customMessage)
+                return null;
+            return [
+                Object.assign(Object.assign({}, customMessage), { ex: JSON.stringify(extendMessageInfo) || "{}", isInternal: false }),
+            ];
+        }, sendOptions === null || sendOptions === void 0 ? void 0 : sendOptions.currentSession);
+    }, [conversationData, recvID, groupID, queueSend]);
     const sendStickerMessage = useCallback(async (sticker, sendOptions) => {
         var _a;
         if (!conversationData || (!recvID && !groupID))
             return false;
-        if (!((_a = sticker.file) === null || _a === void 0 ? void 0 : _a.fullUrl))
-            return false;
-        const stickerMessage = await createStickerMessage(sticker.file.fullUrl);
-        if (!stickerMessage)
+        const stickerUrl = (_a = sticker.file) === null || _a === void 0 ? void 0 : _a.fullUrl;
+        if (!stickerUrl)
             return false;
         // BE records "recent stickers" only from ex.stickerId on the saved message.
         const extendMessageInfo = generateExtendMessageInfo({
             currentSession: sendOptions === null || sendOptions === void 0 ? void 0 : sendOptions.currentSession,
             stickerId: sticker.id,
         });
-        const isSent = await sendMessage(Object.assign(Object.assign({}, stickerMessage), { ex: JSON.stringify(extendMessageInfo) || "{}", isInternal: false }), sendOptions === null || sendOptions === void 0 ? void 0 : sendOptions.currentSession);
+        const isSent = await queueSend(async () => {
+            const stickerMessage = await createStickerMessage(stickerUrl);
+            if (!stickerMessage)
+                return null;
+            return [
+                Object.assign(Object.assign({}, stickerMessage), { ex: JSON.stringify(extendMessageInfo) || "{}", isInternal: false }),
+            ];
+        }, sendOptions === null || sendOptions === void 0 ? void 0 : sendOptions.currentSession);
         if (isSent) {
             queryClient.invalidateQueries({
                 queryKey: [QUERY_KEYS.GET_STICKER_HISTORY],
             });
         }
         return isSent;
-    }, [conversationData, recvID, groupID, sendMessage, queryClient]);
+    }, [conversationData, recvID, groupID, queueSend, queryClient]);
     const sendMergeMessage = useCallback(async ({ richText, plainText, files = [], currentSession, isInternal, urlMetadata, flow, customMessage, mentions, }) => {
         if (!conversationData || (!recvID && !groupID))
             return false;
-        const messageList = [];
-        const imageFileWrappers = files.filter((f) => { var _a; return (_a = f.originFileObj) === null || _a === void 0 ? void 0 : _a.type.startsWith("image/"); });
-        const videoFileWrappers = files.filter((f) => { var _a; return (_a = f.originFileObj) === null || _a === void 0 ? void 0 : _a.type.startsWith("video/"); });
-        const documentFileWrappers = files.filter((f) => {
-            var _a;
-            return (_a = f.originFileObj) === null || _a === void 0 ? void 0 : _a.type.startsWith("application/");
-        });
-        const imageMessages = [];
-        for (const fileWrapper of imageFileWrappers) {
-            const file = fileWrapper.originFileObj;
-            if (!file)
-                continue;
-            try {
-                const picInfo = await createPicBaseInfoFromFile(file);
-                const baseInfo = {
-                    uuid: uuidv4(),
-                    type: file.type,
-                    size: file.size,
-                    width: picInfo.width,
-                    height: picInfo.height,
-                    url: URL.createObjectURL(file),
-                };
-                const imageMessage = await createImageMessageByFile({
-                    sourcePicture: baseInfo,
-                    bigPicture: baseInfo,
-                    snapshotPicture: baseInfo,
-                    sourcePath: "",
-                    file,
-                });
-                if (!imageMessage)
-                    continue;
-                imageMessages.push(imageMessage);
-            }
-            catch (err) {
-                console.error("Lỗi xử lý ảnh:", err);
-            }
-        }
-        if (imageMessages.length === 1) {
-            messageFileStore.set(imageMessages[0].clientMsgID, {
-                type: "image",
-                file: imageFileWrappers[0].originFileObj,
+        const hasText = !!plainText && plainText.trim() !== "";
+        // Clear the reply bar now rather than when earlier queued sends finish building.
+        const quoted = (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID) ? quotedMessage : undefined;
+        if (hasText && quotedMessage)
+            setQuotedMessage(null);
+        // Every bubble (image or album → videos → files → text) is built first and shown
+        // together, the same order the mobile app uses.
+        const buildMessages = async () => {
+            const messageList = [];
+            const imageFileWrappers = files.filter((f) => { var _a; return (_a = f.originFileObj) === null || _a === void 0 ? void 0 : _a.type.startsWith("image/"); });
+            const videoFileWrappers = files.filter((f) => { var _a; return (_a = f.originFileObj) === null || _a === void 0 ? void 0 : _a.type.startsWith("video/"); });
+            const documentFileWrappers = files.filter((f) => {
+                var _a;
+                return (_a = f.originFileObj) === null || _a === void 0 ? void 0 : _a.type.startsWith("application/");
             });
-            messageList.push(imageMessages[0]);
-        }
-        else if (imageMessages.length > 1) {
-            imageMessages.forEach((imageMsg, index) => {
-                messageFileStore.set(imageMsg.clientMsgID, {
-                    type: "image",
-                    file: imageFileWrappers[index].originFileObj,
-                });
-            });
-            const mergeMsg = await createMergerMessage({
-                messageList: imageMessages,
-                title: "Album ảnh",
-                summaryList: imageMessages.map(() => "[Hình ảnh]"),
-            });
-            if (mergeMsg)
-                messageList.push(mergeMsg);
-        }
-        for (const fileWrapper of videoFileWrappers) {
-            const file = fileWrapper.originFileObj;
-            if (!file)
-                continue;
-            try {
-                const videoBaseInfo = await createVideoInfoWithThumbnail(file);
-                const thumbFile = new File([videoBaseInfo.thumbnail], file.name + "-thumb.jpg", { type: "image/jpeg" });
-                const videoMessage = await createVideoMessageByFile({
-                    videoPath: "",
-                    duration: videoBaseInfo.duration,
-                    videoType: file.type,
-                    snapshotPath: "",
-                    videoUUID: uuidv4(),
-                    videoUrl: URL.createObjectURL(file),
-                    videoSize: file.size,
-                    snapshotUUID: "",
-                    snapshotSize: file.size,
-                    snapshotUrl: URL.createObjectURL(thumbFile),
-                    snapshotWidth: videoBaseInfo.width,
-                    snapshotHeight: videoBaseInfo.height,
-                    snapShotType: file.type,
-                    videoFile: file,
-                    snapshotFile: thumbFile,
-                });
-                if (!videoMessage)
+            const imageMessages = [];
+            for (const fileWrapper of imageFileWrappers) {
+                const file = fileWrapper.originFileObj;
+                if (!file)
                     continue;
-                messageFileStore.set(videoMessage.clientMsgID, {
-                    type: "video",
-                    videoFile: file,
-                    snapshotFile: thumbFile,
-                });
-                messageList.push(videoMessage);
+                try {
+                    const picInfo = await createPicBaseInfoFromFile(file);
+                    const baseInfo = {
+                        uuid: uuidv4(),
+                        type: file.type,
+                        size: file.size,
+                        width: picInfo.width,
+                        height: picInfo.height,
+                        url: URL.createObjectURL(file),
+                    };
+                    const imageMessage = await createImageMessageByFile({
+                        sourcePicture: baseInfo,
+                        bigPicture: baseInfo,
+                        snapshotPicture: baseInfo,
+                        sourcePath: "",
+                        file,
+                    });
+                    if (!imageMessage)
+                        continue;
+                    messageFileStore.set(imageMessage.clientMsgID, {
+                        type: "image",
+                        file,
+                    });
+                    imageMessages.push(imageMessage);
+                }
+                catch (err) {
+                    console.error("Lỗi xử lý ảnh:", err);
+                }
             }
-            catch (err) {
-                console.error("Lỗi xử lý video:", err);
+            if (imageMessages.length === 1) {
+                messageList.push(imageMessages[0]);
             }
-        }
-        for (const fileWrapper of documentFileWrappers) {
-            const file = fileWrapper.originFileObj;
-            if (!file)
-                continue;
-            try {
-                const fileParams = {
-                    filePath: "",
-                    fileName: file.name,
-                    uuid: uuidv4(),
-                    sourceUrl: URL.createObjectURL(file),
-                    fileSize: file.size,
-                    fileType: file.type,
-                    file: file,
-                };
-                const fileMessage = await createFileMessageByFile(fileParams);
-                if (!fileMessage)
-                    continue;
-                messageFileStore.set(fileMessage.clientMsgID, {
-                    type: "file",
-                    file: file,
+            else if (imageMessages.length > 1) {
+                const mergeMsg = await createMergerMessage({
+                    messageList: imageMessages,
+                    title: "Album ảnh",
+                    summaryList: imageMessages.map(() => "[Hình ảnh]"),
                 });
-                messageList.push(fileMessage);
-            }
-            catch (err) {
-                console.error("Lỗi xử lý tin nhắn:", err);
+                if (mergeMsg)
+                    messageList.push(mergeMsg);
             }
-        }
-        const hasMentions = !!mentions && (mentions.atUserIDList.length > 0 || mentions.isAtAll);
-        if (!!plainText && plainText.trim() !== "") {
-            const urls = extractLinkUrls(plainText);
-            let textMessage = null;
-            if (hasMentions && mentions) {
-                // OpenIM SDK convention: "tag all" is signaled by the sentinel
-                // "AtAllTag" inside atUserIDList, not a separate flag/param.
-                textMessage = await createAtTextMessage({
-                    text: plainText,
-                    atUserIDList: mentions.isAtAll
-                        ? [AT_ALL_TAG, ...mentions.atUserIDList]
-                        : mentions.atUserIDList,
-                    atUsersInfo: mentions.atUsersInfo,
-                    message: (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID) ? quotedMessage : undefined,
-                    urls: urls || undefined,
-                });
-                setQuotedMessage(null);
+            for (const fileWrapper of videoFileWrappers) {
+                const file = fileWrapper.originFileObj;
+                if (!file)
+                    continue;
+                try {
+                    const videoBaseInfo = await createVideoInfoWithThumbnail(file);
+                    const thumbFile = new File([videoBaseInfo.thumbnail], file.name + "-thumb.jpg", { type: "image/jpeg" });
+                    const videoMessage = await createVideoMessageByFile({
+                        videoPath: "",
+                        duration: videoBaseInfo.duration,
+                        videoType: file.type,
+                        snapshotPath: "",
+                        videoUUID: uuidv4(),
+                        videoUrl: URL.createObjectURL(file),
+                        videoSize: file.size,
+                        snapshotUUID: "",
+                        snapshotSize: file.size,
+                        snapshotUrl: URL.createObjectURL(thumbFile),
+                        snapshotWidth: videoBaseInfo.width,
+                        snapshotHeight: videoBaseInfo.height,
+                        snapShotType: file.type,
+                        videoFile: file,
+                        snapshotFile: thumbFile,
+                    });
+                    if (!videoMessage)
+                        continue;
+                    messageFileStore.set(videoMessage.clientMsgID, {
+                        type: "video",
+                        videoFile: file,
+                        snapshotFile: thumbFile,
+                    });
+                    messageList.push(videoMessage);
+                }
+                catch (err) {
+                    console.error("Lỗi xử lý video:", err);
+                }
             }
-            else if (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID) {
-                textMessage = await createQuoteMessage(plainText, quotedMessage, urls || undefined);
-                setQuotedMessage(null);
+            for (const fileWrapper of documentFileWrappers) {
+                const file = fileWrapper.originFileObj;
+                if (!file)
+                    continue;
+                try {
+                    const fileParams = {
+                        filePath: "",
+                        fileName: file.name,
+                        uuid: uuidv4(),
+                        sourceUrl: URL.createObjectURL(file),
+                        fileSize: file.size,
+                        fileType: file.type,
+                        file: file,
+                    };
+                    const fileMessage = await createFileMessageByFile(fileParams);
+                    if (!fileMessage)
+                        continue;
+                    messageFileStore.set(fileMessage.clientMsgID, {
+                        type: "file",
+                        file: file,
+                    });
+                    messageList.push(fileMessage);
+                }
+                catch (err) {
+                    console.error("Lỗi xử lý tin nhắn:", err);
+                }
             }
-            else if (urls.length > 0) {
-                textMessage = await createUrlTextMessage(plainText, urls);
+            const hasMentions = !!mentions && (mentions.atUserIDList.length > 0 || mentions.isAtAll);
+            if (hasText) {
+                const urls = extractLinkUrls(plainText);
+                let textMessage = null;
+                if (hasMentions && mentions) {
+                    // OpenIM SDK convention: "tag all" is signaled by the sentinel
+                    // "AtAllTag" inside atUserIDList, not a separate flag/param.
+                    textMessage = await createAtTextMessage({
+                        text: plainText,
+                        atUserIDList: mentions.isAtAll
+                            ? [AT_ALL_TAG, ...mentions.atUserIDList]
+                            : mentions.atUserIDList,
+                        atUsersInfo: mentions.atUsersInfo,
+                        message: quoted,
+                        urls: urls || undefined,
+                    });
+                }
+                else if (quoted) {
+                    textMessage = await createQuoteMessage(plainText, quoted, urls || undefined);
+                }
+                else if (urls.length > 0) {
+                    textMessage = await createUrlTextMessage(plainText, urls);
+                }
+                else {
+                    textMessage = await createTextMessage(plainText);
+                }
+                if (!textMessage)
+                    return null;
+                messageList.push(textMessage);
             }
-            else {
-                textMessage = await createTextMessage(plainText);
+            if (customMessage) {
+                const customMessageItem = await createCustomMessage(customMessage);
+                if (!customMessageItem)
+                    return null;
+                messageList.push(customMessageItem);
             }
-            if (!textMessage)
-                return false;
-            messageList.push(textMessage);
-        }
-        if (customMessage) {
-            const customMessageItem = await createCustomMessage(customMessage);
-            if (!customMessageItem)
-                return false;
-            messageList.push(customMessageItem);
-        }
-        for (const message of messageList) {
-            const isTextLikeMessage = (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.TextMessage ||
-                (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.UrlTextMessage ||
-                (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.QuoteMessage ||
-                (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.AtTextMessage;
-            const extendMessageInfo = generateExtendMessageInfo({
-                richText: isTextLikeMessage ? richText : "",
-                urlMetadata: urlMetadata || undefined,
-                currentSession,
-                flow: isTextLikeMessage ? flow : undefined,
-                mentionOffsets: (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.AtTextMessage
-                    ? mentions === null || mentions === void 0 ? void 0 : mentions.mentionOffsets
-                    : undefined,
+            return messageList.map((message) => {
+                const isTextLikeMessage = (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.TextMessage ||
+                    (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.UrlTextMessage ||
+                    (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.QuoteMessage ||
+                    (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.AtTextMessage;
+                const extendMessageInfo = generateExtendMessageInfo({
+                    richText: isTextLikeMessage ? richText : "",
+                    urlMetadata: urlMetadata || undefined,
+                    currentSession,
+                    flow: isTextLikeMessage ? flow : undefined,
+                    mentionOffsets: (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.AtTextMessage
+                        ? mentions === null || mentions === void 0 ? void 0 : mentions.mentionOffsets
+                        : undefined,
+                });
+                return Object.assign(Object.assign({}, message), { ex: JSON.stringify(extendMessageInfo) || "{}", isInternal });
             });
-            const mMessage = Object.assign(Object.assign({}, message), { ex: JSON.stringify(extendMessageInfo) || "{}", isInternal });
-            await sendMessage(mMessage, currentSession);
-        }
-        return true;
+        };
+        return queueSend(buildMessages, currentSession);
     }, [
         conversationData,
         recvID,
         groupID,
-        sendMessage,
+        queueSend,
         quotedMessage,
         setQuotedMessage,
     ]);
@@ -614,10 +681,15 @@ const createPicBaseInfoFromFile = (file) => new Promise((resolve, reject) => {
     img.onload = function () {
         resolve(img);
     };
+    // Without this a broken image would hang its send and every send queued after it.
+    img.onerror = reject;
     img.src = _URL.createObjectURL(file);
 });
+const VIDEO_INFO_TIMEOUT_MS = 15000;
 function createVideoInfoWithThumbnail(file) {
     return new Promise((resolve, reject) => {
+        // A video the browser never seeks would hang its send and every send queued after it.
+        const timeout = setTimeout(() => reject(new Error("Video thumbnail timed out")), VIDEO_INFO_TIMEOUT_MS);
         try {
             const video = document.createElement("video");
             video.preload = "metadata";
@@ -640,6 +712,7 @@ function createVideoInfoWithThumbnail(file) {
                 canvas.toBlob((blob) => {
                     if (!blob)
                         return reject("Thumbnail capture failed");
+                    clearTimeout(timeout);
                     resolve({
                         duration: Math.floor(video.duration * 1000),
                         width: video.videoWidth,