@enegelai/bot-widget 1.11.1 → 1.12.1

package/dist/index.es.js

@@ -1,10 +1,10 @@
 var ja = Object.defineProperty;
 var Ha = (c, e, a) => e in c ? ja(c, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : c[e] = a;
 var ge = (c, e, a) => Ha(c, typeof e != "symbol" ? e + "" : e, a);
-import { css as X, LitElement as ut, html as g, svg as be } from "lit";
+import { css as X, LitElement as ut, html as g, svg as le } from "lit";
 import { property as v, customElement as J, queryAll as Qt, query as ke, eventOptions as Mt } from "lit/decorators.js";
 import { unsafeHTML as W } from "lit-html/directives/unsafe-html.js";
-import { when as ee } from "lit/directives/when.js";
+import { when as ie } from "lit/directives/when.js";
 import { registerIconLibrary as Ba } from "@shoelace-style/shoelace";
 import "@shoelace-style/shoelace/dist/components/button/button.js";
 import "@shoelace-style/shoelace/dist/components/avatar/avatar.js";
@@ -800,7 +800,7 @@ var dc = Object.defineProperty, O = (c, e, a, n) => {
 };
 const A = Ke.noConflict();
 A.setLevel("info");
-const te = "cb_";
+const ee = "cb_";
 class L extends kt {
   constructor() {
     super(...arguments), this.actionIdCounter = 0, this.prefilledFormValues = {}, this.wsClient = null, this.replyMessage = null, this.streamingResponseInProgress = !1, this.streamingResponseLastText = null, this.streamingResponseBuffer = null, this.streamingResponseTagStartPos = 0, this.streamingResponseCurrentTag = null;
@@ -938,7 +938,7 @@ class L extends kt {
       A.info("form has no fields", e);
       return;
     }
-    const r = `${te}${this.setting.botId}.${this.conversationId}.form.${n}`, f = localStorage.getItem(r);
+    const r = `${ee}${this.setting.botId}.${this.conversationId}.form.${n}`, f = localStorage.getItem(r);
     if (f) {
       let w = null;
       try {
@@ -1016,22 +1016,34 @@ class L extends kt {
     if ((e == null ? void 0 : e.type) !== "ack")
       switch (this.lastConversationUpdate = Date.now(), e == null ? void 0 : e.type) {
         case "message": {
-          if (this.replyMessage)
-            this.streamingResponseInProgress ? (this.finishStreamingResponse(e.text), this.streamingResponseInProgress = !1) : (this.replyMessage.data.text = e.text, this.updateMessage(this.replyMessage, "")), this.replyMessage = null;
-          else {
+          if ((e == null ? void 0 : e.author) === "user") {
             const n = {
               id: (e == null ? void 0 : e.id) || null,
               type: "text",
-              author: "assistant",
+              author: "user",
               data: {
                 text: e.text
               }
             };
-            "userName" in e && (n.data.userName = e.userName), "userAvatar" in e && (n.data.userAvatar = e.userAvatar);
-            const s = this.formatMessage(n);
-            this.messages = this.messages.concat([s]);
+            this.replyMessage ? this.insertMessage(n, -1) : this.addMessage(n);
+          } else {
+            if (this.replyMessage)
+              this.streamingResponseInProgress ? (this.finishStreamingResponse(e.text), this.streamingResponseInProgress = !1) : (this.replyMessage.data.text = e.text, this.updateMessage(this.replyMessage, "")), this.replyMessage = null;
+            else {
+              const n = {
+                id: (e == null ? void 0 : e.id) || null,
+                type: "text",
+                author: "assistant",
+                data: {
+                  text: e.text
+                }
+              };
+              "userName" in e && (n.data.userName = e.userName), "userAvatar" in e && (n.data.userAvatar = e.userAvatar);
+              const s = this.formatMessage(n);
+              this.messages = this.messages.concat([s]);
+            }
+            this.open || (this.unreadMessages++, this.playAudioNotification());
           }
-          this.open || (this.unreadMessages++, this.playAudioNotification());
           break;
         }
         case "message-chunk": {
@@ -1200,6 +1212,10 @@ class L extends kt {
   addMessage(e) {
     e = this.formatMessage(e), this.messages = this.messages.concat([e]);
   }
+  // insert message
+  insertMessage(e, a = -1) {
+    e = this.formatMessage(e), this.messages.length === 0 ? this.messages = [e] : this.messages = [...this.messages.slice(0, -1), e, ...this.messages.slice(-1)];
+  }
   addSystemMessage(e) {
     this.addMessage({
       type: "text",
@@ -1228,7 +1244,7 @@ class L extends kt {
       A.info("submitForm: No form is active - ignored");
       return;
     }
-    const a = `${te}${this.setting.botId}.${this.conversationId}.form.${this.form.name}`;
+    const a = `${ee}${this.setting.botId}.${this.conversationId}.form.${this.form.name}`;
     await this.sendFormData(this.form.name, e), localStorage.setItem(a, JSON.stringify(e)), "name" in e && (this.feedbackName = e.name), "email" in e && (this.feedbackEmail = e.email), this.form = null;
   }
   async sendFormData(e, a) {
@@ -1333,42 +1349,42 @@ class L extends kt {
   }
 }
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ value: "en" })
 ], L.prototype, "language");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ value: "light" })
 ], L.prototype, "theme");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ type: Boolean, value: !1 })
 ], L.prototype, "open");
 O([
   q({ type: Boolean, value: !1 })
 ], L.prototype, "alwaysOpen");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ value: "false" })
 ], L.prototype, "connectWs");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ value: xe() })
 ], L.prototype, "conversationId");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ value: 0 })
 ], L.prototype, "lastConversationUpdate");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ type: Array, value: [] })
 ], L.prototype, "messages");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ value: 0 })
 ], L.prototype, "unreadMessages");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({
     type: Array,
     value: []
@@ -1434,14 +1450,14 @@ O([
   q({ type: Boolean, value: !1 })
 ], L.prototype, "connected");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ value: "true" })
 ], L.prototype, "shouldEngage");
 O([
   q({ type: Boolean, value: !1 })
 ], L.prototype, "engage");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({
     type: Object,
     value: {
@@ -1457,7 +1473,7 @@ O([
   })
 ], L.prototype, "setting");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ type: Object, value: null })
 ], L.prototype, "context");
 O([
@@ -1491,11 +1507,11 @@ O([
   q({ type: Array, value: [] })
 ], L.prototype, "feedbackMessages");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ type: String, value: "" })
 ], L.prototype, "feedbackName");
 O([
-  oe({ prefix: te }),
+  oe({ prefix: ee }),
   q({ type: String, value: "" })
 ], L.prototype, "feedbackEmail");
 const p = new L(), fc = X`
@@ -1581,7 +1597,7 @@ var lc = Object.defineProperty, bc = (c, e, a, n) => {
 Ba("system", {
   resolver: (c) => ""
 });
-class ae extends ut {
+class te extends ut {
   constructor() {
     super(...arguments), this.lang = "en";
   }
@@ -1598,14 +1614,14 @@ class ae extends ut {
 }
 bc([
   v({ type: String })
-], ae.prototype, "lang");
+], te.prototype, "lang");
 var hc = Object.defineProperty, uc = Object.getOwnPropertyDescriptor, na = (c, e, a, n) => {
   for (var s = n > 1 ? void 0 : n ? uc(e, a) : e, r = c.length - 1, f; r >= 0; r--)
     (f = c[r]) && (s = (n ? f(e, a, s) : f(s)) || s);
   return n && s && hc(e, a, s), s;
 };
 const pc = '<svg viewBox="0 0 16 16" width="16px" height="16px"><path fill="currentColor" d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"></path></svg>';
-let ot = class extends ae {
+let ot = class extends te {
   constructor() {
     super(...arguments), this.title = "ChatBot";
   }
@@ -1616,13 +1632,13 @@ let ot = class extends ae {
   */
   renderExp() {
     return g` <header class="cb-header" part="header">
