@droppii-org/chat-sdk 0.1.49 → 0.1.51

package/dist/assets/svg/expand.d.ts

@@ -0,0 +1,7 @@
+interface ISvgProps {
+    size?: number;
+    className?: string;
+}
+export declare const ExpandIcon: ({ size, className }: ISvgProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=expand.d.ts.map

package/dist/assets/svg/expand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../src/assets/svg/expand.tsx"],"names":[],"mappings":"AAAA,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,qBAA0B,SAAS,4CAsC7D,CAAC"}

package/dist/assets/svg/expand.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ExpandIcon = ({ size = 20, className }) => (_jsxs("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: [_jsx("path", { d: "M2 7V2H7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M18 7V2H13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2 13V18H7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M18 13V18H13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));

package/dist/assets/svg/expand.tsx

@@ -0,0 +1,44 @@
+interface ISvgProps {
+  size?: number;
+  className?: string;
+}
+
+export const ExpandIcon = ({ size = 20, className }: ISvgProps) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M2 7V2H7"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M18 7V2H13"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M2 13V18H7"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M18 13V18H13"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/dist/assets/svg/index.ts

@@ -1,2 +1,2 @@
 export * from "./document";
-export * from "./canned-response";
+export * from "./canned-response";

package/dist/components/biz-inbox/BizThreadCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BizThreadCard.d.ts","sourceRoot":"","sources":["../../../src/components/biz-inbox/BizThreadCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAYvF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,uBAAuB,CAAC;IAC9B,OAAO,EAAE,CAAC,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;CAClD;AAwBD,QAAA,MAAM,aAAa,GAAI,mBAAmB,kBAAkB,4CAiE3D,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"BizThreadCard.d.ts","sourceRoot":"","sources":["../../../src/components/biz-inbox/BizThreadCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAavF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,uBAAuB,CAAC;IAC9B,OAAO,EAAE,CAAC,IAAI,EAAE,uBAAuB,KAAK,IAAI,CAAC;CAClD;AAQD,QAAA,MAAM,aAAa,GAAI,mBAAmB,kBAAkB,4CA6C3D,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/biz-inbox/BizThreadCard.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import { jsx as _jsx } from "react/jsx-runtime";
 import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 import useAuthStore from "../../store/auth";
 import { formatTimestamp } from "../../utils/common";
 import { parseBizLatestMessage } from "../../utils/bizMessage";
 import { resolveBizAvatarUrl, resolveBizBadgeLabel, resolveBizDisplayName, } from "../../utils/bizConversation";
+import ThreadCard from "../../components/conversation/ThreadCard";
 import BizThreadAvatar from "./BizThreadAvatar";
 import BizThreadTitle from "./BizThreadTitle";
 const formatLatestMessageTime = (sendTime) => {
@@ -15,12 +15,6 @@ const formatLatestMessageTime = (sendTime) => {
     const isToday = dayjs(sendTime).isSame(dayjs(), "day");
     return formatTimestamp(sendTime, { hasTime: isToday });
 };
-const formatUnreadCount = (count) => (count > 99 ? "99+" : count);
-const UnreadBadge = ({ count }) => {
-    const label = String(formatUnreadCount(count));
-    const isWide = label.length > 1;
-    return (_jsx("span", { className: `inline-flex h-5 shrink-0 items-center justify-center rounded-[32px] border-2 border-white bg-[linear-gradient(93deg,#FF7D74_0%,#F04438_100%)] text-center text-[12px] font-semibold leading-[160%] text-white px-[3px] ${isWide ? "min-w-8" : "min-w-5"}`, children: label }));
-};
 const BizThreadCard = ({ item, onClick }) => {
     var _a;
     const { t } = useTranslation("biz-inbox");
@@ -32,8 +26,6 @@ const BizThreadCard = ({ item, onClick }) => {
     const latestMessagePreview = parseBizLatestMessage(item.latestMsg, currentUserId, tCommon, item.peer.fullName);
     const latestMessageTime = formatLatestMessageTime(item.latestMsgSendTime || null);
     const unreadCount = (_a = item.unreadCount) !== null && _a !== void 0 ? _a : 0;
-    return (_jsxs("button", { type: "button", onClick: () => onClick(item), "data-testid": "biz-inbox-thread-card", className: "flex w-full shrink-0 items-start gap-2 border-b border-[#EFEFEF] bg-white p-3 text-left transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff]", children: [_jsx(BizThreadAvatar, { peerType: item.peer.type, chatCategory: item.chatCategory, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex min-h-[25.6px] items-center justify-between gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(BizThreadTitle, { peerType: item.peer.type, chatCategory: item.chatCategory, displayName: displayName, hasUnread: unreadCount > 0 }) }), latestMessageTime && (_jsx("span", { className: "shrink-0 text-[12px] font-normal leading-[160%] text-[#747B7E] [font-feature-settings:'liga'_off,'clig'_off]", children: latestMessageTime }))] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: clsx("min-w-0 flex-1 truncate text-[14px] leading-[160%] [font-feature-settings:'liga'_off,'clig'_off]", unreadCount > 0
-                                    ? "font-[510] text-black"
-                                    : "font-normal tracking-[0.14px] text-[#5C6366]"), children: latestMessagePreview }), unreadCount > 0 && _jsx(UnreadBadge, { count: unreadCount })] })] })] }));
+    return (_jsx(ThreadCard, { testId: "biz-inbox-thread-card", onClick: () => onClick(item), unreadCount: unreadCount, time: latestMessageTime, preview: latestMessagePreview, avatar: _jsx(BizThreadAvatar, { peerType: item.peer.type, chatCategory: item.chatCategory, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), title: _jsx(BizThreadTitle, { peerType: item.peer.type, chatCategory: item.chatCategory, displayName: displayName, hasUnread: unreadCount > 0 }) }));
 };
 export default BizThreadCard;

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

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

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

