chat-customer-47net 1.2.3 → 1.2.4

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

@@ -995,7 +995,7 @@ var render$8 = function () {
         return _vm.handleTouchEnd(e, "handleStartNewConversation");
       }
     }
-  }, [_vm._v(" Start new conversation 💬 ")]) : _vm._e()], 2)]);
+  }, [_vm._v(" Start New Conversation 💬 ")]) : _vm._e()], 2)]);
 };
 var staticRenderFns$7 = [function () {
   var _vm = this;
@@ -1098,7 +1098,7 @@ const __vue2_script$7 = {
   }
 };
 const __cssModules$7 = {};
-var __component__$7 = /* @__PURE__ */normalizeComponent(__vue2_script$7, render$8, staticRenderFns$7, false, __vue2_injectStyles$7, "e869095a", null, null);
+var __component__$7 = /* @__PURE__ */normalizeComponent(__vue2_script$7, render$8, staticRenderFns$7, false, __vue2_injectStyles$7, "3ede58da", null, null);
 function __vue2_injectStyles$7(context) {
   for (let o in __cssModules$7) {
     this[o] = __cssModules$7[o];
@@ -1284,7 +1284,7 @@ var render$6 = function () {
         return _vm.handleTouchEnd(e, "new");
       }
     }
-  }, [_vm._v(" Start new conversation 💬 ")])])]);
+  }, [_vm._v(" Start New Conversation 💬 ")])])]);
 };
 var staticRenderFns$5 = [];
 const ConsultConversations_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -1332,7 +1332,7 @@ const __vue2_script$5 = {
   }
 };
 const __cssModules$5 = {};
