@droppii-org/chat-sdk 0.1.49 → 0.1.51

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"imagePreviewToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/imagePreviewToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,aAAa,GAAI,WAAW,MAAM,SAQ9C,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,cAAc,SAAS,EACvB,UAAU,MAAM,GAAG,SAAS,EAC5B,GAAG,SAAS,KACX,SAcF,CAAC"}

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "antd";
+import { Icon } from "../../../components/icon";
+export const downloadImage = (imageUrl) => {
+    if (!imageUrl)
+        return;
+    const link = document.createElement("a");
+    link.href = imageUrl;
+    link.download = imageUrl.substring(imageUrl.lastIndexOf("/") + 1);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+export const renderImagePreviewToolbar = (originalNode, imageUrl, t) => (_jsxs("div", { className: "flex flex-col justify-center gap-2", children: [originalNode, imageUrl && (_jsx(Button, { type: "primary", icon: _jsx(Icon, { icon: "download-o", size: 16, className: "text-white" }), className: "self-center", onClick: () => downloadImage(imageUrl), children: t("download") }))] }));

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

@@ -2,12 +2,13 @@ import { MessageItem as MessageItemType } from "@openim/wasm-client-sdk";
 interface MessageItemProps {
     message: MessageItemType;
     allMessages: MessageItemType[];
+    isGroupChat?: boolean;
     contextMenuOpen?: boolean;
     onContextMenuOpenChange?: (open: boolean) => void;
     onRevokeMessage?: (clientMsgID: string) => void;
     onQuoteMessage?: (message: MessageItemType) => void;
     onPressQuoteMessage?: (clientMsgID: string) => void;
 }
-declare const MessageItem: ({ message, allMessages, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MessageItem: ({ message, allMessages, isGroupChat, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
 export default MessageItem;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,yBAAyB,CAAC;AA6BjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,WAAW,GAAI,2HAQlB,gBAAgB,mDA6RlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,yBAAyB,CAAC;AA+BjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAeD,QAAA,MAAM,WAAW,GAAI,wIASlB,gBAAgB,mDAqQlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,13 +1,15 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import dayjs from "dayjs";
 import clsx from "clsx";
-import { Avatar, Dropdown } from "antd";
+import { Dropdown } from "antd";
 import { MessageStatus, MessageType, } from "@openim/wasm-client-sdk";
 import TextMessageItem from "./TextMessage";
 import ImageMessageItem from "./ImageMessage";
 import FileMessageItem from "./FileMessage";
 import VideoMessageItem from "./VideoMessage";
+import MergeImageMessageItem from "./MergeImageMessage";
+import MessageBubble from "./MessageBubble";
 import { getVisibleNeighbor, visibleTypeMessage, } from "../../../hooks/message/useMessage";
 import { MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX } from "../../../constants";
 import { formatTimestamp } from "../../../utils/common";
@@ -24,34 +26,37 @@ import QuoteMessageItem from "./QuoteMessage";
 import SystemLogMessageItem from "./SystemLogMessage";
 import { isSystemLogMessageType } from "../../../utils/messageLog";
 const ICON_COLOR = "#3278f7";
-const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }) => {
-    var _a, _b, _c, _d, _e;
+const MessageAvatar = ({ avatarUrl }) => avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-6 w-6 shrink-0 self-end rounded-full object-cover" })) : (_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center self-end rounded-full bg-[#0C5CFF]", children: _jsx(Icon, { icon: "droppii-o-1", size: 14, className: "text-white" }) }));
+const MessageItem = ({ message, allMessages, isGroupChat = false, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }) => {
+    var _a;
     const { t } = useTranslation();
     const { resendMessage } = useSendMessage();
     const userID = useAuthStore((state) => state.userID);
     const isCrm = useAuthStore((state) => state.isCrm);
     const conversationData = useConversationStore((state) => state.conversationData);
-    const renderMessageByType = useCallback((message) => {
-        switch (message === null || message === void 0 ? void 0 : message.contentType) {
+    const renderMessageByType = useCallback((item) => {
+        switch (item === null || item === void 0 ? void 0 : item.contentType) {
             case MessageType.TextMessage:
             case MessageType.QuoteMessage:
-                return _jsx(TextMessageItem, { message: message });
+                return _jsx(TextMessageItem, { message: item });
             case MessageType.PictureMessage:
-                return _jsx(ImageMessageItem, { message: message });
+                return _jsx(ImageMessageItem, { message: item });
             case MessageType.FileMessage:
-                return _jsx(FileMessageItem, { message: message });
+                return _jsx(FileMessageItem, { message: item });
             case MessageType.VideoMessage:
-                return _jsx(VideoMessageItem, { message: message });
+                return _jsx(VideoMessageItem, { message: item });
+            case MessageType.MergeMessage:
+                return _jsx(MergeImageMessageItem, { message: item });
             case MessageType.UrlTextMessage:
-                return _jsx(UrlTextMessageItem, { message: message });
+                return _jsx(UrlTextMessageItem, { message: item });
             case MessageType.LogTextMessage:
-                return _jsx(SystemLogMessageItem, { message: message });
+                return _jsx(SystemLogMessageItem, { message: item });
             case MessageType.RevokeMessage:
                 return _jsx(RevokeMessageItem, {});
             default:
-                return _jsx(TextMessageItem, { message: message });
+                return _jsx(TextMessageItem, { message: item });
         }
-    }, [message]);
+    }, []);
     const { isReplyable, isRevocable, isMine } = useMemo(() => {
         const isMyMessage = (message === null || message === void 0 ? void 0 : message.sendID) === userID;
         const isOlderThanOneDay = dayjs().diff(dayjs(message === null || message === void 0 ? void 0 : message.sendTime), "days", true) >= 1;
@@ -69,7 +74,7 @@ const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenC
             return [];
         }
         return [
-            ...(isReplyable
+            ...(isReplyable && onQuoteMessage
                 ? [
                     {
                         key: "TB01",
@@ -79,7 +84,7 @@ const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenC
                     },
                 ]
                 : []),
-            ...(isRevocable
+            ...(isRevocable && onRevokeMessage
                 ? [
                     {
                         key: "TB05",
@@ -95,20 +100,20 @@ const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenC
         isRevocable,
         t,
         onRevokeMessage,
-        message === null || message === void 0 ? void 0 : message.contentType,
-        message === null || message === void 0 ? void 0 : message.clientMsgID,
+        message,
         onQuoteMessage,
     ]);
     const showSenderInfo = useMemo(() => {
         var _a, _b, _c;
         try {
             const isChatSupport = (_c = (_b = (_a = JSON.parse((conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex) || "{}")) === null || _a === void 0 ? void 0 : _a.sessionInfo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.botId;
-            return isChatSupport && isCrm && !isMine;
+            return Boolean(isChatSupport && isCrm && (message === null || message === void 0 ? void 0 : message.sendID) !== userID);
         }
         catch (_d) {
             console.log("Failed to parse conversationData.ex");
+            return false;
         }
-    }, [conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex, isCrm, isMine]);
+    }, [conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex, isCrm, message === null || message === void 0 ? void 0 : message.sendID, userID]);
     const isInternalMessage = Boolean(message === null || message === void 0 ? void 0 : message.isInternal);
     const isSystemLogMessage = isSystemLogMessageType(message === null || message === void 0 ? void 0 : message.contentType);
     const hasContextMenu = contextMenuItems.length > 0;
@@ -118,11 +123,12 @@ const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenC
     const nextMessage = getVisibleNeighbor(allMessages, message, "next");
     const prevSameUser = (previousMessage === null || previousMessage === void 0 ? void 0 : previousMessage.sendID) === (message === null || message === void 0 ? void 0 : message.sendID);
     const nextSameUser = (nextMessage === null || nextMessage === void 0 ? void 0 : nextMessage.sendID) === (message === null || message === void 0 ? void 0 : message.sendID);
-    const prevTimeBreak = !previousMessage ||
+    const showTimeBreak = !previousMessage ||
         !dayjs(message.sendTime).isSame(previousMessage.sendTime, "days");
-    const showTimeBreak = prevTimeBreak;
-    const showSenderAvatar = !nextSameUser;
-    const showSenderName = !prevSameUser && !isMine;
+    const showPeerInfo = isGroupChat || showSenderInfo;
+    const showAvatar = showPeerInfo && !isMine && !nextSameUser;
+    const showSenderName = showPeerInfo && !isMine && !prevSameUser;
+    const showTip = !nextSameUser;
     if (!isCrm && isInternalMessage) {
         return null;
     }
@@ -136,29 +142,20 @@ const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenC
         className: "flex flex-col gap-2 py-1 px-3 sm:px-4 min-w-0",
         id: `${MSG_ITEM_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`,
     };
-    const timeBreakNode = showTimeBreak ? (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-xs text-gray-600 text-center bg-neutral-100 px-2 py-1 rounded-full", children: formatTimestamp(message.sendTime, {
-                dateMonthFormat: "DD MMMM",
-            }) }) })) : null;
+    const timeBreakNode = showTimeBreak ? (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "rounded-full bg-neutral-100 px-2 py-1 text-center text-xs text-gray-600", children: formatTimestamp(message.sendTime, { hasTime: true }) }) })) : null;
     if (isSystemLogMessage) {
         return (_createElement("div", Object.assign({}, messageContainerProps, { key: message === null || message === void 0 ? void 0 : message.clientMsgID }),
             timeBreakNode,
             _jsx(SystemLogMessageItem, { message: message })));
     }