-      ${ee(
+      ${ie(
       p.setting.logoUrl !== "",
       () => g`<img class="cb-header-logo" part="header-logo" src="${p.setting.logoUrl}" />`,
       () => g`<div class="cb-header-logo" part="header-logo">${W(p.setting.logoSvg)}</div>`
     )}
       <div class="cb-header-title" part="header-title">${this.title}</div>
-      ${ee(
+      ${ie(
       p.alwaysOpen,
       () => g``,
       () => g`<div class="cb-header-close" part="header-close">${W(pc)}</div>`
@@ -1631,13 +1647,13 @@ let ot = class extends ae {
   }
   render() {
     return g` <header class="cb-header" part="header">
-      ${ee(
+      ${ie(
       p.setting.logoUrl !== "",
       () => g`<img class="cb-header-img" part="header-logo" src="${p.setting.logoUrl}" />`,
       () => g`<div class="cb-header-logo" part="header-logo">${W(p.setting.logoSvg)}</div>`
     )}
       <div class="cb-header-title" part="header-title">${this.title}</div>
-      ${ee(
+      ${ie(
       p.alwaysOpen,
       () => g`<div></div>`,
       () => g`<div @click=${this._clickCloseHandler} class="cb-header-close" part="header-close">${W(p.setting.closeSvg)}</div>`
@@ -1694,7 +1710,7 @@ var mc = Object.defineProperty, yc = Object.getOwnPropertyDescriptor, vc = (c, e
     (f = c[r]) && (s = (n ? f(e, a, s) : f(s)) || s);
   return n && s && mc(e, a, s), s;
 };
-let Ct = class extends ae {
+let Ct = class extends te {
   constructor() {
     super(...arguments), this.year = (/* @__PURE__ */ new Date()).getFullYear();
   }
@@ -2446,7 +2462,7 @@ var sa = { exports: {} };
         typeof o == "function" && o.apply(this.el, arguments);
       }
     } }]);
-    function ce(t, i) {
+    function ae(t, i) {
       var o = new Ma(t);
       return o.add(i), o;
     }
@@ -2454,7 +2470,7 @@ var sa = { exports: {} };
       s(this, t), this.element = typeof i == "string" ? document.querySelector(i) : i, this.start = this.start.bind(this), this.move = this.move.bind(this), this.end = this.end.bind(this), this.cancel = this.cancel.bind(this), this.element.addEventListener("touchstart", this.start, !1), this.element.addEventListener("touchmove", this.move, !1), this.element.addEventListener("touchend", this.end, !1), this.element.addEventListener("touchcancel", this.cancel, !1), this.preV = { x: null, y: null }, this.pinchStartLen = null, this.zoom = 1, this.isDoubleTap = !1;
       var d = function() {
       };
-      this.rotate = ce(this.element, o.rotate || d), this.touchStart = ce(this.element, o.touchStart || d), this.multipointStart = ce(this.element, o.multipointStart || d), this.multipointEnd = ce(this.element, o.multipointEnd || d), this.pinch = ce(this.element, o.pinch || d), this.swipe = ce(this.element, o.swipe || d), this.tap = ce(this.element, o.tap || d), this.doubleTap = ce(this.element, o.doubleTap || d), this.longTap = ce(this.element, o.longTap || d), this.singleTap = ce(this.element, o.singleTap || d), this.pressMove = ce(this.element, o.pressMove || d), this.twoFingerPressMove = ce(this.element, o.twoFingerPressMove || d), this.touchMove = ce(this.element, o.touchMove || d), this.touchEnd = ce(this.element, o.touchEnd || d), this.touchCancel = ce(this.element, o.touchCancel || d), this.translateContainer = this.element, this._cancelAllHandler = this.cancelAll.bind(this), window.addEventListener("scroll", this._cancelAllHandler), this.delta = null, this.last = null, this.now = null, this.tapTimeout = null, this.singleTapTimeout = null, this.longTapTimeout = null, this.swipeTimeout = null, this.x1 = this.x2 = this.y1 = this.y2 = null, this.preTapPosition = { x: null, y: null };
+      this.rotate = ae(this.element, o.rotate || d), this.touchStart = ae(this.element, o.touchStart || d), this.multipointStart = ae(this.element, o.multipointStart || d), this.multipointEnd = ae(this.element, o.multipointEnd || d), this.pinch = ae(this.element, o.pinch || d), this.swipe = ae(this.element, o.swipe || d), this.tap = ae(this.element, o.tap || d), this.doubleTap = ae(this.element, o.doubleTap || d), this.longTap = ae(this.element, o.longTap || d), this.singleTap = ae(this.element, o.singleTap || d), this.pressMove = ae(this.element, o.pressMove || d), this.twoFingerPressMove = ae(this.element, o.twoFingerPressMove || d), this.touchMove = ae(this.element, o.touchMove || d), this.touchEnd = ae(this.element, o.touchEnd || d), this.touchCancel = ae(this.element, o.touchCancel || d), this.translateContainer = this.element, this._cancelAllHandler = this.cancelAll.bind(this), window.addEventListener("scroll", this._cancelAllHandler), this.delta = null, this.last = null, this.now = null, this.tapTimeout = null, this.singleTapTimeout = null, this.longTapTimeout = null, this.swipeTimeout = null, this.x1 = this.x2 = this.y1 = this.y2 = null, this.preTapPosition = { x: null, y: null };
     }, [{ key: "start", value: function(t) {
       if (t.touches) if (t.target && t.target.nodeName && ["a", "button", "input"].indexOf(t.target.nodeName.toLowerCase()) >= 0) console.log("ignore drag for this touched element", t.target.nodeName.toLowerCase());
       else {
@@ -2533,8 +2549,8 @@ var sa = { exports: {} };
       }, touchMove: function(B) {
         if (u && (Oe = B.targetTouches[0], !I && !U)) {
           if (d && d.offsetHeight > b) {
-            var ie = pe.pageX - Oe.pageX;
-            if (Math.abs(ie) <= 13) return !1;
+            var ce = pe.pageX - Oe.pageX;
+            if (Math.abs(ce) <= 13) return !1;
           }
           k = !0;
           var $e, it = B.targetTouches[0].clientX, Oa = B.targetTouches[0].clientY, Pa = Rt - it, za = Vt - Oa;
@@ -2544,8 +2560,8 @@ var sa = { exports: {} };
       }, touchEnd: function() {
         if (u) {
           if (k = !1, U || I) return G = fe, void (_e = de);
-          var B = Math.abs(parseInt(Re)), ie = Math.abs(parseInt(ue));
-          if (!(B > 29 && x)) return B < 29 && ie < 25 ? (T(ct, "greset"), ct.style.opacity = 1, yt(m)) : void 0;
+          var B = Math.abs(parseInt(Re)), ce = Math.abs(parseInt(ue));
+          if (!(B > 29 && x)) return B < 29 && ce < 25 ? (T(ct, "greset"), ct.style.opacity = 1, yt(m)) : void 0;
           t.close();
         }
       }, multipointEnd: function() {
@@ -2557,14 +2573,14 @@ var sa = { exports: {} };
       }, pinch: function(B) {
         if (!x || k) return !1;
         I = !0, x.scaleX = x.scaleY = M * B.zoom;
-        var ie = M * B.zoom;
-        if (U = !0, ie <= 1) return U = !1, ie = 1, _e = null, G = null, fe = null, de = null, void x.setAttribute("style", "");
-        ie > 4.5 && (ie = 4.5), x.style.transform = "scale3d(".concat(ie, ", ").concat(ie, ", 1)"), E = ie;
+        var ce = M * B.zoom;
+        if (U = !0, ce <= 1) return U = !1, ce = 1, _e = null, G = null, fe = null, de = null, void x.setAttribute("style", "");
+        ce > 4.5 && (ce = 4.5), x.style.transform = "scale3d(".concat(ce, ", ").concat(ce, ", 1)"), E = ce;
       }, pressMove: function(B) {
         if (U && !I) {
-          var ie = Oe.pageX - pe.pageX, $e = Oe.pageY - pe.pageY;
-          G && (ie += G), _e && ($e += _e), fe = ie, de = $e;
-          var it = "translate3d(".concat(ie, "px, ").concat($e, "px, 0)");
+          var ce = Oe.pageX - pe.pageX, $e = Oe.pageY - pe.pageY;
+          G && (ce += G), _e && ($e += _e), fe = ce, de = $e;
+          var it = "translate3d(".concat(ce, "px, ").concat($e, "px, 0)");
           E && (it += " scale3d(".concat(E, ", ").concat(E, ", 1)")), C(x, it);
         }
       }, swipe: function(B) {
@@ -2959,7 +2975,7 @@ var $c = Object.defineProperty, Mc = Object.getOwnPropertyDescriptor, oa = (c, e
     (f = c[r]) && (s = (n ? f(e, a, s) : f(s)) || s);
   return n && s && $c(e, a, s), s;
 };
-let rt = class extends ae {
+let rt = class extends te {
   constructor() {
     super(...arguments), this.files = [];
   }
@@ -3094,7 +3110,7 @@ const Nt = {
   doc: zc,
   docx: jc
 };
-let Je = class extends ae {
+let Je = class extends te {
   constructor() {
     super(...arguments), this.filename = "", this.url = "";
   }
@@ -4609,7 +4625,7 @@ var Nc = Object.defineProperty, Uc = Object.getOwnPropertyDescriptor, Ne = (c, e
     (f = c[r]) && (s = (n ? f(e, a, s) : f(s)) || s);
   return n && s && Nc(e, a, s), s;
 };
-let Te = class extends ae {
+let Te = class extends te {
   constructor() {
     super(...arguments), this.store = new pt(this, p), this.type = "assistant", this.suppressFeedback = !1, this.lightbox = kc({
       touchNavigation: !0,
@@ -4692,12 +4708,12 @@ let Te = class extends ae {
     });
   }
   render() {
-    return ee(
+    return ie(
       this.message.data || this.message.isThinking,
       () => g`
         <div class="cb-message-row" part="bot-message">
           <!-- message -->
-          ${ee(
+          ${ie(
         this._isBot,
         () => this.renderBotMessage(this.message),
         () => this.renderUserMessage(this.message)
@@ -4730,12 +4746,12 @@ let Te = class extends ae {
     `;
   }
   async _getMessageText(c) {
-    return this._isBot ? Yt(c.data.text) : c.data.text;
+    return Yt(c.data.text);
   }
   renderMessageContent(c) {
     var e;
     return c.isThinking ? g`<cb-thinking></cb-thinking>` : c.isUploading ? g`<cb-uploading .files="${c.data.files || []}"></cb-uploading>` : c.type === "text" ? g`<div class="cb-message-text">
-        ${ee(
+        ${ie(
       c.data.userName,
       () => g`<div class="assistant-message-user-name">${c.data.userName}</div>`,
       () => null
@@ -4771,9 +4787,9 @@ let Te = class extends ae {
     var e;
     if (c.data.userName && c.data.userName !== "") {
       const a = ((e = c.data) == null ? void 0 : e.userAvatar) || "";
-      return a !== "" ? g` <img src="${a}" style="width: 24px;height: 24px;" /> ` : be`${W(p.setting.agentIconSvg)}`;
+      return a !== "" ? g` <img src="${a}" style="width: 24px;height: 24px;" /> ` : le`${W(p.setting.agentIconSvg)}`;
     }
-    return c.author === "system" ? be`${W(p.setting.systemIconSvg)}` : be`${W(p.setting.botIconSvg)}`;
+    return c.author === "system" ? le`${W(p.setting.systemIconSvg)}` : le`${W(p.setting.botIconSvg)}`;
   }
   renderBotMessage(c) {
     return g`
@@ -4787,8 +4803,8 @@ let Te = class extends ae {
   renderBotMessageFeedback(c) {
     return this.suppressFeedback || !p.setting.feedbackEnabled ? null : g`
       <div class="cb-message-feedback-tools">
-        <div class="cb-message-feedback-icon cb-feedback-up" @click="${() => this.startFeedback(!0, c)}">${be`${W(ra)}`}</div>
-        <div class="cb-message-feedback-icon cb-feedback-down" @click="${() => this.startFeedback(!1, c)}">${be`${W(da)}`}</div>
+        <div class="cb-message-feedback-icon cb-feedback-up" @click="${() => this.startFeedback(!0, c)}">${le`${W(ra)}`}</div>
+        <div class="cb-message-feedback-icon cb-feedback-down" @click="${() => this.startFeedback(!1, c)}">${le`${W(da)}`}</div>
       </div>
     `;
   }
@@ -4802,7 +4818,7 @@ let Te = class extends ae {
           <cb-icon slot="icon" svg="${Ut}" color="white"></cb-icon>
           //appState.appearanceUserMessageAvatarPosition
         </sl-avatar>-->
-        ${ee(
+        ${ie(
       p.appearanceUserMessageAvatarPosition === "left",
       () => g`
             <div class="avatar user-avatar">${W(p.setting.userIconSvg)}</div>
@@ -4825,7 +4841,7 @@ let Te = class extends ae {
           <cb-icon slot="icon" svg="${Ut}" color="white"></cb-icon>
           //appState.appearanceUserMessageAvatarPosition
         </sl-avatar>-->
-        ${ee(
+        ${ie(
       p.appearanceUserMessageAvatarPosition === "left",
       () => g`
             <div class="avatar user-avatar">${W(p.setting.userIconSvg)}</div>
@@ -4866,7 +4882,7 @@ var Wc = Object.defineProperty, Yc = Object.getOwnPropertyDescriptor, ye = (c, e
 };
 const we = Ke.noConflict();
 we.setLevel("info");
-let le = class extends ae {
+let be = class extends te {
   constructor() {
     super(...arguments), this.messages = [], this.actions = [], this.form = null, this.suppressFeedback = !1, this.calendlyInjected = !1, this.activeCalendlyAction = -1, this.hubspotMeetingInjected = !1, this.activeHubspotMeetingAction = -1;
   }
@@ -4936,7 +4952,7 @@ let le = class extends ae {
             return a || n[0], g`<div class="cb-form-field">
                 <label class="cb-form-field-label"
                   >${c.title}
-                  ${ee(
+                  ${ie(
               e,
               () => g`*`,
               () => g``
@@ -5144,37 +5160,37 @@ let le = class extends ae {
     `;
   }
 };
-le.styles = wc;
+be.styles = wc;
 ye([
   v({ type: Array })
-], le.prototype, "messages", 2);
+], be.prototype, "messages", 2);
 ye([
   v({ type: Array })
-], le.prototype, "actions", 2);
+], be.prototype, "actions", 2);
 ye([
   v({ type: Object })
-], le.prototype, "form", 2);
+], be.prototype, "form", 2);
 ye([
   v({ type: Boolean })
-], le.prototype, "suppressFeedback", 2);
+], be.prototype, "suppressFeedback", 2);
 ye([
   ke("#cb-message-list-bottom-anchor")
-], le.prototype, "_messageListBottomAnchor", 2);
+], be.prototype, "_messageListBottomAnchor", 2);
 ye([
   ke(".cb-input-form")
-], le.prototype, "_inputForm", 2);
+], be.prototype, "_inputForm", 2);
 ye([
   Mt({ capture: !1, passive: !0 })
-], le.prototype, "invokeLinkAction", 1);
+], be.prototype, "invokeLinkAction", 1);
 ye([
   Mt({ capture: !1, passive: !0 })
-], le.prototype, "invokeCalendlyAction", 1);
+], be.prototype, "invokeCalendlyAction", 1);
 ye([
   Mt({ capture: !1, passive: !0 })
-], le.prototype, "invokeHubspotMeetingAction", 1);
-le = ye([
+], be.prototype, "invokeHubspotMeetingAction", 1);
+be = ye([
   J("cb-message-list")
-], le);
+], be);
 const Xc = X`
   ${me}
 
@@ -5223,7 +5239,7 @@ var Jc = Object.defineProperty, Kc = Object.getOwnPropertyDescriptor, Ce = (c, e
     (f = c[r]) && (s = (n ? f(e, a, s) : f(s)) || s);
   return n && s && Jc(e, a, s), s;
 };
-let he = class extends ae {
+let he = class extends te {
   constructor() {
     super(...arguments), this.placeholder = "Type a message...", this.sendButtonLabel = "Send", this.enableFileUpload = !1, this.value = "", this.loading = !1, this.disabled = !1, this.currentKey = "";
   }
@@ -5268,7 +5284,7 @@ let he = class extends ae {
   }
   render() {
     return g`
-      ${ee(
+      ${ie(
       this.loading,
       () => g`<sl-progress-bar style="--height: 2px;" indeterminate></sl-progress-bar>`,
       () => g``
@@ -5294,7 +5310,7 @@ let he = class extends ae {
           <sl-button @click=${this._sendHandler} name="send" label="Send" size="small" class="send-button" variant="text" ?disabled=${this.value.length === 0} ?loading=${this.loading} circle>
             <cb-icon svg="${Gc}"></cb-icon>
           </sl-button>
-          ${ee(
+          ${ie(
       this.enableFileUpload,
       () => g`
               <sl-button @click=${this._sendFileHandler} name="paperclip" label="Attachment" size="small" class="paperclip-button" variant="text" circle>
@@ -5381,7 +5397,7 @@ var ei = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, gt = (c, e
     (f = c[r]) && (s = (n ? f(e, a, s) : f(s)) || s);
   return n && s && ei(e, a, s), s;
 };
-let Fe = class extends ae {
+let Fe = class extends te {
   constructor() {
     super(...arguments), this.open = !1, this.label = "Dialog", this.zindex = 100;
   }
@@ -5443,7 +5459,7 @@ var ai = Object.defineProperty, ci = Object.getOwnPropertyDescriptor, la = (c, e
     (f = c[r]) && (s = (n ? f(e, a, s) : f(s)) || s);
   return n && s && ai(e, a, s), s;
 };
-let dt = class extends ae {
+let dt = class extends te {
   constructor() {
     super(...arguments), this.open = !1;
   }
@@ -5556,7 +5572,7 @@ var ni = Object.defineProperty, si = Object.getOwnPropertyDescriptor, Ue = (c, e
     (f = c[r]) && (s = (n ? f(e, a, s) : f(s)) || s);
   return n && s && ni(e, a, s), s;
 };
-let Ee = class extends ae {
+let Ee = class extends te {
   constructor() {
     super(...arguments), this.open = !1, this.clearMessageDialogOpen = !1, this.customRequest = !1;
   }
@@ -5589,7 +5605,7 @@ let Ee = class extends ae {
                             Enable it for your own backend.
                         </sl-switch>
                     </div> -->
-          ${ee(
+          ${ie(
       this.customRequest,
       () => null,
       () => this.renderInternalServices()
@@ -5814,7 +5830,7 @@ var ri = Object.defineProperty, di = Object.getOwnPropertyDescriptor, ba = (c, e
     (f = c[r]) && (s = (n ? f(e, a, s) : f(s)) || s);
   return n && s && ri(e, a, s), s;
 };
-let ft = class extends ae {
+let ft = class extends te {
   constructor() {
     super(...arguments), this.store = new pt(this, p), this.open = !1;
   }
@@ -5845,31 +5861,29 @@ let ft = class extends ae {
     let c = "danger";
     return c = p.appearanceAnchorBadgeVariant, c;
   }
+  renderPopupLogo() {
+    return p.setting.popupLogoUrl !== "" ? g`<img class="cb-engage-popup-img" src="${p.setting.popupLogoUrl}" />` : p.setting.popupLogoSvg !== "" ? g`<div class="cb-engage-popup-logo">${le`${W(p.setting.popupLogoSvg)}`}</div>` : p.setting.logoUrl !== "" ? g`<img class="cb-engage-popup-img" src="${p.setting.logoUrl}" />` : p.setting.logoSvg !== "" ? g`<div class="cb-engage-popup-logo">${le`${W(p.setting.logoSvg)}`}</div>` : null;
+  }
   render() {
     return g`
       <div class="cb-anchor ${this.open ? "open" : ""}" part="anchor" @click=${this._clickHandler.bind(this)}>
         <sl-popup placement="${this.getPopupPlacement()}" distance="16" ?active="${p.engage && !p.open}">
           <sl-button slot="anchor" label="Start" size="large" variant="primary" class="anchor-button" circle>
-            ${ee(
+            ${ie(
       this.open,
-      () => g`<div class="cb-anchor-icon" part="anchor-icon">${be`${W(p.setting.anchorCloseSvg)}`}</div>`,
-      () => g`<div class="cb-anchor-icon" part="anchor-icon">${be`${W(p.setting.anchorOpenSvg)}`}</div>`
+      () => g`<div class="cb-anchor-icon" part="anchor-icon">${le`${W(p.setting.anchorCloseSvg)}`}</div>`,
+      () => g`<div class="cb-anchor-icon" part="anchor-icon">${le`${W(p.setting.anchorOpenSvg)}`}</div>`
     )}
-            ${ee(
+            ${ie(
       !this.open && p.unreadMessages > 0,
       () => g`<sl-badge part="anchor-badge" class="cb-anchor-badge" variant="${this.getBadgeVariant()}" pill>${p.unreadMessages}</sl-badge>`,
       () => null
     )}
           </sl-button>
           <div class="cb-engage-popup">
-            <div class="cb-engage-popup-close" @click=${this._engageClickHandler.bind(this)}>${be`${W(fa)}`}</div>
+            <div class="cb-engage-popup-close" @click=${this._engageClickHandler.bind(this)}>${le`${W(fa)}`}</div>
             <div class="cb-engage-popup-content">
-              ${ee(
-      p.setting.logoUrl !== "",
-      () => g`<img class="cb-engage-popup-img" src="${p.setting.logoUrl}" />`,
-      () => g`<div class="cb-engage-popup-logo">${be`${W(p.setting.logoSvg)}`}</div>`
-    )}
-              <!--<cb-icon class="cb-engage-popup-logo" svg="${p.setting.logoSvg}"></cb-icon>-->
+              ${this.renderPopupLogo()}
               <div>${p.setting.engageMessage}</div>
             </div>
           </div>
@@ -5915,7 +5929,7 @@ const Gt = {
     icon: hi
   }
 };
-let lt = class extends ae {
+let lt = class extends te {
   constructor() {
     super(...arguments), this.status = "info";
   }
@@ -5936,7 +5950,7 @@ var gi = Object.defineProperty, mi = Object.getOwnPropertyDescriptor, yi = (c, e
     (f = c[r]) && (s = (n ? f(e, a, s) : f(s)) || s);
   return n && s && gi(e, a, s), s;
 };
-let _t = class extends ae {
+let _t = class extends te {
   render() {
     return g` <sl-alert variant="danger" open>
             <cb-status-icon status="error" slot="icon"></cb-status-icon>
@@ -6036,7 +6050,7 @@ var wi = Object.defineProperty, xi = Object.getOwnPropertyDescriptor, We = (c, e
   return n && s && wi(e, a, s), s;
 };
 const Zt = Ke.noConflict(), ki = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>';
-let Ae = class extends ae {
+let Ae = class extends te {
   constructor() {
     super(...arguments), this.store = new pt(this, p), this.zindex = 100;
   }
@@ -6069,7 +6083,7 @@ let Ae = class extends ae {
       p.feedbackScore = 0;
     }}"
           >
-            ${be`${W(da)}`}
+            ${le`${W(da)}`}
           </div>
           <sl-rating id="cb-feedback-rating-el" class="cb-feedback-rating" @sl-change="${this._ratingChangeHandler}" label="Rating" precision="1" .value=${p.feedbackScore}></sl-rating>
           <div
@@ -6078,7 +6092,7 @@ let Ae = class extends ae {
       p.feedbackScore = 5;
     }}"
           >
-            ${be`${W(ra)}`}
+            ${le`${W(ra)}`}
           </div>
         </div>
         <div style="display: flex">
@@ -6484,7 +6498,7 @@ var Ri = Object.defineProperty, Vi = Object.getOwnPropertyDescriptor, H = (c, e,
 };
 const Me = Ke.noConflict();
 Me.setLevel("info");
-let j = class extends ae {
+let j = class extends te {
   constructor() {
     super(...arguments), this.store = new pt(this, p), this.displayLicense = !1, this.name = "ChatBot", this.orgId = "", this.botId = "", this.url = "ws://localhost:3070", this.logoUrl = "", this.logoSvg = `<svg width="34" height="34" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_830_887)">
@@ -6516,6 +6530,10 @@ let j = class extends ae {
       this._addMessageHandler(c);
     }, this.handleStateEvent = (c) => {
       this._stateEventHandler(c);
+    }, this.handleToggleEvent = (c) => {
+      this._chatbotToggleHandler(c);
+    }, this.handleFormSubmitEvent = (c) => {
+      this._formSubmitHandler(c);
     }, this.fetchStream = Bi;
   }
   /**
@@ -6570,14 +6588,15 @@ let j = class extends ae {
   }
   renderUserInput() {
     return p.form || p.disabled && this.alwaysOpen ? null : g`<cb-user-input
+      part="user-input-control"
       ?loading=${p.connecting}
       ?disabled=${p.connecting || p.form}
       ?enable-file-upload=${p.setting.uploadImages && p.connected}
-      exportparts="user-input, user-input-wrapper, user-input-base, user-input-textarea"
+      exportparts="user-input-control,user-input, user-input-wrapper, user-input-base, user-input-textarea"
     ></cb-user-input>`;
   }
   connectedCallback() {
-    super.connectedCallback(), Me.info("connectedCallback"), this.initCssVariables(), addEventListener("c7o:bot:stateEvent", this.handleStateEvent), addEventListener("message:send", this.handleAddMessage), addEventListener("chatbot:toggle", this._chatbotToggleHandler), addEventListener("form:submit", this._formSubmitHandler), addEventListener("message:send:file", this._uploadFileHandler);
+    super.connectedCallback(), Me.info("connectedCallback"), this.initCssVariables(), addEventListener("c7o:bot:stateEvent", this.handleStateEvent), addEventListener("message:send", this.handleAddMessage), addEventListener("chatbot:toggle", this.handleToggleEvent), addEventListener("form:submit", this.handleFormSubmitEvent), addEventListener("message:send:file", this._uploadFileHandler);
   }
   extractCssVariable(c, e, a) {
     let n = c.getPropertyValue(e).trim();
@@ -6606,7 +6625,7 @@ let j = class extends ae {
   
     */
   disconnectedCallback() {
-    Me.info("disconnectedCallback"), super.disconnectedCallback(), window.removeEventListener("c7o:bot:stateEvent", this.handleStateEvent), window.removeEventListener("message:send", this.handleAddMessage), window.removeEventListener("chatbot:toggle", this._chatbotToggleHandler), window.removeEventListener("form:submit", this._formSubmitHandler), window.removeEventListener("message:send:file", this._uploadFileHandler);
+    Me.info("disconnectedCallback"), super.disconnectedCallback(), window.removeEventListener("c7o:bot:stateEvent", this.handleStateEvent), window.removeEventListener("message:send", this.handleAddMessage), window.removeEventListener("chatbot:toggle", this.handleToggleEvent), window.removeEventListener("form:submit", this.handleFormSubmitEvent), window.removeEventListener("message:send:file", this._uploadFileHandler);
   }
   // This is called when component is loaded, with all the settings (props) values
   // Use to initialize
@@ -6714,13 +6733,13 @@ let j = class extends ae {
       console.log("_addMessageHandler: input text is empty, ignored", c);
       return;
     }
-    p.isConversationStart() && (console.log("Start of conversation detected, emitting c7o:bot:conversationStart"), this.emit("c7o:bot:conversationStart", {
+    p.isConversationStart() && (console.log("Start of conversation detected, emitting c7o:bot:conversationStart"), e.conversationId = p.conversationId, this.emit("c7o:bot:conversationStart", {
       detail: e
     })), p.sendMessage(e);
   }
   _chatbotToggleHandler(c) {
     const e = c.detail;
-    p.open = e.open, p.unreadMessages = 0, p.suppressEngagePopup();
+    p.open = e.open, this.emit(e.open ? "c7o:bot:open" : "c7o:bot:close"), p.unreadMessages = 0, p.suppressEngagePopup();
   }
   _deleteMessageHandler(c) {
     const e = c.detail;
@@ -6735,7 +6754,11 @@ let j = class extends ae {
     const e = c.detail;
     p.setSetting(e.setting), this.showSetting = !1, this._checkAuth();
   }
-  async _formSubmitHandler(c) {
+  _formSubmitHandler(c) {
+    const e = c.detail;
+    e.conversationId = p.conversationId, this.emit("c7o:bot:formSubmit", {
+      detail: e
+    });
   }
   // scroll to bottom
   _scrollToBottom(c = !1) {