@droppii-org/chat-sdk 0.1.72 → 0.1.73

package/dist/src/components/conversation-detail/PinnedMessageItem.d.ts

@@ -0,0 +1,11 @@
+import { MessageItem as MessageItemType } from "@openim/wasm-client-sdk";
+interface PinnedMessageItemProps {
+    message: MessageItemType;
+    contextMenuOpen: boolean;
+    onContextMenuOpenChange: (open: boolean) => void;
+    onUnpin: (message: MessageItemType) => void;
+    onJump: (message: MessageItemType) => void;
+}
+declare const PinnedMessageItem: ({ message, contextMenuOpen, onContextMenuOpenChange, onUnpin, onJump, }: PinnedMessageItemProps) => import("react/jsx-runtime").JSX.Element;
+export default PinnedMessageItem;
+//# sourceMappingURL=PinnedMessageItem.d.ts.map

package/dist/src/components/conversation-detail/PinnedMessageItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinnedMessageItem.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/PinnedMessageItem.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAczE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,eAAe,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,uBAAuB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,OAAO,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,MAAM,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5C;AAED,QAAA,MAAM,iBAAiB,GAAI,yEAMxB,sBAAsB,4CA2FxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/src/components/conversation-detail/PinnedMessageItem.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import clsx from "clsx";
+import { Dropdown } from "antd";
+import { useLongPress } from "ahooks";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import MessageBubble from "../../components/message/item/MessageBubble";
+import { renderBubbleContent } from "../../components/message/item/renderMessageContent";
+import { buildMessageToolboxMenuItems, MessageToolboxActionKey, MESSAGE_TOOLBOX_OVERLAY_CLASSNAME, } from "../../components/message/toolbox";
+import useAuthStore from "../../store/auth";
+const LONG_PRESS_DELAY = 500;
+const PinnedMessageItem = ({ message, contextMenuOpen, onContextMenuOpenChange, onUnpin, onJump, }) => {
+    const { t } = useTranslation();
+    const userID = useAuthStore((state) => state.userID);
+    const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === userID;
+    const bubbleWrapperRef = useRef(null);
+    useLongPress(() => onContextMenuOpenChange(true), bubbleWrapperRef, {
+        delay: LONG_PRESS_DELAY,
+    });
+    const contextMenuItems = buildMessageToolboxMenuItems([
+        {
+            key: MessageToolboxActionKey.UNPIN,
+            label: t("context_menu_unpin"),
+            icon: "thumbtack-off-o",
+            onClick: () => onUnpin(message),
+        },
+        {
+            key: MessageToolboxActionKey.VIEW_ORIGINAL,
+            label: t("context_menu_view_original"),
+            icon: "chat-square-o",
+            onClick: () => onJump(message),
+        },
+    ]);
+    const bubbleNode = (_jsx(MessageBubble, { isMine: isMine, senderName: message === null || message === void 0 ? void 0 : message.senderNickname, content: renderBubbleContent(message) }));
+    const pinnedBadgeNode = (_jsx("span", { "data-testid": "pinned-item-badge", className: clsx("absolute -top-2.5 z-[1] flex h-[22px] w-[26px] items-center justify-center rounded-full border border-white bg-gray-25", isMine ? "left-0" : "right-0"), children: _jsx(Icon, { icon: "thumbtack-b", size: 12, className: "text-primary-400" }) }));
+    const unpinButton = (_jsx("button", { type: "button", "data-testid": "pinned-item-unpin", "aria-label": t("context_menu_unpin"), onClick: (event) => {
+            event.stopPropagation();
+            onUnpin(message);
+        }, className: "flex h-7 w-7 shrink-0 items-center justify-center self-center rounded-full bg-gray-25 text-gray-600", children: _jsx(Icon, { icon: "thumbtack-off-o", size: 16 }) }));
+    return (_jsxs("div", { className: clsx("flex items-end gap-2 px-3 pb-4", isMine ? "justify-end" : "justify-start"), children: [isMine && unpinButton, _jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: ["contextMenu"], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, overlayClassName: MESSAGE_TOOLBOX_OVERLAY_CLASSNAME, children: _jsxs("div", { ref: bubbleWrapperRef, className: "relative min-w-0 cursor-pointer", onClick: () => onJump(message), children: [bubbleNode, pinnedBadgeNode] }) }), !isMine && unpinButton] }));
+};
+export default PinnedMessageItem;

