@droppii-org/chat-sdk 0.0.29 → 0.0.31

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

@@ -4,12 +4,12 @@ import { useCallback } from "react";
 import { useMessageFooterContext } from ".";
 import { Button } from "antd";
 import { Icon } from "../../icon";
+import { documentIcon } from "../../../assets/svg";
 const documentTypes = [
     "application/pdf",
     "application/msword",
     "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
 ];
-export const documentIcon = (_jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M10.1923 5.83301L23.4363 5.83301L34.1656 14.2054V29.8639C34.1656 31.8997 32.5286 34.1663 29.8068 34.1663C27.0849 34.1663 10.1923 34.1663 10.1923 34.1663C7.4704 34.1663 5.8335 31.8997 5.8335 29.8639V10.0305C5.8335 7.99475 7.4704 5.83301 10.1923 5.83301Z", fill: "#24B0FF" }), _jsx("path", { d: "M10.8335 28.1394V20.833H16.0309V22.4222H12.7026V23.5916H15.3612V25.1708H12.7026V28.1394H10.8335Z", fill: "#edf6ff" }), _jsx("path", { d: "M19.0073 28.0885V20.833H20.8613V26.5118H24.0146V28.0885L19.0073 28.0885Z", fill: "#edf6ff" }), _jsx("path", { d: "M16.5918 28.1001V20.833H18.4485V28.1001H16.5918Z", fill: "#edf6ff" }), _jsx("path", { d: "M24.5737 20.833V28.1393H29.7723V26.5573H26.439L26.4422 25.1708H29.1017V23.5916H26.4422V22.4222H29.7723V20.833H24.5737Z", fill: "#edf6ff" }), _jsx("path", { opacity: "0.302", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.2686 5.83301V14.2281H34.1655L23.2686 5.83301Z", fill: "#edf6ff" })] }));
 export const shortenFileName = (name, options = {}) => {
     const { maxLength = 20, keepStart = 8, keepEnd = 3 } = options;
     if (name.length <= maxLength)
@@ -31,7 +31,7 @@ const FilePreview = () => {
         setListUploadFiles(listUploadFiles.filter((f) => f.uid !== file.uid));
     };
     const renderFilePreview = useCallback((file) => {
-        var _a, _b;
+        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;
@@ -39,10 +39,10 @@ const FilePreview = () => {
             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(file.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: () => onRemoveFile(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) })] }, file.uid));
+            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: () => onRemoveFile(file), children: _jsx(Icon, { icon: "close-b", size: 12, color: "white" }) })] }, file.uid));
         }
         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: () => onRemoveFile(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));
     }, [listUploadFiles]);
-    return (_jsx("div", { className: "overflow-x-auto", children: _jsx("div", { className: "border-b py-2 px-4", children: _jsx("div", { className: "flex items-center gap-2", children: listUploadFiles.map((file) => renderFilePreview(file)) }) }) }));
+    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: listUploadFiles.map((file) => renderFilePreview(file)) }) }) }));
 };
 export default FilePreview;

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

@@ -156,7 +156,7 @@ export const ToolbarPlugin = () => {
             removeSelectionListener();
         };
     }, [editor]);
