@droppii-org/chat-sdk 0.1.50 → 0.1.51

package/dist/components/message/footer/MediaActions.js

@@ -8,7 +8,7 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import EmojiPicker from "./EmojiPicker";
 import { Icon } from "../../../components/icon";
-import { validateFile, validateVideoLimit, } from "../../../utils/fileValidation";
+import { createUploadFile, validateFile, validateVideoLimit, } from "../../../utils/fileValidation";
 import { DOCUMENT_TYPES } from "./editorConfig";
 import CannedResponseIcon from "../../../assets/svg/canned-response";
 import { useMessageFooterContext } from ".";
@@ -58,15 +58,18 @@ export default function MediaActions({ listUploadFiles, onFilesChange, buttonCla
         return false;
     };
     const handleChange = (info) => {
-        var _a;
         let newList = [...info.fileList];
         const lastFile = info.file;
         if (DOCUMENT_TYPES.includes(lastFile.type || "")) {
             newList = newList.filter((f) => !DOCUMENT_TYPES.includes(f.type || ""));
-            const originFile = ((_a = lastFile.originFileObj) !== null && _a !== void 0 ? _a : lastFile);
-            newList.push(Object.assign(Object.assign({}, lastFile), { originFileObj: originFile }));
+            newList.push(lastFile);
         }
-        onFilesChange(newList);
+        const normalizedList = newList.map((file) => {
+            var _a;
+            const originFile = ((_a = file.originFileObj) !== null && _a !== void 0 ? _a : file);
+            return Object.assign(Object.assign({}, createUploadFile(originFile)), { uid: file.uid });
+        });
+        onFilesChange(normalizedList);
     };
     const onPressCanned = useCallback(async () => {
         if (!isOpenCanned) {

package/dist/components/message/footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAe,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAKrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAkB/C,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAY/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CA8QpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAEL,wBAAwB,EAEzB,MAAM,cAAc,CAAC;AAStB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAkB/C,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAY/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CAuSpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/message/footer/index.js

@@ -5,13 +5,17 @@ import { ToolbarPlugin } from "./ToolbarPlugin";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { editorTheme, editorNodes, editorOnError } from "./editorConfig";
-import { createContext, useCallback, useContext, useEffect, useRef, useState, } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import EnterHandler from "./EnterHandler";
 import ActionBar from "./ActionBar";
-import { AccountType } from "../../../types/chat";
+import { AccountType, } from "../../../types/chat";
 import { useSendMessage } from "../../../hooks/message/useSendMessage";
 import { Modal, Popover } from "antd";
 import FilePreview from "./FilePreview";
+import LinkInputPreview from "./LinkInputPreview";
+import ComposerTextSyncPlugin from "./ComposerTextSyncPlugin";
+import { extractLinkUrls } from "../../../utils/link";
+import { useFetchUrlMetadata } from "../../../hooks/common/useFetchUrlMetadata";
 import { useTranslation } from "react-i18next";
 import PasteAndDropPlugin from "./PasteAndDropPlugin";
 import { QuotedMessageFooter } from "./QuotedMessage";
@@ -48,9 +52,11 @@ export const MessageFooterContext = createContext({
 export const useMessageFooterContext = () => useContext(MessageFooterContext);
 const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
     const { t } = useTranslation();
-    const { sendTextMessage, sendMergeMessage } = useSendMessage();
+    const { sendMergeMessage } = useSendMessage();
     const accountType = useCurrentUserAccountType();
     const [listUploadFiles, setListUploadFiles] = useState([]);
+    const [composerText, setComposerText] = useState("");
+    const [isLinkPreviewDismissed, setIsLinkPreviewDismissed] = useState(false);
     const [isOpenCanned, { setTrue: openCanned, setFalse: closeCanned }] = useBoolean(false);
     const isCrm = useAuthStore((state) => state.isCrm);
     const [cannedQuery, setCannedQuery] = useState("");
@@ -61,6 +67,25 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
     const quotedMessage = useConversationStore((state) => state.quotedMessage);
     const conversationData = useConversationStore((state) => state.conversationData);
     const lockToInternal = Boolean((quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID) && (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.isInternal));
+    const previewUrl = useMemo(() => {
+        const urls = extractLinkUrls(composerText);
+        return urls.length === 1 ? urls[0] : null;
+    }, [composerText]);
+    const showLinkPreview = !!previewUrl && !isLinkPreviewDismissed && !isInternal;
+    const { data: previewMetadata } = useFetchUrlMetadata(previewUrl !== null && previewUrl !== void 0 ? previewUrl : "", showLinkPreview);
+    useEffect(() => {
+        setIsLinkPreviewDismissed(false);
+    }, [previewUrl]);
+    const resolveUrlMetadata = useCallback(() => {
+        if (!showLinkPreview || !previewUrl || !previewMetadata)
+            return undefined;
+        return {
+            url: previewUrl,
+            title: previewMetadata.title,
+            description: previewMetadata.description,
+            image: previewMetadata.image,
+        };
+    }, [showLinkPreview, previewUrl, previewMetadata]);
     const [isSessionClosedModalOpen, { setTrue: openSessionClosedModal, setFalse: closeSessionClosedModal },] = useBoolean(false);
     const pendingMessageRef = useRef(null);
     const { mutateAsync: createSession, isPending: isCreatingSession } = useCreateSession();
@@ -90,57 +115,45 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
                 type,
                 isInternal,
                 files: [...listUploadFiles],
+                urlMetadata: resolveUrlMetadata(),
             };
             openSessionClosedModal();
             return false;
         }
-        if (type === "text") {
-            sendTextMessage({ plainText, richText, currentSession, isInternal });
-        }
-        else {
-            sendMergeMessage({
-                plainText,
-                richText,
-                files: listUploadFiles,
-                currentSession,
-                isInternal,
-            });
-        }
+        sendMergeMessage({
+            plainText,
+            richText,
+            files: listUploadFiles,
+            currentSession,
+            isInternal,
+            urlMetadata: resolveUrlMetadata(),
+        });
         setListUploadFiles([]);
         return true;
     }, [
         sendMergeMessage,
-        sendTextMessage,
         listUploadFiles,
         currentSession,
         openSessionClosedModal,
+        resolveUrlMetadata,
     ]);
     const executePendingSend = useCallback((newSession) => {
         const pending = pendingMessageRef.current;
         if (!pending)
             return;
         const sessionToUse = newSession || currentSession;
-        if (pending.type === "text") {
-            sendTextMessage({
-                plainText: pending.plainText,
-                richText: pending.richText,
-                currentSession: sessionToUse,
-                isInternal: pending.isInternal,
-            });
-        }
-        else {
-            sendMergeMessage({
-                plainText: pending.plainText,
-                richText: pending.richText,
-                files: pending.files,
-                currentSession: sessionToUse,
-                isInternal: pending.isInternal,
-            });
-        }
+        sendMergeMessage({
+            plainText: pending.plainText,
+            richText: pending.richText,
+            files: pending.files,
+            currentSession: sessionToUse,
+            isInternal: pending.isInternal,
+            urlMetadata: pending.urlMetadata,
+        });
         setListUploadFiles([]);
         pendingMessageRef.current = null;
         emit("CLEAR_COMPOSER");
-    }, [sendTextMessage, sendMergeMessage, currentSession]);
+    }, [sendMergeMessage, currentSession]);
     const handleSessionAction = useCallback(async (action) => {
         const conversationId = conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID;
         if (!conversationId)
@@ -202,6 +215,6 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
             setMaxActiveCannedIndex,
         }, children: [_jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Popover, { open: isOpenCanned, content: _jsx(CannedResponse, { onClose: closeCanned, openCreateCannedModal: onOpenCreateCannedModal, cannedQuery: cannedQuery }), placement: "topLeft", trigger: "click", arrow: false, classNames: {
                             body: "mx-1 !p-0",
-                        }, destroyOnHidden: true, children: _jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(QuotedMessageFooter, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), _jsx(ToolbarPlugin, {}), _jsxs("div", { children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, hintText: t("canned_response_hint"), isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal }), _jsx(ComposerEditor, { isInternal: isInternal, placeholderText: placeholderText })] }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }), _jsx(SessionClosedModal, { open: isSessionClosedModalOpen, loading: isSessionActionLoading, onReopen: handleReopenSession, onCreateNew: handleCreateNewSession, onClose: handleCloseSessionModal })] }));
+                        }, destroyOnHidden: true, children: _jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(QuotedMessageFooter, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setIsLinkPreviewDismissed(true) })), _jsx(ToolbarPlugin, {}), _jsxs("div", { children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, hintText: t("canned_response_hint"), isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal }), _jsx(ComposerEditor, { isInternal: isInternal, placeholderText: placeholderText })] }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(ComposerTextSyncPlugin, { onChange: setComposerText }), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }), _jsx(SessionClosedModal, { open: isSessionClosedModalOpen, loading: isSessionActionLoading, onReopen: handleReopenSession, onCreateNew: handleCreateNewSession, onClose: handleCloseSessionModal })] }));
 };
 export default MessageFooterProvider;

