@droppii-org/chat-sdk 0.0.70 → 0.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAkFA,QAAA,MAAM,SAAS,+CAwPd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAoFA,QAAA,MAAM,SAAS,+CA0Od,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -11,6 +11,8 @@ import { $generateHtmlFromNodes } from "@lexical/html";
 import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from "@lexical/list";
 import { $isQuoteNode } from "@lexical/rich-text";
 import { useMessageFooterContext } from ".";
+import { useTranslation } from "react-i18next";
+import { validateFile, validateVideoLimit } from "../../../utils/fileValidation";
 const documentTypes = [
     "application/pdf",
     "application/msword",
@@ -25,6 +27,7 @@ const ActionBar = () => {
     const [showEmojiPicker, setShowEmojiPicker] = useState(false);
     const { listUploadFiles } = useMessageFooterContext();
     const [isEmptyInput, setIsEmptyInput] = useState(true);
+    const { t } = useTranslation();
     const canSend = !isEmptyInput || listUploadFiles.length > 0;
     const handleSend = useCallback(() => {
         let plainText = "";
@@ -89,31 +92,24 @@ const ActionBar = () => {
         setShowEmojiPicker(false);
     }, [editor]);
     const beforeUploadImagesAndVideo = (file, fileList) => {
-        const isImage = file.type === "image/jpeg" ||
-            file.type === "image/png" ||
-            file.type === "image/jpg";
-        const isVideo = file.type.startsWith("video/");
-        const maxSize = isVideo ? 200 : 5; // MB
-        const isErrorSize = file.size / 1024 / 1024 > maxSize;
-        // check format
-        if ((!isImage && !isVideo) || isErrorSize) {
-            if (!isImage && !isVideo) {
-                message.error(`${file.name} không đúng định dạng JPG, JPEG, PNG hoặc VIDEO`);
-            }
-            if (isErrorSize) {
-                if (isImage) {
-                    message.error(`${file.name} có kích thước tập tin vượt quá ${maxSize}MB`);
-                }
-                else {
-                    message.error(`Tệp không được vượt quá ${maxSize}MB`);
-                }
-            }
+        // Validate file type and size
+        const validation = validateFile(file, t);
+        if (!validation.isValid) {
+            message.error(validation.error);
+            return Upload.LIST_IGNORE;
+        }
+        // Validate video limit
+        const videoValidation = validateVideoLimit([file], listUploadFiles, t);
+        if (!videoValidation.isValid) {
+            message.error(videoValidation.error);
             return Upload.LIST_IGNORE;
         }
+        // Check if multiple videos in current upload batch
         const newVideos = fileList.filter((f) => { var _a; return (_a = f.type) === null || _a === void 0 ? void 0 : _a.startsWith("video/"); });
-        const currentVideos = listUploadFiles.filter((f) => { var _a; return (_a = f.type) === null || _a === void 0 ? void 0 : _a.startsWith("video/"); });
-        if (newVideos.length > 1 || currentVideos.length + newVideos.length > 1) {
-            message.error("Chỉ được phép tải lên 1 video duy nhất");
+        if (newVideos.length > 1) {
+            message.error(t("video_limit_exceeded", {
+                defaultValue: "Chỉ được phép tải lên 1 video duy nhất",
+            }));
             return Upload.LIST_IGNORE;
         }
         return false;

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

@@ -0,0 +1,6 @@
+interface PasteAndDropPluginProps {
+    onFilesAdded?: (files: File[]) => void;
+}
+declare const PasteAndDropPlugin: ({ onFilesAdded }: PasteAndDropPluginProps) => null;
+export default PasteAndDropPlugin;
+//# sourceMappingURL=PasteAndDropPlugin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasteAndDropPlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/PasteAndDropPlugin.tsx"],"names":[],"mappings":"AASA,UAAU,uBAAuB;IAC/B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CACxC;AAED,QAAA,MAAM,kBAAkB,GAAI,kBAAkB,uBAAuB,SAqIpE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -0,0 +1,115 @@
+"use client";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+import { COMMAND_PRIORITY_HIGH, PASTE_COMMAND, DROP_COMMAND } from "lexical";
+import { useMessageFooterContext } from ".";
+import { useTranslation } from "react-i18next";
+import { processAndValidateFiles, ACCEPTED_IMAGE_TYPES } from "../../../utils/fileValidation";
+const PasteAndDropPlugin = ({ onFilesAdded }) => {
+    const [editor] = useLexicalComposerContext();
+    const { setListUploadFiles } = useMessageFooterContext();
+    const { t } = useTranslation();
+    useEffect(() => {
+        // Handle paste event
+        const unregisterPaste = editor.registerCommand(PASTE_COMMAND, (event) => {
+            try {
+                const clipboardData = event.clipboardData;
+                if (!clipboardData)
+                    return false;
+                const items = Array.from(clipboardData.items);
+                const imageItems = items.filter((item) => item.type.startsWith("image/"));
+                if (imageItems.length > 0) {
+                    event.preventDefault();
+                    const files = [];
+                    imageItems.forEach((item) => {
+                        const file = item.getAsFile();
+                        if (file) {
+                            files.push(file);
+                        }
+                    });
+                    if (files.length > 0) {
+                        setListUploadFiles((prev) => {
+                            const validFiles = processAndValidateFiles(files, {
+                                t,
+                                currentUploadedFiles: prev,
+                            });
+                            if (validFiles.length > 0) {
+                                onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(files);
+                                return [...prev, ...validFiles];
+                            }
+                            return prev;
+                        });
+                    }
+                    return true;
+                }
+                return false;
+            }
+            catch (error) {
+                console.error("Error handling paste:", error);
+                return false;
+            }
+        }, COMMAND_PRIORITY_HIGH);
+        // Handle drop event
+        const unregisterDrop = editor.registerCommand(DROP_COMMAND, (event) => {
+            try {
+                const dataTransfer = event.dataTransfer;
+                if (!dataTransfer)
+                    return false;
+                const files = Array.from(dataTransfer.files);
+                const imageOrVideoFiles = files.filter((file) => ACCEPTED_IMAGE_TYPES.includes(file.type) ||
+                    file.type.startsWith("video/"));
+                if (imageOrVideoFiles.length > 0) {
+                    event.preventDefault();
+                    setListUploadFiles((prev) => {
+                        const validFiles = processAndValidateFiles(imageOrVideoFiles, {
+                            t,
+                            currentUploadedFiles: prev,
+                        });
+                        if (validFiles.length > 0) {
+                            onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(imageOrVideoFiles);
+                            return [...prev, ...validFiles];
+                        }
+                        return prev;
+                    });
+                    return true;
+                }
+                return false;
+            }
+            catch (error) {
+                console.error("Error handling drop:", error);
+                return false;
+            }
+        }, COMMAND_PRIORITY_HIGH);
+        return () => {
+            unregisterPaste();
+            unregisterDrop();
+        };
+    }, [editor, setListUploadFiles, t, onFilesAdded]);
+    // Add visual feedback for drag over
+    useEffect(() => {
+        const editorElement = editor.getRootElement();
+        if (!editorElement)
+            return;
+        const handleDragOverVisual = (e) => {
+            e.preventDefault();
+            editorElement.classList.add("border-blue-500", "bg-blue-50");
+        };
+        const handleDragLeaveVisual = (e) => {
+            e.preventDefault();
+            editorElement.classList.remove("border-blue-500", "bg-blue-50");
+        };
+        const handleDropVisual = () => {
+            editorElement.classList.remove("border-blue-500", "bg-blue-50");
+        };
+        editorElement.addEventListener("dragover", handleDragOverVisual);
+        editorElement.addEventListener("dragleave", handleDragLeaveVisual);
+        editorElement.addEventListener("drop", handleDropVisual);
+        return () => {
+            editorElement.removeEventListener("dragover", handleDragOverVisual);
+            editorElement.removeEventListener("dragleave", handleDragLeaveVisual);
+            editorElement.removeEventListener("drop", handleDropVisual);
+        };
+    }, [editor]);
+    return null;
+};
+export default PasteAndDropPlugin;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAK/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AA+BD,eAAO,MAAM,oBAAoB,mDAI/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,oBAAoB,kBAAkB,4CA4DpE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAK/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AA+BD,eAAO,MAAM,oBAAoB,mDAI/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,oBAAoB,kBAAkB,4CA6DpE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -16,6 +16,7 @@ import ActionBar from "./ActionBar";
 import { useSendMessage } from "../../../hooks/message/useSendMessage";
 import FilePreview from "./FilePreview";
 import { useTranslation } from "react-i18next";
+import PasteAndDropPlugin from "./PasteAndDropPlugin";
 const theme = {
     text: {
         bold: "font-bold",
@@ -66,6 +67,6 @@ const MessageFooterProvider = ({ currentSession }) => {
         }
         setListUploadFiles([]);
     }, [sendMergeMessage, sendTextMessage, listUploadFiles, currentSession]);
-    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": t("enter_message"), placeholder: _jsx("div", { className: "absolute top-2 left-7 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: t("enter_message") }) }) }) }), _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": t("enter_message"), placeholder: _jsx("div", { className: "absolute top-2 left-7 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: t("enter_message") }) }) }) }), _jsx(ActionBar, {})] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {})] }) }));
 };
 export default MessageFooterProvider;