@@ -5,11 +5,7 @@ import { Icon } from "../../components/icon";
 import { documentIcon } from "../../assets/svg";
 import { shortenFileName } from "../../components/message/footer/FilePreview";
 import { DOCUMENT_MIME_TYPES } from "../../utils/fileValidation";
-const formatDuration = (seconds) => {
-    const minutes = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
-};
+import { formatDuration } from "../../utils/common";
 const formatFileSize = (bytes) => {
     if (bytes === 0)
         return "0 B";

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BizLinkMessageCard.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizLinkMessageCard.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,kBAAkB,GAAI,SAAS,uBAAuB,mDA+D3D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"BizLinkMessageCard.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizLinkMessageCard.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,QAAA,MAAM,kBAAkB,GAAI,cAAc,uBAAuB,mDA8ChE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -1,21 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import { useFetchUrlMetadata } from "../../hooks/common/useFetchUrlMetadata";
 import { getHostLabel } from "../../utils/bizLink";
 import { openBizLink } from "../../utils/openBizLink";
-const BizLinkMessageCard = ({ url }) => {
+const BizLinkMessageCard = ({ metadata }) => {
     const { t } = useTranslation("biz-inbox");
-    const { data, isLoading } = useFetchUrlMetadata(url);
-    if (isLoading) {
-        return (_jsxs("div", { "data-testid": "biz-link-message-card-loading", className: "flex w-full max-w-[292px] flex-col overflow-hidden rounded-[12px] border border-[rgba(57,62,64,0.1)] bg-white", children: [_jsx("div", { className: "flex aspect-[1920/1080] w-full items-center justify-center bg-[#EAF5FF]", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-[#1B3FE4] border-t-transparent" }) }), _jsxs("div", { className: "flex flex-col gap-1 px-3 py-2", children: [_jsx("div", { className: "h-4 w-2/3 animate-pulse rounded bg-[#EFEFEF]" }), _jsx("div", { className: "h-3 w-1/3 animate-pulse rounded bg-[#EFEFEF]" })] })] }));
-    }
-    if (!(data === null || data === void 0 ? void 0 : data.title) && !(data === null || data === void 0 ? void 0 : data.description) && !(data === null || data === void 0 ? void 0 : data.image)) {
+    const { url, title, description, image } = metadata;
+    if (!title && !description && !image) {
         return null;
     }
     const handleOpen = () => {
         openBizLink(url, t);
     };
-    return (_jsxs("button", { type: "button", onClick: handleOpen, "data-testid": "biz-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: [(data === null || data === void 0 ? void 0 : data.image) && (_jsx("div", { className: "aspect-[16/9] w-full overflow-hidden", children: _jsx("img", { src: data.image, alt: "", className: "h-full w-full object-cover" }) })), _jsxs("div", { className: "flex flex-col px-3 py-2", children: [(data === null || data === void 0 ? void 0 : data.title) && (_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-[#393E40]", children: data.title })), _jsx("p", { className: "truncate text-[12px] font-medium leading-[1.6] tracking-[0.12px] text-[#1B3FE4]", children: getHostLabel(url) }), (data === null || data === void 0 ? void 0 : data.description) && (_jsx("p", { className: "line-clamp-2 text-[12px] leading-[1.6] text-[#5C6366]", children: data.description }))] })] }));
+    return (_jsxs("button", { type: "button", onClick: handleOpen, "data-testid": "biz-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 BizLinkMessageCard;

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

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

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

@@ -4,10 +4,15 @@ import { useState } from "react";
 import clsx from "clsx";
 import { MessageStatus, MessageType } from "@openim/wasm-client-sdk";
 import { Image, Spin } from "antd";
+import { Icon } from "../../components/icon";
+import { documentIcon } from "../../assets/svg";
+import { shortenFileName } from "../../components/message/footer/FilePreview";
 import BizLinkMessageCard from "./BizLinkMessageCard";
 import BizLinkTextContent from "./BizLinkTextContent";
 import BizImageViewer from "./BizImageViewer";
+import BizVideoViewer from "./BizVideoViewer";
 import { extractBizLinkUrls } from "../../utils/bizLink";
+import { formatDuration, renderFileSize } from "../../utils/common";
 const MERGE_IMAGE_GRID_COLS_CLASS = {
     1: "grid-cols-[repeat(1,100px)]",
     2: "grid-cols-[repeat(2,100px)]",
@@ -43,21 +48,70 @@ const BizMergeImageMessage = ({ message }) => {
                         return (_jsx("div", { className: "cursor-pointer", onClick: () => setViewerIndex(index), children: _jsx(Image, { src: sourceUrl, width: 100, height: 100, className: "rounded-xl object-cover", preview: false, placeholder: _jsx("div", { className: "flex h-[100px] w-[100px] items-center justify-center rounded-xl bg-black/10", children: _jsx(Spin, {}) }) }) }, item.clientMsgID));
                     }) }) }), viewerIndex !== null && (_jsx(BizImageViewer, { images: imageUrls, initialIndex: viewerIndex, onClose: () => setViewerIndex(null) }))] }));
 };
