@droppii-org/chat-sdk 0.1.26 → 0.1.28

package/dist/components/canned-response/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDebounce } from "ahooks";
+import CannedResponseBody from "./CannedResponseBody";
+import CannedResponseHeader from "./CannedResponseHeader";
+import { useCallback, useState } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getRoot } from "lexical";
+import { $generateNodesFromDOM } from "@lexical/html";
+import CannedResponseFooter from "./CannedResponseFooter";
+const CannedResponse = ({ onClose, openCreateCannedModal, cannedQuery = "", }) => {
+    const [editor] = useLexicalComposerContext();
+    const [search, setSearch] = useState("");
+    const debouncedSearch = useDebounce(search, {
+        wait: 300,
+    });
+    const onSelectCannedResponse = useCallback((content) => {
+        editor.update(() => {
+            const root = $getRoot();
+            // 1. Clear content cũ
+            root.clear();
+            // 2. Parse HTML -> DOM
+            const parser = new DOMParser();
+            const dom = parser.parseFromString(content, "text/html");
+            // 3. Convert DOM -> Lexical nodes
+            const nodes = $generateNodesFromDOM(editor, dom);
+            // 4. Append vào editor
+            root.append(...nodes);
+            // 5. Move cursor về cuối (optional nhưng nên có)
+            root.selectEnd();
+        });
+    }, [editor]);
+    return (_jsxs("div", { className: "w-[600px]", children: [_jsx(CannedResponseHeader, { onClose: onClose, search: search, setSearch: setSearch }), _jsx(CannedResponseBody, { search: debouncedSearch, onSelectCannedResponse: onSelectCannedResponse, cannedQuery: cannedQuery }), _jsx(CannedResponseFooter, { openCreateCannedModal: openCreateCannedModal })] }));
+};
+export default CannedResponse;

package/dist/components/canned-response/team/TeamItem.d.ts

@@ -0,0 +1,11 @@
+import { IMyTeamResponse } from "../../../types/dto";
+interface TeamItemProps {
+    team: IMyTeamResponse;
+    onSelectCategory?: (teamId: string, categoryId?: string) => void;
+    selectedTeamId?: string;
+    selectedCategoryId?: string;
+    defaultOpen?: boolean;
+}
+declare const TeamItem: ({ team, onSelectCategory, selectedTeamId, selectedCategoryId, defaultOpen, }: TeamItemProps) => import("react/jsx-runtime").JSX.Element;
+export default TeamItem;
+//# sourceMappingURL=TeamItem.d.ts.map