package/dist/components/thread/SessionSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionSection.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SessionSection.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAcnE,eAAO,MAAM,iBAAiB,GAAI,wBAG/B;IACD,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB,4CAwKA,CAAC;AAgCF,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,yBAAyB,mBAAmB,4CAgCnE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SessionSection.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SessionSection.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAmBnE,eAAO,MAAM,iBAAiB,GAAI,wBAG/B;IACD,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB,4CAsMA,CAAC;AA8CF,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,yBAAyB,mBAAmB,4CAkDnE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/thread/SessionSection.js

@@ -25,17 +25,29 @@ export const SessionDetailCard = ({ session, isActive, }) => {
     const { data: availableLabels, isLoading: isLoadingLabels } = useGetLabelSession();
     const { mutate: updateSession } = useUpdateSessionInfo();
     const { mutate: closeSession, isPending: isClosing } = useCloseSession();
-    const [note, setNote] = useState(session.note || "");
-    const [issueDetail, setIssueDetail] = useState(session.issueDetail || "");
-    const debouncedNote = useDebounce(note, { wait: 1000 });
-    const debouncedIssueDetail = useDebounce(issueDetail, { wait: 1000 });
+    const [noteInput, setNoteInput] = useState({
+        value: session.note || "",
+        sessionId: session.id,
+    });
+    const [issueDetailInput, setIssueDetailInput] = useState({
+        value: session.issueDetail || "",
+        sessionId: session.id,
+    });
+    const debouncedNoteInput = useDebounce(noteInput, { wait: 500 });
+    const debouncedIssueDetailInput = useDebounce(issueDetailInput, {
+        wait: 500,
+    });
     useEffect(() => {
-        setNote(session.note || "");
-        setIssueDetail(session.issueDetail || "");
-    }, [session.note, session.issueDetail]);
+        setNoteInput({ value: session.note || "", sessionId: session.id });
+        setIssueDetailInput({
+            value: session.issueDetail || "",
+            sessionId: session.id,
+        });
+    }, [session.id]);
     useEffect(() => {
-        if (debouncedNote !== (session.note || "")) {
-            updateSession({ sessionId: session.id, note: debouncedNote }, {
+        if (debouncedNoteInput.sessionId === session.id &&
+            debouncedNoteInput.value !== (session.note || "")) {
+            updateSession({ sessionId: session.id, note: debouncedNoteInput.value }, {
                 onSuccess: () => {
                     queryClient.invalidateQueries({
                         queryKey: [QUERY_KEYS.GET_LIST_SESSION_BY_CONVERSATION],
@@ -43,12 +55,19 @@ export const SessionDetailCard = ({ session, isActive, }) => {
                 },
             });
         }
-    }, [debouncedNote, session.note, session.id, updateSession, queryClient]);
+    }, [
+        debouncedNoteInput,
+        session.note,
+        session.id,
+        updateSession,
+        queryClient,
+    ]);
     useEffect(() => {
-        if (debouncedIssueDetail !== (session.issueDetail || "")) {
+        if (debouncedIssueDetailInput.sessionId === session.id &&
+            debouncedIssueDetailInput.value !== (session.issueDetail || "")) {
             updateSession({
                 sessionId: session.id,
-                issueDetail: debouncedIssueDetail,
+                issueDetail: debouncedIssueDetailInput.value,
             }, {
                 onSuccess: () => {
                     queryClient.invalidateQueries({
@@ -58,7 +77,7 @@ export const SessionDetailCard = ({ session, isActive, }) => {
             });
         }
     }, [
-        debouncedIssueDetail,
+        debouncedIssueDetailInput,
         session.issueDetail,
         session.id,
         updateSession,
@@ -90,18 +109,33 @@ export const SessionDetailCard = ({ session, isActive, }) => {
         value: label.id,
         label: label.name,
     }));
-    return (_jsxs("div", { className: `p-3 border rounded-lg shadow-md ${isActive ? "border-blue-500" : "border-gray-300"}`, children: [_jsxs("div", { className: "flex justify-between items-start mb-3", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Icon, { icon: "chat-square-b", size: 16, className: "text-gray-500" }), _jsxs("p", { className: "font-semibold text-sm", children: ["Session ", session.order] })] }), _jsx("p", { className: "text-xs text-gray-400", children: formatSessionDate(session.closedDate || session.createdDate) })] }) }), isActive ? (_jsx(Tag, { color: "processing", children: "\u0110ang ho\u1EA1t \u0111\u1ED9ng" })) : (_jsx(Avatar, { src: (_a = session.supporter) === null || _a === void 0 ? void 0 : _a.avatar, size: 24, children: ((_d = (_c = (_b = session.supporter) === null || _b === void 0 ? void 0 : _b.username) === null || _c === void 0 ? void 0 : _c.charAt) === null || _d === void 0 ? void 0 : _d.call(_c, 0)) || "A" }))] }), _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [_jsx(Icon, { icon: "tag-o", size: 16, className: "mt-1" }), _jsx(Select, { mode: "multiple", loading: isLoadingLabels, className: "w-full", placeholder: "Th\u00EAm th\u1EBB...", options: labelOptions, value: (_e = session.labels) === null || _e === void 0 ? void 0 : _e.map((label) => label.id), onChange: handleUpdateLabels, removeIcon: true })] }), _jsxs("div", { className: "flex items-start gap-2 text-gray-500", children: [_jsx(Icon, { icon: "info-circle-o", size: 16, className: "mt-1" }), _jsx(TextArea, { value: issueDetail, onChange: (e) => setIssueDetail(e.target.value), placeholder: "V\u1EA5n \u0111\u1EC1 c\u1EE5 th\u1EC3...", className: "border-none !shadow-none py-0 px-2", autoSize: { minRows: 1, maxRows: 3 } })] }), _jsxs("div", { className: "flex items-start gap-2 text-gray-500", children: [_jsx(Icon, { icon: "paper-o", size: 16, className: "mt-1" }), _jsx(TextArea, { value: note, onChange: (e) => setNote(e.target.value), placeholder: "Ghi ch\u00FA...", className: "border-none !shadow-none py-0 px-2", autoSize: { minRows: 1, maxRows: 3 } })] })] }), isActive && (_jsx(Button, { type: "primary", block: true, className: "mt-4", onClick: handleCloseSession, loading: isClosing, children: "\u0110\u00F3ng" }))] }));
+    return (_jsxs("div", { className: `p-3 border rounded-lg shadow-md ${isActive ? "border-blue-500" : "border-gray-300"}`, children: [_jsxs("div", { className: "flex justify-between items-start mb-3", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Icon, { icon: "chat-square-b", size: 16, className: "text-gray-500" }), _jsxs("p", { className: "font-semibold text-sm", children: ["Session ", session.order] })] }), _jsx("p", { className: "text-xs text-gray-400", children: formatSessionDate(session.closedDate || session.createdDate) })] }) }), isActive ? (_jsx(Tag, { color: "processing", children: "\u0110ang ho\u1EA1t \u0111\u1ED9ng" })) : (_jsx(Avatar, { src: (_a = session.supporter) === null || _a === void 0 ? void 0 : _a.avatar, size: 24, children: ((_d = (_c = (_b = session.supporter) === null || _b === void 0 ? void 0 : _b.username) === null || _c === void 0 ? void 0 : _c.charAt) === null || _d === void 0 ? void 0 : _d.call(_c, 0)) || "A" }))] }), _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [_jsx(Icon, { icon: "tag-o", size: 16, className: "mt-1" }), _jsx(Select, { mode: "multiple", loading: isLoadingLabels, className: "w-full", placeholder: "Th\u00EAm th\u1EBB...", options: labelOptions, value: (_e = session.labels) === null || _e === void 0 ? void 0 : _e.map((label) => label.id), onChange: handleUpdateLabels, removeIcon: true })] }), _jsxs("div", { className: "flex items-start gap-2 text-gray-500", children: [_jsx(Icon, { icon: "info-circle-o", size: 16, className: "mt-1" }), _jsx(TextArea, { value: issueDetailInput.value, onChange: (e) => setIssueDetailInput({
+                                    value: e.target.value,
+                                    sessionId: session.id,
+                                }), placeholder: "V\u1EA5n \u0111\u1EC1 c\u1EE5 th\u1EC3...", className: "border-none !shadow-none py-0 px-2", autoSize: { minRows: 1, maxRows: 3 } })] }), _jsxs("div", { className: "flex items-start gap-2 text-gray-500", children: [_jsx(Icon, { icon: "paper-o", size: 16, className: "mt-1" }), _jsx(TextArea, { value: noteInput.value, onChange: (e) => setNoteInput({ value: e.target.value, sessionId: session.id }), placeholder: "Ghi ch\u00FA...", className: "border-none !shadow-none py-0 px-2", autoSize: { minRows: 1, maxRows: 3 } })] })] }), isActive && (_jsx(Button, { type: "primary", block: true, className: "mt-4", onClick: handleCloseSession, loading: isClosing, children: "\u0110\u00F3ng" }))] }));
 };