+const BizVideoMessage = ({ message }) => {
+    var _a;
+    const [viewerVisible, setViewerVisible] = useState(false);
+    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 durationSeconds = ((_a = videoElem === null || videoElem === void 0 ? void 0 : videoElem.duration) !== null && _a !== void 0 ? _a : 0) / 1000;
+    const isSending = message.status === MessageStatus.Sending;
+    return (_jsxs("div", { className: "-mx-1", children: [_jsx(Spin, { spinning: isSending, children: _jsxs("div", { className: "relative h-[150px] w-[215px] cursor-pointer overflow-hidden rounded-xl", onClick: () => setViewerVisible(true), children: [_jsx("img", { src: posterUrl, alt: "", className: "h-full w-full object-cover" }), _jsx("div", { className: "absolute bottom-1 right-1 flex h-[18px] w-9 items-center justify-center rounded-xl bg-black/70", children: _jsx("span", { className: "text-[10px] leading-[1.6] text-white", children: formatDuration(durationSeconds) }) }), _jsx("div", { className: "absolute left-1/2 top-1/2 flex h-[50px] w-[50px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-2xl bg-black/60", children: _jsx(Icon, { icon: "play-b", size: 24, className: "text-white" }) })] }) }), viewerVisible && (_jsx(BizVideoViewer, { videoUrl: videoUrl, posterUrl: posterUrl, onClose: () => setViewerVisible(false) }))] }));
+};
+const BizFileMessage = ({ message }) => {
+    var _a;
+    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 = () => {
+        if (!hasUrl)
+            return;
+        const link = document.createElement("a");
+        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 (_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]" }) })] })] }) }));
+};
 const BizMessageContent = ({ message }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e;
     if (message.contentType === MessageType.PictureMessage) {
         return _jsx(BizPictureMessage, { message: message });
     }
+    if (message.contentType === MessageType.FileMessage) {
+        return _jsx(BizFileMessage, { message: message });
+    }
+    if (message.contentType === MessageType.VideoMessage) {
+        return _jsx(BizVideoMessage, { message: message });
+    }
     if (message.contentType === MessageType.MergeMessage) {
         return _jsx(BizMergeImageMessage, { message: message });
     }
     const text = (_e = (_d = (_b = (_a = message.textElem) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : (_c = message.urlTextElem) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : message.content) !== null && _e !== void 0 ? _e : "";
     const hasLinks = text ? extractBizLinkUrls(text).length > 0 : false;
     if (message.contentType === MessageType.UrlTextMessage) {
-        const urls = (_g = (_f = message.urlTextElem) === null || _f === void 0 ? void 0 : _f.urls) !== null && _g !== void 0 ? _g : [];
-        const singleLink = urls.length === 1 ? urls[0] : null;
-        if (singleLink) {
-            return (_jsxs("div", { className: "flex max-w-[292px] flex-col gap-2", children: [text && _jsx(BizLinkTextContent, { text: text }), _jsx(BizLinkMessageCard, { url: singleLink })] }));
+        let urlMetadata;
+        try {
+            const ex = JSON.parse(message.ex || "{}");
+            urlMetadata = ex.urlMetadata;
+        }
+        catch (_f) {
+            urlMetadata = undefined;
+        }
+        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(BizLinkTextContent, { text: text }), _jsx(BizLinkMessageCard, { metadata: urlMetadata })] }));
         }
         return text ? _jsx(BizLinkTextContent, { text: text }) : null;
     }

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