package/dist/components/canned-response/team/TeamItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamItem.d.ts","sourceRoot":"","sources":["../../../../src/components/canned-response/team/TeamItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQ9C,UAAU,aAAa;IACrB,IAAI,EAAE,eAAe,CAAC;IACtB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,QAAQ,GAAI,8EAMf,aAAa,4CAiFf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/canned-response/team/TeamItem.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFetchCannedCategories } from "../../../hooks/canned-response/useFetchCannedCategories";
+import { useBoolean } from "ahooks";
+import { Icon } from "../../../components/icon";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useCallback } from "react";
+const TeamItem = ({ team, onSelectCategory, selectedTeamId, selectedCategoryId, defaultOpen = false, }) => {
+    const { t } = useTranslation();
+    const [isOpen, { toggle }] = useBoolean(defaultOpen);
+    const { data: categories } = useFetchCannedCategories(team.teamId, isOpen);
+    const onToggle = useCallback(() => {
+        if (!isOpen && !selectedTeamId && !!(team === null || team === void 0 ? void 0 : team.teamId)) {
+            onSelectCategory === null || onSelectCategory === void 0 ? void 0 : onSelectCategory(team === null || team === void 0 ? void 0 : team.teamId, undefined);
+        }
+        toggle();
+    }, [toggle, isOpen, onSelectCategory, team === null || team === void 0 ? void 0 : team.teamId, selectedTeamId]);
+    return (_jsxs("div", { className: "border-b border-gray-200", children: [_jsxs("div", { className: "flex items-center justify-between py-2 cursor-pointer", onClick: onToggle, children: [_jsx("span", { className: "text-sm font-medium truncate flex-1", children: (team === null || team === void 0 ? void 0 : team.name) || "" }), _jsx(Icon, { icon: isOpen ? "angle-up-b" : "angle-down-b", size: 16, className: clsx(!isOpen && "text-gray-500") })] }), isOpen && (_jsxs("div", { className: "mb-2", children: [_jsx("div", { className: clsx("px-3 py-1 cursor-pointer hover:bg-gray-100 rounded-md", selectedTeamId &&
+                            selectedTeamId === (team === null || team === void 0 ? void 0 : team.teamId) &&
+                            !selectedCategoryId &&
+                            "bg-gray-100"), onClick: () => onSelectCategory === null || onSelectCategory === void 0 ? void 0 : onSelectCategory(team === null || team === void 0 ? void 0 : team.teamId, undefined), children: _jsx("span", { className: clsx("text-sm truncate", selectedTeamId === (team === null || team === void 0 ? void 0 : team.teamId) && !selectedCategoryId
+                                ? "font-medium text-blue-500"
+                                : "text-gray-500"), children: t("all") }) }, `${team.teamId}-all`), categories === null || categories === void 0 ? void 0 : categories.map((category) => {
+                        const isSelected = selectedTeamId &&
+                            selectedCategoryId &&
+                            selectedTeamId === (category === null || category === void 0 ? void 0 : category.teamId) &&
+                            selectedCategoryId === (category === null || category === void 0 ? void 0 : category.id);
+                        return (_jsx("div", { className: clsx("px-3 py-1 cursor-pointer hover:bg-gray-100 rounded-md", isSelected && "bg-gray-100"), onClick: () => onSelectCategory === null || onSelectCategory === void 0 ? void 0 : onSelectCategory(team === null || team === void 0 ? void 0 : team.teamId, category === null || category === void 0 ? void 0 : category.id), children: _jsx("span", { className: clsx("text-sm truncate", isSelected ? "font-medium text-blue-500" : "text-gray-500"), children: category === null || category === void 0 ? void 0 : category.name }) }, `${team.teamId}-${category.id}`));
+                    })] }))] }));
+};
+export default TeamItem;

package/dist/components/chat-bubble/ChatBubble.d.ts

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

package/dist/components/chat-bubble/ChatBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../src/components/chat-bubble/ChatBubble.tsx"],"names":[],"mappings":"AAQA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,eAAe,eAAe,4CA4FjD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/chat-bubble/ChatBubble.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FloatButton, Drawer, Popover } from "antd";
+import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
+import MessageList from "../../components/message/MessageList";
+import useConversationStore from "../../store/conversation";
+import { useIsMobile } from "../../hooks/common/useIsMobile";
+import { useBoolean } from "ahooks";
+const ChatBubble = ({ className }) => {
+    const isMobile = useIsMobile();
+    const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
+    const searchClientMsgID = useConversationStore((state) => state.searchClientMsgID);
+    const unreadCount = useConversationStore((state) => { var _a; return ((_a = state.conversationData) === null || _a === void 0 ? void 0 : _a.unreadCount) || 0; });
+    const displayUnread = unreadCount > 99 ? "99+" : unreadCount;
+    const [isOpen, { setFalse: setOpenFalse, toggle: toggleChat }] = useBoolean(false);
+    if (isMobile) {
+        return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
+                        right: 24,
+                        bottom: 24,
+                        width: 60,
+                        height: 60,
+                    }, onClick: toggleChat, className: className, badge: { count: displayUnread, color: "red" } }), _jsx(Drawer, { placement: "right", onClose: setOpenFalse, open: isOpen, mask: true, closable: false, styles: {
+                        body: { padding: 0 },
+                    }, classNames: {
+                        wrapper: "!z-[9999]",
+                    }, width: "100%", push: false, children: _jsx(MessageList, { conversationId: selectedConversationId, className: "flex-1", onClose: setOpenFalse, searchClientMsgID: searchClientMsgID }) })] }));
+    }
+    return (_jsx(Popover, { placement: "topLeft", trigger: "click", open: isOpen, destroyOnHidden: true, content: () => (_jsx("div", { className: "w-[400px] h-[600px]", children: _jsx(MessageList, { conversationId: selectedConversationId, className: "flex-1", onClose: setOpenFalse, searchClientMsgID: searchClientMsgID }) })), styles: { body: { padding: 0 } }, children: _jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
+                right: 24,
+                bottom: 24,
+                width: 60,
+                height: 60,
+            }, className: className, badge: { count: displayUnread, color: "red" }, onClick: toggleChat }) }));
+};
+export default ChatBubble;