-const ClosedSessionItem = ({ session }) => {
+const ClosedSessionItem = ({ session, expandedSessionId, onToggleExpand, }) => {
     var _a, _b, _c, _d;
-    const [isExpanded, { setTrue }] = useBoolean(false);
+    const isExpanded = session.id === expandedSessionId;
+    const handleClick = () => {
+        onToggleExpand(session.id);
+    };
     if (isExpanded) {
         return (_jsx("div", { children: _jsx(SessionDetailCard, { session: session, isActive: false }) }));
     }
-    return (_jsxs("div", { className: "flex justify-between items-center p-2 rounded-md hover:bg-gray-100 cursor-pointer", onClick: setTrue, children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Icon, { icon: "chat-square-b", size: 16, className: "text-gray-500" }), _jsxs("span", { className: "font-semibold", children: ["Session ", session.order] }), _jsx("span", { className: "text-gray-400 text-xs", children: formatSessionDate(session.closedDate || session.createdDate) })] }), _jsx(Avatar, { src: (_a = session.supporter) === null || _a === void 0 ? void 0 : _a.avatar, size: 24, children: ((_d = (_c = (_b = session.supporter) === null || _b === void 0 ? void 0 : _b.username) === null || _c === void 0 ? void 0 : _c.charAt) === null || _d === void 0 ? void 0 : _d.call(_c, 0)) || "A" })] }));
+    return (_jsxs("div", { className: "flex justify-between items-center p-2 rounded-md hover:bg-gray-100 cursor-pointer", onClick: handleClick, children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Icon, { icon: "chat-square-b", size: 16, className: "text-gray-500" }), _jsxs("span", { className: "font-semibold", children: ["Session ", session.order] }), _jsx("span", { className: "text-gray-400 text-xs", children: formatSessionDate(session.closedDate || session.createdDate) })] }), _jsx(Avatar, { src: (_a = session.supporter) === null || _a === void 0 ? void 0 : _a.avatar, size: 24, children: ((_d = (_c = (_b = session.supporter) === null || _b === void 0 ? void 0 : _b.username) === null || _c === void 0 ? void 0 : _c.charAt) === null || _d === void 0 ? void 0 : _d.call(_c, 0)) || "A" })] }));
 };
 const SessionSection = ({ sessions, isLoading }) => {
     const [isOpen, { toggle }] = useBoolean(true);
-    return (_jsxs("div", { className: "flex flex-col border-b", children: [_jsxs("div", { role: "button", onClick: toggle, className: "flex items-center justify-between px-4 py-2 rounded-md hover:bg-gray-100 sticky top-0 bg-white z-10", children: [_jsx("h3", { className: "font-bold text-gray-500 text-xs tracking-wider", children: "SESSIONS" }), _jsx(Icon, { icon: isOpen ? "angle-up-o" : "angle-down-o", size: 18 })] }), isOpen && (_jsx("div", { className: "px-4 pt-2 pb-4", children: isLoading ? (_jsx("div", { className: "text-center mt-4", children: _jsx(Spin, {}) })) : (_jsx("div", { className: "flex flex-col gap-1", children: sessions.map((session) => (_jsx(ClosedSessionItem, { session: session }, session.id))) })) }))] }));
+    const [expandedSessionId, setExpandedSessionId] = useState(null);
+    const handleToggleExpand = (sessionId) => {
+        setExpandedSessionId((prevId) => (prevId === sessionId ? null : sessionId));
+    };
+    useEffect(() => {
+        if (!isOpen) {
+            setExpandedSessionId(null);
+        }
+    }, [isOpen]);
+    return (_jsxs("div", { className: "flex flex-col border-b", children: [_jsxs("div", { role: "button", onClick: toggle, className: "flex items-center justify-between px-4 py-2 rounded-md hover:bg-gray-100 sticky top-0 bg-white z-10", children: [_jsx("h3", { className: "font-bold text-gray-500 text-xs tracking-wider", children: "SESSIONS" }), _jsx(Icon, { icon: isOpen ? "angle-up-o" : "angle-down-o", size: 18 })] }), isOpen && (_jsx("div", { className: "px-4 pt-2 pb-4", children: isLoading ? (_jsx("div", { className: "text-center mt-4", children: _jsx(Spin, {}) })) : (_jsx("div", { className: "flex flex-col gap-1", children: sessions.map((session) => (_jsx(ClosedSessionItem, { session: session, expandedSessionId: expandedSessionId, onToggleExpand: handleToggleExpand }, session.id))) })) }))] }));
 };
 export default SessionSection;

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

