chat-customer-47net 1.1.0 → 1.1.1

package/chat-customer-47net.es.js

@@ -1004,6 +1004,10 @@ const __vue2_script$7 = {
     initData: {
       type: Object,
       default: () => ({})
+    },
+    buttonLock: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -1077,7 +1081,7 @@ const __vue2_script$7 = {
   }
 };
 const __cssModules$7 = {};
-var __component__$7 = /* @__PURE__ */normalizeComponent(__vue2_script$7, render$8, staticRenderFns$7, false, __vue2_injectStyles$7, "ae646dbc", null, null);
+var __component__$7 = /* @__PURE__ */normalizeComponent(__vue2_script$7, render$8, staticRenderFns$7, false, __vue2_injectStyles$7, "4b80e726", null, null);
 function __vue2_injectStyles$7(context) {
   for (let o in __cssModules$7) {
     this[o] = __cssModules$7[o];
@@ -6100,7 +6104,12 @@ var render$5 = function () {
     }
   }, [_vm.userOrOther === "user" || _vm.itemUserId === _vm.userId ? _c("div", {
     staticClass: "consult-47this-chat-item-user"
-  }, [_c("p", [_vm._v(" " + _vm._s(_vm.message) + " "), _c("span", {
+  }, [_c("p", [_c("b", {
+    staticClass: "markdown-body",
+    domProps: {
+      "innerHTML": _vm._s(_vm.markdownToHtml)
+    }
+  }), _c("span", {
     staticClass: "time"
   }, [_vm._v(_vm._s(_vm.time))])])]) : _c("div", {
     staticClass: "consult-47this-chat-item-consult"
@@ -6325,6 +6334,10 @@ const __vue2_script$4 = {
     activeItem: {
       type: Object,
       default: () => ({})
+    },
+    socket: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
@@ -6345,9 +6358,14 @@ const __vue2_script$4 = {
     },
     markdownToHtml() {
       const text = this.message.replace(/ {2,}/g, match => " ".repeat(match.length));
+      const renderer = new marked.Renderer();
+      renderer.link = href => {
+        return `<a href="${href.href}" target="_blank" rel="noopener noreferrer"${href.title ? ` title="${href.title}"` : ""}>${href.text}</a>`;
+      };
       marked.setOptions({
         breaks: true,
-        sanitize: false
+        sanitize: false,
+        renderer
       });
       return marked(text);
     }
@@ -6363,9 +6381,6 @@ const __vue2_script$4 = {
           roomId: this.roomId,
           userId: this.userId
         }, this.initData.socketUrl);
-        if (this.initData.socket) {
-          this.initData.socket.emit("setVisitedpage", this.userId, window.location.href, this.initData.siteName);
-        }
       } catch (error) {
         console.error("changeByHumanAgent error:", error);
       } finally {
@@ -6469,7 +6484,7 @@ const __vue2_script$4 = {
   }
 };
 const __cssModules$4 = {};
-var __component__$4 = /* @__PURE__ */normalizeComponent(__vue2_script$4, render$5, staticRenderFns$4, false, __vue2_injectStyles$4, "4c5e7de8", null, null);
+var __component__$4 = /* @__PURE__ */normalizeComponent(__vue2_script$4, render$5, staticRenderFns$4, false, __vue2_injectStyles$4, "0db74679", null, null);
 function __vue2_injectStyles$4(context) {
   for (let o in __cssModules$4) {
     this[o] = __cssModules$4[o];
@@ -6519,7 +6534,8 @@ var render$3 = function () {
         "init-data": _vm.initData,
         "type": item.type,
         "update-time": item.updateTime,
-        "active-item": _vm.activeItem
+        "active-item": _vm.activeItem,
+        "socket": _vm.socket
       },
       on: {
         "submitEmail": _vm.submitEmail,
@@ -6602,6 +6618,10 @@ const __vue2_script$3 = {
     activeItem: {
       type: Object,
       default: () => ({})
+    },
+    socket: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
@@ -6668,6 +6688,7 @@ const __vue2_script$3 = {
     },
     updateMessage(event) {
       this.message = event.target.value;
+      this.$emit("updateMessage");
     },
     loadMore() {
       if (this.isInit || this.loading || this.noMore) {
@@ -6734,7 +6755,7 @@ const __vue2_script$3 = {
   }
 };
 const __cssModules$3 = {};
-var __component__$3 = /* @__PURE__ */normalizeComponent(__vue2_script$3, render$3, staticRenderFns$3, false, __vue2_injectStyles$3, "3bfe1a1a", null, null);
+var __component__$3 = /* @__PURE__ */normalizeComponent(__vue2_script$3, render$3, staticRenderFns$3, false, __vue2_injectStyles$3, "b72de9f2", null, null);
 function __vue2_injectStyles$3(context) {
   for (let o in __cssModules$3) {
     this[o] = __cssModules$3[o];
@@ -6775,7 +6796,8 @@ var render$2 = function () {
       "themeColors": _vm.initData.themeColors,
       "conversations": _vm.conversations,
       "messages": _vm.messages,
-      "activeItem": _vm.activeItem
+      "activeItem": _vm.activeItem,
+      "socket": _vm.socket
     },
     on: {
       "handleRoute": _vm.handleRoute,
@@ -6786,7 +6808,8 @@ var render$2 = function () {
       "loadMore": _vm.loadMore,
       "submitEmail": _vm.submitEmail,
       "sendLeaveMessage": _vm.sendLeaveMessage,
-      "restart": _vm.restart
+      "restart": _vm.restart,
+      "updateMessage": _vm.updateMessage
     }
   })], 1);
 };
@@ -6809,6 +6832,10 @@ const __vue2_script$2 = {
     conversations: {
       type: Array,
       default: () => []
+    },
+    socket: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
@@ -6824,7 +6851,8 @@ const __vue2_script$2 = {
         chatList: [],
         roomId: ""
       },
-      salesUserStatus: ""
+      salesUserStatus: "",
+      buttonLock: false
     };
   },
   computed: {
@@ -6858,9 +6886,6 @@ const __vue2_script$2 = {
         };
       });
       return list2;
-    },
-    socket() {
-      return this.initData.socket;
     }
   },
   watch: {
@@ -6870,6 +6895,9 @@ const __vue2_script$2 = {
         this.onListenMessage();
         this.onListenEnd();
       }
+    },
+    route(newVal, oldVal) {
+      this.$emit("onChangeRoute", newVal);
     }
   },
   methods: {
@@ -6877,7 +6905,7 @@ const __vue2_script$2 = {
       this.userId = getClientId();
     },
     loginSocket() {
-      this.initData.socket.emit("login", {
+      this.socket.emit("login", {
         userId: this.userId,
         userName: this.initData.userName,
         token: getToken(),
@@ -6896,6 +6924,8 @@ const __vue2_script$2 = {
       this.historyRoute.push(route);
     },
     handleNewConversation() {
+      if (this.buttonLock) return;
+      this.buttonLock = true;
       if (getClientId()) {
         this.createNewConversation("dialog");
       } else {
@@ -6911,6 +6941,7 @@ const __vue2_script$2 = {
         siteName: this.initData.siteName
       }, () => {
         this.handleRoute("dialog");
+        this.buttonLock = false;
       });
     },
     onListenMessage() {
@@ -6955,7 +6986,7 @@ const __vue2_script$2 = {
         setClientId(res.userId);
         this.userId = res.userId;
         this.createNewConversation("dialog");
-        this.initData.socket.emit("login", {
+        this.socket.emit("login", {
           userId: this.userId,
           userName: res.userName,
           token: getToken(),
@@ -6985,11 +7016,15 @@ const __vue2_script$2 = {
         if (err.status === 401) {
           localStorage.setItem("auth._token.login", "false");
           removeClientId();
-          this.handleRoute("sign");
+          this.handleRoute("cover");
         }
+      }).finally(() => {
+        this.buttonLock = false;
       });
     },
     handleToConversation(conversation) {
+      if (this.buttonLock) return;
+      this.buttonLock = true;
       this.joinRoom(conversation.roomId);
       this.repeatOnChat(conversation.roomId);
       this.getChatList(conversation.roomId);
@@ -7022,6 +7057,7 @@ const __vue2_script$2 = {
     },
     async getChatList(roomId) {
       const query = {
+        userId: this.userId,
         roomId,
         page: this.chats.page,
         size: 20
@@ -7086,6 +7122,7 @@ const __vue2_script$2 = {
     },
     async loadMore(callback) {
       const query = {
+        userId: this.userId,
         roomId: this.onRoomId,
         page: this.chats.page,
         size: 20
@@ -7183,11 +7220,14 @@ const __vue2_script$2 = {
       }).catch(() => {
         this.salesUserStatus = "";
       });
+    },
+    updateMessage() {
+      this.$emit("updateMessage");
     }
   }
 };
 const __cssModules$2 = {};
-var __component__$2 = /* @__PURE__ */normalizeComponent(__vue2_script$2, render$2, staticRenderFns$2, false, __vue2_injectStyles$2, "d4fc1a0c", null, null);
+var __component__$2 = /* @__PURE__ */normalizeComponent(__vue2_script$2, render$2, staticRenderFns$2, false, __vue2_injectStyles$2, "28aea5c6", null, null);
 function __vue2_injectStyles$2(context) {
   for (let o in __cssModules$2) {
     this[o] = __cssModules$2[o];
@@ -7210,7 +7250,9 @@ var render$1 = function () {
       "touchstart": _vm.handleTouchStart,
       "touchend": _vm.handleTouchEnd
     }
-  });
+  }, [_vm.remindNum ? _c("div", {
+    staticClass: "consult-47this-remind-num"
+  }, [_vm._v(_vm._s(_vm.remindNum))]) : _vm._e()]);
 };
 var staticRenderFns$1 = [];
 const ConsultButton_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -7220,11 +7262,16 @@ const __vue2_script$1 = {
     themeColors: {
       type: String,
       default: "transparent"
+    },
+    remindNum: {
+      type: Number,
+      default: 0
     }
   },
   data() {
     return {
       touchStartTime: 0
+      // remindNum: 2
     };
   },
   methods: {
@@ -7246,7 +7293,7 @@ const __vue2_script$1 = {
   }
 };
 const __cssModules$1 = {};
-var __component__$1 = /* @__PURE__ */normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1, "79220e51", null, null);
+var __component__$1 = /* @__PURE__ */normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1, "3d081358", null, null);
 function __vue2_injectStyles$1(context) {
   for (let o in __cssModules$1) {
     this[o] = __cssModules$1[o];
@@ -7272,11 +7319,15 @@ var render = function () {
     attrs: {
       "init-data": _vm.initData,
       "conversations": _vm.conversations,
-      "getInitData": _vm.getInitData
+      "getInitData": _vm.getInitData,
+      "socket": _vm.socket,
+      "isSetVisitedpage": _vm.isSetVisitedpage
     },
     on: {
       "packUp": _vm.packUp,
-      "updateInitData": _vm.getInitData
+      "updateInitData": _vm.getInitData,
+      "onChangeRoute": _vm.onChangeRoute,
+      "updateMessage": _vm.updateMessage
     }
   }), _vm.showButton ? _c("ConsultButton", {
     directives: [{
@@ -7286,7 +7337,8 @@ var render = function () {
       expression: "!showView"
     }],
     attrs: {
-      "theme-colors": _vm.initData.themeColors
+      "theme-colors": _vm.initData.themeColors,
+      "remindNum": _vm.unRead
     },
     on: {
       "click": _vm.handleClick
@@ -7312,21 +7364,50 @@ const __vue2_script = {
       conversations: [],
       userId: getClientId(),
       isHandlingStorage: false,
-      onCurrentValue: false
+      onCurrentValue: false,
+      onRoute: "cover",
+      socket: null,
+      audio: null,
+      isAudioInited: false,
+      onWindowUrl: window.location.href,
+      isSetVisitedpage: true
     };
   },
+  computed: {
+    unRead() {
+      var _a2;
+      if (!this.initData.user) return 0;
+      if (!this.initData.user.room) return 0;
+      const room = this.initData.user.room;
+      const unRead = ((_a2 = room.find(item => item.topic === this.initData.siteName)) == null ? void 0 : _a2.unRead) || 0;
+      if (unRead > 99) {
+        return 99;
+      }
+      return unRead;
+    },
+    customerAudio() {
+      if (!this.initData.socketUrl) {
+        return "";
+      }
+      return `${this.initData.socketUrl}/static/audio/unread.mp3`;
+    }
+  },
   mounted() {
     this.watchLocalStorage();
-    this.setCurrentUrl();
     this.onCurrentValue = localStorage.getItem("auth._token.login");
+    document.addEventListener("touchstart", this.initAudio);
+    document.addEventListener("click", this.initAudio);
   },
   beforeDestroy() {
     window.removeEventListener("storage", this.handleStorageChange);
+    document.removeEventListener("touchstart", this.initAudio);
+    document.removeEventListener("click", this.initAudio);
     if (this.unwatchRoute) this.unwatchRoute();
   },
   watch: {
     "$route"(to, from) {
-      this.setCurrentUrl();
+      this.onWindowUrl = window.location.href;
+      this.isSetVisitedpage = true;
     }
   },
   methods: {
@@ -7352,13 +7433,19 @@ const __vue2_script = {
     },
     // 获取当前页面的URL
     setCurrentUrl() {
-      if (this.initData.socket) {
-        this.initData.socket.emit("setVisitedpage", this.userId, window.location.href, this.initData.siteName);
+      if (this.socket) {
+        this.socket.emit("setVisitedpage", this.userId, window.location.href, this.initData.siteName);
+      }
+    },
+    updateMessage() {
+      if (this.isSetVisitedpage) {
+        this.setCurrentUrl();
+        this.isSetVisitedpage = false;
       }
     },
     logOut() {
-      if (this.initData.socket) {
-        this.initData.socket.emit("logOut");
+      if (this.socket) {
+        this.socket.emit("logOut");
       }
     },
     async handleStorageChange(e) {
@@ -7383,7 +7470,7 @@ const __vue2_script = {
               this.changeRoute("cover");
               const user = await getNxcUserOrCreate({}, this.initData.socketUrl);
               this.userId = user.userId;
-              this.initData.user = user;
+              this.$set(this.initData, "user", user);
               setClientId(this.userId);
               this.conversations = [];
               this.getConversations();
@@ -7392,7 +7479,7 @@ const __vue2_script = {
               console.log("err", err);
               if (err.status === 401) {
                 this.userId = "";
-                this.initData.user = {};
+                this.$set(this.initData, "user", {});
                 this.conversations = [];
                 this.changeRoute("cover");
                 localStorage.setItem("auth._token.login", false);
@@ -7406,7 +7493,7 @@ const __vue2_script = {
           } else {
             setClientId("");
             this.userId = "";
-            this.initData.user = {};
+            this.$set(this.initData, "user", {});
             this.conversations = [];
             this.logOut();
             this.changeRoute("cover");
@@ -7419,9 +7506,30 @@ const __vue2_script = {
     },
     handleClick() {
       this.showView = true;
+      if (this.onRoute === "dialog") {
+        this.updateOpenView(true);
+        this.clearClinetUnRead();
+        if (this.$refs.consultContainer) {
+          this.$refs.consultContainer.scrollToBottom();
+        }
+      }
     },
     packUp() {
       this.showView = false;
+      this.updateOpenView(false);
+    },
+    updateOpenView(isOpenView) {
+      this.socket.emit("updateOpenView", {
+        isOpenView,
+        userId: this.userId,
+        siteName: this.initData.siteName
+      });
+    },
+    clearClinetUnRead() {
+      this.socket.emit("clearClinetUnRead", {
+        siteName: this.initData.siteName
+      });
+      this.updateUserUnRead(0);
     },
     getConversations() {
       if (!this.userId) return;
@@ -7443,8 +7551,10 @@ const __vue2_script = {
       getUser({
         userId: this.userId
       }, this.initData.socketUrl).then(res => {
-        this.initData.user = res;
-        removeVisitor(res.createTime);
+        if (res) {
+          this.$set(this.initData, "user", res);
+          removeVisitor(res.createTime);
+        }
       });
     },
     getInitData() {
@@ -7453,12 +7563,29 @@ const __vue2_script = {
       this.getConversations();
     },
     onUpdateConversations() {
-      this.initData.socket.on("updateConversations", () => {
+      this.socket.on("updateConversations", () => {
         this.getInitData();
       });
     },
+    onUpdateUserUnRead() {
+      this.socket.on("updateUserUnRead", data => {
+        this.updateUserUnRead(data);
+      });
+    },
+    updateUserUnRead(unRead) {
+      var _a2;
+      const room = ((_a2 = this.initData.user) == null ? void 0 : _a2.room) || [];
+      room.forEach(item => {
+        if (item.topic === this.initData.siteName) {
+          this.$set(item, "unRead", unRead);
+        }
+      });
+      if (unRead && unRead > 0) {
+        this.playAudio();
+      }
+    },
     joinRoom(roomId) {
-      this.initData.socket.emit("join", {
+      this.socket.emit("join", {
         userId: this.userId,
         roomId: "",
         token: getToken(),
@@ -7468,6 +7595,38 @@ const __vue2_script = {
     changeRoute(route) {
       this.$refs.consultContainer.handleRoute(route);
     },
+    onChangeRoute(route) {
+      this.onRoute = route;
+      if (route === "cover") {
+        this.updateOpenView(false);
+      }
+      if (route === "dialog") {
+        this.updateOpenView(true);
+        this.clearClinetUnRead();
+      }
+    },
+    initAudio() {
+      if (this.isAudioInited || !this.audio) return;
+      this.audio.muted = true;
+      this.audio.play().then(() => {
+        this.audio.pause();
+        this.audio.currentTime = 0;
+        this.audio.muted = false;
+        this.isAudioInited = true;
+      }).catch(error => {
+        console.error("audio play error:", error);
+      });
+    },
+    playAudio() {
+      if (this.audio) {
+        clearTimeout(this.audioTimer);
+        this.audioTimer = setTimeout(() => {
+          this.audio.pause();
+          this.audio.currentTime = 0;
+          this.audio.play();
+        }, 200);
+      }
+    },
     async init(data, callback, error) {
       if (!data) {
         error && error("data is required");
@@ -7488,8 +7647,10 @@ const __vue2_script = {
         const {
           io
         } = await Promise.resolve().then(() => _interopRequireWildcard(require("./index-6fdde059.mjs")));
-        this.$set(this.initData, "socket", io(data.socketUrl));
+        this.socket = io(data.socketUrl);
         this.onUpdateConversations();
+        this.onUpdateUserUnRead();
+        this.audio = new Audio(`${data.socketUrl}/static/audio/unread.mp3`);
         if (accessToken && accessToken !== "false") {
           this.processTokenChange({
             key: "auth._token.login",