@droppii-org/chat-sdk 0.0.40 → 0.0.41

package/dist/components/message/MessageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,KAAK,sBAAsB,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,sBAAsB,CAAC;IAC9B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,GAAI,6BAA6B,kBAAkB,4CAkKrE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"MessageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageHeader.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,KAAK,sBAAsB,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,sBAAsB,CAAC;IAC9B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,GAAI,6BAA6B,kBAAkB,4CA4LrE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/MessageHeader.js

@@ -54,6 +54,13 @@ const MessageHeader = ({ onClose, currentSession }) => {
     }, [t]);
     const tagOptions = useMemo(() => {
         return [
+            {
+                label: t("select_tag"),
+                value: SessionTag.NONE,
+                tintColorClassname: "text-gray-500",
+                tintColorClassnameBg: "bg-gray-500",
+                bgTintColorClassname: "bg-gray-100",
+            },
             {
                 label: t("awaiting_reply"),
                 value: SessionTag.AWAITING_REPLY,
@@ -77,26 +84,33 @@ const MessageHeader = ({ onClose, currentSession }) => {
             },
         ];
     }, [t]);
-    const handleUpdateSession = (value, type) => {
+    const handleUpdateSession = (value, type, isSameValue) => {
+        let newValue = value;
+        if (type === "tag" && value === SessionTag.AWAITING_REPLY && isSameValue) {
+            newValue = SessionTag.NONE;
+        }
         if (currentSession) {
-            updateSession({
-                sessionId: currentSession.id,
-                [type]: value,
-            }, {
-                onError(error) {
-                    var _a, _b;
-                    message.error(((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) ||
-                        t(`update_session_${type}_failed`));
-                },
-                onSuccess() {
-                    if (type === "status") {
-                        setCurrentSessionStatus(value);
-                    }
-                    else {
-                        setCurrentSessionTag(value);
-                    }
-                },
-            });
+            if (!isSameValue ||
+                (type === "tag" && value === SessionTag.AWAITING_REPLY)) {
+                updateSession({
+                    sessionId: currentSession.id,
+                    [type]: newValue,
+                }, {
+                    onError(error) {
+                        var _a, _b;
+                        message.error(((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message) ||
+                            t(`update_session_${type}_failed`));
+                    },
+                    onSuccess() {
+                        if (type === "status") {
+                            setCurrentSessionStatus(value);
+                        }
+                        else {
+                            setCurrentSessionTag(value);
+                        }
+                    },
+                });
+            }
         }
     };
     useEffect(() => {
@@ -105,6 +119,6 @@ const MessageHeader = ({ onClose, currentSession }) => {
             setCurrentSessionStatus(currentSession.status);
         }
     }, [currentSession]);
-    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white no-transform", children: [_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), _jsx("p", { className: "text-xs text-gray-500 truncate", children: "2 thành viên" })] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && (_jsx(SelectSession, { options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag") })), isCx && (_jsx(SelectSession, { options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status") })), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "search-o", size: 22 }) }), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
+    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white no-transform", children: [_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), _jsx("p", { className: "text-xs text-gray-500 truncate", children: "2 thành viên" })] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && (_jsx(SelectSession, { options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && (_jsx(SelectSession, { options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "search-o", size: 22 }) }), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
 };
 export default MessageHeader;

package/dist/components/message/SelectSession.d.ts

@@ -3,7 +3,8 @@ interface SelectSessionProps {
     options: SelectSessionOption[];
     value: SelectSessionOption["value"];
     onChange: (value: SelectSessionOption["value"]) => void;
+    excludeOptions?: SelectSessionOption["value"][];
 }
-declare const SelectSession: ({ options, value, onChange }: SelectSessionProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectSession: ({ options, value, onChange, excludeOptions, }: SelectSessionProps) => import("react/jsx-runtime").JSX.Element;
 export default SelectSession;
 //# sourceMappingURL=SelectSession.d.ts.map

package/dist/components/message/SelectSession.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectSession.d.ts","sourceRoot":"","sources":["../../../src/components/message/SelectSession.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAMtD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACzD;AAED,QAAA,MAAM,aAAa,GAAI,8BAA8B,kBAAkB,4CAqEtE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SelectSession.d.ts","sourceRoot":"","sources":["../../../src/components/message/SelectSession.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAMtD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,EAAE,CAAC;CACjD;AAED,QAAA,MAAM,aAAa,GAAI,+CAKpB,kBAAkB,4CAuEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/message/SelectSession.js

@@ -5,7 +5,8 @@ import { useBoolean } from "ahooks";
 import { Icon } from "../icon";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-const SelectSession = ({ options, value, onChange }) => {
+const SelectSession = ({ options, value, onChange, excludeOptions, }) => {
+    var _a;
     const { t } = useTranslation();
     const [open, { toggle }] = useBoolean(false);
     const selectedOption = options.find((option) => option.value === value);
@@ -13,7 +14,7 @@ const SelectSession = ({ options, value, onChange }) => {
         onChange(value);
         toggle();
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: clsx("flex items-center gap-2 px-3 py-1 rounded-sm min-w-[64px] cursor-pointer", selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bgTintColorClassname, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tintColorClassname), onClick: toggle, children: [_jsx("span", { className: "text-xs font-medium truncate", children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || "" }), _jsx(Icon, { icon: "angle-down-o", size: 14 })] }), _jsx(Modal, { title: t("update_session_status_title"), closable: { "aria-label": "Custom Close Button" }, open: open, onOk: toggle, onCancel: toggle, width: 300, styles: { content: { padding: 12 } }, footer: null, children: _jsx("div", { className: "flex flex-col gap-1", children: options.map((option) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: clsx("flex items-center gap-2 px-3 py-1 rounded-sm min-w-[64px] cursor-pointer", selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bgTintColorClassname, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tintColorClassname), onClick: toggle, children: [_jsx("span", { className: "text-xs font-medium truncate", children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || "" }), _jsx(Icon, { icon: "angle-down-o", size: 14 })] }), _jsx(Modal, { title: t("update_session_status_title"), closable: { "aria-label": "Custom Close Button" }, open: open, onOk: toggle, onCancel: toggle, width: 300, styles: { content: { padding: 12 } }, footer: null, children: _jsx("div", { className: "flex flex-col gap-1", children: (_a = options === null || options === void 0 ? void 0 : options.filter) === null || _a === void 0 ? void 0 : _a.call(options, (option) => !(excludeOptions === null || excludeOptions === void 0 ? void 0 : excludeOptions.includes(option.value))).map((option) => {
                         const isSelected = option.value === value;
                         return (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-gray-100 rounded-sm", onClick: () => onChange(option.value), onClickCapture: () => handleSelect(option.value), children: [_jsx("div", { className: clsx("w-2 h-2 rounded-full", option.tintColorClassnameBg) }), _jsx("span", { className: clsx("text-xs truncate flex-1", isSelected && "font-bold"), children: option.label }), isSelected && (_jsx(Icon, { icon: "check-b", size: 18, className: "text-blue-500" }))] }, option.value));
                     }) }) })] }));

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

@@ -1 +1 @@
-{"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;AASvB,eAAO,MAAM,WAAW,0CAOtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,sBAAsB,iBAAiB,4CAyDnE,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;AASvB,eAAO,MAAM,WAAW,0CAOtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,sBAAsB,iBAAiB,4CA0DnE,CAAC"}

package/dist/context/ChatContext.js

@@ -47,6 +47,7 @@ export const ChatProvider = ({ children, config }) => {
                 userID: config.userID,
                 wsAddress: config.wsAddr,
                 applicationType: config.applicationType,
+                isCrm: config.isCrm,
             });
         }
     }, [config]);

package/dist/locales/vi/common.json

@@ -31,5 +31,6 @@
   "update_session_status_failed": "Cập nhật status không thành công",
   "update_session_tag_failed": "Cập nhật tag không thành công",
   "customer": "Khách hàng",
-  "you": "Bạn"
+  "you": "Bạn",
+  "select_tag": "Chọn tag"
 }

package/dist/store/auth.js

@@ -17,7 +17,7 @@ const useAuthStore = create((set, get) => ({
     initAuthStore: ({ accessToken, chatToken, apiAddress, wsAddress, platformID, userID, applicationType, isCrm, }) => {
         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"));
+        const isCx = !!isCrm && !!((_a = jwtParser === null || jwtParser === void 0 ? void 0 : jwtParser.role) === null || _a === void 0 ? void 0 : _a.includes("CRM_LIVE_CHAT"));
         set({
             accessToken,
             chatToken,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-sdk",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "description": "Droppii React Chat SDK",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",