package/dist/components/conversation/DeskConversationList.js

@@ -7,7 +7,7 @@ import { Icon } from "../../components/icon";
 import useConversationStore from "../../store/conversation";
 import { useTranslation } from "react-i18next";
 import { useBoolean, useDebounce } from "ahooks";
-import SearchConversation from "../../components/searchConversation";
+import SearchConversation from "../../components/search-conversation";
 import useSessionStore from "../../store/session";
 import InfiniteScroll from "react-infinite-scroll-component";
 import ConversationBySessionItem from "./ConversationBySessionItem";

package/dist/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/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":"AAaA,QAAA,MAAM,cAAc,+CAqGnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,53 @@
+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 { shortenFileName } from "../../components/message/footer/FilePreview";
+import { renderFileSize } 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;

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

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

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

@@ -0,0 +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"}

package/dist/components/media-collection/ImageCollection.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 { Button, 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";
+const ImageCollection = () => {
+    const { t } = useTranslation();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
+        payload: {
+            recvID: selectedSourceId,
+            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;
+                        const imageContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
+                        const sourceUrl = ((_b = imageContent.sourcePicture) === null || _b === void 0 ? void 0 : _b.url) ||
+                            ((_c = imageContent.snapshotPicture) === null || _c === void 0 ? void 0 : _c.url);
+                        return (_jsx("div", { className: "border inline-block w-full h-full aspect-square", children: _jsx(Image, { rootClassName: "cursor-pointer w-full h-full", className: "w-full !h-full object-cover", src: sourceUrl, preview: true, placeholder: _jsx("div", { className: "flex items-center justify-center", children: _jsx(Spin, {}) }), fallback: images.imageFailed }) }, (_d = item === null || item === void 0 ? void 0 : item.chatLog) === null || _d === void 0 ? void 0 : _d.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: "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") }))] }));
+                },
+            }, 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/media-collection/LinkCollection.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCollection.d.ts","sourceRoot":"","sources":["../../../src/components/media-collection/LinkCollection.tsx"],"names":[],"mappings":"AA8DA,QAAA,MAAM,cAAc,GAAI,aAAa;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,4CAyH3D,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown, Empty, Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import useConversationStore from "../../store/conversation";
+import { useSearchMessage } from "../../hooks/search/useSearchMessage";
+import { useCallback, useEffect, useState } from "react";
+import dayjs from "dayjs";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { MessageType, SessionType } from "@openim/wasm-client-sdk";
+import { Icon } from "../../components/icon";
+import { DChatSDK } from "../../constants/sdk";
+import { useChatContext } from "../../context/ChatContext";
+import { message as antdMessage } from "antd";
+const LinkPreview = ({ url }) => {
+    const [title, setTitle] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        if (!url)
+            return;
+        setIsLoading(true);
+        fetch(`https://api.microlink.io?url=${encodeURIComponent(url)}`)
+            .then((res) => res.json())
+            .then((res) => {
+            var _a;
+            if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title) {
+                setTitle(res.data.title);
+            }
+        })
+            .catch(() => {
+            setTitle("");
+        })
+            .finally(() => {
+            setIsLoading(false);
+        });
+    }, [url]);
+    return (_jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "flex flex-col truncate text-blue-600 cursor-pointer", title: title || url, children: [isLoading && (_jsx("span", { className: "font-medium truncate text-gray-900", children: url })), !isLoading &&
+                (title ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium truncate text-gray-900", children: title }), _jsx("span", { className: "text-sm text-gray-500 truncate", children: url })] })) : (_jsx("span", { className: "font-medium truncate text-gray-900", children: url })))] }));
+};
+const LinkCollection = ({ onClose }) => {
+    const { t } = useTranslation();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { user } = useChatContext();
+    const onPressItem = async (message) => {
+        const { data } = await DChatSDK.getOneConversation({
+            sourceID: message.sessionType === SessionType.Group
+                ? message.groupID
+                : (user === null || user === void 0 ? void 0 : user.userID) !== message.sendID
+                    ? message.sendID
+                    : message.recvID,
+            sessionType: message.sessionType,
+        });
+        if (!data) {
+            return antdMessage.error(t("err_get_conversation"));
+        }
+        useConversationStore
+            .getState()
+            .setConversationData(data, message.clientMsgID);
+        useConversationStore
+            .getState()
+            .setSelectedConversationId(data.conversationID);
+        onClose();
+    };
+    const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
+        payload: {
+            recvID: selectedSourceId,
+            contentType: MessageType.UrlTextMessage,
+        },
+    });
+    const renderItem = useCallback((date, items) => {
+        return (_jsxs("div", { className: "px-3", children: [_jsx("span", { className: "text-sm font-medium text-gray-500 px-3", 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 urls = ((_b = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}")) === null || _b === void 0 ? void 0 : _b.urls) || [];
+                        const menuItems = [
+                            {
+                                key: "open",
+                                label: t("view_message"),
+                                onClick: () => onPressItem(item.chatLog),
+                            },
+                        ];
+                        return (_jsx("div", { children: urls.map((url, index) => {
+                                var _a;
+                                return (_jsxs("div", { className: "bg-gray-100 flex gap-2 items-center p-2 mb-1", children: [_jsx("div", { className: "flex items-center justify-center shrink-0", children: _jsx(Icon, { icon: "link-b", size: 16 }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx(LinkPreview, { url: url }) }), _jsx(Dropdown, { menu: { items: menuItems }, trigger: ["click"], placement: "bottomRight", children: _jsx("div", { className: "flex items-center justify-center shrink-0 cursor-pointer p-1 hover:bg-gray-200 rounded ml-2", onClick: (e) => e.stopPropagation(), children: _jsx(Icon, { icon: "more-horizontal-b", size: 16 }) }) })] }, `${(_a = item.chatLog) === null || _a === void 0 ? void 0 : _a.clientMsgID}-${index}`));
+                            }) }, (_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 LinkCollection;

package/dist/components/media-collection/VideoCollection.d.ts

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

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

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

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

@@ -0,0 +1,51 @@
+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 { Carousel, Empty, Image, Modal, Spin } from "antd";
+import { useCallback, useState } from "react";
+import dayjs from "dayjs";
+import useConversationStore from "../../store/conversation";
+import { useBoolean } from "ahooks";
+import { images } from "../../constants/images";
+import { Icon } from "../../components/icon";
+import { useTranslation } from "react-i18next";
+const VideoCollection = () => {
+    const { t } = useTranslation();
+    const selectedSourceId = useConversationStore((state) => state.selectedSourceId);
+    const { groupedData, fetchNextPage, hasNextPage, dataFlatten, isLoading } = useSearchMessage({
+        payload: {
+            recvID: selectedSourceId,
+            contentType: MessageType.VideoMessage,
+        },
+    });
+    const [open, { setTrue, setFalse }] = useBoolean(false);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const handleOpenPreview = (index) => {
+        setCurrentIndex(index);
+        setTrue();
+    };
+    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;
+                        const videoContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
+                        const globalIndex = dataFlatten.findIndex((v) => { var _a, _b; return ((_a = v.chatLog) === null || _a === void 0 ? void 0 : _a.clientMsgID) === ((_b = item.chatLog) === null || _b === void 0 ? void 0 : _b.clientMsgID); });
+                        return (_jsxs("div", { className: "border relative w-full h-full aspect-square cursor-pointer", onClick: () => handleOpenPreview(globalIndex), children: [_jsx(Image, { rootClassName: "w-full h-full", src: videoContent.snapshotUrl, alt: "video thumbnail", className: "w-full !h-full object-cover", fallback: images.imageFailed }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 text-white text-2xl", children: _jsx(Icon, { icon: "play-b", size: 24, color: "white" }) })] }, (_b = item === null || item === void 0 ? void 0 : item.chatLog) === null || _b === void 0 ? void 0 : _b.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 (_jsxs("div", { id: "scrollableVideoDiv", 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: "scrollableVideoDiv", children: Object.entries(groupedData).map(([date, items]) => renderItem(date, items)) }), _jsx(Modal, { open: open, onCancel: setFalse, footer: null, centered: true, styles: {
+                    content: {
+                        padding: 0,
+                    },
+                }, children: _jsx(Carousel, { dots: true, infinite: false, initialSlide: currentIndex, afterChange: (i) => setCurrentIndex(i), children: dataFlatten.map((item, idx) => {
+                        var _a;
+                        const videoContent = JSON.parse(((_a = item === null || item === void 0 ? void 0 : item.chatLog) === null || _a === void 0 ? void 0 : _a.content) || "{}");
+                        const sourceUrl = videoContent.videoUrl;
+                        return (_jsx("div", { style: { textAlign: "center" }, children: _jsx("video", { src: sourceUrl, controls: true, autoPlay: idx === currentIndex, style: { width: "100%", maxHeight: "80vh" } }) }, idx));
+                    }) }) })] }));
+};
+export default VideoCollection;

package/dist/components/media-collection/index.d.ts

@@ -0,0 +1,9 @@
+export declare enum MediaCollectionTabKey {
+    Image = "image",
+    Video = "video",
+    File = "file",
+    Link = "link"
+}
+declare const MediaCollection: () => import("react/jsx-runtime").JSX.Element;
+export default MediaCollection;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-collection/index.tsx"],"names":[],"mappings":"AAaA,oBAAY,qBAAqB;IAC/B,KAAK,UAAU;IACf,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,eAAe,+CA8EpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useBoolean } from "ahooks";
+import { Button, Drawer, Tabs } from "antd";
+import { Icon } from "../../components/icon";
+import { useTranslation } from "react-i18next";
+import ImageCollection from "./ImageCollection";
+import VideoCollection from "./VideoCollection";
+import { useIsMobile } from "../../hooks/common/useIsMobile";
+import { useMemo } from "react";
+import FileCollection from "./FileCollection";
+import LinkCollection from "./LinkCollection";
+export var MediaCollectionTabKey;
+(function (MediaCollectionTabKey) {
+    MediaCollectionTabKey["Image"] = "image";
+    MediaCollectionTabKey["Video"] = "video";
+    MediaCollectionTabKey["File"] = "file";
+    MediaCollectionTabKey["Link"] = "link";
+})(MediaCollectionTabKey || (MediaCollectionTabKey = {}));
+const MediaCollection = () => {
+    const { t } = useTranslation();
+    const [isOpen, { toggle }] = useBoolean(false);
+    const isMobile = useIsMobile();
+    const items = useMemo(() => {
+        if (!isOpen)
+            return [];
+        return [
+            {
+                key: MediaCollectionTabKey.Image,
+                label: t("image"),
+                children: _jsx(ImageCollection, {}),
+            },
+            {
+                key: MediaCollectionTabKey.Video,
+                label: t("video"),
+                children: _jsx(VideoCollection, {}),
+            },
+            {
+                key: MediaCollectionTabKey.File,
+                label: t("file"),
+                children: _jsx(FileCollection, {}),
+            },
+            {
+                key: MediaCollectionTabKey.Link,
+                label: t("link"),
+                children: _jsx(LinkCollection, { onClose: toggle }),
+            },
+        ];
+    }, [isOpen, t]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "folder-o", size: 22 }) }), _jsx(Drawer, { open: isOpen, onClose: toggle, mask: false, closeIcon: false, styles: {
+                    body: {
+                        padding: 0,
+                        height: "100%",
+                    },
+                }, getContainer: false, width: isMobile ? "100%" : 360, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsx("span", { className: "text-lg font-medium", children: t("library") }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "close-b", size: 22 }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(Tabs, { defaultActiveKey: MediaCollectionTabKey.Image, items: items, className: "h-full" }) })] }) })] }));
+};
+export default MediaCollection;