@@ -12,7 +12,7 @@ import useConversationStore from "../../store/conversation";
 import useAuthStore from "../../store/auth";
 import { isBizGroupChat } from "../../utils/bizConversation";
 import emitter from "../../utils/events";
-import BizMessageItem from "./item/BizMessageItem";
+import MessageItem from "../../components/message/item";
 const BizMessageList = () => {
     const { t } = useTranslation("biz-inbox");
     const { user } = useChatContext();
@@ -31,6 +31,6 @@ const BizMessageList = () => {
             emitter.off("BIZ_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM", scrollToBottomIfAtBottom);
         };
     }, [scrollToBottomIfAtBottom]);
-    return (_jsx("div", { "data-testid": "biz-message-list", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: isMessageLoading ? (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) })) : (_jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableBizMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: loadState.messageList.map((message, _, array) => (_jsx(BizMessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat }, message.clientMsgID))) })) }));
+    return (_jsx("div", { "data-testid": "biz-message-list", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: isMessageLoading ? (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) })) : (_jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableBizMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat }, message.clientMsgID))) })) }));
 };
 export default BizMessageList;

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

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

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

@@ -12,10 +12,11 @@ import useConversationStore from "../../store/conversation";
 import useBizMessageDraftStore from "../../store/bizMessageDraft";
 import { resolveBizAvatarUrl, resolveBizDisplayName, } from "../../utils/bizConversation";
 import { emit } from "../../utils/events";
-import { extractBizLinkUrls } from "../../utils/bizLink";
+import { extractLinkUrls } from "../../utils/link";
+import { useFetchUrlMetadata } from "../../hooks/common/useFetchUrlMetadata";
 import { processAndValidateDocuments, processAndValidateFiles, } from "../../utils/fileValidation";
-import BizAttachmentPreview from "./BizAttachmentPreview";
-import BizLinkInputPreview from "./BizLinkInputPreview";
+import { FilePreviewList } from "../../components/message/footer/FilePreview";
+import LinkInputPreview from "../../components/message/footer/LinkInputPreview";
 import BizMoreOptionPanel from "./BizMoreOptionPanel";
 const MAX_LINES = 5;
 const CONTAINER_MIN_HEIGHT = 48;
@@ -28,7 +29,6 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
     const conversationId = selectedConversationId || (bizConversation === null || bizConversation === void 0 ? void 0 : bizConversation.conversationId) || "";
     const isConversationReady = !!conversationData && (!!conversationData.userID || !!conversationData.groupID);
     const sendMessageOptions = useMemo(() => ({
-        extractUrls: extractBizLinkUrls,
         scrollEvent: "BIZ_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM",
         resolveOfflinePushMeta: () => ({
             title: bizConversation
@@ -42,7 +42,7 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
                 "",
         }),
     }), [bizConversation, conversationData, t]);