package/dist/src/components/conversation-detail/PinnedMessagesPanel.d.ts

@@ -0,0 +1,7 @@
+interface PinnedMessagesPanelProps {
+    open: boolean;
+    onClose: () => void;
+}
+declare const PinnedMessagesPanel: ({ open, onClose }: PinnedMessagesPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default PinnedMessagesPanel;
+//# sourceMappingURL=PinnedMessagesPanel.d.ts.map

package/dist/src/components/conversation-detail/PinnedMessagesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinnedMessagesPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/PinnedMessagesPanel.tsx"],"names":[],"mappings":"AAYA,UAAU,wBAAwB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,GAAI,mBAAmB,wBAAwB,4CAkGvE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/src/components/conversation-detail/PinnedMessagesPanel.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Drawer, Button, message as toastMessage } from "antd";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../components/icon";
+import useConversationStore from "../../store/conversation";
+import { usePinMessage } from "../../hooks/message/usePinMessage";
+import { emit } from "../../utils/events";
+import PinnedMessageItem from "./PinnedMessageItem";
+const PinnedMessagesPanel = ({ open, onClose }) => {
+    const { t } = useTranslation();
+    const conversation = useConversationStore((state) => state.conversationData);
+    const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
+    const pinnedMessageList = useConversationStore((state) => state.pinnedMessageList);
+    const setSearchClientMsgID = useConversationStore((state) => state.setSearchClientMsgID);
+    const conversationId = selectedConversationId || (conversation === null || conversation === void 0 ? void 0 : conversation.conversationID) || "";
+    const { unpinMessage } = usePinMessage();
+    const [openContextMenuId, setOpenContextMenuId] = useState(null);
+    useEffect(() => {
+        if (open && pinnedMessageList.length === 0) {
+            onClose();
+        }
+    }, [open, pinnedMessageList.length, onClose]);
+    const handleUnpin = async (message) => {
+        setOpenContextMenuId(null);
+        try {
+            await unpinMessage(conversationId, message.clientMsgID);
+            toastMessage.success(t("unpin_message_success"));
+        }
+        catch (error) {
+            toastMessage.error(t("unpin_message_failed"));
+        }
+    };
+    const handleJump = (message) => {
+        setOpenContextMenuId(null);
+        onClose();
+        setSearchClientMsgID(message.clientMsgID);
+        emit("CHAT_LIST_SCROLL_TO_MESSAGE", message.clientMsgID);
+    };
+    return (_jsx(Drawer, { open: open, onClose: onClose, placement: "bottom", closeIcon: false, height: "90%", styles: {
+            body: { padding: 0 },
+            mask: { backgroundColor: "rgba(0, 0, 0, 0.8)" },
+            content: {
+                borderTopLeftRadius: 16,
+                borderTopRightRadius: 16,
+                overflow: "hidden",
+            },
+        }, getContainer: false, children: _jsxs("div", { className: "flex h-full flex-col bg-white", children: [_jsxs("div", { className: "flex items-center gap-4 border-b border-gray-25 px-3 py-4", children: [_jsx("span", { className: "flex-1 text-lg font-bold text-gray-900", children: t("pinned_panel_title") }), _jsx(Button, { type: "text", shape: "default", className: "h-6 w-6 p-0 text-gray-900", onClick: onClose, "aria-label": t("pinned_panel_title"), children: _jsx(Icon, { icon: "close-b", size: 24 }) })] }), _jsxs("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto py-3", children: [_jsx("p", { className: "px-3 text-sm leading-[160%] text-gray-600", children: t("pinned_panel_hint") }), pinnedMessageList.map((message) => (_jsx(PinnedMessageItem, { message: message, contextMenuOpen: openContextMenuId === message.clientMsgID, onContextMenuOpenChange: (isOpen) => setOpenContextMenuId(isOpen ? message.clientMsgID : null), onUnpin: handleUnpin, onJump: handleJump }, message.clientMsgID)))] })] }) }));
+};
+export default PinnedMessagesPanel;

package/dist/src/components/conversation-detail/bot/BotButtonMessage.d.ts