package/dist/components/message/item/FileMessage.d.ts

@@ -1,7 +1,7 @@
 import { MessageItem } from "@openim/wasm-client-sdk";
-interface ImageMessageItemProps {
+interface FileMessageItemProps {
     message: MessageItem;
 }
-declare const FileMessageItem: (props: ImageMessageItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const FileMessageItem: (props: FileMessageItemProps) => import("react/jsx-runtime").JSX.Element;
 export default FileMessageItem;
 //# sourceMappingURL=FileMessage.d.ts.map

package/dist/components/message/item/FileMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/FileMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,qBAAqB,4CAmCpD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FileMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/FileMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAOrE,UAAU,oBAAoB;IAC5B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,4CAiEnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/message/item/FileMessage.js

@@ -1,28 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { shortenFileName } from "../../../components/message/footer/FilePreview";
+import { MessageStatus } from "@openim/wasm-client-sdk";
+import { Spin } from "antd";
+import { Icon } from "../../../components/icon";
 import { documentIcon } from "../../../assets/svg";
+import { shortenFileName } from "../../../components/message/footer/FilePreview";
+import { renderFileSize } from "../../../utils/common";
 const FileMessageItem = (props) => {
     var _a;
     const { message } = props;
+    const fileElem = message.fileElem;
+    const fileName = (fileElem === null || fileElem === void 0 ? void 0 : fileElem.fileName) || "";
+    const fileSize = (_a = fileElem === null || fileElem === void 0 ? void 0 : fileElem.fileSize) !== null && _a !== void 0 ? _a : 0;
+    const sourceUrl = (fileElem === null || fileElem === void 0 ? void 0 : fileElem.sourceUrl) || "";
+    const isSending = message.status === MessageStatus.Sending;
+    const hasUrl = !!sourceUrl;
+    const handleView = () => {
+        if (!hasUrl)
+            return;
+        window.open(sourceUrl, "_blank", "noopener,noreferrer");
+    };
     const handleDownload = () => {
-        var _a, _b;
-        const url = ((_a = message.fileElem) === null || _a === void 0 ? void 0 : _a.sourceUrl) || "";
-        const fileName = ((_b = message.fileElem) === null || _b === void 0 ? void 0 : _b.fileName) || "";
-        if (!url) {
-            console.warn("Không có link file để tải");
+        if (!hasUrl)
             return;
-        }
         const link = document.createElement("a");
-        link.href = url;
-        if (fileName) {
-            link.setAttribute("download", fileName);
-        }
+        link.href = sourceUrl;
+        link.setAttribute("download", fileName);
         link.setAttribute("target", "_blank");
         link.setAttribute("rel", "noopener noreferrer");
         document.body.appendChild(link);
         link.click();
         link.remove();
     };
-    return (_jsxs("div", { className: "relative flex flex-row items-center gap-2 align-center bg-gray-100 rounded-md p-1 pr-2 cursor-pointer", onClick: handleDownload, children: [documentIcon, _jsx("span", { className: "text-xs text-gray-500", children: shortenFileName(((_a = message.fileElem) === null || _a === void 0 ? void 0 : _a.fileName) || "") })] }));
+    return (_jsx(Spin, { spinning: isSending, children: _jsxs("div", { className: "flex h-[51px] w-[292px] items-center gap-3 rounded-xl border border-[rgba(168,173,175,0.2)] bg-white px-3 py-1", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-6 [&>svg]:w-6", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 w-[168px] flex-col justify-center", children: [_jsx("span", { className: "truncate text-[14px] font-medium leading-[160%] text-[#393E40]", children: shortenFileName(fileName) }), _jsx("span", { className: "truncate text-[13px] leading-[160%] text-[#5C6366]", children: renderFileSize(fileSize) })] }), _jsxs("div", { className: "flex w-[52px] shrink-0 items-center justify-end gap-3", children: [_jsx("button", { type: "button", onClick: handleView, disabled: !hasUrl, "aria-label": "Xem file", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "eye-o", size: 20, className: "text-[#393E40]" }) }), _jsx("button", { type: "button", onClick: handleDownload, disabled: !hasUrl, "aria-label": "T\u1EA3i xu\u1ED1ng", className: !hasUrl ? "opacity-30" : undefined, children: _jsx(Icon, { icon: "download-o", size: 20, className: "text-[#393E40]" }) })] })] }) }));
 };
 export default FileMessageItem;

