@droppii-org/chat-sdk 0.1.50 → 0.1.51

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

@@ -1,4 +1,3 @@
 export * from "./document";
 export * from "./canned-response";
-export * from "./expand";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/assets/svg/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/assets/svg/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

package/dist/assets/svg/index.js

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

package/dist/assets/svg/index.ts

@@ -1,3 +1,2 @@
 export * from "./document";
-export * from "./canned-response";
-export * from "./expand";
+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/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":"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,4CAiZ3B,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,11 +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;
@@ -29,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
@@ -43,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);
@@ -59,9 +58,8 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
     const [previewDismissed, setPreviewDismissed] = useState(false);
     const [isMoreOptionOpen, { setFalse: closeMoreOption, toggle: toggleMoreOption },] = useBoolean(false);
     const previewUrl = useMemo(() => {
-        var _a;
-        const urls = extractBizLinkUrls(value);
-        return (_a = urls[0]) !== null && _a !== void 0 ? _a : null;
+        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);
@@ -185,15 +183,6 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
             if (onSendMessage) {
                 onSendMessage(text);
             }
-            else if (hasFiles) {
-                await sendMergeMessage({
-                    plainText: text,
-                    richText: "",
-                    files: listUploadFiles,
-                    isInternal: false,
-                });
-                setListUploadFiles([]);
-            }
             else {
                 const urlMetadata = showLinkPreview && previewUrl && previewMetadata
                     ? {
@@ -203,14 +192,16 @@ const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) =>
                         image: previewMetadata.image,
                     }
                     : undefined;
-                const sent = await sendTextMessage({
+                const sent = await sendMergeMessage({
                     plainText: text,
                     richText: "",
+                    files: listUploadFiles,
                     isInternal: false,
                     urlMetadata,
                 });
                 if (!sent)
                     return;
+                setListUploadFiles([]);
             }
             setValue("");
             if (conversationId && userID) {
@@ -258,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/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;

package/dist/components/conversation/ThreadCard.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export interface ThreadCardProps {
+    avatar: ReactNode;
+    title: ReactNode;
+    preview: string;
+    time?: string;
+    unreadCount?: number;
+    isSelected?: boolean;
+    onClick: () => void;
+    testId?: string;
+}
+declare const ThreadCard: ({ avatar, title, preview, time, unreadCount, isSelected, onClick, testId, }: ThreadCardProps) => import("react/jsx-runtime").JSX.Element;
+export default ThreadCard;
+//# sourceMappingURL=ThreadCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadCard.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ThreadCard.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,GAAI,6EASjB,eAAe,4CA4CjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/conversation/ThreadCard.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+const formatUnreadCount = (count) => (count > 99 ? "99+" : count);
+const UnreadBadge = ({ count }) => {
+    const label = String(formatUnreadCount(count));
+    const isWide = label.length > 1;
+    return (_jsx("span", { className: clsx("inline-flex h-5 shrink-0 items-center justify-center rounded-[32px] border-2 border-white bg-[linear-gradient(93deg,#FF7D74_0%,#F04438_100%)] px-[3px] text-center text-[12px] font-semibold leading-[160%] text-white", isWide ? "min-w-8" : "min-w-5"), children: label }));
+};
+const ThreadCard = ({ avatar, title, preview, time, unreadCount = 0, isSelected = false, onClick, testId, }) => {
+    const hasUnread = unreadCount > 0;
+    return (_jsxs("button", { type: "button", onClick: onClick, "data-testid": testId, className: clsx("relative flex w-full shrink-0 items-start gap-2 border-b border-[#EFEFEF] p-3 text-left transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff]", isSelected ? "bg-blue-50" : "bg-white"), children: [isSelected && (_jsx("span", { className: "absolute bottom-0 left-0 top-0 w-1 bg-blue-500" })), avatar, _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: title }), time && (_jsx("span", { className: "shrink-0 text-[12px] font-normal leading-[160%] text-[#747B7E] [font-feature-settings:'liga'_off,'clig'_off]", children: time }))] }), _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]", hasUnread
+                                    ? "font-[510] text-black"
+                                    : "font-normal tracking-[0.14px] text-[#5C6366]"), children: preview }), hasUnread && _jsx(UnreadBadge, { count: unreadCount })] })] })] }));
+};
+export default ThreadCard;