@@ -0,0 +1,10 @@
+import type { BotButtonOption } from "../../../types/conversation";
+export interface BotButtonMessageProps {
+    buttons: BotButtonOption[];
+    disabled?: boolean;
+    onSelect: (actionId: string) => void;
+    onRestart: () => void;
+}
+declare const BotButtonMessage: ({ buttons, disabled, onSelect, onRestart, }: BotButtonMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export default BotButtonMessage;
+//# sourceMappingURL=BotButtonMessage.d.ts.map

package/dist/src/components/conversation-detail/bot/BotButtonMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BotButtonMessage.d.ts","sourceRoot":"","sources":["../../../../../src/components/conversation-detail/bot/BotButtonMessage.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAI5D,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,GAAI,6CAKvB,qBAAqB,mDA8EvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/src/components/conversation-detail/bot/BotButtonMessage.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+import MessageBubble from "../../../components/message/item/MessageBubble";
+import { BOT_BUTTON_MENU_THRESHOLD, BOT_DEFAULT_BUTTON_ID, } from "../../../constants/botFlow";
+import { filterVisibleBotButtons } from "../../../utils/botFlow";
+const CHEVRON_SIZE = 20;
+const BotButtonMessage = ({ buttons, disabled, onSelect, onRestart, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const visibleButtons = filterVisibleBotButtons(buttons);
+    if (visibleButtons.length === 0)
+        return null;
+    const isMenuStyle = visibleButtons.length > BOT_BUTTON_MENU_THRESHOLD;
+    const handleSelect = (actionId) => {
+        if (disabled)
+            return;
+        if (actionId === BOT_DEFAULT_BUTTON_ID) {
+            onRestart();
+            return;
+        }
+        onSelect(actionId);
+    };
+    const optionsNode = isMenuStyle ? (_jsx("div", { className: "flex flex-col overflow-hidden rounded-xl bg-white", children: visibleButtons.map((option, index) => (_jsxs("button", { type: "button", disabled: disabled, onClick: () => handleSelect(option.id), className: clsx("flex items-center gap-4 px-3 py-2 text-left transition-colors", index !== visibleButtons.length - 1 && "border-b border-gray-25", disabled && "cursor-not-allowed opacity-60"), children: [_jsx("span", { className: "flex-1 text-[16px] font-medium leading-[1.6] text-gray-900", children: option.id === BOT_DEFAULT_BUTTON_ID
+                        ? t("thread_detail.bot.restart")
+                        : option.label }), _jsx(Icon, { icon: "angle-right-o", size: CHEVRON_SIZE, className: "text-gray-900" })] }, option.id))) })) : (_jsx("div", { className: "flex flex-col gap-2", children: visibleButtons.map((option) => (_jsx("button", { type: "button", disabled: disabled, onClick: () => handleSelect(option.id), className: clsx("flex flex-1 items-center justify-center gap-2 rounded-lg border border-primary-400 bg-primary-25 px-3 py-2", "text-center text-[14px] font-[510] leading-[160%] text-primary-400 transition-colors", disabled && "cursor-not-allowed opacity-60"), children: _jsx("span", { children: option.id === BOT_DEFAULT_BUTTON_ID
+                    ? t("thread_detail.bot.restart")
+                    : option.label }) }, option.id))) }));
+    return (_jsx("div", { className: "flex min-w-0 flex-col gap-2 px-3 py-1 sm:px-4", children: _jsx("div", { className: "flex min-w-0 items-end justify-start pl-3 pr-12", children: _jsx("div", { className: "flex min-w-0 max-w-[75%] flex-col items-start", children: _jsx(MessageBubble, { isMine: false, content: optionsNode }) }) }) }));
+};
+export default BotButtonMessage;

package/dist/src/components/conversation-detail/bot/BotInactiveNotice.d.ts

@@ -0,0 +1,3 @@
+declare const BotInactiveNotice: () => import("react/jsx-runtime").JSX.Element;
+export default BotInactiveNotice;
+//# sourceMappingURL=BotInactiveNotice.d.ts.map

package/dist/src/components/conversation-detail/bot/BotInactiveNotice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BotInactiveNotice.d.ts","sourceRoot":"","sources":["../../../../../src/components/conversation-detail/bot/BotInactiveNotice.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,iBAAiB,+CActB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/src/components/conversation-detail/bot/BotInactiveNotice.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+const ICON_SIZE = 16;
+const BotInactiveNotice = () => {
+    const { t } = useTranslation("conversation-inbox");
+    return (_jsxs("div", { "data-testid": "conversation-bot-inactive-notice", className: "flex w-full items-center justify-center gap-1 bg-white px-4 py-1", children: [_jsx(Icon, { icon: "info-circle-o", size: ICON_SIZE, className: "shrink-0 text-gray-900" }), _jsx("span", { className: "text-[12px] font-normal leading-[1.6] text-gray-900", children: t("thread_detail.bot.inactive_notice") })] }));
+};
+export default BotInactiveNotice;

package/dist/src/components/conversation-detail/bot/BotStartButton.d.ts

@@ -0,0 +1,8 @@
+export interface BotStartButtonProps {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+declare const BotStartButton: ({ label, onClick, disabled }: BotStartButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default BotStartButton;
+//# sourceMappingURL=BotStartButton.d.ts.map

package/dist/src/components/conversation-detail/bot/BotStartButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BotStartButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/conversation-detail/bot/BotStartButton.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,8BAA8B,mBAAmB,4CAkBxE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/src/components/conversation-detail/bot/BotStartButton.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "../../../components/icon";
+const ICON_SIZE = 20;
+const BotStartButton = ({ label, onClick, disabled }) => {
+    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled, className: clsx("flex h-12 w-full items-center justify-center gap-2 rounded-lg", "text-[16px] font-medium leading-[1.6] text-white transition-colors", disabled
+            ? "cursor-not-allowed bg-primary-400/60"
+            : "bg-primary-400 active:bg-primary-400/90"), children: [_jsx(Icon, { icon: "chat-square-o", size: ICON_SIZE, className: "text-white" }), _jsx("span", { children: label })] }));
+};
+export default BotStartButton;

package/dist/src/components/conversation-detail/bot/BotSuggest.d.ts

@@ -0,0 +1,7 @@
+export interface BotSuggestProps {
+    disabled?: boolean;
+    onRestart: () => void;
+}
+declare const BotSuggest: ({ disabled, onRestart }: BotSuggestProps) => import("react/jsx-runtime").JSX.Element;
+export default BotSuggest;
+//# sourceMappingURL=BotSuggest.d.ts.map

package/dist/src/components/conversation-detail/bot/BotSuggest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BotSuggest.d.ts","sourceRoot":"","sources":["../../../../../src/components/conversation-detail/bot/BotSuggest.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,UAAU,GAAI,yBAAyB,eAAe,4CAyB3D,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/src/components/conversation-detail/bot/BotSuggest.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../../../components/icon";
+const CHIP_ICON_SIZE = 14;
+const BotSuggest = ({ disabled, onRestart }) => {
+    const { t } = useTranslation("conversation-inbox");
+    return (_jsx("div", { "data-testid": "conversation-bot-suggest", className: "flex w-full items-center gap-2 overflow-x-auto bg-chat-bubble-neutral/[0.05] px-2 pt-2", children: _jsxs("button", { type: "button", disabled: disabled, onClick: onRestart, className: clsx("flex h-7 shrink-0 items-center gap-1 rounded-lg bg-gray-25 px-3", "text-[12px] font-[510] leading-[1.6] tracking-[0.12px] text-gray-900 transition-colors", disabled && "cursor-not-allowed opacity-60"), children: [_jsx(Icon, { icon: "arrow-reload-o", size: CHIP_ICON_SIZE, className: "text-gray-900" }), _jsx("span", { className: "whitespace-nowrap", children: t("thread_detail.bot.restart") })] }) }));
+};
+export default BotSuggest;

package/dist/src/components/conversation-detail/bot/index.d.ts

@@ -0,0 +1,8 @@
+export { default as BotStartButton } from "./BotStartButton";
+export type { BotStartButtonProps } from "./BotStartButton";
+export { default as BotButtonMessage } from "./BotButtonMessage";
+export type { BotButtonMessageProps } from "./BotButtonMessage";
+export { default as BotSuggest } from "./BotSuggest";
+export type { BotSuggestProps } from "./BotSuggest";
+export { default as BotInactiveNotice } from "./BotInactiveNotice";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/conversation-detail/bot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/conversation-detail/bot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/src/components/conversation-detail/bot/index.js

@@ -0,0 +1,4 @@
+export { default as BotStartButton } from "./BotStartButton";
+export { default as BotButtonMessage } from "./BotButtonMessage";
+export { default as BotSuggest } from "./BotSuggest";
+export { default as BotInactiveNotice } from "./BotInactiveNotice";

package/dist/src/components/conversation-detail/index.d.ts

@@ -0,0 +1,12 @@
+export { default as ConversationDetailHeader } from "./ConversationDetailHeader";
+export type { ConversationDetailHeaderProps } from "./ConversationDetailHeader";
+export { default as ConversationDetailInput } from "./ConversationDetailInput";
+export type { ConversationDetailInputProps } from "./ConversationDetailInput";
+export { default as ConversationMessageList } from "./ConversationMessageList";
+export { default as PinnedMessageBar } from "./PinnedMessageBar";
+export { default as PinLimitModal } from "./PinLimitModal";
+export { default as ConversationMoreOptionPanel } from "./ConversationMoreOptionPanel";
+export type { ConversationMoreOptionPanelProps } from "./ConversationMoreOptionPanel";
+export { default as ConversationMoreOptionItem } from "./ConversationMoreOptionItem";
+export type { ConversationMoreOptionItemProps } from "./ConversationMoreOptionItem";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/conversation-detail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAEhF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAE9E,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE3D,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACvF,YAAY,EAAE,gCAAgC,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,YAAY,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/src/components/conversation-detail/index.js

@@ -0,0 +1,7 @@
+export { default as ConversationDetailHeader } from "./ConversationDetailHeader";
+export { default as ConversationDetailInput } from "./ConversationDetailInput";
+export { default as ConversationMessageList } from "./ConversationMessageList";
+export { default as PinnedMessageBar } from "./PinnedMessageBar";
+export { default as PinLimitModal } from "./PinLimitModal";
+export { default as ConversationMoreOptionPanel } from "./ConversationMoreOptionPanel";
+export { default as ConversationMoreOptionItem } from "./ConversationMoreOptionItem";

package/dist/src/components/conversation-inbox/ConversationInboxHeader.d.ts

@@ -0,0 +1,3 @@
+declare const ConversationInboxHeader: () => import("react/jsx-runtime").JSX.Element;
+export default ConversationInboxHeader;
+//# sourceMappingURL=ConversationInboxHeader.d.ts.map

package/dist/src/components/conversation-inbox/ConversationInboxHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationInboxHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/ConversationInboxHeader.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,uBAAuB,+CAkB5B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/src/components/conversation-inbox/ConversationInboxHeader.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+const ConversationInboxHeader = () => {
+    const { t } = useTranslation("conversation-inbox");
+    return (_jsx("div", { "data-testid": "conversation-inbox-header", className: "flex w-full flex-col border-b border-gray-100 bg-white", children: _jsx("div", { className: "flex h-12 items-end px-3", children: _jsxs("div", { className: "flex h-full flex-col items-center justify-end px-3", children: [_jsx("span", { className: "pb-1.5 text-center text-[16px] font-bold leading-[160%] tracking-[0.16px] text-primary-400", children: t("tabs.messages") }), _jsx("span", { className: "h-[3px] w-full rounded-t bg-primary-400" })] }) }) }));
+};
+export default ConversationInboxHeader;

package/dist/src/components/conversation-inbox/ConversationInboxItem.d.ts

@@ -0,0 +1,8 @@
+import type { ConversationListItem } from "../../types/conversation";
+export interface ConversationInboxItemProps {
+    item: ConversationListItem;
+    onClick: (item: ConversationListItem) => void;
+}
+declare const ConversationInboxItem: ({ item, onClick }: ConversationInboxItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationInboxItem;
+//# sourceMappingURL=ConversationInboxItem.d.ts.map

package/dist/src/components/conversation-inbox/ConversationInboxItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationInboxItem.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/ConversationInboxItem.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAYjE,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,OAAO,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAC/C;AAQD,QAAA,MAAM,qBAAqB,GAAI,mBAAmB,0BAA0B,4CA2C3E,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/src/components/conversation-inbox/ConversationInboxItem.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
+import useAuthStore from "../../store/auth";
+import { formatTimestamp, parseLatestMessage } from "../../utils/common";
+import { resolvePeerBadgeLabel, resolveConversationDisplayName, } from "../../utils/conversation";
+import { useConversationAvatarUrl } from "../../hooks/conversation/useConversationAvatarUrl";
+import ThreadCard from "../../components/conversation/ThreadCard";
+import ConversationPeerAvatar from "./ConversationPeerAvatar";
+import ConversationInboxTitle from "./ConversationInboxTitle";
+const formatLatestMessageTime = (sendTime) => {
+    if (!sendTime)
+        return "";
+    const isToday = dayjs(sendTime).isSame(dayjs(), "day");
+    return formatTimestamp(sendTime, { hasTime: isToday });
+};
+const ConversationInboxItem = ({ item, onClick }) => {
+    var _a;
+    const { t } = useTranslation("conversation-inbox");
+    const { t: tCommon } = useTranslation("common");
+    const currentUserId = useAuthStore((state) => state.userID);
+    const displayName = resolveConversationDisplayName(item, t);
+    const avatarUrl = useConversationAvatarUrl(item);
+    const badgeLabel = resolvePeerBadgeLabel(item.peerType, t);
+    const latestMessagePreview = parseLatestMessage(item.latestMsg, currentUserId, tCommon, { peerType: item.peerType, showName: item.showName });
+    const latestMessageTime = formatLatestMessageTime(item.latestMsgSendTime || null);
+    const unreadCount = (_a = item.unreadCount) !== null && _a !== void 0 ? _a : 0;
+    return (_jsx(ThreadCard, { testId: "conversation-inbox-thread-card", onClick: () => onClick(item), unreadCount: unreadCount, time: latestMessageTime, preview: latestMessagePreview, avatar: _jsx(ConversationPeerAvatar, { peerType: item.peerType, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), title: _jsx(ConversationInboxTitle, { peerType: item.peerType, displayName: displayName, hasUnread: unreadCount > 0 }) }));
+};
+export default ConversationInboxItem;

package/dist/src/components/conversation-inbox/ConversationInboxList.d.ts

@@ -0,0 +1,12 @@
+import type { ConversationListItem } from "../../types/conversation";
+export interface ConversationInboxListProps {
+    items: ConversationListItem[];
+    isLoading: boolean;
+    isFetchingNextPage: boolean;
+    hasNextPage: boolean;
+    onLoadMore: () => void;
+    onSelectThread?: (item: ConversationListItem) => void;
+}
+declare const ConversationInboxList: ({ items, isLoading, isFetchingNextPage, hasNextPage, onLoadMore, onSelectThread, }: ConversationInboxListProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationInboxList;
+//# sourceMappingURL=ConversationInboxList.d.ts.map

package/dist/src/components/conversation-inbox/ConversationInboxList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationInboxList.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/ConversationInboxList.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAKjE,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACvD;AAYD,QAAA,MAAM,qBAAqB,GAAI,oFAO5B,0BAA0B,4CA8E5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/src/components/conversation-inbox/ConversationInboxList.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useTranslation } from "react-i18next";
+import { Empty, Spin } from "antd";
+import InfiniteScroll from "react-infinite-scroll-component";
+import useConversationStore from "../../store/conversation";
+import { Icon } from "../../components/icon";
+import ConversationInboxItem from "./ConversationInboxItem";
+const FooterSkeleton = () => (_jsxs("div", { className: "flex items-center gap-3 p-3", children: [_jsx("div", { className: "h-10 w-10 animate-pulse rounded-full bg-neutral-200" }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx("div", { className: "h-3 w-1/2 animate-pulse rounded bg-neutral-200" }), _jsx("div", { className: "h-2.5 w-1/3 animate-pulse rounded bg-neutral-200" })] })] }));
+const ConversationInboxList = ({ items, isLoading, isFetchingNextPage, hasNextPage, onLoadMore, onSelectThread, }) => {
+    const { t } = useTranslation("conversation-inbox");
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const setConversationData = useConversationStore((state) => state.setConversationData);
+    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
+    const handleSelectThread = (item) => {
+        const newSearchParams = new URLSearchParams(searchParams);
+        newSearchParams.set("threadId", item.conversationID);
+        router.push(`${pathname}?${newSearchParams.toString()}`);
+        setSelectedConversationId(item.conversationID);
+        setConversationData(item);
+        onSelectThread === null || onSelectThread === void 0 ? void 0 : onSelectThread(item);
+    };
+    const handleEndReached = () => {
+        if (hasNextPage && !isFetchingNextPage) {
+            onLoadMore();
+        }
+    };
+    if (isLoading) {
+        return (_jsx("div", { "data-testid": "conversation-inbox-thread-list", className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) }));
+    }
+    return (_jsx("div", { id: "scrollableConversationThreadsDiv", "data-testid": "conversation-inbox-thread-list", className: "min-h-0 w-full flex-1 overflow-auto", children: _jsx(InfiniteScroll, { dataLength: items.length, next: handleEndReached, hasMore: hasNextPage, loader: isFetchingNextPage ? _jsx(FooterSkeleton, {}) : null, scrollableTarget: "scrollableConversationThreadsDiv", children: items.length === 0 ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("empty.no_conversations") }) })) : (items.map((item) => (_jsx(ConversationInboxItem, { item: item, onClick: handleSelectThread }, item.conversationID)))) }) }));
+};
+export default ConversationInboxList;