-    const { sendTextMessage, sendMergeMessage } = useSendMessage(sendMessageOptions);
+    const { sendMergeMessage } = useSendMessage(sendMessageOptions);
     const userID = useAuthStore((state) => state.userID);
     const setDraft = useBizMessageDraftStore((state) => state.setDraft);
     const clearDraft = useBizMessageDraftStore((state) => state.clearDraft);
@@ -58,10 +58,11 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
     const [previewDismissed, setPreviewDismissed] = useState(false);
     const [isMoreOptionOpen, { setFalse: closeMoreOption, toggle: toggleMoreOption },] = useBoolean(false);
     const previewUrl = useMemo(() => {
-        const urls = extractBizLinkUrls(value);
+        const urls = extractLinkUrls(value);
         return urls.length === 1 ? urls[0] : null;
     }, [value]);
     const showLinkPreview = !!previewUrl && !previewDismissed;
+    const { data: previewMetadata } = useFetchUrlMetadata(previewUrl !== null && previewUrl !== void 0 ? previewUrl : "", showLinkPreview);
     useEffect(() => {
         setPreviewDismissed(false);
     }, [previewUrl]);
@@ -182,23 +183,25 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
             if (onSendMessage) {
                 onSendMessage(text);
             }
-            else if (hasFiles) {
-                await sendMergeMessage({
-                    plainText: text,
-                    richText: "",
-                    files: listUploadFiles,
-                    isInternal: false,
-                });
-                setListUploadFiles([]);
-            }
             else {
-                const sent = await sendTextMessage({
+                const urlMetadata = showLinkPreview && previewUrl && previewMetadata
+                    ? {
+                        url: previewUrl,
+                        title: previewMetadata.title,
+                        description: previewMetadata.description,
+                        image: previewMetadata.image,
+                    }
+                    : undefined;
+                const sent = await sendMergeMessage({
                     plainText: text,
                     richText: "",
+                    files: listUploadFiles,
                     isInternal: false,
+                    urlMetadata,
                 });
                 if (!sent)
                     return;
+                setListUploadFiles([]);
             }
             setValue("");
             if (conversationId && userID) {
@@ -246,7 +249,7 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
         event.preventDefault();
         void handleSend();
     };
-    return (_jsxs("div", { ref: containerRef, "data-testid": "biz-thread-detail-input", className: "flex w-full shrink-0 flex-col bg-[rgba(131,137,157,0.05)]", children: [_jsx("input", { ref: mediaInputRef, type: "file", accept: "image/jpeg,image/png,image/jpg,video/*", multiple: true, className: "hidden", onChange: handleMediaInputChange }), _jsx("input", { ref: documentInputRef, type: "file", accept: ".pdf,.doc,.docx", multiple: true, className: "hidden", onChange: handleDocumentInputChange }), listUploadFiles.length > 0 && (_jsx(BizAttachmentPreview, { files: listUploadFiles, onRemove: handleRemoveFile, onVideoReady: () => setIsVideoLoading(false) })), showLinkPreview && previewUrl && (_jsx(BizLinkInputPreview, { url: previewUrl, onRemove: () => setPreviewDismissed(true) })), _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsx("button", { type: "button", onClick: handleToggleMoreOption, "aria-label": t("thread_detail.more_option.toggle"), "aria-expanded": isMoreOptionOpen, "data-testid": "biz-thread-detail-more-option-toggle", className: "flex py-3 items-center justify-center rounded-full", children: isMoreOptionOpen ? (_jsx(Icon, { icon: "close-circle-o", size: 24, className: "text-[#1B3FE4]" })) : (_jsx(Icon, { icon: "plus-circle-o", size: 24, className: "text-[#393E40]" })) }) }), _jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
+    return (_jsxs("div", { ref: containerRef, "data-testid": "biz-thread-detail-input", className: "flex w-full shrink-0 flex-col bg-[rgba(131,137,157,0.05)]", children: [_jsx("input", { ref: mediaInputRef, type: "file", accept: "image/jpeg,image/png,image/jpg,video/*", multiple: true, className: "hidden", onChange: handleMediaInputChange }), _jsx("input", { ref: documentInputRef, type: "file", accept: ".pdf,.doc,.docx", multiple: true, className: "hidden", onChange: handleDocumentInputChange }), listUploadFiles.length > 0 && (_jsx(FilePreviewList, { files: listUploadFiles, onRemove: (file) => handleRemoveFile(file.uid), onVideoReady: () => setIsVideoLoading(false) })), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setPreviewDismissed(true) })), _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: "flex shrink-0 items-center", children: _jsx("button", { type: "button", onClick: handleToggleMoreOption, "aria-label": t("thread_detail.more_option.toggle"), "aria-expanded": isMoreOptionOpen, "data-testid": "biz-thread-detail-more-option-toggle", className: "flex py-3 items-center justify-center rounded-full", children: isMoreOptionOpen ? (_jsx(Icon, { icon: "close-circle-o", size: 24, className: "text-[#1B3FE4]" })) : (_jsx(Icon, { icon: "plus-circle-o", size: 24, className: "text-[#393E40]" })) }) }), _jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
                             ? "border-[#607CFB] shadow-[0px_0px_2px_rgba(27,63,228,0.5)]"
                             : "border-[#DDDEDF]"), style: { minHeight: CONTAINER_MIN_HEIGHT }, children: _jsx("div", { className: "flex min-w-0 flex-[1_0_0] items-center gap-2 self-stretch px-3 py-1", children: _jsx("textarea", { ref: textareaRef, value: value, rows: 1, onChange: (event) => handleChange(event.target.value), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("thread_detail.input_placeholder"), "data-testid": "biz-thread-detail-message-input", className: "biz-message-input-scrollbar min-h-0 min-w-0 flex-1 resize-none appearance-none border-0 bg-transparent p-0 text-[16px] leading-[1.6] tracking-[0.16px] text-black outline-none ring-0 placeholder:text-[#747B7E] focus:border-0 focus:outline-none focus:ring-0" }) }) }), _jsx("div", { className: "flex shrink-0 items-center pb-1", children: _jsx("button", { type: "button", onClick: () => void handleSend(), disabled: !canSend, "data-testid": "biz-thread-detail-send", className: clsx("flex h-10 w-10 items-center justify-center rounded-full", canSend ? "bg-[#002BEB]" : "bg-[#002BEB] opacity-25"), children: _jsx(Icon, { icon: "send-b", size: 20, className: "text-white" }) }) })] }), isMoreOptionOpen && (_jsx(BizMoreOptionPanel, { disabled: !isConversationReady, onTriggerMediaInput: () => { var _a; return (_a = mediaInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, onTriggerDocumentInput: () => { var _a; return (_a = documentInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }))] }));
 };

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