package/dist/components/message/MessageHeader.js

@@ -4,14 +4,14 @@ import { Avatar, Button, message } from "antd";
 import { Icon } from "../../components/icon";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
 import useConversationStore from "../../store/conversation";
-import MediaCollection from "../../components/mediaCollection";
+import MediaCollection from "../../components/media-collection";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { SessionStatus, SessionTag } from "../../types/chat";
 import SelectSession from "./SelectSession";
 import { useUpdateSession } from "../../hooks/session/useUpdateSession";
 import useAuthStore from "../../store/auth";
-import SearchDrawer from "../../components/searchConversation/SearchDrawer";
+import SearchDrawer from "../../components/search-conversation/SearchDrawer";
 import { isGroupSession } from "../../utils/imCommon";
 import GroupMembersDrawer from "./GroupMembersDrawer";
 const MessageHeader = ({ onClose, currentSession, isJoined, }) => {

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

@@ -10,7 +10,7 @@ import EmojiPicker from "./EmojiPicker";
 import { Icon } from "../../../components/icon";
 import { validateFile, validateVideoLimit, } from "../../../utils/fileValidation";
 import { DOCUMENT_TYPES } from "./editorConfig";
-import CannedResponseIcon from "../../../assets/svg/cannedResponse";
+import CannedResponseIcon from "../../../assets/svg/canned-response";
 import { useMessageFooterContext } from ".";
 import useAuthStore from "../../../store/auth";
 const EmojiIcon = (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.59997 12.4C7.59997 12.4 8.49997 13.2 9.99997 13.2C11.5 13.2 12.4 12.4 12.4 12.4M14 8.39997C14 8.8418 13.6418 9.19997 13.2 9.19997C12.7581 9.19997 12.4 8.8418 12.4 8.39997C12.4 7.95814 12.7581 7.59997 13.2 7.59997C13.6418 7.59997 14 7.95814 14 8.39997ZM18 9.99997C18 14.4182 14.4182 18 9.99997 18C5.58169 18 1.99997 14.4182 1.99997 9.99997C1.99997 5.58169 5.58169 1.99997 9.99997 1.99997C14.4182 1.99997 18 5.58169 18 9.99997ZM7.59997 8.39997C7.59997 8.8418 7.2418 9.19997 6.79997 9.19997C6.35814 9.19997 5.99997 8.8418 5.99997 8.39997C5.99997 7.95814 6.35814 7.59997 6.79997 7.59997C7.2418 7.59997 7.59997 7.95814 7.59997 8.39997Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));

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