-    return (_jsxs("div", { className: "flex items-center gap-2 px-4", children: [formatTextButtons.map((button) => {
+    return (_jsxs("div", { className: "flex items-center gap-2 px-4 pt-1", children: [formatTextButtons.map((button) => {
                 const { icon, onPress, key, isActive } = button;
                 return (_jsx(Button, { type: "text", shape: "default", className: getButtonClasses(isActive), onClick: onPress, children: icon }, key));
             }), insertListButtons.map((button) => {

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

@@ -60,6 +60,6 @@ const MessageFooterProvider = (props) => {
         }
         setListUploadFiles([]);
     }, [sendMergeMessage, sendTextMessage, listUploadFiles]);
-    return (_jsx(MessageFooterContext.Provider, { value: { onSendMessage, listUploadFiles, setListUploadFiles }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsxs("div", { className: "border-t pb-2 flex flex-col gap-1", children: [listUploadFiles.length > 0 && _jsx(FilePreview, {}), _jsx(ToolbarPlugin, {}), _jsx("div", { className: "relative px-4", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "border border-indigo-500 rounded-md bg-blue-100 min-h-[64px] max-h-[140px] overflow-y-auto px-3 py-2 text-sm" }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": "Nh\u1EADp tin nh\u1EAFn", placeholder: _jsx("div", { className: "absolute top-2 left-7 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: "Nh\u1EADp tin nh\u1EAFn" }) }) }) }), _jsx(ActionBar, {})] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {})] }) }));
+    return (_jsx(MessageFooterContext.Provider, { value: { onSendMessage, listUploadFiles, setListUploadFiles }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [listUploadFiles.length > 0 && _jsx(FilePreview, {}), _jsx(ToolbarPlugin, {}), _jsx("div", { className: "relative px-4", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "border border-indigo-500 rounded-md bg-blue-100 min-h-[64px] max-h-[140px] overflow-y-auto px-3 py-2 text-sm" }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": "Nh\u1EADp tin nh\u1EAFn", placeholder: _jsx("div", { className: "absolute top-2 left-7 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: "Nh\u1EADp tin nh\u1EAFn" }) }) }) }), _jsx(ActionBar, {})] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {})] }) }));
 };
 export default MessageFooterProvider;

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

