@droppii-org/chat-sdk 0.1.47 → 0.1.49

package/dist/components/biz-thread-detail/BizAttachmentPreview.d.ts

@@ -0,0 +1,9 @@
+import { UploadFile } from "antd";
+export interface BizAttachmentPreviewProps {
+    files: UploadFile[];
+    onRemove: (uid: string) => void;
+    onVideoReady?: () => void;
+}
+declare const BizAttachmentPreview: ({ files, onRemove, onVideoReady, }: BizAttachmentPreviewProps) => import("react/jsx-runtime").JSX.Element | null;
+export default BizAttachmentPreview;
+//# sourceMappingURL=BizAttachmentPreview.d.ts.map

package/dist/components/biz-thread-detail/BizAttachmentPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BizAttachmentPreview.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizAttachmentPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAmJlC,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,QAAA,MAAM,oBAAoB,GAAI,oCAI3B,yBAAyB,mDAuB3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/biz-thread-detail/BizAttachmentPreview.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Icon } from "../../components/icon";
+import { documentIcon } from "../../assets/svg";
+import { shortenFileName } from "../../components/message/footer/FilePreview";
+import { DOCUMENT_MIME_TYPES } from "../../utils/fileValidation";
+const formatDuration = (seconds) => {
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+};
+const formatFileSize = (bytes) => {
+    if (bytes === 0)
+        return "0 B";
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const kb = bytes / 1024;
+    if (kb < 1024)
+        return `${Math.round(kb)} KB`;
+    return `${(kb / 1024).toFixed(1)} MB`;
+};
+const getFileType = (file) => {
+    var _a, _b, _c;
+    const mimeType = (_c = (_b = (_a = file.originFileObj) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : file.type) !== null && _c !== void 0 ? _c : "";
+    if (DOCUMENT_MIME_TYPES.includes(mimeType))
+        return "document";
+    if (mimeType.startsWith("video/"))
+        return "video";
+    return "image";
+};
+const RemoveButton = ({ uid, onRemove }) => (_jsx("button", { type: "button", onClick: () => onRemove(uid), className: "absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-[#393E40]", "aria-label": "X\u00F3a", children: _jsx(Icon, { icon: "close-o", size: 12, className: "text-white" }) }));
+const MediaThumb = ({ file, onRemove, onVideoReady }) => {
+    var _a;
+    const [src, setSrc] = useState("");
+    const [duration, setDuration] = useState(null);
+    const isVideo = getFileType(file) === "video";
+    const isLoading = file.status === "uploading";
+    const percent = Math.round((_a = file.percent) !== null && _a !== void 0 ? _a : 0);
+    useEffect(() => {
+        var _a;
+        const originFile = file.originFileObj;
+        if (!originFile) {
+            setSrc((_a = file.url) !== null && _a !== void 0 ? _a : "");
+            return;
+        }
+        const url = URL.createObjectURL(originFile);
+        setSrc(url);
+        return () => URL.revokeObjectURL(url);
+    }, [file.originFileObj, file.url]);
+    const handleLoadedMetadata = (event) => {
+        setDuration(event.currentTarget.duration);
+        onVideoReady === null || onVideoReady === void 0 ? void 0 : onVideoReady();
+    };
+    return (_jsxs("div", { className: "relative h-12 w-12 shrink-0", children: [isVideo ? (_jsx("video", { src: src, className: "h-12 w-12 rounded-lg object-cover", preload: "metadata", muted: true, onLoadedMetadata: handleLoadedMetadata })) : (_jsx("img", { src: src, alt: file.name, className: "h-12 w-12 rounded-lg object-cover" })), isLoading && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center rounded-lg bg-black/60", children: _jsxs("span", { className: "text-xs font-semibold text-white", children: [percent, "%"] }) })), isVideo && duration !== null && (_jsx("div", { className: "absolute bottom-1 left-1/2 flex w-9 -translate-x-1/2 items-center justify-center rounded-xl bg-black/70 px-1 text-center text-[10px] font-normal leading-4 text-white", children: formatDuration(duration) })), _jsx(RemoveButton, { uid: file.uid, onRemove: onRemove })] }));
+};
+const DocumentCard = ({ file, onRemove }) => {
+    var _a, _b;
+    const isLoading = file.status === "uploading";
+    const percent = Math.round((_a = file.percent) !== null && _a !== void 0 ? _a : 0);
+    return (_jsxs("div", { className: "relative flex h-12 w-40 shrink-0 items-center gap-[7px] rounded-lg bg-[rgba(131,137,157,0.08)] py-[4px] pl-2 pr-5", children: [_jsx("div", { className: "flex h-full w-8 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-8 [&>svg]:w-8", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-[11px] font-normal leading-[160%] text-[#393E40]", children: shortenFileName(file.name) }), isLoading ? (_jsxs("span", { className: "text-[10px] leading-[160%] tracking-[0.1px] text-[#747B7E]", children: [percent, "%"] })) : (_jsx("span", { className: "text-[10px] leading-[160%] tracking-[0.1px] text-[#747B7E]", children: formatFileSize((_b = file.size) !== null && _b !== void 0 ? _b : 0) }))] }), _jsx(RemoveButton, { uid: file.uid, onRemove: onRemove })] }));
+};
+const BizAttachmentPreview = ({ files, onRemove, onVideoReady, }) => {
+    if (files.length === 0)
+        return null;
+    return (_jsx("div", { className: "flex items-center gap-3 self-stretch overflow-x-auto px-2 pb-2 pt-3", children: files.map((file) => {
+            const fileType = getFileType(file);
+            if (fileType === "document") {
+                return (_jsx(DocumentCard, { file: file, onRemove: onRemove }, file.uid));
+            }
+            return (_jsx(MediaThumb, { file: file, onRemove: onRemove, onVideoReady: onVideoReady }, file.uid));
+        }) }));
+};
+export default BizAttachmentPreview;

package/dist/components/biz-thread-detail/BizImageViewer.d.ts

@@ -0,0 +1,8 @@
+interface BizImageViewerProps {
+    images: string[];
+    initialIndex?: number;
+    onClose: () => void;
+}
+declare const BizImageViewer: ({ images, initialIndex, onClose, }: BizImageViewerProps) => import("react").ReactPortal;
+export default BizImageViewer;
+//# sourceMappingURL=BizImageViewer.d.ts.map

package/dist/components/biz-thread-detail/BizImageViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BizImageViewer.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizImageViewer.tsx"],"names":[],"mappings":"AAOA,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,GAAI,oCAIrB,mBAAmB,gCA2ErB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/biz-thread-detail/BizImageViewer.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+import { Icon } from "../../components/icon";
+const BizImageViewer = ({ images, initialIndex = 0, onClose, }) => {
+    var _a;
+    const [currentIndex, setCurrentIndex] = useState(initialIndex);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape")
+                onClose();
+            if (e.key === "ArrowLeft")
+                setCurrentIndex((i) => Math.max(0, i - 1));
+            if (e.key === "ArrowRight")
+                setCurrentIndex((i) => Math.min(images.length - 1, i + 1));
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [images.length, onClose]);
+    const handleDownload = () => {
+        const url = images[currentIndex];
+        const filename = url.substring(url.lastIndexOf("/") + 1) || "image";
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    };
+    const container = (_a = document.querySelector('[data-testid="biz-thread-detail-root"]')) !== null && _a !== void 0 ? _a : document.body;
+    return createPortal(_jsxs("div", { className: "absolute inset-0 z-[999] flex flex-col bg-black", children: [_jsxs("div", { className: "flex items-center justify-between px-4 pt-12 pb-4", children: [_jsx("button", { className: "flex h-10 w-10 items-center justify-center text-white text-xl", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 24 }) }), _jsx("button", { className: "flex h-10 w-10 items-center justify-center text-white text-xl", onClick: handleDownload, children: _jsx(Icon, { icon: "download-o", size: 24 }) })] }), _jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center overflow-hidden px-4", children: _jsx("img", { src: images[currentIndex], alt: "", className: "max-h-full max-w-full rounded-[24px] object-contain" }) }), _jsxs("div", { className: "flex flex-col items-center gap-2 pb-8 pt-4", children: [_jsxs("span", { className: "text-sm text-white", children: [currentIndex + 1, "/", images.length] }), _jsx("div", { className: "flex gap-1.5", children: images.map((_, i) => (_jsx("button", { className: clsx("h-1.5 w-1.5 rounded-full transition-colors", i === currentIndex ? "bg-white" : "bg-white/30"), onClick: () => setCurrentIndex(i) }, i))) })] })] }), container);
+};
+export default BizImageViewer;

package/dist/components/biz-thread-detail/BizMessageContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BizMessageContent.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizMessageContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKnE,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,iBAAiB,GAAI,aAAa,sBAAsB,mDAoC7D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"BizMessageContent.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizMessageContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA8B,MAAM,yBAAyB,CAAC;AAOlF,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,WAAW,CAAC;CACtB;AAuGD,QAAA,MAAM,iBAAiB,GAAI,aAAa,sBAAsB,mDA4C7D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/biz-thread-detail/BizMessageContent.js

@@ -1,11 +1,56 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MessageType } from "@openim/wasm-client-sdk";
+import { useState } from "react";
+import clsx from "clsx";
+import { MessageStatus, MessageType } from "@openim/wasm-client-sdk";
+import { Image, Spin } from "antd";
 import BizLinkMessageCard from "./BizLinkMessageCard";
 import BizLinkTextContent from "./BizLinkTextContent";
+import BizImageViewer from "./BizImageViewer";
 import { extractBizLinkUrls } from "../../utils/bizLink";
+const MERGE_IMAGE_GRID_COLS_CLASS = {
+    1: "grid-cols-[repeat(1,100px)]",
+    2: "grid-cols-[repeat(2,100px)]",
+    3: "grid-cols-[repeat(3,100px)]",
+};
+const BizPictureMessage = ({ message }) => {
+    var _a, _b, _c;
+    const [viewerVisible, setViewerVisible] = useState(false);
+    const pictureElem = message.pictureElem;
+    const sourceUrl = ((_a = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.sourcePicture) === null || _a === void 0 ? void 0 : _a.url) || ((_b = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.snapshotPicture) === null || _b === void 0 ? void 0 : _b.url) || "";
+    const bigUrl = ((_c = pictureElem === null || pictureElem === void 0 ? void 0 : pictureElem.bigPicture) === null || _c === void 0 ? void 0 : _c.url) || sourceUrl;
+    const isSending = message.status === MessageStatus.Sending;
+    return (_jsxs("div", { className: "-mx-1", children: [_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "cursor-pointer", onClick: () => setViewerVisible(true), children: _jsx(Image, { src: sourceUrl, width: 205, height: 205, className: "rounded-xl object-cover", preview: false, placeholder: _jsx("div", { className: "flex h-[205px] w-[205px] items-center justify-center rounded-xl bg-black/10", children: _jsx(Spin, {}) }) }) }) }), viewerVisible && (_jsx(BizImageViewer, { images: [bigUrl], onClose: () => setViewerVisible(false) }))] }));
+};
+const BizMergeImageMessage = ({ message }) => {
+    var _a, _b;
+    const [viewerIndex, setViewerIndex] = useState(null);
+    const subMessages = (_b = (_a = message.mergeElem) === null || _a === void 0 ? void 0 : _a.multiMessage) !== null && _b !== void 0 ? _b : [];
+    const isSending = message.status === MessageStatus.Sending;
+    const cols = Math.min(subMessages.length, 3);
+    const imageUrls = subMessages.map((item) => {
+        var _a, _b, _c, _d, _e, _f;
+        const sourceUrl = ((_b = (_a = item.pictureElem) === null || _a === void 0 ? void 0 : _a.sourcePicture) === null || _b === void 0 ? void 0 : _b.url) ||
+            ((_d = (_c = item.pictureElem) === null || _c === void 0 ? void 0 : _c.snapshotPicture) === null || _d === void 0 ? void 0 : _d.url) ||
+            "";
+        return ((_f = (_e = item.pictureElem) === null || _e === void 0 ? void 0 : _e.bigPicture) === null || _f === void 0 ? void 0 : _f.url) || sourceUrl;
+    });
+    return (_jsxs("div", { className: "-mx-1", children: [_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: clsx("grid gap-1", MERGE_IMAGE_GRID_COLS_CLASS[cols]), children: subMessages.map((item, index) => {
+                        var _a, _b, _c, _d;
+                        const sourceUrl = ((_b = (_a = item.pictureElem) === null || _a === void 0 ? void 0 : _a.sourcePicture) === null || _b === void 0 ? void 0 : _b.url) ||
+                            ((_d = (_c = item.pictureElem) === null || _c === void 0 ? void 0 : _c.snapshotPicture) === null || _d === void 0 ? void 0 : _d.url) ||
+                            "";
+                        return (_jsx("div", { className: "cursor-pointer", onClick: () => setViewerIndex(index), children: _jsx(Image, { src: sourceUrl, width: 100, height: 100, className: "rounded-xl object-cover", preview: false, placeholder: _jsx("div", { className: "flex h-[100px] w-[100px] items-center justify-center rounded-xl bg-black/10", children: _jsx(Spin, {}) }) }) }, item.clientMsgID));
+                    }) }) }), viewerIndex !== null && (_jsx(BizImageViewer, { images: imageUrls, initialIndex: viewerIndex, onClose: () => setViewerIndex(null) }))] }));
+};
 const BizMessageContent = ({ message }) => {
     var _a, _b, _c, _d, _e, _f, _g;
+    if (message.contentType === MessageType.PictureMessage) {
+        return _jsx(BizPictureMessage, { message: message });
+    }
+    if (message.contentType === MessageType.MergeMessage) {
+        return _jsx(BizMergeImageMessage, { message: message });
+    }
     const text = (_e = (_d = (_b = (_a = message.textElem) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : (_c = message.urlTextElem) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : message.content) !== null && _e !== void 0 ? _e : "";
     const hasLinks = text ? extractBizLinkUrls(text).length > 0 : false;
     if (message.contentType === MessageType.UrlTextMessage) {

package/dist/components/biz-thread-detail/BizMoreOptionPanel.d.ts

@@ -3,7 +3,8 @@ export interface BizMoreOptionPanelProps {
     disabled?: boolean;
     onSelectOption?: (option: BizMoreOptionConfig) => void;
     onTriggerMediaInput?: () => void;
+    onTriggerDocumentInput?: () => void;
 }
-declare const BizMoreOptionPanel: ({ disabled, onSelectOption, onTriggerMediaInput, }: BizMoreOptionPanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const BizMoreOptionPanel: ({ disabled, onSelectOption, onTriggerMediaInput, onTriggerDocumentInput, }: BizMoreOptionPanelProps) => import("react/jsx-runtime").JSX.Element;
 export default BizMoreOptionPanel;
 //# sourceMappingURL=BizMoreOptionPanel.d.ts.map

package/dist/components/biz-thread-detail/BizMoreOptionPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BizMoreOptionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizMoreOptionPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,mBAAmB,EACpB,MAAM,2BAA2B,CAAC;AAGnC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACvD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,kBAAkB,GAAI,oDAIzB,uBAAuB,4CA0BzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"BizMoreOptionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizMoreOptionPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,mBAAmB,EACpB,MAAM,2BAA2B,CAAC;AAGnC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACvD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,kBAAkB,GAAI,4EAKzB,uBAAuB,4CA8BzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/biz-thread-detail/BizMoreOptionPanel.js

@@ -3,14 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { BIZ_MORE_OPTIONS, } from "../../constants/bizMoreOption";
 import BizMoreOptionItem from "./BizMoreOptionItem";
-const BizMoreOptionPanel = ({ disabled = false, onSelectOption, onTriggerMediaInput, }) => {
+const BizMoreOptionPanel = ({ disabled = false, onSelectOption, onTriggerMediaInput, onTriggerDocumentInput, }) => {
     const handleSelectOption = useCallback((option) => {
         if (option.labelKey === "thread_detail.more_option.media") {
             onTriggerMediaInput === null || onTriggerMediaInput === void 0 ? void 0 : onTriggerMediaInput();
             return;
         }
+        if (option.labelKey === "thread_detail.more_option.document") {
+            onTriggerDocumentInput === null || onTriggerDocumentInput === void 0 ? void 0 : onTriggerDocumentInput();
+            return;
+        }
         onSelectOption === null || onSelectOption === void 0 ? void 0 : onSelectOption(option);
-    }, [onSelectOption, onTriggerMediaInput]);
+    }, [onSelectOption, onTriggerMediaInput, onTriggerDocumentInput]);
     return (_jsx("div", { "data-testid": "biz-more-option-panel", className: "grid grid-cols-4 gap-y-5 bg-white py-5", children: BIZ_MORE_OPTIONS.map((option) => (_jsx(BizMoreOptionItem, { option: Object.assign(Object.assign({}, option), { enabled: option.enabled && !disabled }), onSelect: handleSelectOption }, option.labelKey))) }));
 };
 export default BizMoreOptionPanel;

package/dist/components/biz-thread-detail/BizThreadDetailInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BizThreadDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizThreadDetailInput.tsx"],"names":[],"mappings":"AA2BA,MAAM,WAAW,yBAAyB;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,QAAA,MAAM,oBAAoB,GAAI,gDAI3B,yBAAyB,4CA4V3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"BizThreadDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizThreadDetailInput.tsx"],"names":[],"mappings":"AA8BA,MAAM,WAAW,yBAAyB;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,QAAA,MAAM,oBAAoB,GAAI,gDAI3B,yBAAyB,4CAkY3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/biz-thread-detail/BizThreadDetailInput.js

@@ -13,8 +13,8 @@ import useBizMessageDraftStore from "../../store/bizMessageDraft";
 import { resolveBizAvatarUrl, resolveBizDisplayName, } from "../../utils/bizConversation";
 import { emit } from "../../utils/events";
 import { extractBizLinkUrls } from "../../utils/bizLink";
-import { processAndValidateFiles } from "../../utils/fileValidation";
-import BizImagePreview from "./BizImagePreview";
+import { processAndValidateDocuments, processAndValidateFiles, } from "../../utils/fileValidation";
+import BizAttachmentPreview from "./BizAttachmentPreview";
 import BizLinkInputPreview from "./BizLinkInputPreview";
 import BizMoreOptionPanel from "./BizMoreOptionPanel";
 const MAX_LINES = 5;
@@ -42,13 +42,14 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
                 "",
         }),
     }), [bizConversation, conversationData, t]);
-    const { sendTextMessage } = useSendMessage(sendMessageOptions);
+    const { sendTextMessage, sendMergeMessage } = useSendMessage(sendMessageOptions);
     const userID = useAuthStore((state) => state.userID);
     const setDraft = useBizMessageDraftStore((state) => state.setDraft);
     const clearDraft = useBizMessageDraftStore((state) => state.clearDraft);
     const containerRef = useRef(null);
     const textareaRef = useRef(null);
     const mediaInputRef = useRef(null);
+    const documentInputRef = useRef(null);
     const [value, setValue] = useState("");
     const [listUploadFiles, setListUploadFiles] = useState([]);
     const [isVideoLoading, setIsVideoLoading] = useState(false);
@@ -64,7 +65,11 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
     useEffect(() => {
         setPreviewDismissed(false);
     }, [previewUrl]);
-    const canSend = value.trim().length > 0 && !isSending && isConversationReady && !isVideoLoading;
+    const hasFiles = listUploadFiles.length > 0;
+    const canSend = (value.trim().length > 0 || hasFiles) &&
+        !isSending &&
+        isConversationReady &&
+        !isVideoLoading;
     const getTextareaHeights = useCallback(() => {
         const textarea = textareaRef.current;
         if (!textarea)
@@ -146,6 +151,17 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
         }
         event.target.value = "";
     }, [tCommon, listUploadFiles]);
+    const handleDocumentInputChange = useCallback((event) => {
+        var _a;
+        const files = Array.from((_a = event.target.files) !== null && _a !== void 0 ? _a : []);
+        if (files.length === 0)
+            return;
+        const validFiles = processAndValidateDocuments(files, tCommon);
+        if (validFiles.length > 0) {
+            setListUploadFiles((prev) => [...prev, ...validFiles]);
+        }
+        event.target.value = "";
+    }, [tCommon]);
     const handleRemoveFile = useCallback((uid) => {
         setListUploadFiles((prev) => prev.filter((f) => f.uid !== uid));
         setIsVideoLoading(false);
@@ -159,13 +175,22 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
     };
     const handleSend = async () => {
         const text = value.trim();
-        if (!text || isSending)
+        if ((!text && !hasFiles) || isSending)
             return;
         setIsSending(true);
         try {
             if (onSendMessage) {
                 onSendMessage(text);
             }
+            else if (hasFiles) {
+                await sendMergeMessage({
+                    plainText: text,
+                    richText: "",
+                    files: listUploadFiles,
+                    isInternal: false,
+                });
+                setListUploadFiles([]);
+            }
             else {
                 const sent = await sendTextMessage({
                     plainText: text,
@@ -221,8 +246,8 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
         event.preventDefault();
         void handleSend();
     };
-    return (_jsxs("div", { ref: containerRef, "data-testid": "biz-thread-detail-input", className: "flex w-full shrink-0 flex-col bg-[rgba(131,137,157,0.05)]", children: [_jsx("input", { ref: mediaInputRef, type: "file", accept: "image/jpeg,image/png,image/jpg,video/*", multiple: true, className: "hidden", onChange: handleMediaInputChange }), listUploadFiles.length > 0 && (_jsx(BizImagePreview, { files: listUploadFiles, onRemove: handleRemoveFile, onVideoReady: () => setIsVideoLoading(false) })), showLinkPreview && previewUrl && (_jsx(BizLinkInputPreview, { url: previewUrl, onRemove: () => setPreviewDismissed(true) })), _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsx("button", { type: "button", onClick: handleToggleMoreOption, "aria-label": t("thread_detail.more_option.toggle"), "aria-expanded": isMoreOptionOpen, "data-testid": "biz-thread-detail-more-option-toggle", className: "flex py-3 items-center justify-center rounded-full", children: isMoreOptionOpen ? (_jsx(Icon, { icon: "close-circle-o", size: 24, className: "text-[#1B3FE4]" })) : (_jsx(Icon, { icon: "plus-circle-o", size: 24, className: "text-[#393E40]" })) }) }), _jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
+    return (_jsxs("div", { ref: containerRef, "data-testid": "biz-thread-detail-input", className: "flex w-full shrink-0 flex-col bg-[rgba(131,137,157,0.05)]", children: [_jsx("input", { ref: mediaInputRef, type: "file", accept: "image/jpeg,image/png,image/jpg,video/*", multiple: true, className: "hidden", onChange: handleMediaInputChange }), _jsx("input", { ref: documentInputRef, type: "file", accept: ".pdf,.doc,.docx", multiple: true, className: "hidden", onChange: handleDocumentInputChange }), listUploadFiles.length > 0 && (_jsx(BizAttachmentPreview, { files: listUploadFiles, onRemove: handleRemoveFile, onVideoReady: () => setIsVideoLoading(false) })), showLinkPreview && previewUrl && (_jsx(BizLinkInputPreview, { url: previewUrl, onRemove: () => setPreviewDismissed(true) })), _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsx("button", { type: "button", onClick: handleToggleMoreOption, "aria-label": t("thread_detail.more_option.toggle"), "aria-expanded": isMoreOptionOpen, "data-testid": "biz-thread-detail-more-option-toggle", className: "flex py-3 items-center justify-center rounded-full", children: isMoreOptionOpen ? (_jsx(Icon, { icon: "close-circle-o", size: 24, className: "text-[#1B3FE4]" })) : (_jsx(Icon, { icon: "plus-circle-o", size: 24, className: "text-[#393E40]" })) }) }), _jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
                             ? "border-[#607CFB] shadow-[0px_0px_2px_rgba(27,63,228,0.5)]"
-                            : "border-[#DDDEDF]"), style: { minHeight: CONTAINER_MIN_HEIGHT }, children: _jsx("div", { className: "flex min-w-0 flex-[1_0_0] items-center gap-2 self-stretch px-3 py-1", children: _jsx("textarea", { ref: textareaRef, value: value, rows: 1, onChange: (event) => handleChange(event.target.value), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("thread_detail.input_placeholder"), "data-testid": "biz-thread-detail-message-input", className: "biz-message-input-scrollbar min-h-0 min-w-0 flex-1 resize-none appearance-none border-0 bg-transparent p-0 text-[16px] leading-[1.6] tracking-[0.16px] text-black outline-none ring-0 placeholder:text-[#747B7E] focus:border-0 focus:outline-none focus:ring-0" }) }) }), _jsx("div", { className: "flex shrink-0 items-center pb-1", children: _jsx("button", { type: "button", onClick: () => void handleSend(), disabled: !canSend, "data-testid": "biz-thread-detail-send", className: clsx("flex h-10 w-10 items-center justify-center rounded-full", canSend ? "bg-[#002BEB]" : "bg-[#002BEB] opacity-25"), children: _jsx(Icon, { icon: "send-b", size: 20, className: "text-white" }) }) })] }), isMoreOptionOpen && (_jsx(BizMoreOptionPanel, { disabled: !isConversationReady, onTriggerMediaInput: () => { var _a; return (_a = mediaInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }))] }));
+                            : "border-[#DDDEDF]"), style: { minHeight: CONTAINER_MIN_HEIGHT }, children: _jsx("div", { className: "flex min-w-0 flex-[1_0_0] items-center gap-2 self-stretch px-3 py-1", children: _jsx("textarea", { ref: textareaRef, value: value, rows: 1, onChange: (event) => handleChange(event.target.value), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("thread_detail.input_placeholder"), "data-testid": "biz-thread-detail-message-input", className: "biz-message-input-scrollbar min-h-0 min-w-0 flex-1 resize-none appearance-none border-0 bg-transparent p-0 text-[16px] leading-[1.6] tracking-[0.16px] text-black outline-none ring-0 placeholder:text-[#747B7E] focus:border-0 focus:outline-none focus:ring-0" }) }) }), _jsx("div", { className: "flex shrink-0 items-center pb-1", children: _jsx("button", { type: "button", onClick: () => void handleSend(), disabled: !canSend, "data-testid": "biz-thread-detail-send", className: clsx("flex h-10 w-10 items-center justify-center rounded-full", canSend ? "bg-[#002BEB]" : "bg-[#002BEB] opacity-25"), children: _jsx(Icon, { icon: "send-b", size: 20, className: "text-white" }) }) })] }), isMoreOptionOpen && (_jsx(BizMoreOptionPanel, { disabled: !isConversationReady, onTriggerMediaInput: () => { var _a; return (_a = mediaInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, onTriggerDocumentInput: () => { var _a; return (_a = documentInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }))] }));
 };
 export default BizThreadDetailInput;