package/dist/components/message/item/ImageMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/ImageMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAGrE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAID,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAoCrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ImageMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/ImageMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAKrE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CA+BrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/message/item/ImageMessage.js

@@ -1,23 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MessageStatus } from "@openim/wasm-client-sdk";
 import { Image, Spin } from "antd";
-const min = (a, b) => (a > b ? b : a);
+import { useTranslation } from "react-i18next";
+import { renderImagePreviewToolbar } from "./imagePreviewToolbar";
 const ImageMessageItem = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { message } = props;
-    const imageHeight = message.pictureElem.sourcePicture.height;
-    const imageWidth = message.pictureElem.sourcePicture.width;
-    const snapshotMaxHeight = (_b = (_a = message.pictureElem.snapshotPicture) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : imageHeight;
-    const minHeight = min(200, imageWidth) * (imageHeight / imageWidth) + 2;
-    const adaptedHight = min(minHeight, snapshotMaxHeight) + 10;
-    const adaptedWidth = min(imageWidth, 200) + 10;
-    const sourceUrl = ((_c = message.pictureElem.sourcePicture) === null || _c === void 0 ? void 0 : _c.url) ||
-        ((_d = message.pictureElem.snapshotPicture) === null || _d === void 0 ? void 0 : _d.url);
+    const { t } = useTranslation();
+    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;
-    const minStyle = {
-        minHeight: `${adaptedHight}px`,
-        minWidth: `${adaptedWidth}px`,
-    };
-    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx(Image, { rootClassName: "message-image cursor-pointer", className: "rounded-md", src: sourceUrl, preview: true, placeholder: _jsx("div", { style: minStyle, className: "flex items-center justify-center", children: _jsx(Spin, {}) }) }) }) }));
+    return (_jsx("div", { className: "-mx-1", children: _jsx(Spin, { spinning: isSending, children: _jsx(Image, { src: sourceUrl, width: 205, height: 205, className: "cursor-pointer rounded-xl object-cover", preview: {
+                    src: bigUrl,
+                    toolbarRender: (originalNode, info) => { var _a; return renderImagePreviewToolbar(originalNode, (_a = info === null || info === void 0 ? void 0 : info.image) === null || _a === void 0 ? void 0 : _a.url, t); },
+                }, placeholder: _jsx("div", { className: "flex h-[205px] w-[205px] items-center justify-center rounded-xl bg-black/10", children: _jsx(Spin, {}) }) }) }) }));
 };
 export default ImageMessageItem;

