@droppii-org/chat-sdk 0.0.71 → 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/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,YAkQ1B,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,
@@ -75,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();
                 }
             },
         });
@@ -84,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,
@@ -210,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,
         });
     },
 }));