@@ -0,0 +1,8 @@
+interface BizVideoViewerProps {
+    videoUrl: string;
+    posterUrl?: string;
+    onClose: () => void;
+}
+declare const BizVideoViewer: ({ videoUrl, posterUrl, onClose }: BizVideoViewerProps) => import("react").ReactPortal;
+export default BizVideoViewer;
+//# sourceMappingURL=BizVideoViewer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BizVideoViewer.d.ts","sourceRoot":"","sources":["../../../src/components/biz-thread-detail/BizVideoViewer.tsx"],"names":[],"mappings":"AAQA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,QAAA,MAAM,cAAc,GAAI,kCAAkC,mBAAmB,gCAyM5E,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "../../components/icon";
+import { ExpandIcon } from "../../assets/svg";
+import { formatDuration } from "../../utils/common";
+const SKIP_SECONDS = 10;
+const BizVideoViewer = ({ videoUrl, posterUrl, onClose }) => {
+    var _a;
+    const containerRef = useRef(null);
+    const videoRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isMuted, setIsMuted] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const togglePlay = () => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        if (video.paused) {
+            void video.play();
+        }
+        else {
+            video.pause();
+        }
+    };
+    const skip = (seconds) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const max = video.duration || Infinity;
+        video.currentTime = Math.min(Math.max(video.currentTime + seconds, 0), max);
+        setCurrentTime(video.currentTime);
+    };
+    const toggleFullscreen = () => {
+        var _a, _b;
+        const el = containerRef.current;
+        if (!el)
+            return;
+        if (!document.fullscreenElement) {
+            void ((_a = el.requestFullscreen) === null || _a === void 0 ? void 0 : _a.call(el));
+        }
+        else {
+            void ((_b = document.exitFullscreen) === null || _b === void 0 ? void 0 : _b.call(document));
+        }
+    };
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape")
+                onClose();
+            if (event.key === " ") {
+                event.preventDefault();
+                togglePlay();
+            }
+            if (event.key === "ArrowLeft")
+                skip(-SKIP_SECONDS);
+            if (event.key === "ArrowRight")
+                skip(SKIP_SECONDS);
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onClose]);
+    useEffect(() => {
+        const handleFullscreenChange = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
+        document.addEventListener("fullscreenchange", handleFullscreenChange);
+        return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    }, []);
+    useEffect(() => {
+        var _a;
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play().catch(() => { });
+    }, []);
+    const toggleMute = () => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.muted = !video.muted;
+        setIsMuted(video.muted);
+    };
+    const handleSeek = (event) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const value = Number(event.target.value);
+        video.currentTime = value;
+        setCurrentTime(value);
+    };
+    const handleDownload = () => {
+        const filename = videoUrl.substring(videoUrl.lastIndexOf("/") + 1) || "video";
+        const link = document.createElement("a");
+        link.href = videoUrl;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    };
+    const remainingTime = Math.max(duration - currentTime, 0);
+    const container = (_a = document.querySelector('[data-testid="biz-thread-detail-root"]')) !== null && _a !== void 0 ? _a : document.body;
+    return createPortal(_jsxs("div", { ref: containerRef, className: "absolute inset-0 z-[999] flex flex-col bg-black", children: [_jsxs("div", { className: "flex items-center justify-between px-4 pt-12 pb-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { type: "button", className: "flex h-10 w-10 items-center justify-center text-white", onClick: onClose, "aria-label": "\u0110\u00F3ng", children: _jsx(Icon, { icon: "close-b", size: 24 }) }), _jsx("button", { type: "button", className: "flex h-10 w-10 items-center justify-center text-white", onClick: toggleFullscreen, "aria-label": isFullscreen ? "Thu nhỏ" : "Toàn màn hình", children: _jsx(ExpandIcon, { size: 20 }) })] }), _jsx("button", { type: "button", className: "flex h-10 w-10 items-center justify-center text-white", onClick: handleDownload, "aria-label": "T\u1EA3i xu\u1ED1ng", children: _jsx(Icon, { icon: "download-o", size: 24 }) })] }), _jsxs("div", { className: "relative flex min-h-0 flex-1 items-center justify-center overflow-hidden px-4", children: [_jsx("video", { ref: videoRef, src: videoUrl, poster: posterUrl, className: "max-h-full max-w-full rounded-[24px] object-contain", onPlay: () => setIsPlaying(true), onPause: () => setIsPlaying(false), onTimeUpdate: (event) => setCurrentTime(event.currentTarget.currentTime), onLoadedMetadata: (event) => setDuration(event.currentTarget.duration), onClick: togglePlay }), _jsxs("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-between px-8", children: [_jsx("button", { type: "button", className: "pointer-events-auto relative flex h-9 w-9 items-center justify-center text-white", onClick: () => skip(-SKIP_SECONDS), "aria-label": "L\u00F9i 10 gi\u00E2y", children: _jsx(Icon, { icon: "arrow-reload-o", size: 30 }) }), !isPlaying && (_jsx("button", { type: "button", className: "pointer-events-auto flex h-[50px] w-[50px] shrink-0 items-center justify-center rounded-2xl bg-black/60", onClick: togglePlay, "aria-label": "Ph\u00E1t", children: _jsx(Icon, { icon: "play-b", size: 24, className: "text-white" }) })), _jsx("button", { type: "button", className: "pointer-events-auto relative flex h-9 w-9 items-center justify-center text-white", onClick: () => skip(SKIP_SECONDS), "aria-label": "Ti\u1EBFn 10 gi\u00E2y", children: _jsx(Icon, { icon: "arrow-reload-o", size: 30, className: "-scale-x-100" }) })] })] }), _jsx("div", { className: "flex flex-col gap-2 px-4 pb-8 pt-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-9 shrink-0 text-xs text-white", children: formatDuration(currentTime) }), _jsx("input", { type: "range", min: 0, max: duration || 0, step: 0.1, value: currentTime, onChange: handleSeek, className: "h-1 flex-1 cursor-pointer appearance-none rounded-full bg-white/30 accent-white" }), _jsxs("span", { className: "w-9 shrink-0 text-right text-xs text-white", children: ["-", formatDuration(remainingTime)] }), _jsx("button", { type: "button", onClick: toggleMute, className: "flex h-6 w-6 shrink-0 items-center justify-center text-white", "aria-label": "\u00C2m l\u01B0\u1EE3ng", children: _jsx(Icon, { icon: isMuted ? "volume-off-o" : "volume-up-o", size: 20 }) })] }) })] }), container);
+};
+export default BizVideoViewer;

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

@@ -3,12 +3,8 @@ export type { BizThreadDetailHeaderProps } from "./BizThreadDetailHeader";
 export { default as BizThreadDetailInput } from "./BizThreadDetailInput";
 export type { BizThreadDetailInputProps } from "./BizThreadDetailInput";
 export { default as BizMessageList } from "./BizMessageList";
-export { default as BizMessageItem } from "./item/BizMessageItem";
-export type { BizMessageItemProps } from "./item/BizMessageItem";
 export { default as BizMoreOptionPanel } from "./BizMoreOptionPanel";
 export type { BizMoreOptionPanelProps } from "./BizMoreOptionPanel";
 export { default as BizMoreOptionItem } from "./BizMoreOptionItem";
 export type { BizMoreOptionItemProps } from "./BizMoreOptionItem";
-export { default as BizAttachmentPreview } from "./BizAttachmentPreview";
-export type { BizAttachmentPreviewProps } from "./BizAttachmentPreview";
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,7 +1,5 @@
 export { default as BizThreadDetailHeader } from "./BizThreadDetailHeader";
 export { default as BizThreadDetailInput } from "./BizThreadDetailInput";
 export { default as BizMessageList } from "./BizMessageList";
-export { default as BizMessageItem } from "./item/BizMessageItem";
 export { default as BizMoreOptionPanel } from "./BizMoreOptionPanel";
 export { default as BizMoreOptionItem } from "./BizMoreOptionItem";
-export { default as BizAttachmentPreview } from "./BizAttachmentPreview";

package/dist/components/conversation/ConversationBySessionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,iCAGhC,8BAA8B,mDAyFhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAShD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,iCAGhC,8BAA8B,mDA8DhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/components/conversation/ConversationBySessionItem.js

@@ -1,12 +1,13 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { Avatar, Badge } from "antd";
+import { Avatar } from "antd";
 import { useChatContext } from "../../context/ChatContext";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
 import { formatTimestamp, parseLatestMessage } from "../../utils/common";
+import ThreadCard from "./ThreadCard";
 const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
     var _a;
     const { t } = useTranslation();
@@ -34,8 +35,8 @@ const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
     const latestMsgSendTime = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsgSendTime) || 0;
     if (!conversation)
         return null;
-    return (_jsxs("div", { onClick: () => handleConversationClick(conversation), className: `relative p-3 border-b border-gray-100 hover:bg-gray-100 cursor-pointer transition-colors ${isSelected ? "bg-blue-50" : "bg-white"}`, children: [isSelected && (_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 bg-blue-500" })), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "relative flex-shrink-0", children: _jsx(Avatar, { size: 48, src: avatar, children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("h3", { className: "font-semibold text-gray-900 text-sm truncate", children: displayName }), _jsx("p", { className: "text-xs text-gray-500 truncate mt-0.5", children: parseLatestMessage(latestMsg, user === null || user === void 0 ? void 0 : user.userID, t) })] }), _jsxs("div", { className: "flex flex-col items-end gap-1 ml-2", children: [latestMsgSendTime > 0 && (_jsx("span", { className: "text-xs text-gray-400", children: formatTimestamp(latestMsgSendTime, {
-                                                hasTime: true,
-                                            }) })), _jsx("div", { className: "flex items-center gap-1", children: conversation.unreadCount > 0 && (_jsx(Badge, { count: conversation.unreadCount })) })] })] }) })] })] }, conversation.conversationID));
+    return (_jsx(ThreadCard, { onClick: () => handleConversationClick(conversation), isSelected: isSelected, unreadCount: conversation.unreadCount, preview: parseLatestMessage(latestMsg, user === null || user === void 0 ? void 0 : user.userID, t), time: latestMsgSendTime > 0
+            ? formatTimestamp(latestMsgSendTime, { hasTime: true })
+            : undefined, avatar: _jsx(Avatar, { size: 48, src: avatar, children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: displayName }) }));
 };
 export default ConversationBySessionItem;