@@ -1 +1 @@
-{"version":3,"file":"FileMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/FileMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,qBAAqB,4CAmCpD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FileMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/FileMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,qBAAqB,4CAmCpD,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { documentIcon, shortenFileName } from "../footer/FilePreview";
+import { shortenFileName } from "../footer/FilePreview";
+import { documentIcon } from "../../../assets/svg";
 const FileMessageItem = (props) => {
     var _a;
     const { message } = props;

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

@@ -3,7 +3,7 @@ import { MessageStatus } from "@openim/wasm-client-sdk";
 import { Image, Spin } from "antd";
 const min = (a, b) => (a > b ? b : a);
 const ImageMessageItem = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { message } = props;
     const imageHeight = message.pictureElem.sourcePicture.height;
     const imageWidth = message.pictureElem.sourcePicture.width;
@@ -11,8 +11,8 @@ const ImageMessageItem = (props) => {
     const minHeight = min(200, imageWidth) * (imageHeight / imageWidth) + 2;
     const adaptedHight = min(minHeight, snapshotMaxHeight) + 10;
     const adaptedWidth = min(imageWidth, 200) + 10;
-    const sourceUrl = ((_c = message.pictureElem.snapshotPicture) === null || _c === void 0 ? void 0 : _c.url) ||
-        message.pictureElem.sourcePicture.url;
+    const sourceUrl = ((_c = message.pictureElem.sourcePicture) === null || _c === void 0 ? void 0 : _c.url) ||
+        ((_d = message.pictureElem.snapshotPicture) === null || _d === void 0 ? void 0 : _d.url);
     const isSending = message.status === MessageStatus.Sending;
     const minStyle = {
         minHeight: `${adaptedHight}px`,

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

@@ -14,8 +14,8 @@ const TextMessageItem = (props) => {
     if (Object.keys(extendMessageInfo).length > 0 &&
         (extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo)) {
         const htmlContent = ((_b = (_a = extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.content) || "";
-        return (_jsx("div", { className: "text-sm sm:text-base break-words whitespace-pre-line flex-1", dangerouslySetInnerHTML: { __html: htmlContent } }));
+        return (_jsx("div", { className: "!text-sm sm:text-base break-words whitespace-pre-line flex-1", dangerouslySetInnerHTML: { __html: htmlContent } }));
     }
-    return (_jsx("span", { className: "text-sm sm:text-base whitespace-pre-wrap", children: ((_c = message === null || message === void 0 ? void 0 : message.textElem) === null || _c === void 0 ? void 0 : _c.content) || "" }));
+    return (_jsx("span", { className: "!text-sm sm:text-base whitespace-pre-wrap", children: ((_c = message === null || message === void 0 ? void 0 : message.textElem) === null || _c === void 0 ? void 0 : _c.content) || "" }));
 };
 export default TextMessageItem;

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

@@ -52,7 +52,7 @@ const MessageItem = ({ groupMessage }) => {
                 const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === (user === null || user === void 0 ? void 0 : user.userID);
                 const showAvatar = messageIndex === messagesInGroup.length - 1;
                 const showSenderName = messageIndex === 0 && (message === null || message === void 0 ? void 0 : message.sessionType) === SessionType.Group;
-                return (_jsx("div", { className: clsx("flex", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2", isMine ? "justify-end" : "justify-start"), children: [!isMine && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showAvatar && (_jsx(Avatar, { children: ((_b = (_a = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" })) })), _jsxs("div", { className: clsx("flex flex-col flex-[0.8]", isMine ? "items-end" : "items-start"), children: [!isMine && showSenderName && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full break-words flex flex-col flex-1 text-gray-900 gap-1", isMine ? "bg-blue-100" : "bg-gray-100"), children: [(message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs("div", { children: [(_d = (_c = message === null || message === void 0 ? void 0 : message.mergeElem) === null || _c === void 0 ? void 0 : _c.multiMessage) === null || _d === void 0 ? void 0 : _d.map((item) => {
+                return (_jsx("div", { className: clsx("flex", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2", isMine ? "justify-end" : "justify-start"), children: [!isMine && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showAvatar && (_jsx(Avatar, { children: ((_b = (_a = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" })) })), _jsxs("div", { className: clsx("flex flex-col flex-[0.8]", isMine ? "items-end" : "items-start"), children: [!isMine && showSenderName && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full break-words flex flex-col flex-1 text-gray-900 gap-1", isMine ? "bg-blue-100" : "bg-white"), children: [(message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs("div", { children: [(_d = (_c = message === null || message === void 0 ? void 0 : message.mergeElem) === null || _c === void 0 ? void 0 : _c.multiMessage) === null || _d === void 0 ? void 0 : _d.map((item) => {
                                                         return renderMessageByType(item);
                                                     }), (message === null || message === void 0 ? void 0 : message.textElem) && (_jsx(TextMessageItem, { message: message }))] })) : (renderMessageByType(message)), _jsx("span", { className: clsx("text-xs text-gray-500 text-right text-gray-500"), children: dayjs(message === null || message === void 0 ? void 0 : message.sendTime).format("HH:mm") })] })] })] }) }, message === null || message === void 0 ? void 0 : message.clientMsgID));
             })] }, groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.groupMessageID));

package/dist/components/session/AssignedSessionFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssignedSessionFilter.d.ts","sourceRoot":"","sources":["../../../src/components/session/AssignedSessionFilter.tsx"],"names":[],"mappings":"AAyBA,UAAU,0BAA0B;IAClC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,qBAAqB,GAAI,gCAG5B,0BAA0B,4CA6P5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"AssignedSessionFilter.d.ts","sourceRoot":"","sources":["../../../src/components/session/AssignedSessionFilter.tsx"],"names":[],"mappings":"AA2BA,UAAU,0BAA0B;IAClC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,qBAAqB,GAAI,gCAG5B,0BAA0B,4CAwQ5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/session/AssignedSessionFilter.js

@@ -6,7 +6,7 @@ import useConversationStore from "../../store/conversation";
 import { SESSION_STATUS_ENUM, TAG_ENUM } from "../../constants";
 const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
     const [expandedCategories, setExpandedCategories] = useState(new Set([0]));