package/dist/components/biz-thread-detail/index.d.ts

@@ -9,6 +9,6 @@ export { default as BizMoreOptionPanel } from "./BizMoreOptionPanel";
 export type { BizMoreOptionPanelProps } from "./BizMoreOptionPanel";
 export { default as BizMoreOptionItem } from "./BizMoreOptionItem";
 export type { BizMoreOptionItemProps } from "./BizMoreOptionItem";
-export { default as BizImagePreview } from "./BizImagePreview";
-export type { BizImagePreviewProps } from "./BizImagePreview";
+export { default as BizAttachmentPreview } from "./BizAttachmentPreview";
+export type { BizAttachmentPreviewProps } from "./BizAttachmentPreview";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/biz-thread-detail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAClE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAClE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/biz-thread-detail/index.js

@@ -4,4 +4,4 @@ export { default as BizMessageList } from "./BizMessageList";
 export { default as BizMessageItem } from "./item/BizMessageItem";
 export { default as BizMoreOptionPanel } from "./BizMoreOptionPanel";
 export { default as BizMoreOptionItem } from "./BizMoreOptionItem";
-export { default as BizImagePreview } from "./BizImagePreview";
+export { default as BizAttachmentPreview } from "./BizAttachmentPreview";

package/dist/hooks/message/useSendMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSendMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/message/useSendMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,cAAc,CAAC;AAWtB,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAUlC,OAAO,EAAgB,gBAAgB,EAAyB,MAAM,aAAa,CAAC;AAkBpF,eAAO,MAAM,iBAAiB,GAAI,SAAS;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB,YAE0C,CAAC;AAE5C,eAAO,MAAM,iBAAiB,GAAU,MAAM,MAAM,gCAanD,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAU,iBAAiB,eAAe,gCAazE,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAU,MAAM,mBAAmB,gCAatE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAU,MAAM,MAAM,EAAE,MAAM,MAAM,EAAE,gCActE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,MAAM,EACZ,eAAe,WAAW,gCAc3B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAC9B,4BAA4B,GAC5B,wCAAwC,CAAC;AAE7C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;IACzC,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,eAAe,CAAC;CACxE;AAED,eAAO,MAAM,cAAc,GAAI,UAAU,qBAAqB;4EA+OvD;QACD,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,cAAc,CAAC,EAAE,gBAAgB,CAAC;QAClC,UAAU,EAAE,OAAO,CAAC;KACrB,KAAG,OAAO,CAAC,OAAO,CAAC;oFA6CjB;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,UAAU,EAAE,CAAC;QACpB,cAAc,CAAC,EAAE,gBAAgB,CAAC;QAClC,UAAU,EAAE,OAAO,CAAC;KACrB;mCArKqB,WAAW;CA6SpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,0CAIvC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC,sBA4BA,CAAC"}
+{"version":3,"file":"useSendMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/message/useSendMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,cAAc,CAAC;AAWtB,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAUlC,OAAO,EAAgB,gBAAgB,EAAyB,MAAM,aAAa,CAAC;AAkBpF,eAAO,MAAM,iBAAiB,GAAI,SAAS;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB,YAE0C,CAAC;AAE5C,eAAO,MAAM,iBAAiB,GAAU,MAAM,MAAM,gCAanD,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAU,iBAAiB,eAAe,gCAazE,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAU,MAAM,mBAAmB,gCAatE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAU,MAAM,MAAM,EAAE,MAAM,MAAM,EAAE,gCActE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,MAAM,EACZ,eAAe,WAAW,gCAc3B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAC9B,4BAA4B,GAC5B,wCAAwC,CAAC;AAE7C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;IACzC,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,eAAe,CAAC;CACxE;AAED,eAAO,MAAM,cAAc,GAAI,UAAU,qBAAqB;4EA+OvD;QACD,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,cAAc,CAAC,EAAE,gBAAgB,CAAC;QAClC,UAAU,EAAE,OAAO,CAAC;KACrB,KAAG,OAAO,CAAC,OAAO,CAAC;oFA6CjB;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,UAAU,EAAE,CAAC;QACpB,cAAc,CAAC,EAAE,gBAAgB,CAAC;QAClC,UAAU,EAAE,OAAO,CAAC;KACrB;mCArKqB,WAAW;CAwUpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,0CAIvC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC,sBA4BA,CAAC"}