@@ -1 +1 @@
-{"version":3,"file":"sdk.d.ts","sourceRoot":"","sources":["../../src/constants/sdk.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGjD,eAAO,MAAM,QAAQ,EAAE,UAAU,CAAC,OAAO,MAAM,CAI7C,CAAC"}
+{"version":3,"file":"sdk.d.ts","sourceRoot":"","sources":["../../src/constants/sdk.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,eAAO,MAAM,QAAQ,EAAE,UAAU,CAAC,OAAO,MAAM,CAI7C,CAAC"}

package/dist/constants/sdk.js

@@ -1,7 +1,6 @@
 import { getSDK } from "@openim/wasm-client-sdk";
-import { coreWasmPath } from "./index";
 export const DChatSDK = getSDK({
-    coreWasmPath,
+    coreWasmPath: typeof window !== "undefined" ? (window.localStorage.getItem("coreWasmPath") || '') : undefined,
     sqlWasmPath: "/sql-wasm.wasm",
     debug: process.env.NODE_ENV === "development",
 });

package/dist/hooks/global/useGlobalEvent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGlobalEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalEvent.ts"],"names":[],"mappings":"AA8BA,eAAO,MAAM,cAAc,YA4P1B,CAAC"}
+{"version":3,"file":"useGlobalEvent.d.ts","sourceRoot":"","sources":["../../../src/hooks/global/useGlobalEvent.ts"],"names":[],"mappings":"AA8BA,eAAO,MAAM,cAAc,YAsQ1B,CAAC"}

package/dist/hooks/global/useGlobalEvent.js

@@ -20,6 +20,9 @@ export const useGlobalEvent = () => {
     const { mutate: refetchChatToken } = useRefetchChatToken();
     const accessToken = useAuthStore((state) => state.accessToken);
     const chatToken = useAuthStore((state) => state.chatToken);
+    const apiAddress = useAuthStore((state) => {
+        return state.apiAddress;
+    });
     const revokedMessageHandler = ({ data }) => {
         updateOneMessage({
             clientMsgID: data.clientMsgID,
@@ -45,8 +48,14 @@ export const useGlobalEvent = () => {
         }
     };
     const handleNewMessage = (newServerMsg) => {
+        let customData = null;
         if (newServerMsg.contentType === MessageType.CustomMessage) {
-            const customData = JSON.parse(newServerMsg.customElem.data);
+            try {
+                customData = JSON.parse(newServerMsg.customElem.data);
+            }
+            catch (e) {
+                console.error("Failed to parse custom message data", e);
+            }
             if (customData &&
                 CustomType.CallingInvite <= customData.customType &&
                 customData.customType <= CustomType.CallingHungup) {
@@ -69,6 +78,7 @@ export const useGlobalEvent = () => {
                 var _a;
                 if (data) {
                     useAuthStore.getState().setChatToken((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.token);
+                    getSelfUserInfo();
                 }
             },
         });
@@ -78,7 +88,7 @@ export const useGlobalEvent = () => {
         getConversationListByReq(false);
     };
     const tryLogin = async () => {
-        const { userID, chatToken, platformID, apiAddress, wsAddress } = useAuthStore.getState();
+        const { userID, chatToken, platformID, wsAddress } = useAuthStore.getState();
         try {
             await DChatSDK.login({
                 userID,
@@ -204,13 +214,13 @@ export const useGlobalEvent = () => {
         };
     }, []);
     useEffect(() => {
-        if (!!accessToken) {
+        if (!!accessToken && apiAddress) {
             userTokenHandler();
         }
-    }, [accessToken]);
+    }, [accessToken, apiAddress]);
     useEffect(() => {
-        if (!!chatToken) {
+        if (!!chatToken && apiAddress) {
             loginCheck();
         }
-    }, [chatToken]);
+    }, [chatToken, apiAddress]);
 };

package/dist/services/api.js

@@ -8,9 +8,58 @@ export const apiInstance = axios.create({
     },
     timeout: TIMEOUT,
 });
+// Module-level refresh promise cache to prevent concurrent refresh calls
+let sdkRefreshPromise = null;
 apiInstance.interceptors.request.use((config) => {
     return Object.assign(Object.assign({}, config), { baseURL: useAuthStore.getState().apiAddress, headers: Object.assign(Object.assign({}, config.headers), { Authorization: `Bearer ${useAuthStore.getState().accessToken}`, token: useAuthStore.getState().chatToken }) });
 }, (error) => {
     // Handle errors globally
     return Promise.reject(error);
 });
+// Response interceptor for 401 handling - delegates to consumer app
+apiInstance.interceptors.response.use((response) => response, async (error) => {
+    var _a;
+    const originalRequest = error.config;
+    // Prevent infinite loops with _retry flag
+    if (originalRequest._retry) {
+        return Promise.reject(error);
+    }
+    // Handle 401 responses
+    if (((_a = error.response) === null || _a === void 0 ? void 0 : _a.status) === 401) {
+        const { onTokenRefresh, onAuthError } = useAuthStore.getState();
+        // No callback provided, reject immediately
+        if (!onTokenRefresh) {
+            const authError = new Error("Token expired, no refresh callback provided");
+            onAuthError === null || onAuthError === void 0 ? void 0 : onAuthError(authError);
+            return Promise.reject(error);
+        }
+        originalRequest._retry = true;
+        try {
+            // Cache refresh promise to ensure single refresh call for concurrent requests
+            if (!sdkRefreshPromise) {
+                sdkRefreshPromise = onTokenRefresh()
+                    .then((newToken) => {
+                    // Update SDK's access token
+                    useAuthStore.getState().setAccessToken(newToken);
+                    return newToken;
+                })
+                    .catch((err) => {
+                    // Notify consumer app of auth error
+                    onAuthError === null || onAuthError === void 0 ? void 0 : onAuthError(err);
+                    throw err;
+                })
+                    .finally(() => {
+                    sdkRefreshPromise = null;
+                });
+            }
+            const newToken = await sdkRefreshPromise;
+            // Retry original request with new token
+            originalRequest.headers.Authorization = `Bearer ${newToken}`;
+            return apiInstance(originalRequest);
+        }
+        catch (refreshError) {
+            return Promise.reject(error);
+        }
+    }
+    return Promise.reject(error);
+});

package/dist/store/auth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../../src/store/auth.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAKnC,QAAA,MAAM,YAAY,wEAoCf,CAAC;AAEJ,eAAe,YAAY,CAAC"}
+{"version":3,"file":"auth.d.ts","sourceRoot":"","sources":["../../src/store/auth.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAKnC,QAAA,MAAM,YAAY,wEA0Cf,CAAC;AAEJ,eAAe,YAAY,CAAC"}

package/dist/store/auth.js

@@ -12,9 +12,11 @@ const useAuthStore = create((set, get) => ({
     applicationType: DChatApplicationType.OBEFE,
     isCx: false,
     isCrm: false,
+    onTokenRefresh: undefined,
+    onAuthError: undefined,
     setAccessToken: (token) => set({ accessToken: token }),
     setChatToken: (token) => set({ chatToken: token }),
-    initAuthStore: ({ accessToken, chatToken, apiAddress, wsAddress, platformID, userID, applicationType, isCrm, }) => {
+    initAuthStore: ({ accessToken, chatToken, apiAddress, wsAddress, platformID, userID, applicationType, isCrm, onTokenRefresh, onAuthError, }) => {
         var _a;
         const jwtParser = !!accessToken ? jwtDecode(accessToken) : null;
         const isCx = !!isCrm && !!((_a = jwtParser === null || jwtParser === void 0 ? void 0 : jwtParser.role) === null || _a === void 0 ? void 0 : _a.includes("CRM_LIVE_CHAT"));
@@ -28,6 +30,8 @@ const useAuthStore = create((set, get) => ({
             applicationType,
             isCx,
             isCrm: !!isCrm,
+            onTokenRefresh,
+            onAuthError,
         });
     },
 }));