-var __component__$5 = /* @__PURE__ */normalizeComponent(__vue2_script$5, render$6, staticRenderFns$5, false, __vue2_injectStyles$5, "368dd12c", null, null);
+var __component__$5 = /* @__PURE__ */normalizeComponent(__vue2_script$5, render$6, staticRenderFns$5, false, __vue2_injectStyles$5, "61a191ac", null, null);
 function __vue2_injectStyles$5(context) {
   for (let o in __cssModules$5) {
     this[o] = __cssModules$5[o];
@@ -6127,7 +6127,7 @@ var render$5 = function () {
   }, [_c("b", {
     staticClass: "markdown-body",
     domProps: {
-      "innerHTML": _vm._s(_vm.markdownToHtml)
+      "innerHTML": _vm._s(_vm.displayedHtml)
     }
   }), _c("span", {
     staticClass: "time"
@@ -6148,16 +6148,30 @@ var render$5 = function () {
     on: {
       "click": _vm.handleLinkClick
     }
-  }, [_c("b", {
+  }, [_vm.chatType === "ai-thinking" ? _c("b", {
+    staticClass: "thinking-dot",
+    attrs: {
+      "aria-hidden": "true"
+    }
+  }, [_vm._v(" thinking "), _c("i", {
+    staticClass: "dot"
+  }), _c("i", {
+    staticClass: "dot"
+  }), _c("i", {
+    staticClass: "dot"
+  })]) : _c("b", {
     staticClass: "markdown-body",
     domProps: {
-      "innerHTML": _vm._s(_vm.markdownToHtml)
+      "innerHTML": _vm._s(_vm.displayedHtml)
     }
-  }), _vm.chatType === "ai" && _vm.chatAction === "human agent" ? _c("i", {
+  }), _vm.chatType === "ai" && _vm.chatAction === "human agent" && !_vm.isTyping ? _c("i", {
     staticClass: "to-human"
   }, [_c("i", {
     on: {
-      "click": _vm.changeByHumanAgent
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.changeByHumanAgent.apply(null, arguments);
+      }
     }
   }, [_vm._v("Connect with an Agent")])]) : _vm._e(), _c("span", {
     staticClass: "time"
@@ -6279,6 +6293,7 @@ var staticRenderFns$4 = [function () {
 const ConsultChatItem_vue_vue_type_style_index_0_scoped_true_lang = "";
 const ConsultChatItem_vue_vue_type_style_index_1_lang = "";
 const hexToRgb = hex => {
+  if (!hex || hex[0] !== "#") return "0, 0, 0";
   const r = parseInt(hex.slice(1, 3), 16);
   const g = parseInt(hex.slice(3, 5), 16);
   const b = parseInt(hex.slice(5, 7), 16);
@@ -6287,13 +6302,13 @@ const hexToRgb = hex => {
 const render$4 = new marked.Renderer();
 marked.setOptions({
   renderer: render$4,
-  // 这是必填项
   gfm: true,
-  pedantic: false
+  pedantic: false,
+  breaks: true,
+  sanitize: false
 });
 const __vue2_script$4 = {
   name: "ConsultChatItem",
-  components: {},
   props: {
     item: {
       type: Object,
@@ -6362,6 +6377,24 @@ const __vue2_script$4 = {
     socket: {
       type: Object,
       default: () => ({})
+    },
+    // 强制打开打字机（父组件可传）
+    stream: {
+      type: Boolean,
+      default: false
+    },
+    // 调速相关
+    typeSpeed: {
+      type: Number,
+      default: 20
+    },
+    chunk: {
+      type: Number,
+      default: 1
+    },
+    charsPerRender: {
+      type: Number,
+      default: 3
     }
   },
   data() {
@@ -6370,7 +6403,12 @@ const __vue2_script$4 = {
       email: ((_a2 = this.initData.user) == null ? void 0 : _a2.email) || "",
       clientEmail: ((_b = this.initData.user) == null ? void 0 : _b.email) || "",
       clientName: ((_c = this.initData.user) == null ? void 0 : _c.name) || "",
-      clientQuestion: ""
+      clientQuestion: "",
+      displayedHtml: "",
+      _typeController: null,
+      isTyping: false,
+      // 标记组件已挂载：只有当 _hasMounted 为 true 时，新的 message 才会触发打字机
+      _hasMounted: false
     };
   },
   computed: {
@@ -6380,30 +6418,140 @@ const __vue2_script$4 = {
     userId() {
       return getClientId();
     },
-    markdownToHtml() {
-      const text = this.message.replace(/ {2,}/g, match => " ".repeat(match.length));
-      const renderer = new marked.Renderer();
-      renderer.link = href => {
-        const currentDomain = window.location.hostname;
-        const targetDomain = new URL(href.href).hostname;
-        if (targetDomain === currentDomain) {
-          return `<a href="${href.href}" data-internal-link="true">${href.text}</a>`;
-        }
-        return `<a href="${href.href}" target="_blank" rel="noopener noreferrer">${href.text}</a>`;
-      };
-      marked.setOptions({
-        breaks: true,
-        sanitize: false,
-        renderer
-      });
-      return marked(text);
+    _shouldType() {
+      return this.stream || this.chatType === "ai" && this.userOrOther !== "user";
     }
   },
+  watch: {
+    message(newVal, oldVal) {
+      this.stopTypewriter();
+      if (this._shouldType && newVal && this._hasMounted && this.item.source === "socket") {
+        this.isTyping = true;
+        this._typeController = this.typewriterRender(newVal, {
+          speed: this.typeSpeed,
+          chunk: this.chunk,
+          charsPerRender: this.charsPerRender,
+          onUpdate: html2 => {
+            this.displayedHtml = html2;
+          },
+          onComplete: () => {
+            this.isTyping = false;
+            this.$nextTick(() => {
+              this.$emit("toBottom");
+            });
+          }
+        });
+      } else {
+        this.displayedHtml = this.renderFull(newVal || "");
+        this.isTyping = false;
+      }
+    }
+  },
+  mounted() {
+    this.displayedHtml = this.renderFull(this.message || "");
+    this.isTyping = false;
+    this.$nextTick(() => {
+      this._hasMounted = true;
+    });
+  },
+  beforeDestroy() {
+    this.stopTypewriter();
+  },
   methods: {
-    async changeByHumanAgent() {
-      if (this.activeItem.assigned) {
+    renderFull(src) {
+      const text = (src || "").replace(/ {2,}/g, match => "&nbsp;".repeat(match.length));
+      return marked(text);
+    },
+    typewriterRender(message, opts = {}) {
+      const speed = typeof opts.speed === "number" ? opts.speed : 40;
+      const chunk = Math.max(1, typeof opts.chunk === "number" ? opts.chunk : 1);
+      const charsPerRender = Math.max(1, typeof opts.charsPerRender === "number" ? opts.charsPerRender : 3);
+      const onUpdate = typeof opts.onUpdate === "function" ? opts.onUpdate : html2 => {
+        this.displayedHtml = html2;
+      };
+      const onComplete = typeof opts.onComplete === "function" ? opts.onComplete : () => {};
+      if (!message) {
+        onUpdate("");
+        onComplete();
+        return {
+          stop() {}
+        };
+      }
+      const preprocess = s => (s || "").replace(/ {2,}/g, m => "&nbsp;".repeat(m.length));
+      const src = preprocess(message);
+      const len = src.length;
+      let index = 0;
+      let stopped = false;
+      let timer = null;
+      const step = () => {
+        if (stopped) return;
+        index = Math.min(len, index + chunk);
+        if (index % charsPerRender === 0 || index === len) {
+          try {
+            const html2 = marked(src.slice(0, index));
+            onUpdate(html2);
+          } catch (err) {
+            onUpdate(marked(src));
+            stopped = true;
+            onComplete();
+            return;
+          }
+        }
+        if (index >= len) {
+          stopped = true;
+          onComplete();
+          return;
+        }
+        timer = setTimeout(step, speed);
+      };
+      timer = setTimeout(step, speed);
+      return {
+        stop() {
+          stopped = true;
+          if (timer) {
+            clearTimeout(timer);
+            timer = null;
+          }
+        }
+      };
+    },
+    stopTypewriter() {
+      if (this._typeController && typeof this._typeController.stop === "function") {
+        this._typeController.stop();
+      }
+      this._typeController = null;
+      this.isTyping = false;
+    },
+    // 点击消息：若正在打字则跳过，直接显示完整内容
+    handleLinkClick(e) {
+      if (e.target.tagName === "A") {
+        e.preventDefault();
+        const href = e.target.getAttribute("href");
+        this.handleInternalLink(href);
         return;
       }
+      if (this._typeController) {
+        this.stopTypewriter();
+        this.displayedHtml = this.renderFull(this.message || "");
+      }
+    },
+    handleInternalLink(href) {
+      try {
+        const currentDomain = window.location.hostname;
+        const targetDomain = new URL(href).hostname;
+        if (targetDomain === currentDomain) {
+          const path = new URL(href).pathname + new URL(href).search + new URL(href).hash;
+          if (this.$router) this.$router.push(path);else window.location.href = href;
+        } else {
+          window.open(href, "_blank");
+        }
+      } catch (err) {
+        window.open(href, "_blank");
+      }
+    },
+    async changeByHumanAgent() {
+      var _a2;
+      if ((_a2 = this.activeItem) == null ? void 0 : _a2.assigned) return;
       this.$emit("changeTopToast", "Searching for agent");
       try {
         await updateRoomByHumanAgent({
@@ -6430,7 +6578,7 @@ const __vue2_script$4 = {
         }
         return;
       }
-      if (this.email && !this.email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
+      if (this.email && !this.email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
         if (this.$sweetalert) {
           this.$sweetalert.insert({
             title: "Something went wrong",
@@ -6462,7 +6610,7 @@ const __vue2_script$4 = {
         }
         return;
       }
-      if (this.clientEmail && !this.clientEmail.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
+      if (this.clientEmail && !this.clientEmail.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
         if (this.$sweetalert) {
           this.$sweetalert.insert({
             title: "Something went wrong",
@@ -6507,32 +6655,11 @@ const __vue2_script$4 = {
         question: this.clientQuestion,
         updateTime: this.updateTime
       });
-    },
-    handleLinkClick(e) {
-      if (e.target.tagName === "A") {
-        e.preventDefault();
-        const href = e.target.getAttribute("href");
-        this.handleInternalLink(href);
-      }
-    },
-    handleInternalLink(href) {
-      const currentDomain = window.location.hostname;
-      const targetDomain = new URL(href).hostname;
-      if (targetDomain === currentDomain) {
-        const path = new URL(href).pathname + new URL(href).search + new URL(href).hash;
-        if (this.$router) {
-          this.$router.push(path);
-        } else {
-          window.location.href = href;
-        }
-      } else {
-        window.open(href, "_blank");
-      }
     }
   }
 };
 const __cssModules$4 = {};
-var __component__$4 = /* @__PURE__ */normalizeComponent(__vue2_script$4, render$5, staticRenderFns$4, false, __vue2_injectStyles$4, "5f248ee8", null, null);
+var __component__$4 = /* @__PURE__ */normalizeComponent(__vue2_script$4, render$5, staticRenderFns$4, false, __vue2_injectStyles$4, "c56244c0", null, null);
 function __vue2_injectStyles$4(context) {
   for (let o in __cssModules$4) {
     this[o] = __cssModules$4[o];
@@ -6588,7 +6715,8 @@ var render$3 = function () {
       on: {
         "submitEmail": _vm.submitEmail,
         "sendLeaveMessage": _vm.sendLeaveMessage,
-        "changeTopToast": _vm.changeTopToast
+        "changeTopToast": _vm.changeTopToast,
+        "toBottom": _vm.scrollToBottom
       }
     });
   }), 1)], 1), _vm.activeItem.status === "3" ? _c("div", {
@@ -6803,7 +6931,7 @@ const __vue2_script$3 = {
   }
 };
 const __cssModules$3 = {};
-var __component__$3 = /* @__PURE__ */normalizeComponent(__vue2_script$3, render$3, staticRenderFns$3, false, __vue2_injectStyles$3, "b72de9f2", null, null);
+var __component__$3 = /* @__PURE__ */normalizeComponent(__vue2_script$3, render$3, staticRenderFns$3, false, __vue2_injectStyles$3, "07011d53", null, null);
 function __vue2_injectStyles$3(context) {
   for (let o in __cssModules$3) {
     this[o] = __cssModules$3[o];
@@ -6930,7 +7058,8 @@ const __vue2_script$2 = {
           avatar: item.avatar || "",
           time: chatShowDateTime(item.updateTime),
           updateTime: item.updateTime,
-          type: item.type || 1
+          type: item.type || 1,
+          source: item.source || ""
         };
       });
       return list2;
@@ -6995,7 +7124,7 @@ const __vue2_script$2 = {
     onListenMessage() {
       this.socket.on("message", message => {
         if (message.roomId === this.onRoomId) {
-          this.pushChat(message);
+          this.pushChat(message, "socket");
           this.scrollToBottom();
           if (message.type === 7 && this.$refs.dialogComponent) {
             this.$refs.dialogComponent.changePauseConversation(true);
@@ -7120,7 +7249,7 @@ const __vue2_script$2 = {
     logOut() {
       this.socket.emit("logOut");
     },
-    pushChat(data) {
+    pushChat(data, source) {
       const {
         userId,
         message,
@@ -7132,14 +7261,18 @@ const __vue2_script$2 = {
         type
       } = data;
       if (data.chatType === "ai") {
-        const onThinking = this.chats.chatList.find(item => item.chatType === "ai-thinking" && item.thinkingCode === data.thinkingCode);
-        if (onThinking) {
-          const index = this.chats.chatList.indexOf(onThinking);
-          this.chats.chatList.splice(index, 1, {
+        const thinkingIndex = this.chats.chatList.findIndex(item => item.chatType === "ai-thinking" && item.thinkingCode === data.thinkingCode);
+        const waitingIndex = this.chats.chatList.findIndex(item => item.chatType === "ai-thinking-waiting" && item.thinkingCode === data.thinkingCode);
+        if (thinkingIndex !== -1) {
+          const exist = this.chats.chatList[thinkingIndex];
+          this.chats.chatList.splice(thinkingIndex, 1, {
             ...data,
-            updateTime: onThinking.updateTime
-            // 保留原时间戳
+            updateTime: exist.updateTime,
+            source: source || ""
           });
+          if (waitingIndex !== -1 && waitingIndex !== thinkingIndex) {
+            this.chats.chatList.splice(waitingIndex, 1);
+          }
           return;
         }
       }
@@ -7153,7 +7286,8 @@ const __vue2_script$2 = {
         chatAction,
         roomId,
         thinkingCode: data.thinkingCode || "",
-        type
+        type,
+        source: source || ""
       });
     },
     handleSend(message) {
@@ -7274,7 +7408,7 @@ const __vue2_script$2 = {
   }
 };
 const __cssModules$2 = {};
-var __component__$2 = /* @__PURE__ */normalizeComponent(__vue2_script$2, render$2, staticRenderFns$2, false, __vue2_injectStyles$2, "8ac5416e", null, null);
+var __component__$2 = /* @__PURE__ */normalizeComponent(__vue2_script$2, render$2, staticRenderFns$2, false, __vue2_injectStyles$2, "253fc2e7", null, null);
 function __vue2_injectStyles$2(context) {
   for (let o in __cssModules$2) {
     this[o] = __cssModules$2[o];
@@ -7646,8 +7780,10 @@ const __vue2_script = {
         this.updateOpenView(false);
       }
       if (route === "dialog") {
-        this.updateOpenView(true);
-        this.clearClinetUnRead();
+        setTimeout(() => {
+          this.updateOpenView(true);
+          this.clearClinetUnRead();
+        }, 300);
       }
     },
     initAudio() {