+    const bubbleNode = (_jsx(MessageBubble, { isMine: isMine, isInternal: isInternalMessage, senderName: message === null || message === void 0 ? void 0 : message.senderNickname, showSenderName: showSenderName, showTip: showTip, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, content: (message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs(_Fragment, { children: [_jsx(MergeImageMessageItem, { message: message }), (message === null || message === void 0 ? void 0 : message.textElem) && _jsx(TextMessageItem, { message: message })] })) : (renderMessageByType(message)) }));
+    const wrappedBubble = hasContextMenu ? (_jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: ["contextMenu"], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, children: _jsx("div", { className: "min-w-0", children: bubbleNode }) })) : (bubbleNode);
     return (_createElement("div", Object.assign({}, messageContainerProps, { key: message === null || message === void 0 ? void 0 : message.clientMsgID }),
         timeBreakNode,
-        _jsx("div", { className: clsx("flex min-w-0", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2 min-w-0", isMine ? "justify-end" : "justify-start"), children: [showSenderInfo && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showSenderAvatar && (_jsx(Avatar, { src: message === null || message === void 0 ? void 0 : message.senderFaceUrl, children: ((_c = (_b = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _b === void 0 ? void 0 : _b.charAt) === null || _c === void 0 ? void 0 : _c.call(_b, 0)) || "A" })) })), _jsxs("div", { className: clsx("flex flex-col max-w-[75%] min-w-0", isMine ? "items-end" : "items-start"), children: [showSenderName && showSenderInfo && (_jsx("span", { className: "text-xs font-bold mb-1 px-3 mt-2", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("flex flex-col flex-1 w-full", isMine ? "items-end" : "items-start"), children: [(message === null || message === void 0 ? void 0 : message.quoteElem) && (_jsx(QuoteMessageItem, { message: message, isMine: isMine, onPressQuoteMessage: onPressQuoteMessage })), _jsxs("div", { className: "flex items-end gap-1.5", children: [isMine && (_jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine })), _jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: hasContextMenu ? ["contextMenu"] : [], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, children: _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full min-w-0 break-normal flex flex-col flex-1 text-gray-900 gap-1 w-fit", isMine
-                                                        ? isInternalMessage
-                                                            ? "bg-orange-100"
-                                                            : "bg-blue-100"
-                                                        : isInternalMessage
-                                                            ? "bg-orange-100"
-                                                            : "bg-white"), style: {
-                                                        wordBreak: "break-word",
-                                                        overflowWrap: "anywhere",
-                                                    }, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, children: [(message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs("div", { children: [(_e = (_d = message === null || message === void 0 ? void 0 : message.mergeElem) === null || _d === void 0 ? void 0 : _d.multiMessage) === null || _e === void 0 ? void 0 : _e.map((item) => {
-                                                                    return renderMessageByType(item);
-                                                                }), (message === null || message === void 0 ? void 0 : message.textElem) && (_jsx(TextMessageItem, { message: message }))] })) : (renderMessageByType(message)), _jsx("span", { className: clsx("text-xs text-gray-500 text-right"), children: dayjs(message === null || message === void 0 ? void 0 : message.sendTime).format("HH:mm") })] }) })] })] }), isMine && message.status === MessageStatus.Failed && (_jsx("span", { className: "text-red-500 text-xs mt-1", children: isMediaResendable(message) ? (_jsx(Trans, { i18nKey: "message_send_failed", components: {
-                                        bold: (_jsx("strong", { className: "cursor-pointer", onClick: () => resendMessage(message) })),
-                                    } })) : (t("message_send_failed_no_retry")) }))] })] }) })));
+        _jsxs("div", { className: clsx("flex min-w-0 items-end gap-1", isMine ? "justify-end pl-12 pr-3" : "justify-start pl-3 pr-12"), children: [!isMine &&
+                    showPeerInfo &&
+                    (showAvatar ? (_jsx(MessageAvatar, { avatarUrl: message === null || message === void 0 ? void 0 : message.senderFaceUrl })) : (_jsx("div", { className: "h-6 w-6 shrink-0 self-end" }))), _jsxs("div", { className: clsx("flex min-w-0 max-w-[75%] flex-col gap-1", isMine ? "items-end" : "items-start"), children: [(message === null || message === void 0 ? void 0 : message.quoteElem) && (_jsx(QuoteMessageItem, { message: message, isMine: isMine, onPressQuoteMessage: onPressQuoteMessage })), _jsxs("div", { className: "flex items-end gap-1.5", children: [isMine && (_jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine })), wrappedBubble] }), isMine && message.status === MessageStatus.Failed && (_jsx("span", { className: "mt-1 text-xs text-red-500", children: isMediaResendable(message) ? (_jsx(Trans, { i18nKey: "message_send_failed", components: {
+                                    bold: (_jsx("strong", { className: "cursor-pointer", onClick: () => resendMessage(message) })),
+                                } })) : (t("message_send_failed_no_retry")) }))] })] })));
 };
 export default MessageItem;

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

@@ -0,0 +1,2 @@
+export declare const MESSAGE_TEXT_CLASS = "text-[16px] leading-[160%] tracking-[0.16px] text-[#393E40]";
+//# sourceMappingURL=textStyle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textStyle.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/textStyle.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,gEACgC,CAAC"}

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

@@ -0,0 +1 @@
+export const MESSAGE_TEXT_CLASS = "text-[16px] leading-[160%] tracking-[0.16px] text-[#393E40]";