package/dist/components/media-collection/ImageCollection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCollection.d.ts","sourceRoot":"","sources":["../../../src/components/media-collection/ImageCollection.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,eAAe,+CA+GpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ImageCollection.d.ts","sourceRoot":"","sources":["../../../src/components/media-collection/ImageCollection.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,eAAe,+CAqFpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/media-collection/ImageCollection.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MessageType } from "@openim/wasm-client-sdk";
 import { useSearchMessage } from "../../hooks/search/useSearchMessage";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { Button, Empty, Image, Spin } from "antd";
+import { Empty, Image, Spin } from "antd";
 import { useCallback } from "react";
 import dayjs from "dayjs";
 import useConversationStore from "../../store/conversation";
 import { images } from "../../constants/images";
 import { useTranslation } from "react-i18next";
-import { DownloadOutlined } from "@ant-design/icons";
+import { renderImagePreviewToolbar } from "../../components/message/item/imagePreviewToolbar";
 const ImageCollection = () => {
     const { t } = useTranslation();
     const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
@@ -18,16 +18,6 @@ const ImageCollection = () => {
             contentType: MessageType.PictureMessage,
         },
     });
-    const handleDownload = (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);
-    };
     const renderItem = useCallback((date, items) => {
         return (_jsxs("div", { className: "mb-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-500 px-3", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "grid grid-cols-3 justify-start gap-px py-2", children: items.map((item) => {
                         var _a, _b, _c, _d;
@@ -42,11 +32,7 @@ const ImageCollection = () => {
     if (isLoading)
         return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }));
     return (_jsx("div", { id: "scrollableImageDiv", className: "h-full overflow-auto", children: _jsx(Image.PreviewGroup, { preview: {
-                toolbarRender: (originalNode, info) => {
-                    var _a;
-                    const imageUrl = (_a = info === null || info === void 0 ? void 0 : info.image) === null || _a === void 0 ? void 0 : _a.url;
-                    return (_jsxs("div", { className: "flex flex-col justify-center gap-2", children: [originalNode, imageUrl && (_jsx(Button, { type: "primary", icon: _jsx(DownloadOutlined, {}), className: "self-center", onClick: () => handleDownload(imageUrl), children: t("download") }))] }));
-                },
+                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(InfiniteScroll, { dataLength: dataFlatten.length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableImageDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }) }) }));
 };
 export default ImageCollection;

package/dist/components/message/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AA2BA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAqQ3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AA0BA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAgQ3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -11,7 +11,6 @@ import MessageInfiniteScroll from "./MessageInfiniteScroll";
 import MessageHeader from "./MessageHeader";
 import MessageFooter from "./footer";
 import UnassignedSessionFooter from "./UnassignedSessionFooter";
-import { images } from "../../constants/images";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
 import { useBoolean } from "ahooks";
@@ -130,11 +129,6 @@ const MessageList = (props) => {
     if (!conversationData) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center h-full", children: connectStatus !== ConnectStatus.Connected ? (_jsx(Spin, {})) : (_jsx(Empty, { description: t("no_conversation_data") })) }));
     }
-    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0", style: {
-            backgroundImage: `url(${images.conversationBg})`,
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            overflowX: "hidden",
-        }, children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined }), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage }, message.clientMsgID))) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), isCheckingMembership ? (_jsx("div", { className: "border-t bg-white py-4 flex items-center justify-center", children: _jsx(Spin, {}) })) : (latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.status) === SessionStatus.UNASSIGNED ? (_jsx(UnassignedSessionFooter, { sessionId: latestConversationSession.id, teamId: latestConversationSession.teamId })) : shouldRestrictToLastSession ? (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-sm text-gray-500", children: t("join_group_required") }), _jsx(Button, { type: "primary", onClick: joinGroup, loading: isJoining, children: t("join_group") })] })) : (_jsx(MessageFooter, { currentSession: latestConversationSession, openCreateCannedModal: openCreateCannedModal })), _jsx(Modal, { centered: true, open: showConfirmRevoke, onOk: onRevokeMessage, onCancel: handleCloseRevoke, title: t("revoke_message_confirm_title"), okText: t("revoke"), cancelText: t("cancel"), okType: "danger", confirmLoading: isRevoking, getContainer: false, forceRender: true, children: _jsx("p", { children: t("revoke_message_confirm_message") }) })] }));
+    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0 bg-white", style: { overflowX: "hidden" }, children: [_jsx(MessageHeader, { onClose: onClose, currentSession: latestConversationSession, isJoined: isJoined }), _jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage }, message.clientMsgID))) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), isCheckingMembership ? (_jsx("div", { className: "border-t bg-white py-4 flex items-center justify-center", children: _jsx(Spin, {}) })) : (latestConversationSession === null || latestConversationSession === void 0 ? void 0 : latestConversationSession.status) === SessionStatus.UNASSIGNED ? (_jsx(UnassignedSessionFooter, { sessionId: latestConversationSession.id, teamId: latestConversationSession.teamId })) : shouldRestrictToLastSession ? (_jsxs("div", { className: "border-t bg-white py-4 flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-sm text-gray-500", children: t("join_group_required") }), _jsx(Button, { type: "primary", onClick: joinGroup, loading: isJoining, children: t("join_group") })] })) : (_jsx(MessageFooter, { currentSession: latestConversationSession, openCreateCannedModal: openCreateCannedModal })), _jsx(Modal, { centered: true, open: showConfirmRevoke, onOk: onRevokeMessage, onCancel: handleCloseRevoke, title: t("revoke_message_confirm_title"), okText: t("revoke"), cancelText: t("cancel"), okType: "danger", confirmLoading: isRevoking, getContainer: false, forceRender: true, children: _jsx("p", { children: t("revoke_message_confirm_message") }) })] }));
 };
 export default MessageList;