package/dist/components/message/item/LinkCard.d.ts

@@ -0,0 +1,7 @@
+import type { UrlMetadataInfo } from "../../../types/chat";
+export interface LinkCardProps {
+    metadata: UrlMetadataInfo;
+}
+declare const LinkCard: ({ metadata }: LinkCardProps) => import("react/jsx-runtime").JSX.Element | null;
+export default LinkCard;
+//# sourceMappingURL=LinkCard.d.ts.map

package/dist/components/message/item/LinkCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCard.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/LinkCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,QAAA,MAAM,QAAQ,GAAI,cAAc,aAAa,mDA0C5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/message/item/LinkCard.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { getHostLabel } from "../../../utils/link";
+import { openLink } from "../../../utils/openLink";
+const LinkCard = ({ metadata }) => {
+    const { t } = useTranslation("biz-inbox");
+    const { url, title, description, image } = metadata;
+    if (!title && !description && !image) {
+        return null;
+    }
+    const handleOpen = () => {
+        openLink(url, t);
+    };
+    return (_jsxs("button", { type: "button", onClick: handleOpen, "data-testid": "link-message-card", className: "flex w-full max-w-[292px] flex-col overflow-hidden rounded-[12px] border border-[rgba(57,62,64,0.1)] bg-white text-left", children: [image && (_jsx("div", { className: "aspect-[16/9] w-full overflow-hidden", children: _jsx("img", { src: image, alt: "", className: "h-full w-full object-cover" }) })), _jsxs("div", { className: "flex flex-col px-3 py-2", children: [title && (_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-[#393E40]", children: title })), _jsx("p", { className: "truncate text-[12px] font-medium leading-[1.6] tracking-[0.12px] text-[#1B3FE4]", children: getHostLabel(url) }), description && (_jsx("p", { className: "line-clamp-2 text-[12px] leading-[1.6] text-[#5C6366]", children: description }))] })] }));
+};
+export default LinkCard;

package/dist/components/message/item/LinkText.d.ts

@@ -0,0 +1,6 @@
+export interface LinkTextProps {
+    text: string;
+}
+declare const LinkText: ({ text }: LinkTextProps) => import("react/jsx-runtime").JSX.Element;
+export default LinkText;
+//# sourceMappingURL=LinkText.d.ts.map

package/dist/components/message/item/LinkText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkText.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/LinkText.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,QAAQ,GAAI,UAAU,aAAa,4CA2BxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/message/item/LinkText.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { parseTextWithLinks } from "../../../utils/link";
+import { openLink } from "../../../utils/openLink";
+import { MESSAGE_TEXT_CLASS } from "./textStyle";
+const LinkText = ({ text }) => {
+    const { t } = useTranslation("biz-inbox");
+    const segments = parseTextWithLinks(text);
+    return (_jsx("span", { className: clsx("min-w-0 whitespace-pre-wrap text-left [overflow-wrap:anywhere]", MESSAGE_TEXT_CLASS), children: segments.map((segment, index) => segment.type === "link" ? (_jsx("button", { type: "button", onClick: () => openLink(segment.url, t), className: "inline text-left font-medium text-[#1B3FE4] underline-offset-2 hover:underline", children: segment.value }, `${segment.url}-${index}`)) : (_jsx("span", { children: segment.value }, `text-${index}`))) }));
+};
+export default LinkText;

package/dist/components/message/item/MergeImageMessage.d.ts

@@ -0,0 +1,7 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+interface MergeImageMessageItemProps {
+    message: MessageItem;
+}
+declare const MergeImageMessageItem: (props: MergeImageMessageItemProps) => import("react/jsx-runtime").JSX.Element;
+export default MergeImageMessageItem;
+//# sourceMappingURL=MergeImageMessage.d.ts.map

package/dist/components/message/item/MergeImageMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MergeImageMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MergeImageMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAMrE,UAAU,0BAA0B;IAClC,OAAO,EAAE,WAAW,CAAC;CACtB;AAQD,QAAA,MAAM,qBAAqB,GAAI,OAAO,0BAA0B,4CA4C/D,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/message/item/MergeImageMessage.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MessageStatus } from "@openim/wasm-client-sdk";
+import { Image, Spin } from "antd";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { renderImagePreviewToolbar } from "./imagePreviewToolbar";
+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 MergeImageMessageItem = (props) => {
+    var _a, _b;
+    const { message } = props;
+    const { t } = useTranslation();
+    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);
+    return (_jsx("div", { className: "-mx-1", children: _jsx(Spin, { spinning: isSending, children: _jsx(Image.PreviewGroup, { preview: {
+                    toolbarRender: (originalNode, info) => { var _a; return renderImagePreviewToolbar(originalNode, (_a = info === null || info === void 0 ? void 0 : info.image) === null || _a === void 0 ? void 0 : _a.url, t); },
+                }, children: _jsx("div", { className: clsx("grid gap-1", MERGE_IMAGE_GRID_COLS_CLASS[cols]), children: 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) ||
+                            "";
+                        const bigUrl = ((_f = (_e = item.pictureElem) === null || _e === void 0 ? void 0 : _e.bigPicture) === null || _f === void 0 ? void 0 : _f.url) || sourceUrl;
+                        return (_jsx(Image, { src: sourceUrl, width: 100, height: 100, className: "cursor-pointer rounded-xl object-cover", preview: { src: bigUrl }, placeholder: _jsx("div", { className: "flex h-[100px] w-[100px] items-center justify-center rounded-xl bg-black/10", children: _jsx(Spin, {}) }) }, item.clientMsgID));
+                    }) }) }) }) }));
+};
+export default MergeImageMessageItem;

package/dist/components/message/item/MessageBubble.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export interface MessageBubbleProps {
+    isMine: boolean;
+    content: ReactNode;
+    senderName?: string;
+    showSenderName?: boolean;
+    showTip?: boolean;
+    isInternal?: boolean;
+    id?: string;
+}
+declare const MessageBubble: ({ isMine, content, senderName, showSenderName, showTip, isInternal, id, }: MessageBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default MessageBubble;
+//# sourceMappingURL=MessageBubble.d.ts.map

package/dist/components/message/item/MessageBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MessageBubble.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAmCD,QAAA,MAAM,aAAa,GAAI,2EAQpB,kBAAkB,4CAsCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/item/MessageBubble.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+const INCOMING_TAIL_PATH = "M1.3798 18H4V0C3.51762 4.5 3.34269 10.5 0.966518 14C-0.568384 16.2608 -0.159364 18 1.3798 18Z";
+const OUTGOING_TAIL_PATH = "M2.6202 18H0V0C0.482375 4.5 0.657308 10.5 3.03348 14C4.56838 16.2608 4.15936 18 2.6202 18Z";
+const MessageBubbleTail = ({ isMine, isInternal, }) => (_jsx("div", { className: "flex shrink-0 items-center justify-center", children: _jsx("div", { className: "flex-none", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "18", viewBox: "0 0 4 18", fill: "none", "aria-hidden": true, children: _jsx("path", { d: isMine ? OUTGOING_TAIL_PATH : INCOMING_TAIL_PATH, fill: isInternal ? "#FF9500" : isMine ? "#0051FF" : "#83899D", fillOpacity: "0.1" }) }) }) }));
+const MessageBubble = ({ isMine, content, senderName, showSenderName, showTip = true, isInternal = false, id, }) => {
+    const bubbleClass = clsx("relative max-w-full p-2", showTip
+        ? isMine
+            ? "rounded-[20px] rounded-br-none"
+            : "rounded-[20px] rounded-bl-none"
+        : "rounded-[20px]", isInternal
+        ? "bg-[rgba(255,149,0,0.1)]"
+        : isMine
+            ? "bg-[rgba(0,81,255,0.1)]"
+            : "bg-[rgba(131,137,157,0.1)]");
+    return (_jsxs("div", { className: "relative flex items-end", "data-testid": "message-bubble", children: [!isMine && showTip && (_jsx(MessageBubbleTail, { isMine: isMine, isInternal: isInternal })), _jsx("div", { className: bubbleClass, id: id, children: _jsxs("div", { className: "flex flex-col gap-1 px-1", children: [showSenderName && senderName && (_jsx("span", { className: "text-[12px] font-medium leading-[160%] tracking-[0.12px] text-[#747B7E]", children: senderName })), _jsx("div", { className: "flex flex-col gap-2", children: content })] }) }), isMine && showTip && (_jsx(MessageBubbleTail, { isMine: isMine, isInternal: isInternal }))] }));
+};
+export default MessageBubble;

package/dist/components/message/item/RevokeMessage.js

@@ -3,6 +3,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 const RevokeMessageItem = (_) => {
     const { t } = useTranslation();
-    return (_jsx("span", { className: "!text-sm sm:text-base whitespace-pre-wrap italic text-gray-500", children: t("revoked") }));
+    return (_jsx("span", { className: "whitespace-pre-wrap text-[16px] leading-[160%] italic text-gray-500", children: t("revoked") }));
 };
 export default RevokeMessageItem;

package/dist/components/message/item/TextMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/TextMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKnE,UAAU,oBAAoB;IAC5B,OAAO,EAAE,WAAW,CAAC;CACtB;AACD,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,mDAoCnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/TextMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAQnE,UAAU,oBAAoB;IAC5B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,mDAiDnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/message/item/TextMessage.js

@@ -1,10 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
 import { MessageType } from "@openim/wasm-client-sdk";
 import useAuthStore from "../../../store/auth";
-import { sanitizeHtml } from "../../../utils/common";
+import { htmlHasFormatting, sanitizeHtml, stripHtml } from "../../../utils/common";
+import { extractLinkUrls } from "../../../utils/link";
+import LinkText from "./LinkText";
+import { MESSAGE_TEXT_CLASS } from "./textStyle";
 const TextMessageItem = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { message } = props;
     const isCrm = useAuthStore((state) => state.isCrm);
     let extendMessageInfo = null;
@@ -18,13 +22,20 @@ const TextMessageItem = (props) => {
     if ((message === null || message === void 0 ? void 0 : message.contentType) === MessageType.CustomMessage && !isCrm) {
         return null;
     }
-    if (Object.keys(extendMessageInfo).length > 0 &&
-        (extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo)) {
-        const htmlContent = ((_b = (_a = extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.content) || "";
-        // 🔒 Sanitize HTML to prevent XSS attacks
-        const sanitizedContent = sanitizeHtml(htmlContent);
-        return (_jsx("div", { className: "!text-sm sm:text-base break-normal whitespace-pre-line flex-1", style: { overflowWrap: "anywhere" }, dangerouslySetInnerHTML: { __html: sanitizedContent } }));
+    const richHtmlContent = ((_b = (_a = extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.content) || "";
+    if (richHtmlContent && htmlHasFormatting(richHtmlContent)) {
+        const sanitizedContent = sanitizeHtml(richHtmlContent);
+        return (_jsx("div", { className: clsx("break-normal whitespace-pre-line flex-1", MESSAGE_TEXT_CLASS), style: { overflowWrap: "anywhere" }, dangerouslySetInnerHTML: { __html: sanitizedContent } }));
     }
-    return (_jsx("span", { className: "!text-sm sm:text-base whitespace-pre-wrap", children: ((_c = message === null || message === void 0 ? void 0 : message.textElem) === null || _c === void 0 ? void 0 : _c.content) || "" }));
+    const text = ((_c = message === null || message === void 0 ? void 0 : message.textElem) === null || _c === void 0 ? void 0 : _c.content) ||
+        ((_d = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _d === void 0 ? void 0 : _d.text) ||
+        stripHtml(richHtmlContent) ||
+        "";
+    if (!text)
+        return null;
+    if (extractLinkUrls(text).length > 0) {
+        return _jsx(LinkText, { text: text });
+    }
+    return (_jsx("p", { className: clsx("whitespace-pre-wrap break-words", MESSAGE_TEXT_CLASS), children: text }));
 };
 export default TextMessageItem;

package/dist/components/message/item/UrlTextMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UrlTextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/UrlTextMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAUtD,UAAU,uBAAuB;IAC/B,OAAO,EAAE,WAAW,CAAC;CACtB;AACD,QAAA,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CAwEzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"UrlTextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/UrlTextMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAatD,UAAU,uBAAuB;IAC/B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CA6DzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/message/item/UrlTextMessage.js

@@ -1,18 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getHostFromUrl, wrapLinksInHtml, sanitizeHtml, } from "../../../utils/common";
-import { useFetchExternalLink } from "../../../hooks/common/useFetchExternalLink";
-import { Image } from "antd";
+import { wrapLinksInHtml, sanitizeHtml, htmlHasFormatting, stripHtml, } from "../../../utils/common";
+import clsx from "clsx";
+import LinkText from "./LinkText";
+import LinkCard from "./LinkCard";
+import { MESSAGE_TEXT_CLASS } from "./textStyle";
 const UrlTextMessageItem = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { message } = props;
-    const { data: externalLinkData } = useFetchExternalLink(((_b = (_a = message === null || message === void 0 ? void 0 : message.urlTextElem) === null || _a === void 0 ? void 0 : _a.urls) === null || _b === void 0 ? void 0 : _b[0]) || "");
     let extendMessageInfo = null;
-    const onPressExternalLink = (url) => {
-        if (!url)
-            return;
-        window.open(url, "_blank", "noopener,noreferrer");
-    };
     try {
         extendMessageInfo = JSON.parse((message === null || message === void 0 ? void 0 : message.ex) || "{}");
     }
@@ -20,13 +16,19 @@ const UrlTextMessageItem = (props) => {
         extendMessageInfo = {};
         console.error("Failed to parse extendMessageInfo", error);
     }
-    if (Object.keys(extendMessageInfo).length > 0 &&
-        (extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo)) {
-        const htmlContent = ((_d = (_c = extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.content) || "";
-        // 🔒 Sanitize HTML to prevent XSS attacks
-        const sanitizedContent = sanitizeHtml(wrapLinksInHtml(htmlContent));
-        return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "!text-sm sm:text-base break-normal whitespace-pre-line flex-1", style: { overflowWrap: "anywhere" }, dangerouslySetInnerHTML: { __html: sanitizedContent } }), !!externalLinkData && (_jsxs("div", { className: "flex items-center rounded-md px-3 py-2 border-l-4 border-l-blue-500 bg-blue-50 gap-2 cursor-pointer overflow-hidden", style: { wordBreak: "break-word", overflowWrap: "anywhere" }, onClick: () => onPressExternalLink((externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.url) || ""), children: [_jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [(externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.title) && (_jsx("span", { className: "!text-sm font-semibold truncate break-normal", children: externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.title })), (externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.description) && (_jsx("span", { className: "!text-sm text-gray-500 line-clamp-2", children: externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.description })), (externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.url) && (_jsx("span", { className: "!text-sm font-medium text-blue-500", children: getHostFromUrl(externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.url) }))] }), ((_e = externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.logo) === null || _e === void 0 ? void 0 : _e.url) && (_jsx(Image, { src: (_f = externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.logo) === null || _f === void 0 ? void 0 : _f.url, width: 48, height: 48 }))] }))] }));
+    const richHtmlContent = ((_b = (_a = extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.content) || "";
+    if (richHtmlContent && htmlHasFormatting(richHtmlContent)) {
+        const sanitizedContent = sanitizeHtml(wrapLinksInHtml(richHtmlContent));
+        return (_jsx("div", { className: clsx("break-normal whitespace-pre-line flex-1", MESSAGE_TEXT_CLASS), style: { overflowWrap: "anywhere" }, dangerouslySetInnerHTML: { __html: sanitizedContent } }));
     }
-    return (_jsx("span", { className: "!text-sm sm:text-base break-normal whitespace-pre-line flex-1", style: { overflowWrap: "anywhere" }, children: ((_h = (_g = message === null || message === void 0 ? void 0 : message.urlTextElem) === null || _g === void 0 ? void 0 : _g.urls) === null || _h === void 0 ? void 0 : _h[0]) || "" }));
+    const text = (_h = (_g = (_f = (_d = (_c = message === null || message === void 0 ? void 0 : message.textElem) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : (_e = message === null || message === void 0 ? void 0 : message.urlTextElem) === null || _e === void 0 ? void 0 : _e.content) !== null && _f !== void 0 ? _f : message === null || message === void 0 ? void 0 : message.content) !== null && _g !== void 0 ? _g : stripHtml(richHtmlContent)) !== null && _h !== void 0 ? _h : "";
+    const urlMetadata = extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.urlMetadata;
+    if (urlMetadata === null || urlMetadata === void 0 ? void 0 : urlMetadata.url) {
+        return (_jsxs("div", { className: "flex max-w-[292px] flex-col gap-2", children: [text && _jsx(LinkText, { text: text }), _jsx(LinkCard, { metadata: urlMetadata })] }));
+    }
+    if (text) {
+        return _jsx(LinkText, { text: text });
+    }
+    return (_jsx("span", { className: clsx("break-normal whitespace-pre-line flex-1", MESSAGE_TEXT_CLASS), style: { overflowWrap: "anywhere" }, children: ((_k = (_j = message === null || message === void 0 ? void 0 : message.urlTextElem) === null || _j === void 0 ? void 0 : _j.urls) === null || _k === void 0 ? void 0 : _k[0]) || "" }));
 };
 export default UrlTextMessageItem;

package/dist/components/message/item/VideoMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/VideoMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAGrE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAID,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAsBrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"VideoMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/VideoMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAGrE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAmBrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/message/item/VideoMessage.js

@@ -1,20 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MessageStatus } from "@openim/wasm-client-sdk";
 import { Spin } from "antd";
-const min = (a, b) => (a > b ? b : a);
 const VideoMessageItem = (props) => {
     const { message } = props;
-    const imageHeight = message.videoElem.snapshotHeight;
-    const imageWidth = message.videoElem.snapshotWidth;
-    const minHeight = min(200, imageWidth) * (imageHeight / imageWidth) + 2;
-    const adaptedHight = min(minHeight, imageHeight) + 10;
-    const adaptedWidth = min(imageWidth, 200) + 10;
-    const sourceUrl = message.videoElem.videoUrl;
+    const videoElem = message.videoElem;
+    const videoUrl = (videoElem === null || videoElem === void 0 ? void 0 : videoElem.videoUrl) || "";
+    const posterUrl = (videoElem === null || videoElem === void 0 ? void 0 : videoElem.snapshotUrl) || "";
     const isSending = message.status === MessageStatus.Sending;
-    const minStyle = {
-        minHeight: `${adaptedHight}px`,
-        minWidth: `${adaptedWidth}px`,
-    };
-    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx("video", { className: "rounded-md", src: sourceUrl, controls: true }) }) }));
+    return (_jsx("div", { className: "-mx-1", children: _jsx(Spin, { spinning: isSending, children: _jsx("video", { src: videoUrl, poster: posterUrl, controls: true, className: "h-[150px] w-[215px] rounded-xl object-cover" }) }) }));
 };
 export default VideoMessageItem;

package/dist/components/message/item/imagePreviewToolbar.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+import type { TFunction } from "i18next";
+export declare const downloadImage: (imageUrl?: string) => void;
+export declare const renderImagePreviewToolbar: (originalNode: ReactNode, imageUrl: string | undefined, t: TFunction) => ReactNode;
+//# sourceMappingURL=imagePreviewToolbar.d.ts.map