package/dist/hooks/message/useSendMessage.js

@@ -311,45 +311,70 @@ export const useSendMessage = (options) => {
         if (!recvID && !groupID)
             return;
         const messageList = [];
-        for (const fileWrapper of files) {
+        const imageFileWrappers = files.filter((f) => { var _a; return (_a = f.originFileObj) === null || _a === void 0 ? void 0 : _a.type.startsWith("image/"); });
+        const nonImageFileWrappers = files.filter((f) => { var _a; return !((_a = f.originFileObj) === null || _a === void 0 ? void 0 : _a.type.startsWith("image/")); });
+        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,
+            });
+            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 nonImageFileWrappers) {
             const file = fileWrapper.originFileObj;
             if (!file)
                 continue;
-            const isImage = file.type.startsWith("image/");
             const isVideo = file.type.startsWith("video/");
             const isDocument = file.type.startsWith("application/");
             try {
-                if (isImage) {
-                    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 parsedImage = {
-                        sourcePicture: baseInfo,
-                        bigPicture: baseInfo,
-                        snapshotPicture: baseInfo,
-                        sourcePath: "",
-                        file: file,
-                    };
-                    const imageMessage = await createImageMessageByFile(parsedImage);
-                    if (!imageMessage)
-                        continue;
-                    messageFileStore.set(imageMessage.clientMsgID, {
-                        type: "image",
-                        file: file,
-                    });
-                    messageList.push(imageMessage);
-                }
-                else if (isVideo) {
+                if (isVideo) {
                     const videoBaseInfo = await createVideoInfoWithThumbnail(file);
-                    const thumbFile = new File([videoBaseInfo.thumbnail], file.name + "-thumb.jpg", {
-                        type: "image/jpeg",
-                    });
+                    const thumbFile = new File([videoBaseInfo.thumbnail], file.name + "-thumb.jpg", { type: "image/jpeg" });
                     const videoMessage = await createVideoMessageByFile({
                         videoPath: "",
                         duration: videoBaseInfo.duration,

package/dist/screens/biz-thread-detail/index.js

@@ -31,6 +31,6 @@ const DChatBizThreadDetail = (_a) => {
     if (!conversation) {
         return null;
     }
-    return (_jsxs("div", { "data-testid": "biz-thread-detail-root", className: clsx("flex h-full w-full flex-col bg-white", className), children: [_jsx(BizThreadDetailHeader, { conversation: conversation, onBack: handleBack }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: children !== null && children !== void 0 ? children : _jsx(BizMessageList, {}) }), _jsx(BizThreadDetailInput, Object.assign({}, inputProps))] }));
+    return (_jsxs("div", { "data-testid": "biz-thread-detail-root", className: clsx("relative flex h-full w-full flex-col overflow-hidden bg-white", className), children: [_jsx(BizThreadDetailHeader, { conversation: conversation, onBack: handleBack }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: children !== null && children !== void 0 ? children : _jsx(BizMessageList, {}) }), _jsx(BizThreadDetailInput, Object.assign({}, inputProps))] }));
 };
 export default DChatBizThreadDetail;