package/dist/src/components/conversation-inbox/ConversationInboxTitle.d.ts

@@ -0,0 +1,9 @@
+import { PeerType } from "../../types/conversation";
+export interface ConversationInboxTitleProps {
+    peerType: PeerType;
+    displayName: string;
+    hasUnread?: boolean;
+}
+declare const ConversationInboxTitle: ({ peerType, displayName, hasUnread, }: ConversationInboxTitleProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationInboxTitle;
+//# sourceMappingURL=ConversationInboxTitle.d.ts.map

package/dist/src/components/conversation-inbox/ConversationInboxTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationInboxTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/ConversationInboxTitle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,sBAAsB,GAAI,uCAI7B,2BAA2B,4CAmB7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/src/components/conversation-inbox/ConversationInboxTitle.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "../../components/icon";
+import { PeerType } from "../../types/conversation";
+const ConversationInboxTitle = ({ peerType, displayName, hasUnread = false, }) => (_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [peerType === PeerType.GROUP && (_jsx(Icon, { icon: "user-two-b", size: 12, className: "shrink-0 text-black" })), peerType === PeerType.BOT && (_jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-black text-white", children: _jsx(Icon, { icon: "droppii-b", size: 8 }) })), _jsx("span", { className: clsx("min-w-0 truncate text-[16px] leading-[160%] text-black [font-feature-settings:'liga'_off,'clig'_off]", hasUnread ? "font-bold tracking-[0.16px]" : "font-[510]"), children: displayName })] }));
+export default ConversationInboxTitle;

package/dist/src/components/conversation-inbox/ConversationPeerAvatar.d.ts

@@ -0,0 +1,10 @@
+import { PeerType } from "../../types/conversation";
+export interface ConversationPeerAvatarProps {
+    peerType: PeerType;
+    displayName: string;
+    avatarUrl: string | null;
+    badgeLabel: string;
+}
+declare const ConversationPeerAvatar: ({ peerType, displayName, avatarUrl, badgeLabel, }: ConversationPeerAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationPeerAvatar;
+//# sourceMappingURL=ConversationPeerAvatar.d.ts.map

package/dist/src/components/conversation-inbox/ConversationPeerAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationPeerAvatar.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/ConversationPeerAvatar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGhD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,sBAAsB,GAAI,mDAK7B,2BAA2B,4CAyB7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/src/components/conversation-inbox/ConversationPeerAvatar.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Avatar } from "antd";
+import { resolvePeerBadgeColor } from "../../utils/conversation";
+const ConversationPeerAvatar = ({ peerType, displayName, avatarUrl, badgeLabel, }) => {
+    const badge = badgeLabel ? (_jsx("span", { className: clsx("absolute -bottom-px -right-px flex h-[17px] items-center justify-center gap-2 rounded-md border border-white px-1 text-[10px] font-semibold leading-3 text-white shadow-badge-inset", resolvePeerBadgeColor(peerType)), children: badgeLabel })) : null;
+    return (_jsxs("div", { className: "relative h-12 w-12 shrink-0", children: [_jsx(Avatar, { size: 48, src: avatarUrl || undefined, alt: displayName, className: "uppercase", children: (displayName === null || displayName === void 0 ? void 0 : displayName.charAt(0)) || "A" }), badge] }));
+};
+export default ConversationPeerAvatar;

package/dist/src/components/conversation-inbox/index.d.ts

@@ -0,0 +1,10 @@
+export { default as ConversationInboxHeader } from "./ConversationInboxHeader";
+export { default as ConversationPeerAvatar } from "./ConversationPeerAvatar";
+export type { ConversationPeerAvatarProps } from "./ConversationPeerAvatar";
+export { default as ConversationInboxTitle } from "./ConversationInboxTitle";
+export type { ConversationInboxTitleProps } from "./ConversationInboxTitle";
+export { default as ConversationInboxItem } from "./ConversationInboxItem";
+export type { ConversationInboxItemProps } from "./ConversationInboxItem";
+export { default as ConversationInboxList } from "./ConversationInboxList";
+export type { ConversationInboxListProps } from "./ConversationInboxList";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/conversation-inbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-inbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/src/components/conversation-inbox/index.js

@@ -0,0 +1,5 @@
+export { default as ConversationInboxHeader } from "./ConversationInboxHeader";
+export { default as ConversationPeerAvatar } from "./ConversationPeerAvatar";
+export { default as ConversationInboxTitle } from "./ConversationInboxTitle";
+export { default as ConversationInboxItem } from "./ConversationInboxItem";
+export { default as ConversationInboxList } from "./ConversationInboxList";

package/dist/src/components/icon/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export interface IconProps {
+    icon: string;
+    size?: number | string;
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+}
+export declare const Icon: React.FC<IconProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAqBpC,CAAC"}

package/dist/src/components/icon/index.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import IcoMoon from "react-icomoon";
+import iconSet from "../../assets/droppiiFontSelection.json";
+export const Icon = (_a) => {
+    var { icon, size = 24, color = "currentColor", className = "", style = {}, onClick } = _a, props = __rest(_a, ["icon", "size", "color", "className", "style", "onClick"]);
+    return (_jsx(IcoMoon, Object.assign({ iconSet: iconSet, icon: icon, size: size, color: color, className: className, style: style, onClick: onClick }, props)));
+};

package/dist/src/components/media-collection/FileCollection.d.ts

@@ -0,0 +1,3 @@
+declare const FileCollection: () => import("react/jsx-runtime").JSX.Element;
+export default FileCollection;
+//# sourceMappingURL=FileCollection.d.ts.map

package/dist/src/components/media-collection/FileCollection.d.ts.map

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

package/dist/src/components/media-collection/FileCollection.js

@@ -0,0 +1,52 @@
+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 { Empty, Spin } from "antd";
+import { useCallback } from "react";
+import dayjs from "dayjs";
+import useConversationStore from "../../store/conversation";
+import { useTranslation } from "react-i18next";
+import { documentIcon } from "../../assets/svg";
+import { renderFileSize, shortenFileName } from "../../utils/common";
+const FileCollection = () => {
+    const { t } = useTranslation();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
+        payload: {
+            recvID: selectedSourceId,
+            contentType: MessageType.FileMessage,
+        },
+    });
+    const handleDownload = (url, fileName) => {
+        if (!url) {
+            console.warn("Không có link file để tải");
+            return;
+        }
+        const link = document.createElement("a");
+        link.href = url;
+        if (fileName) {
+            link.setAttribute("download", fileName);
+        }
+        link.setAttribute("target", "_blank");
+        link.setAttribute("rel", "noopener noreferrer");
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+    };
+    const renderItem = useCallback((date, items) => {
+        return (_jsxs("div", { className: "px-3", children: [_jsx("span", { className: "text-sm font-medium text-gray-500", children: dayjs(date).format("DD MMMM, YYYY") }), _jsx("div", { className: "flex flex-col gap-1 mt-2", children: items.map((item) => {
+                        var _a, _b, _c;
+                        const fileContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
+                        return (_jsxs("div", { className: "relative flex flex-row items-center gap-2 align-center bg-gray-100 rounded-md p-2 cursor-pointer", onClick: () => handleDownload((fileContent === null || fileContent === void 0 ? void 0 : fileContent.sourceUrl) || "", (fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileName) || ""), children: [documentIcon, _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("span", { className: "text-sm font-medium", children: shortenFileName((fileContent === null || fileContent === void 0 ? void 0 : fileContent.fileName) || "", {
+                                                maxLength: 32,
+                                            }) }), _jsx("span", { className: "text-xs text-gray-500", children: `${renderFileSize(fileContent.fileSize || 0)}  -  ${dayjs(((_b = item === null || item === void 0 ? void 0 : item.chatLog) === null || _b === void 0 ? void 0 : _b.sendTime) || 0).format("HH:mm")}` })] })] }, (_c = item.chatLog) === null || _c === void 0 ? void 0 : _c.clientMsgID));
+                    }) })] }, date));
+    }, []);
+    if (dataFlatten.length === 0 && !isLoading)
+        return _jsx(Empty, { description: t("no_media_files") });
+    if (isLoading)
+        return (_jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }));
+    return (_jsx("div", { id: "scrollableFileDiv", className: "h-full overflow-auto", children: _jsx(InfiniteScroll, { dataLength: Object.keys(groupedData).length, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableFileDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }) }));
+};
+export default FileCollection;