package/dist/components/message/footer/ComposerTextSyncPlugin.d.ts

@@ -0,0 +1,6 @@
+interface ComposerTextSyncPluginProps {
+    onChange: (text: string) => void;
+}
+declare const ComposerTextSyncPlugin: ({ onChange }: ComposerTextSyncPluginProps) => null;
+export default ComposerTextSyncPlugin;
+//# sourceMappingURL=ComposerTextSyncPlugin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerTextSyncPlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ComposerTextSyncPlugin.tsx"],"names":[],"mappings":"AAMA,UAAU,2BAA2B;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,sBAAsB,GAAI,cAAc,2BAA2B,SAYxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,16 @@
+"use client";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getRoot } from "lexical";
+import { useEffect } from "react";
+const ComposerTextSyncPlugin = ({ onChange }) => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                onChange($getRoot().getTextContent());
+            });
+        });
+    }, [editor, onChange]);
+    return null;
+};
+export default ComposerTextSyncPlugin;

package/dist/components/message/footer/FilePreview.d.ts

@@ -4,10 +4,11 @@ interface ShortenOptions {
     keepStart?: number;
     keepEnd?: number;
 }
-export declare const shortenFileName: (name: string, options?: ShortenOptions) => string;
-export declare function FilePreviewList({ files, onRemove, }: {
+export declare const shortenFileName: (name?: string, options?: ShortenOptions) => string;
+export declare function FilePreviewList({ files, onRemove, onVideoReady, }: {
     files: UploadFile[];
     onRemove: (file: UploadFile) => void;
+    onVideoReady?: () => void;
 }): import("react/jsx-runtime").JSX.Element | null;
 declare const FilePreview: () => import("react/jsx-runtime").JSX.Element;
 export default FilePreview;

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

@@ -1 +1 @@
-{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/FilePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,UAAU,EAAE,MAAM,MAAM,CAAC;AAS1C,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,UAAS,cAAmB,WAiBzE,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC,kDA8EA;AAED,QAAA,MAAM,WAAW,+CAQhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/FilePreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAOlC,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,EAAE,UAAS,cAAmB,WAmB1E,CAAC;AAwIF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,YAAY,GACb,EAAE;IACD,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,kDAsBA;AAED,QAAA,MAAM,WAAW,+CAQhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,16 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useEffect, useState } from "react";
 import { useMessageFooterContext } from ".";
-import { Button } from "antd";
 import { Icon } from "../../../components/icon";
 import { documentIcon } from "../../../assets/svg";
-const documentTypes = [
-    "application/pdf",
-    "application/msword",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-];
+import { DOCUMENT_MIME_TYPES } from "../../../utils/fileValidation";
+import { formatDuration } from "../../../utils/common";
 export const shortenFileName = (name, options = {}) => {
+    if (!name)
+        return "";
     const { maxLength = 20, keepStart = 8, keepEnd = 3 } = options;
     if (name.length <= maxLength)
         return name;
@@ -24,23 +22,65 @@ export const shortenFileName = (name, options = {}) => {
     const end = base.slice(-endLen);
     return `${start}...${end}${ext}`;
 };
-export function FilePreviewList({ files, onRemove, }) {
-    const renderFilePreview = useCallback((file) => {
-        var _a, _b, _c;
-        const isDocument = documentTypes.includes(((_a = file === null || file === void 0 ? void 0 : file.originFileObj) === null || _a === void 0 ? void 0 : _a.type) || "");
-        const isVideo = (_b = file.type) === null || _b === void 0 ? void 0 : _b.startsWith("video/");
-        let src = file.url;
-        if (!src && file.originFileObj) {
-            src = URL.createObjectURL(file.originFileObj);
-        }
-        if (isDocument) {
-            return (_jsxs("div", { className: "relative flex flex-row items-center gap-2 align-center bg-gray-100 rounded-md p-1 pr-2", children: [documentIcon, _jsx("span", { className: "text-xs text-gray-500", children: shortenFileName(((_c = file === null || file === void 0 ? void 0 : file.originFileObj) === null || _c === void 0 ? void 0 : _c.name) || "") }), _jsx(Button, { className: "absolute top-[-8px] right-[-8px] w-5 h-5 rounded-full p-0 bg-gray-500 hover:bg-gray-600", type: "primary", onClick: () => onRemove(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) })] }, file.uid));
+const formatFileSize = (bytes) => {
+    if (bytes === 0)
+        return "0 B";
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const kb = bytes / 1024;
+    if (kb < 1024)
+        return `${Math.round(kb)} KB`;
+    return `${(kb / 1024).toFixed(1)} MB`;
+};
+const getFileType = (file) => {
+    var _a, _b, _c;
+    const mimeType = (_c = (_b = (_a = file.originFileObj) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : file.type) !== null && _c !== void 0 ? _c : "";
+    if (DOCUMENT_MIME_TYPES.includes(mimeType))
+        return "document";
+    if (mimeType.startsWith("video/"))
+        return "video";
+    return "image";
+};
+const RemoveButton = ({ file, onRemove }) => (_jsx("button", { type: "button", onClick: () => onRemove(file), className: "absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-[#393E40]", "aria-label": "X\u00F3a", children: _jsx(Icon, { icon: "close-o", size: 12, className: "text-white" }) }));
+const MediaThumb = ({ file, onRemove, onVideoReady }) => {
+    var _a;
+    const [src, setSrc] = useState("");
+    const [duration, setDuration] = useState(null);
+    const isVideo = getFileType(file) === "video";
+    const isLoading = file.status === "uploading";
+    const percent = Math.round((_a = file.percent) !== null && _a !== void 0 ? _a : 0);
+    useEffect(() => {
+        var _a;
+        const originFile = file.originFileObj;
+        if (!originFile) {
+            setSrc((_a = file.url) !== null && _a !== void 0 ? _a : "");
+            return;
         }
-        return (_jsxs("div", { className: "relative rounded-md border", children: [isVideo ? (_jsx("video", { src: src, className: "w-[48px] h-[48px] object-cover rounded-lg", autoPlay: false })) : (_jsx("img", { src: src, alt: file.name, className: "w-[48px] h-[48px] object-cover rounded-lg" })), _jsx(Button, { className: "absolute top-[-8px] right-[-8px] w-5 h-5 rounded-full p-0 bg-gray-500 hover:bg-gray-600", type: "primary", onClick: () => onRemove(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) }), isVideo && (_jsx(Icon, { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", icon: "play-b", size: 20, color: "white" }))] }, file.uid));
-    }, [files]);
+        const url = URL.createObjectURL(originFile);
+        setSrc(url);
+        return () => URL.revokeObjectURL(url);
+    }, [file.originFileObj, file.url]);
+    const handleLoadedMetadata = (event) => {
+        setDuration(event.currentTarget.duration);
+        onVideoReady === null || onVideoReady === void 0 ? void 0 : onVideoReady();
+    };
+    return (_jsxs("div", { className: "relative h-12 w-12 shrink-0", children: [isVideo ? (_jsx("video", { src: src, className: "h-12 w-12 rounded-lg object-cover", preload: "metadata", muted: true, onLoadedMetadata: handleLoadedMetadata })) : (_jsx("img", { src: src, alt: file.name, className: "h-12 w-12 rounded-lg object-cover" })), isLoading && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center rounded-lg bg-black/60", children: _jsxs("span", { className: "text-xs font-semibold text-white", children: [percent, "%"] }) })), isVideo && duration !== null && (_jsx("div", { className: "absolute bottom-1 left-1/2 flex w-9 -translate-x-1/2 items-center justify-center rounded-xl bg-black/70 px-1 text-center text-[10px] font-normal leading-4 text-white", children: formatDuration(duration) })), _jsx(RemoveButton, { file: file, onRemove: onRemove })] }));
+};
+const DocumentCard = ({ file, onRemove }) => {
+    var _a, _b;
+    const isLoading = file.status === "uploading";
+    const percent = Math.round((_a = file.percent) !== null && _a !== void 0 ? _a : 0);
+    return (_jsxs("div", { className: "relative flex h-12 w-40 shrink-0 items-center gap-[7px] rounded-lg bg-[rgba(131,137,157,0.08)] py-[4px] pl-2 pr-5", children: [_jsx("div", { className: "flex h-full w-8 shrink-0 items-center justify-center overflow-hidden [&>svg]:h-8 [&>svg]:w-8", children: documentIcon }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-[11px] font-normal leading-[160%] text-[#393E40]", children: shortenFileName(file.name) }), isLoading ? (_jsxs("span", { className: "text-[10px] leading-[160%] tracking-[0.1px] text-[#747B7E]", children: [percent, "%"] })) : (_jsx("span", { className: "text-[10px] leading-[160%] tracking-[0.1px] text-[#747B7E]", children: formatFileSize((_b = file.size) !== null && _b !== void 0 ? _b : 0) }))] }), _jsx(RemoveButton, { file: file, onRemove: onRemove })] }));
+};
+export function FilePreviewList({ files, onRemove, onVideoReady, }) {
     if (files.length === 0)
         return null;
-    return (_jsx("div", { className: "overflow-x-auto mb-[-4px]", children: _jsx("div", { className: "border-b py-2 px-4", children: _jsx("div", { className: "flex items-center gap-2", children: files.map((file) => renderFilePreview(file)) }) }) }));
+    return (_jsx("div", { className: "flex items-center gap-3 self-stretch overflow-x-auto px-2 pb-2 pt-3", children: files.map((file) => {
+            if (getFileType(file) === "document") {
+                return (_jsx(DocumentCard, { file: file, onRemove: onRemove }, file.uid));
+            }
+            return (_jsx(MediaThumb, { file: file, onRemove: onRemove, onVideoReady: onVideoReady }, file.uid));
+        }) }));
 }
 const FilePreview = () => {
     const { listUploadFiles, setListUploadFiles } = useMessageFooterContext();

package/dist/components/message/footer/LinkInputPreview.d.ts

@@ -0,0 +1,7 @@
+export interface LinkInputPreviewProps {
+    url: string;
+    onRemove: () => void;
+}
+declare const LinkInputPreview: ({ url, onRemove }: LinkInputPreviewProps) => import("react/jsx-runtime").JSX.Element;
+export default LinkInputPreview;
+//# sourceMappingURL=LinkInputPreview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkInputPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/LinkInputPreview.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,gBAAgB,GAAI,mBAAmB,qBAAqB,4CAoEjE,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "../../../components/icon";
+import { useFetchUrlMetadata } from "../../../hooks/common/useFetchUrlMetadata";
+import { getHostLabel } from "../../../utils/link";
+import { openLink } from "../../../utils/openLink";
+import { useTranslation } from "react-i18next";
+const LinkInputPreview = ({ url, onRemove }) => {
+    const { t } = useTranslation("biz-inbox");
+    const { data, isLoading, isError } = useFetchUrlMetadata(url);
+    const handleOpen = () => {
+        openLink(url, t);
+    };
+    return (_jsxs("div", { "data-testid": "link-input-preview", className: "flex w-full shrink-0 items-center gap-2 overflow-hidden bg-[#EAF5FF] pr-2", children: [_jsxs("button", { type: "button", onClick: handleOpen, className: "flex min-w-0 flex-1 items-center gap-2 py-0 pl-0 text-left", children: [_jsx("div", { className: "flex h-[51px] w-[51px] shrink-0 items-center justify-center overflow-hidden bg-[#EAF5FF]", children: isLoading ? (_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-[#1B3FE4] border-t-transparent" })) : (data === null || data === void 0 ? void 0 : data.image) ? (_jsx("img", { src: data.image, alt: "", className: "h-full w-full object-cover" })) : (_jsx(Icon, { icon: "link-alt-b", size: 24, className: "text-[#1B3FE4]" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [isLoading ? (_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-[#393E40]", children: t("link_preview.loading") })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "truncate text-[14px] font-medium leading-[1.6] text-[#393E40]", children: (data === null || data === void 0 ? void 0 : data.title) || getHostLabel(url) }), ((data === null || data === void 0 ? void 0 : data.description) || !(data === null || data === void 0 ? void 0 : data.title)) && (_jsx("p", { className: "truncate text-[13px] leading-[1.6] text-[#747B7E]", children: (data === null || data === void 0 ? void 0 : data.description) || getHostLabel(url) }))] })), isError && !isLoading && (_jsx("p", { className: "truncate text-[13px] leading-[1.6] text-[#747B7E]", children: getHostLabel(url) }))] })] }), _jsx("button", { type: "button", onClick: onRemove, "data-testid": "link-input-preview-remove", className: "flex h-4 w-4 shrink-0 items-center justify-center", "aria-label": t("link_preview.remove"), children: _jsx(Icon, { icon: "close-b", size: 16, className: "text-[#393E40]" }) })] }));
+};
+export default LinkInputPreview;

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

@@ -1 +1 @@
-{"version":3,"file":"MediaActions.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/MediaActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,UAAU,EAA0B,MAAM,MAAM,CAAC;AAoD1E,UAAU,iBAAiB;IACzB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,EACf,aAAa,EACb,eAAe,EACf,eAAsB,GACvB,EAAE,iBAAiB,2CAwKnB"}
+{"version":3,"file":"MediaActions.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/MediaActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,UAAU,EAA0B,MAAM,MAAM,CAAC;AAqD1E,UAAU,iBAAiB;IACzB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,EACf,aAAa,EACb,eAAe,EACf,eAAsB,GACvB,EAAE,iBAAiB,2CAyKnB"}