-    const [selectedFilter, setSelectedFilter] = useState("");
+    const [selectedFilter, setSelectedFilter] = useState(SESSION_STATUS_ENUM.UNASSIGNED);
     const summary = useConversationStore((state) => state.summary);
     const setFilterSummary = useConversationStore((state) => state.setFilterSummary);
     const messageCategories = useMemo(() => {
@@ -15,6 +15,7 @@ const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
             {
                 icon: "chat-square-b",
                 label: "Đang mở",
+                key: "ALL",
                 count: (summary === null || summary === void 0 ? void 0 : summary.activeSessionCount) || 0,
                 color: "text-gray-600",
                 query: {
@@ -25,6 +26,7 @@ const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
                     {
                         icon: "user-del-o",
                         label: "Chưa phân công",
+                        key: SESSION_STATUS_ENUM.UNASSIGNED,
                         count: ((_b = (_a = summary === null || summary === void 0 ? void 0 : summary.sessionStatuses) === null || _a === void 0 ? void 0 : _a.find((status) => status.type === SESSION_STATUS_ENUM.UNASSIGNED)) === null || _b === void 0 ? void 0 : _b.count) || 0,
                         color: "text-orange-500",
                         query: {
@@ -35,6 +37,7 @@ const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
                     {
                         icon: "warning-square-o",
                         label: "Chậm xử lý",
+                        key: TAG_ENUM.SLOW_PROCESSING,
                         count: ((_d = (_c = summary === null || summary === void 0 ? void 0 : summary.tagCounts) === null || _c === void 0 ? void 0 : _c.find((status) => status.type === TAG_ENUM.SLOW_PROCESSING)) === null || _d === void 0 ? void 0 : _d.count) || 0,
                         color: "text-red-500",
                         query: {
@@ -45,6 +48,7 @@ const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
                     {
                         icon: "time-circle-o",
                         label: "Chờ xử lý",
+                        key: SESSION_STATUS_ENUM.WAITING_PROCESS,
                         count: ((_f = (_e = summary === null || summary === void 0 ? void 0 : summary.sessionStatuses) === null || _e === void 0 ? void 0 : _e.find((status) => status.type === SESSION_STATUS_ENUM.WAITING_PROCESS)) === null || _f === void 0 ? void 0 : _f.count) || 0,
                         color: "text-orange-400",
                         query: {
@@ -55,6 +59,7 @@ const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
                     {
                         icon: "arrow-reply-o",
                         label: "Chưa trả lời",
+                        key: TAG_ENUM.AWAITING_REPLY,
                         count: ((_h = (_g = summary === null || summary === void 0 ? void 0 : summary.tagCounts) === null || _g === void 0 ? void 0 : _g.find((status) => status.type === TAG_ENUM.AWAITING_REPLY)) === null || _h === void 0 ? void 0 : _h.count) || 0,
                         color: "text-purple-500",
                         query: {
@@ -65,6 +70,7 @@ const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
                     {
                         icon: "play-b",
                         label: "Đang xử lý",
+                        key: SESSION_STATUS_ENUM.IN_PROCESS,
                         count: ((_k = (_j = summary === null || summary === void 0 ? void 0 : summary.sessionStatuses) === null || _j === void 0 ? void 0 : _j.find((status) => status.type === SESSION_STATUS_ENUM.IN_PROCESS)) === null || _k === void 0 ? void 0 : _k.count) || 0,
                         color: "text-gray-600",
                         query: {
@@ -75,6 +81,7 @@ const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
                     {
                         icon: "pause-b",
                         label: "Tạm chờ",
+                        key: TAG_ENUM.TEMPORARILY_PAUSED,
                         count: ((_m = (_l = summary === null || summary === void 0 ? void 0 : summary.sessionStatuses) === null || _l === void 0 ? void 0 : _l.find((status) => status.type === TAG_ENUM.TEMPORARILY_PAUSED)) === null || _m === void 0 ? void 0 : _m.count) || 0,
                         color: "text-gray-600",
                         query: {
@@ -87,6 +94,7 @@ const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
             {
                 icon: "check-b",
                 label: "Đã đóng",
+                key: SESSION_STATUS_ENUM.COMPLETED,
                 count: ((_p = (_o = summary === null || summary === void 0 ? void 0 : summary.sessionStatuses) === null || _o === void 0 ? void 0 : _o.find((status) => status.type === SESSION_STATUS_ENUM.COMPLETED)) === null || _p === void 0 ? void 0 : _p.count) || 0,
                 color: "text-green-600",
                 query: {
@@ -106,15 +114,15 @@ const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
         }
         setExpandedCategories(newExpanded);
     };
-    const handleFilterSelect = (categoryId, subCategoryId) => {
-        const filterId = subCategoryId || categoryId;
-        setSelectedFilter(filterId);
-        // Find the selected category and subcategory
-        const category = messageCategories.find((cat) => cat.label === categoryId);
+    const handleFilterSelect = (categoryKey, subCategoryKey) => {
+        const filterKey = subCategoryKey || categoryKey;
+        setSelectedFilter(filterKey);
+        // Find the selected category and subcategory by key
+        const category = messageCategories.find((cat) => cat.key === categoryKey);
         let query;
         if (category) {
-            if (subCategoryId && category.subCategories) {
-                const subCategory = category.subCategories.find((sub) => sub.label === subCategoryId);
+            if (subCategoryKey && category.subCategories) {
+                const subCategory = category.subCategories.find((sub) => sub.key === subCategoryKey);
                 query = subCategory === null || subCategory === void 0 ? void 0 : subCategory.query;
             }
             else {
@@ -124,20 +132,20 @@ const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
         if (query) {
             setFilterSummary(query);
         }
-        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(categoryId, subCategoryId);
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(categoryKey, subCategoryKey);
     };
     return (_jsxs("div", { className: `w-64 bg-white border-r border-gray-200 flex flex-col ${className}`, children: [_jsx("div", { className: "p-4 border-b border-gray-200", children: _jsx("h2", { className: "text-lg font-semibold text-gray-800", children: "TIN NH\u1EAEN C\u1EE6A T\u00D4I" }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx("ul", { className: "py-2", children: messageCategories.map((category, index) => (_jsxs("li", { children: [_jsxs("button", { onClick: () => {
                                     if (category.subCategories) {
                                         toggleCategory(index);
                                     }
                                     else {
-                                        handleFilterSelect(category.label);
+                                        handleFilterSelect(category.key);
                                     }
-                                }, className: `w-full flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors group ${selectedFilter === category.label && !category.subCategories
+                                }, className: `w-full flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors group ${selectedFilter === category.key && !category.subCategories
                                     ? "bg-blue-50 border-r-2 border-blue-500"
                                     : ""}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [category.subCategories && (_jsx(Icon, { icon: expandedCategories.has(index)
                                                             ? "chevron-down-b"
-                                                            : "chevron-right-b", size: 14, className: "text-gray-400" })), _jsx(Icon, { icon: category.icon, size: 20, className: category.color })] }), _jsx("span", { className: "font-medium text-gray-800 text-left", children: category.label })] }), _jsx("span", { className: "text-sm font-medium text-gray-500 min-w-0", children: category.count })] }), category.subCategories && expandedCategories.has(index) && (_jsx("ul", { className: "ml-4 border-l border-gray-200", children: category.subCategories.map((subCategory, subIndex) => (_jsx("li", { children: _jsxs("button", { onClick: () => handleFilterSelect(category.label, subCategory.label), className: `w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 transition-colors group ${selectedFilter === subCategory.label
+                                                            : "chevron-right-b", size: 14, className: "text-gray-400" })), _jsx(Icon, { icon: category.icon, size: 20, className: category.color })] }), _jsx("span", { className: "font-medium text-gray-800 text-left", children: category.label })] }), _jsx("span", { className: "text-sm font-medium text-gray-500 min-w-0", children: category.count })] }), category.subCategories && expandedCategories.has(index) && (_jsx("ul", { className: "ml-4 border-l border-gray-200", children: category.subCategories.map((subCategory, subIndex) => (_jsx("li", { children: _jsxs("button", { onClick: () => handleFilterSelect(category.key, subCategory.key), className: `w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 transition-colors group ${selectedFilter === subCategory.key
                                             ? "bg-blue-50 border-r-2 border-blue-500"
                                             : ""}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex-shrink-0 ml-4", children: _jsx(Icon, { icon: subCategory.icon, size: 18, className: subCategory.color }) }), _jsx("span", { className: "text-sm font-medium text-gray-700 text-left", children: subCategory.label })] }), _jsx("span", { className: "text-xs font-medium text-gray-500 min-w-0", children: subCategory.count })] }) }, subIndex))) }))] }, index))) }) })] }));
 };

package/dist/constants/images.d.ts

@@ -0,0 +1,5 @@
+export declare const images: {
+    conversationBg: string;
+    imageFailed: string;
+};
+//# sourceMappingURL=images.d.ts.map

package/dist/constants/images.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../src/constants/images.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,MAAM;;;CAGlB,CAAC"}

package/dist/constants/images.js

@@ -0,0 +1,7 @@
+const conversationBg = new URL("../assets/images/conversationBg.png", import.meta.url).href;
+const imageFailed = new URL("../assets/images/imageFailed.png", import.meta.url)
+    .href;
+export const images = {
+    conversationBg,
+    imageFailed,
+};

package/dist/context/ChatContext.d.ts

@@ -1,5 +1,6 @@
+import "../styles/global.css";
 import { ChatContextType, ChatProviderProps } from "../types/chat";
 export declare const ChatContext: import("react").Context<ChatContextType>;
 export declare const useChatContext: () => ChatContextType;
-export declare const ChatProvider: ({ children, config, refetchToken, }: ChatProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChatProvider: ({ children, config }: ChatProviderProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatContext.d.ts.map

package/dist/context/ChatContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,eAAe,EACf,iBAAiB,EAGlB,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,WAAW,0CAOtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,qCAI1B,iBAAiB,4CAoEnB,CAAC"}
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,EACL,eAAe,EACf,iBAAiB,EAGlB,MAAM,eAAe,CAAC;AAQvB,eAAO,MAAM,WAAW,0CAOtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,sBAAsB,iBAAiB,4CAsDnE,CAAC"}

package/dist/context/ChatContext.js

@@ -1,23 +1,28 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import "../styles/global.css";
 import { createContext, useContext, useEffect, useState } from "react";
 import { ConnectStatus, SyncStatus, } from "../types/chat";
 import { DChatSDK } from "../constants/sdk";
 import MainLayout from "../layout";
+import useAuthStore from "../store/auth";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+const queryClient = new QueryClient();
 export const ChatContext = createContext({
     user: null,
     connectStatus: ConnectStatus.Disconnected,
     syncStatus: SyncStatus.Success,
-    userTokenHandler: () => { },
+    getSelfUserInfo: () => { },
     updateConnectStatus: () => { },
     updateSyncStatus: () => { },
 });
 export const useChatContext = () => useContext(ChatContext);
-export const ChatProvider = ({ children, config, refetchToken, }) => {
+export const ChatProvider = ({ children, config }) => {
     const [connectStatus, setConnectStatus] = useState(ConnectStatus.Disconnected);
     const [syncStatus, setSyncStatus] = useState(SyncStatus.Success);
     const [user, setUser] = useState(null);
-    const getUserInfo = () => {
+    const initAuthStore = useAuthStore((state) => state.initAuthStore);
+    const getSelfUserInfo = () => {
         DChatSDK.getSelfUserInfo()
             .then(({ data }) => {
             setUser(data);
@@ -26,24 +31,6 @@ export const ChatProvider = ({ children, config, refetchToken, }) => {
             console.error("getSelfUserInfo", errCode, errMsg);
         });
     };
-    const handleLogin = (newToken) => {
-        if (config) {
-            DChatSDK.login(Object.assign(Object.assign({}, config), { token: newToken || config.token }))
-                .then((res) => {
-                getUserInfo();
-            })
-                .catch(({ errCode, errMsg }) => {
-                console.error("handleLogin", errCode, errMsg);
-            });
-        }
-    };
-    const userTokenHandler = () => {
-        refetchToken().then((token) => {
-            if (!!token) {
-                handleLogin(token);
-            }
-        });
-    };
     const updateConnectStatus = (status) => {
         setConnectStatus(status);
     };
@@ -52,15 +39,21 @@ export const ChatProvider = ({ children, config, refetchToken, }) => {
     };
     useEffect(() => {
         if (config) {
-            handleLogin();
+            initAuthStore({
+                accessToken: config.accessToken,
+                apiAddress: config.apiAddr,
+                platformID: config.platformID,
+                userID: config.userID,
+                wsAddress: config.wsAddr,
+            });
         }
     }, [config]);
     return (_jsx(ChatContext.Provider, { value: {
             user,
             connectStatus,
             syncStatus,
-            userTokenHandler,
+            getSelfUserInfo,
             updateConnectStatus,
             updateSyncStatus,
-        }, children: _jsx(MainLayout, { children: children }) }));
+        }, children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(MainLayout, { children: children }) }) }));
 };

package/dist/hooks/collection/useMediaCollection.d.ts

@@ -0,0 +1,229 @@
+import { MessageType } from "@openim/wasm-client-sdk";
+import { MediaCollectionItem, MediaCollectionResponse } from "../../types/dto";
+export declare const useMediaCollection: ({ recvID, contentType, }: {
+    recvID: string;
+    contentType: MessageType;
+}) => {
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoadingError: false;
+    isRefetchError: true;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasPreviousPage: boolean;
+    isFetchNextPageError: boolean;
+    isFetchPreviousPageError: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>>;
+    data: import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown> | undefined;
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    isLoading: boolean;
+    groupedData: Record<string, MediaCollectionItem[]>;
+    dataFlatten: MediaCollectionItem[];
+} | {
+    error: null;
+    isError: false;
+    isPending: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: true;
+    isPlaceholderData: false;
+    status: "success";
+    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasPreviousPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>>;
+    data: import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown> | undefined;
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    isLoading: boolean;
+    groupedData: Record<string, MediaCollectionItem[]>;
+    dataFlatten: MediaCollectionItem[];
+} | {
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoadingError: true;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasPreviousPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>>;
+    data: import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown> | undefined;
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    isLoading: boolean;
+    groupedData: Record<string, MediaCollectionItem[]>;
+    dataFlatten: MediaCollectionItem[];
+} | {
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasPreviousPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>>;
+    data: import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown> | undefined;
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    isLoading: boolean;
+    groupedData: Record<string, MediaCollectionItem[]>;
+    dataFlatten: MediaCollectionItem[];
+} | {
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasPreviousPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>>;
+    data: import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown> | undefined;
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    isLoading: boolean;
+    groupedData: Record<string, MediaCollectionItem[]>;
+    dataFlatten: MediaCollectionItem[];
+} | {
+    isError: false;
+    error: null;
+    isPending: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: true;
+    isFetchNextPageError: false;
+    isFetchPreviousPageError: false;
+    status: "success";
+    fetchPreviousPage: (options?: import("@tanstack/react-query").FetchPreviousPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasPreviousPage: boolean;
+    isFetchingPreviousPage: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    fetchStatus: import("@tanstack/react-query").FetchStatus;
+    promise: Promise<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>>;
+    data: import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown> | undefined;
+    fetchNextPage: (options?: import("@tanstack/react-query").FetchNextPageOptions) => Promise<import("@tanstack/react-query").InfiniteQueryObserverResult<import("@tanstack/react-query").InfiniteData<MediaCollectionResponse, unknown>, Error>>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    isLoading: boolean;
+    groupedData: Record<string, MediaCollectionItem[]>;
+    dataFlatten: MediaCollectionItem[];
+};
+//# sourceMappingURL=useMediaCollection.d.ts.map

package/dist/hooks/collection/useMediaCollection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaCollection.d.ts","sourceRoot":"","sources":["../../../src/hooks/collection/useMediaCollection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EACL,mBAAmB,EAEnB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAIzB,eAAO,MAAM,kBAAkB,GAAI,0BAGhC;IACD,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;CAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEA,CAAC"}