@@ -15,7 +15,7 @@ import FilePreview from "./FilePreview";
 import { useTranslation } from "react-i18next";
 import PasteAndDropPlugin from "./PasteAndDropPlugin";
 import { QuotedMessageFooter } from "./QuotedMessage";
-import CannedResponse from "../../../components/cannedResponse";
+import CannedResponse from "../../../components/canned-response";
 import { CannedResponseTriggerPlugin } from "./CannedResponsePlugin";
 import { useBoolean } from "ahooks";
 import useAuthStore from "../../../store/auth";

package/dist/components/rich-text-editor/RichTextEditor.d.ts

@@ -0,0 +1,12 @@
+import { UploadFile } from "antd";
+interface RichTextEditorProps {
+    initialHtml?: string;
+    placeholder?: string;
+    onChange?: (html: string, plainText: string) => void;
+    onFilesChange?: (files: UploadFile[]) => void;
+    minHeight?: string;
+    showMediaUpload?: boolean;
+}
+export default function RichTextEditor({ initialHtml, placeholder, onChange, onFilesChange, minHeight, showMediaUpload, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RichTextEditor.d.ts.map

package/dist/components/rich-text-editor/RichTextEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text-editor/RichTextEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AA0ClC,UAAU,mBAAmB;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAW,EACX,WAAW,EACX,QAAQ,EACR,aAAa,EACb,SAAmB,EACnB,eAAsB,GACvB,EAAE,mBAAmB,2CA6DrB"}