@enegelai/bot-widget 1.2.3 → 1.2.5

package/dist/index.es.js

@@ -1,9 +1,9 @@
-var dt = Object.defineProperty;
-var pt = (t, e, o) => e in t ? dt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var $ = (t, e, o) => (pt(t, typeof e != "symbol" ? e + "" : e, o), o);
-import { css as x, LitElement as le, html as c, svg as Le } from "lit";
-import { property as l, customElement as k, queryAll as ht, eventOptions as qe, query as Ce } from "lit/decorators.js";
-import { unsafeHTML as Z } from "lit-html/directives/unsafe-html.js";
+var pt = Object.defineProperty;
+var ht = (t, e, o) => e in t ? pt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var j = (t, e, o) => (ht(t, typeof e != "symbol" ? e + "" : e, o), o);
+import { css as x, LitElement as de, html as c, svg as ve } from "lit";
+import { property as l, customElement as k, queryAll as ut, query as pe, eventOptions as qe } from "lit/decorators.js";
+import { unsafeHTML as q } from "lit-html/directives/unsafe-html.js";
 import "@shoelace-style/shoelace/dist/themes/light.css";
 import "@shoelace-style/shoelace/dist/themes/dark.css";
 import "@shoelace-style/shoelace/dist/components/button/button.js";
@@ -21,38 +21,38 @@ import "@shoelace-style/shoelace/dist/components/switch/switch.js";
 import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
 import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
 import "@shoelace-style/shoelace/dist/components/alert/alert.js";
-import { repeat as me } from "lit/directives/repeat.js";
-import { when as B } from "lit/directives/when.js";
+import { repeat as we } from "lit/directives/repeat.js";
+import { when as D } from "lit/directives/when.js";
 import { until as Ie } from "lit-html/directives/until.js";
-import ut from "markdown-it";
-import gt from "markdown-it-link-attributes";
+import gt from "markdown-it";
+import bt from "markdown-it-link-attributes";
 import "@shoelace-style/shoelace/dist/components/popup/popup.js";
 function De(t) {
   return typeof t == "function" ? t() : t;
 }
-const ie = class ie extends Event {
+const ce = class ce extends Event {
   /**
    * @param  {string} key of the state that has changed
    * @param  {unknown} value for the changed key
    */
   constructor(o, a, r) {
-    super(ie.eventName, {
+    super(ce.eventName, {
       cancelable: !1
     });
-    $(this, "key");
-    $(this, "state");
-    $(this, "value");
+    j(this, "key");
+    j(this, "state");
+    j(this, "value");
     this.key = o, this.value = a, this.state = r;
   }
 };
-$(ie, "eventName", "lit-state-changed");
-let T = ie;
-const bt = (t, e) => e !== t && (e === e || t === t);
+j(ce, "eventName", "lit-state-changed");
+let B = ce;
+const mt = (t, e) => e !== t && (e === e || t === t);
 class X extends EventTarget {
   constructor() {
     super();
     // hold a reference to hooks
-    $(this, "hookMap", /* @__PURE__ */ new Map());
+    j(this, "hookMap", /* @__PURE__ */ new Map());
     this.constructor.finalize(), this.propertyMap && [...this.propertyMap].forEach(([o, a]) => {
       if (a.initialValue !== void 0) {
         const r = De(a.initialValue);
@@ -81,7 +81,7 @@ class X extends EventTarget {
     Object.defineProperty(this.prototype, o, s);
   }
   static getPropertyDescriptor(o, a, r) {
-    const s = (r == null ? void 0 : r.hasChanged) || bt;
+    const s = (r == null ? void 0 : r.hasChanged) || mt;
     return {
       get() {
         return this[a];
@@ -116,26 +116,26 @@ class X extends EventTarget {
     const s = (n) => {
       (!a || a.includes(n.key)) && o(n.key, n.value, this);
     };
-    return this.addEventListener(T.eventName, s, r), () => this.removeEventListener(T.eventName, s);
+    return this.addEventListener(B.eventName, s, r), () => this.removeEventListener(B.eventName, s);
   }
   dispatchStateEvent(o, a, r) {
-    this.dispatchEvent(new T(o, a, r));
+    this.dispatchEvent(new B(o, a, r));
   }
 }
 // a map holding decorators definition.
-$(X, "propertyMap"), $(X, "properties"), $(X, "finalized", !1);
-class mt {
+j(X, "propertyMap"), j(X, "properties"), j(X, "finalized", !1);
+class Fe {
   constructor(e, o, a) {
-    $(this, "host");
-    $(this, "state");
-    $(this, "callback");
+    j(this, "host");
+    j(this, "state");
+    j(this, "callback");
     this.host = e, this.state = o, this.host.addController(this), this.callback = a || (() => this.host.requestUpdate());
   }
   hostConnected() {
-    this.state.addEventListener(T.eventName, this.callback), this.callback();
+    this.state.addEventListener(B.eventName, this.callback), this.callback();
   }
   hostDisconnected() {
-    this.state.removeEventListener(T.eventName, this.callback);
+    this.state.removeEventListener(B.eventName, this.callback);
   }
 }
 /**
@@ -143,7 +143,7 @@ class mt {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Fe = ({ finisher: t, descriptor: e }) => (o, a) => {
+const Ue = ({ finisher: t, descriptor: e }) => (o, a) => {
   var r;
   if (a === void 0) {
     const s = (r = o.originalKey) !== null && r !== void 0 ? r : o.key, n = e != null ? { kind: "method", placement: "prototype", key: s, descriptor: e(o.key) } : { ...o, key: s };
@@ -157,7 +157,7 @@ const Fe = ({ finisher: t, descriptor: e }) => (o, a) => {
   }
 };
 function L(t) {
-  return Fe({
+  return Ue({
     // @ts-ignore ctor is typof State and not typeof ReactiveElement
     finisher: (e, o) => {
       if (Object.getOwnPropertyDescriptor(e.prototype, o))
@@ -179,8 +179,8 @@ new URL(window.location.href);
 const ft = {
   prefix: "_ls"
 };
-function D(t) {
-  return t = { ...ft, ...t }, Fe({
+function R(t) {
+  return t = { ...ft, ...t }, Ue({
     // @ts-ignore ctor is typof State and not typeof ReactiveElement
     finisher: (e, o) => {
       const a = Object.getOwnPropertyDescriptor(e.prototype, o);
@@ -205,7 +205,7 @@ var vt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : t
 function wt(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var Ue = { exports: {} };
+var Ze = { exports: {} };
 (function(t) {
   (function(e, o) {
     t.exports ? t.exports = o() : e.log = o();
@@ -251,52 +251,52 @@ var Ue = { exports: {} };
     function y(u, f, w) {
       return i(u) || m.apply(this, arguments);
     }
-    function he(u, f, w) {
-      var h = this, Oe;
+    function be(u, f, w) {
+      var h = this, Le;
       f = f ?? "WARN";
-      var S = "loglevel";
-      typeof u == "string" ? S += ":" + u : typeof u == "symbol" && (S = void 0);
-      function it(d) {
-        var E = (r[d] || "silent").toUpperCase();
-        if (!(typeof window === o || !S)) {
+      var A = "loglevel";
+      typeof u == "string" ? A += ":" + u : typeof u == "symbol" && (A = void 0);
+      function lt(p) {
+        var T = (r[p] || "silent").toUpperCase();
+        if (!(typeof window === o || !A)) {
           try {
-            window.localStorage[S] = E;
+            window.localStorage[A] = T;
             return;
           } catch {
           }
           try {
-            window.document.cookie = encodeURIComponent(S) + "=" + E + ";";
+            window.document.cookie = encodeURIComponent(A) + "=" + T + ";";
           } catch {
           }
         }
       }
       function He() {
-        var d;
-        if (!(typeof window === o || !S)) {
+        var p;
+        if (!(typeof window === o || !A)) {
           try {
-            d = window.localStorage[S];
+            p = window.localStorage[A];
           } catch {
           }
-          if (typeof d === o)
+          if (typeof p === o)
             try {
-              var E = window.document.cookie, Y = E.indexOf(
-                encodeURIComponent(S) + "="
+              var T = window.document.cookie, Y = T.indexOf(
+                encodeURIComponent(A) + "="
               );
-              Y !== -1 && (d = /^([^;]+)/.exec(E.slice(Y))[1]);
+              Y !== -1 && (p = /^([^;]+)/.exec(T.slice(Y))[1]);
             } catch {
             }
-          return h.levels[d] === void 0 && (d = void 0), d;
+          return h.levels[p] === void 0 && (p = void 0), p;
         }
       }
-      function lt() {
-        if (!(typeof window === o || !S)) {
+      function ct() {
+        if (!(typeof window === o || !A)) {
           try {
-            window.localStorage.removeItem(S);
+            window.localStorage.removeItem(A);
             return;
           } catch {
           }
           try {
-            window.document.cookie = encodeURIComponent(S) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+            window.document.cookie = encodeURIComponent(A) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
           } catch {
           }
         }
@@ -309,46 +309,46 @@ var Ue = { exports: {} };
         ERROR: 4,
         SILENT: 5
       }, h.methodFactory = w || y, h.getLevel = function() {
-        return Oe;
-      }, h.setLevel = function(d, E) {
-        if (typeof d == "string" && h.levels[d.toUpperCase()] !== void 0 && (d = h.levels[d.toUpperCase()]), typeof d == "number" && d >= 0 && d <= h.levels.SILENT) {
-          if (Oe = d, E !== !1 && it(d), g.call(h, d, u), typeof console === o && d < h.levels.SILENT)
+        return Le;
+      }, h.setLevel = function(p, T) {
+        if (typeof p == "string" && h.levels[p.toUpperCase()] !== void 0 && (p = h.levels[p.toUpperCase()]), typeof p == "number" && p >= 0 && p <= h.levels.SILENT) {
+          if (Le = p, T !== !1 && lt(p), g.call(h, p, u), typeof console === o && p < h.levels.SILENT)
             return "No console available for logging";
         } else
-          throw "log.setLevel() called with invalid level: " + d;
-      }, h.setDefaultLevel = function(d) {
-        f = d, He() || h.setLevel(d, !1);
+          throw "log.setLevel() called with invalid level: " + p;
+      }, h.setDefaultLevel = function(p) {
+        f = p, He() || h.setLevel(p, !1);
       }, h.resetLevel = function() {
-        h.setLevel(f, !1), lt();
-      }, h.enableAll = function(d) {
-        h.setLevel(h.levels.TRACE, d);
-      }, h.disableAll = function(d) {
-        h.setLevel(h.levels.SILENT, d);
+        h.setLevel(f, !1), ct();
+      }, h.enableAll = function(p) {
+        h.setLevel(h.levels.TRACE, p);
+      }, h.disableAll = function(p) {
+        h.setLevel(h.levels.SILENT, p);
       };
-      var ge = He();
-      ge == null && (ge = f), h.setLevel(ge, !1);
+      var ye = He();
+      ye == null && (ye = f), h.setLevel(ye, !1);
     }
-    var M = new he(), ue = {};
-    M.getLogger = function(f) {
+    var S = new be(), me = {};
+    S.getLogger = function(f) {
       if (typeof f != "symbol" && typeof f != "string" || f === "")
         throw new TypeError("You must supply a name when creating a logger.");
-      var w = ue[f];
-      return w || (w = ue[f] = new he(
+      var w = me[f];
+      return w || (w = me[f] = new be(
         f,
-        M.getLevel(),
-        M.methodFactory
+        S.getLevel(),
+        S.methodFactory
       )), w;
     };
-    var nt = typeof window !== o ? window.log : void 0;
-    return M.noConflict = function() {
-      return typeof window !== o && window.log === M && (window.log = nt), M;
-    }, M.getLoggers = function() {
-      return ue;
-    }, M.default = M, M;
+    var it = typeof window !== o ? window.log : void 0;
+    return S.noConflict = function() {
+      return typeof window !== o && window.log === S && (window.log = it), S;
+    }, S.getLoggers = function() {
+      return me;
+    }, S.default = S, S;
   });
-})(Ue);
-var xt = Ue.exports;
-const ce = /* @__PURE__ */ wt(xt), kt = x`
+})(Ze);
+var xt = Ze.exports;
+const he = /* @__PURE__ */ wt(xt), kt = x`
   :host {
   }
   .cb-wrapper {
@@ -415,68 +415,75 @@ const ce = /* @__PURE__ */ wt(xt), kt = x`
       border-radius: 0;
     }
   }
-`, O = x`
-    :host {
-        --primary-color: var(--sl-color-primary-600);
-    }
+`, I = x`
+  :host {
+    --primary-color: var(--sl-color-primary-600);
+  }
 
-    .link__item,
-    .link__item:visited,
-    .link__item:active {
-        color: var(--primary-color);
-    }
+  .link__item,
+  .link__item:visited,
+  .link__item:active {
+    color: var(--primary-color);
+  }
 
-    .link__item.inverse,
-    .link__item.inverse:visited,
-    .link__item.inverse:active {
-        color: white;
-    }
+  .link__item.inverse,
+  .link__item.inverse:visited,
+  .link__item.inverse:active {
+    color: white;
+  }
 
-    sl-button.icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+  /*
+  sl-button.cb-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  */
+  sl-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-    .color-white {
-        color: white;
-    }
+  .color-white {
+    color: white;
+  }
 
-    .color-default {
-        color: var(--sl-color-neutral-600);
-    }
+  .color-default {
+    color: var(--sl-color-neutral-600);
+  }
 
-    .color-primary {
-        color: var(--sl-color-primary-600);
-    }
+  .color-primary {
+    color: var(--sl-color-primary-600);
+  }
 
-    .color-success,
-    .color-green {
-        color: var(--sl-color-success-600);
-    }
+  .color-success,
+  .color-green {
+    color: var(--sl-color-success-600);
+  }
 
-    .color-warning {
-        color: var(--sl-color-warning-600);
-    }
+  .color-warning {
+    color: var(--sl-color-warning-600);
+  }
 
-    .color-danger,
-    .color-error {
-        color: var(--sl-color-danger-600);
-    }
+  .color-danger,
+  .color-error {
+    color: var(--sl-color-danger-600);
+  }
 
-    .color-default {
-        color: var(--sl-color-neutral-600);
-    }
+  .color-default {
+    color: var(--sl-color-neutral-600);
+  }
 
-    .text-button {
-        cursor: pointer;
-    }
+  .text-button {
+    cursor: pointer;
+  }
 
-    .text-button:hover {
-        text-decoration: underline;
-    }
-`, Ze = x`
-    ${O}
+  .text-button:hover {
+    text-decoration: underline;
+  }
+`, Ne = x`
+    ${I}
 
     :host {
         display: inline-flex;
@@ -498,31 +505,31 @@ const ce = /* @__PURE__ */ wt(xt), kt = x`
         color: white;
     }
 `;
-var _t = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, $e = (t, e, o, a) => {
+var _t = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, Me = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? Ct(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && _t(e, o, r), r;
 };
-let N = class extends le {
+let W = class extends de {
   constructor() {
     super(...arguments), this.color = "primary", this.svg = "";
   }
   render() {
     return c`<span class="cb-icon color-${this.color}" part="base"
-            >${Z(this.svg)}</span
+            >${q(this.svg)}</span
         >`;
   }
 };
-N.styles = Ze;
-$e([
+W.styles = Ne;
+Me([
   l({ type: String })
-], N.prototype, "color", 2);
-$e([
+], W.prototype, "color", 2);
+Me([
   l({ type: String })
-], N.prototype, "svg", 2);
-N = $e([
+], W.prototype, "svg", 2);
+W = Me([
   k("cb-icon")
-], N);
+], W);
 let $t = (t) => crypto.getRandomValues(new Uint8Array(t)), jt = (t, e, o) => {
   let a = (2 << Math.log(t.length - 1) / Math.LN2) - 1, r = -~(1.6 * a * e / t.length);
   return (s = e) => {
@@ -536,7 +543,7 @@ let $t = (t) => crypto.getRandomValues(new Uint8Array(t)), jt = (t, e, o) => {
   };
 }, Mt = (t, e = 21) => jt(t, e, $t);
 const St = Mt("1234567890abcdefghijklmnopqrstuvwxyz", 10);
-function ye(t = 10) {
+function xe(t = 10) {
   return St(t);
 }
 function At(t) {
@@ -559,9 +566,9 @@ function Ot(t = !0) {
     }), o.click();
   });
 }
-const _ = ce.noConflict();
+const _ = he.noConflict();
 _.setLevel("info");
-class Ht {
+class Lt {
   constructor(e = {}) {
     this.id = 0, this.url = (e == null ? void 0 : e.url) || null, this.orgId = (e == null ? void 0 : e.orgId) || null, this.botId = (e == null ? void 0 : e.botId) || null, this.convId = (e == null ? void 0 : e.convId) || null, this._options = e || {}, this._ws = null, this.started = !1, this.connected = !1, this.onMessage = (e == null ? void 0 : e.onMessage) || null, this.queue = [], this.pause = (o) => new Promise((a) => setTimeout(a, o)), _.info(`WSC: Created, url: ${this.url}`);
   }
@@ -669,27 +676,27 @@ class Ht {
       });
     }*/
 }
-var Lt = Object.defineProperty, It = Object.getOwnPropertyDescriptor, I = (t, e, o, a) => {
+var Ht = Object.defineProperty, It = Object.getOwnPropertyDescriptor, H = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? It(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
-  return a && r && Lt(e, o, r), r;
+  return a && r && Ht(e, o, r), r;
 };
-const j = ce.noConflict();
-j.setLevel("info");
-const F = "cb_";
-class H extends X {
+const $ = he.noConflict();
+$.setLevel("info");
+const V = "cb_";
+class M extends X {
   constructor() {
     super(...arguments), this.actionIdCounter = 0, this.wsClient = null, this.replyMessage = null;
   }
   // this is called at startup
   setSetting(e) {
-    j.info("appState: Startup: setSetting"), this.setting = e, this.initBot().catch((o) => {
-      j.info(`Exception during bot initialization: ${o.message}`);
+    $.info("appState: Startup: setSetting", e), this.setting = e, this.initBot().catch((o) => {
+      $.info(`Exception during bot initialization: ${o.message}`);
     });
   }
   clearConversation() {
     this.wsClient && (this.wsClient.stop().then(() => {
-    }), this.wsClient = null), this.conversationId = ye(), this.connectWs = "false", this.messages = [], this.actions = [], this.addMessage({
+    }), this.wsClient = null), this.conversationId = xe(), this.connectWs = "false", this.messages = [], this.actions = [], this.addMessage({
       author: "assistant",
       type: "text",
       data: {
@@ -708,7 +715,7 @@ class H extends X {
   async initBot() {
     if (!this.botSettingsInitialized) {
       const o = `${this.setting.url.startsWith("localhost") ? "http" : "https"}://${this.setting.url}/api/bot/settings/${this.setting.orgId}/${this.setting.botId}`;
-      j.info(`Getting bot settings at ${o} ...`);
+      $.info(`Getting bot settings at ${o} ...`);
       let a = null, r = null;
       try {
         a = await fetch(o, {
@@ -716,15 +723,17 @@ class H extends X {
             "Access-Control-Allow-Origin": "null",
             "X-Enegel-Signature": this.setting.botId
           }
-        }), !a.ok || a.status !== 200 ? j.error(`Failed to get bot ${this.setting.botId} settings: ${a.status} ${a.statusText}`) : r = await a.json();
+        }), !a.ok || a.status !== 200 ? $.error(`Failed to get bot ${this.setting.botId} settings: ${a.status} ${a.statusText}`) : r = await a.json();
       } catch (s) {
-        j.error(`Failed to get bot ${this.setting.botId} settings: ${s.message}`), r = null;
+        $.error(`Failed to get bot ${this.setting.botId} settings: ${s.message}`), r = null;
       }
       if (this.botSettingsInitialized = !0, !r) {
-        j.error("No bot settings available - bot disabled"), this.disabled = !0;
+        $.error("No bot settings available - bot disabled"), this.disabled = !0;
         return;
       }
-      this.setting.welcomeMessage = (r == null ? void 0 : r.welcomeMessage) || "How can I help ?";
+      this.setting.welcomeMessage = (r == null ? void 0 : r.welcomeMessage) || "How can I help ?", this.setting.engageMessage = (r == null ? void 0 : r.engageMessage) || "How can I help ?", this.setting.engageTimeout = (r == null ? void 0 : r.engageTimeout) || 5, setTimeout(() => {
+        this.open || ($.info("Engaging User !"), this.engage = !0);
+      }, this.setting.engageTimeout * 1e3);
     }
     Array.isArray(this.messages) && this.messages.length <= 0 && this.addMessage({
       author: "assistant",
@@ -732,8 +741,8 @@ class H extends X {
       data: {
         text: this.setting.welcomeMessage
       }
-    }), this.connectWs === "true" && (j.info("appState: connectWs is true"), this.getWsClient().catch((e) => {
-      j.error(`Exception during ws client startup: ${e.message}`);
+    }), this.connectWs === "true" && ($.info("appState: connectWs is true"), this.getWsClient().catch((e) => {
+      $.error(`Exception during ws client startup: ${e.message}`);
     }));
   }
   // Lazy initialization: avoid connecting until we actually need to send something
@@ -743,7 +752,7 @@ class H extends X {
     if (this.wsClient)
       return this.wsClient;
     const o = `${this.setting.url.startsWith("localhost") ? "ws" : "wss"}://${this.setting.url}/api/bot/connect/${this.setting.orgId}/${this.setting.botId}/${this.conversationId}`;
-    return j.info(`Initiating ws connection to ${o} ...`), this.wsClient = new Ht({
+    return $.info(`Initiating ws connection to ${o} ...`), this.wsClient = new Lt({
       url: o,
       orgId: this.setting.orgId,
       botId: this.setting.botId,
@@ -807,10 +816,10 @@ class H extends X {
     }
   }
   async sendMessage(e) {
-    e = this.formatMessage(e), j.info("Send Message:", e), this.messages = this.messages.concat([e]);
+    e = this.formatMessage(e), $.info("Send Message:", e), this.messages = this.messages.concat([e]);
     const o = await this.getWsClient();
     if (!o) {
-      j.error("Error - failed to obtain ws client"), this.replyMessage = null;
+      $.error("Error - failed to obtain ws client"), this.replyMessage = null;
       return;
     }
     o.sendMessage({
@@ -822,7 +831,7 @@ class H extends X {
   // TODO revisit below
   formatMessage(e) {
     var o;
-    return e.id || (e.id = ye()), e.timestamp = Date.now(), e.author === "assistant" && (e.replyId = (o = this.messages[this.messages.length - 1]) == null ? void 0 : o.id), e;
+    return e.id || (e.id = xe()), e.timestamp = Date.now(), e.author === "assistant" && (e.replyId = (o = this.messages[this.messages.length - 1]) == null ? void 0 : o.id), e;
   }
   // add message
   addMessage(e) {
@@ -851,31 +860,36 @@ class H extends X {
     this.messages = [];
   }
 }
-I([
-  D({ prefix: F }),
+H([
+  R({ prefix: V }),
   L({ value: "en" })
-], H.prototype, "language", 2);
-I([
-  D({ prefix: F }),
+], M.prototype, "language", 2);
+H([
+  R({ prefix: V }),
   L({ value: "light" })
-], H.prototype, "theme", 2);
-I([
-  D({ prefix: F }),
+], M.prototype, "theme", 2);
+H([
+  R({ prefix: V }),
+  L({ type: Boolean, value: !1 })
+], M.prototype, "open", 2);
+H([
+  R({ prefix: V }),
   L({ value: "false" })
-], H.prototype, "connectWs", 2);
-I([
-  D({ prefix: F }),
-  L({ value: ye() })
-], H.prototype, "conversationId", 2);
-I([
-  D({ prefix: F }),
+], M.prototype, "connectWs", 2);
+H([
+  R({ prefix: V }),
+  L({ value: xe() })
+], M.prototype, "conversationId", 2);
+H([
+  R({ prefix: V }),
   L({ type: Array, value: [] })
-], H.prototype, "messages", 2);
-I([
+], M.prototype, "messages", 2);
+H([
   L({
     type: Array,
     value: []
-    /*value: [
+    /*
+    value: [
       {
         internalId: 1,
         type: 'calendlyMeeting',
@@ -890,17 +904,41 @@ I([
         url: 'https://signup.ticketspice.com/',
         // TODO Any other properties
       },
+      {
+        internalId: 3,
+        type: 'link',
+        title: 'Sign Up',
+        url: 'https://signup.ticketspice.com/',
+        // TODO Any other properties
+      },
+      {
+        internalId: 4,
+        type: 'calendlyMeeting',
+        title: 'Book 1:1 meeting',
+        url: 'https://calendly.com/slava-sayko/1-1-meeting-with-sales?hide_gdpr_banner=1',
+        // TODO Any other properties
+      },
+      {
+        internalId: 5,
+        type: 'calendlyMeeting',
+        title: 'Book 1:1 meeting',
+        url: 'https://calendly.com/slava-sayko/1-1-meeting-with-sales?hide_gdpr_banner=1',
+        // TODO Any other properties
+      },
     ],*/
   })
-], H.prototype, "actions", 2);
-I([
+], M.prototype, "actions", 2);
+H([
   L({ type: Boolean, value: !1 })
-], H.prototype, "botSettingsInitialized", 2);
-I([
+], M.prototype, "botSettingsInitialized", 2);
+H([
   L({ type: Boolean, value: !1 })
-], H.prototype, "disabled", 2);
-I([
-  D({ prefix: F }),
+], M.prototype, "disabled", 2);
+H([
+  L({ type: Boolean, value: !1 })
+], M.prototype, "engage", 2);
+H([
+  R({ prefix: V }),
   L({
     type: Object,
     value: {
@@ -910,9 +948,9 @@ I([
       welcomeMessage: null
     }
   })
-], H.prototype, "setting", 2);
-const p = new H(), Pt = x`
-  ${O}
+], M.prototype, "setting", 2);
+const d = new M(), Pt = x`
+  ${I}
   :host {
     position: relative;
     font-weight: bold;
@@ -952,13 +990,17 @@ const p = new H(), Pt = x`
     font-size: 1.5rem;
     color: white;
   }
+
+  .cb-setting-button cb-icon {
+    display: inline;
+  }
 `;
 var zt = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, Tt = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? Et(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && zt(e, o, r), r;
 };
-class C extends le {
+class C extends de {
   constructor() {
     super(...arguments), this.lang = "en";
   }
@@ -976,13 +1018,13 @@ class C extends le {
 Tt([
   l({ type: String })
 ], C.prototype, "lang", 2);
-const je = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><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 8L2.146 2.854Z"/></svg>';
-var Rt = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, Ne = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? Bt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+const oe = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><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 8L2.146 2.854Z"/></svg>';
+var Bt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, We = (t, e, o, a) => {
+  for (var r = a > 1 ? void 0 : a ? Rt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
-  return a && r && Rt(e, o, r), r;
+  return a && r && Bt(e, o, r), r;
 };
-let te = class extends C {
+let re = class extends C {
   constructor() {
     super(...arguments), this.title = "ChatBot";
   }
@@ -990,13 +1032,13 @@ let te = class extends C {
     return c` <header class="cb-header" part="header">
       <span class="left">
         <sl-button @click=${this._clickHandler} class="cb-setting-button" variant="text" circle>
-          <cb-icon color="white" svg="${p.setting.logoSvg}"></cb-icon>
+          <cb-icon color="white" svg="${d.setting.logoSvg}"></cb-icon>
         </sl-button>
       </span>
       <span class="center title">${this.title}</span>
       <span class="right">
         <sl-button @click=${this._clickCloseHandler} class="cb-setting-button" variant="text" circle>
-          <cb-icon color="white" svg="${je}"></cb-icon>
+          <cb-icon color="white" svg="${oe}"></cb-icon>
         </sl-button>
       </span>
     </header>`;
@@ -1012,15 +1054,15 @@ let te = class extends C {
     });
   }
 };
-te.styles = Pt;
-Ne([
+re.styles = Pt;
+We([
   l({ type: String, attribute: "title" })
-], te.prototype, "title", 2);
-te = Ne([
+], re.prototype, "title", 2);
+re = We([
   k("cb-header")
-], te);
+], re);
 const Vt = x`
-    ${O}
+    ${I}
     .cb-footer {
         line-height: 60px;
         font-size: 16px;
@@ -1039,7 +1081,7 @@ var qt = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, Ft = (t, e
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && qt(e, o, r), r;
 };
-let fe = class extends C {
+let ke = class extends C {
   constructor() {
     super(...arguments), this.year = (/* @__PURE__ */ new Date()).getFullYear();
   }
@@ -1074,12 +1116,12 @@ let fe = class extends C {
         `;
   }
 };
-fe.styles = Vt;
-fe = Ft([
+ke.styles = Vt;
+ke = Ft([
   k("cb-footer")
-], fe);
+], ke);
 const Ut = x`
-  ${O}
+  ${I}
 
   :host {
     width: 100%;
@@ -1124,15 +1166,16 @@ const Ut = x`
 
   .cb-actions-list {
     margin: 10px 0px 0px 0px;
-    padding: 10px 0px;
+    padding: 0px 0px;
     //border-top: 1px solid rgba(0, 0, 0, 0.1);
     display: flex;
     justify-content: center;
+    flex-wrap: wrap;
   }
 
   .cb-action {
     padding: 6px 6px;
-    margin: 1px 4px;
+    margin: 1px 2px;
     border-radius: 6px;
     cursor: pointer;
     color: rgba(255, 255, 255, 1);
@@ -1179,12 +1222,12 @@ var Zt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, Wt = (t, e
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && Zt(e, o, r), r;
 };
-let ve = class extends le {
+let _e = class extends de {
   render() {
     return c` <div class="cb-thinking" style="color: rgb(34, 34, 34);"><span></span><span></span><span></span></div>`;
   }
 };
-ve.styles = x`
+_e.styles = x`
     .cb-thinking {
       text-align: center;
     }
@@ -1222,15 +1265,15 @@ ve.styles = x`
       }
     }
   `;
-ve = Wt([
+_e = Wt([
   k("cb-thinking")
-], ve);
-var Kt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, We = (t, e, o, a) => {
+], _e);
+var Kt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, Ke = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? Jt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && Kt(e, o, r), r;
 };
-let oe = class extends C {
+let ae = class extends C {
   constructor() {
     super(...arguments), this.files = [];
   }
@@ -1246,7 +1289,7 @@ let oe = class extends C {
         </div>`;
   }
 };
-oe.styles = x`
+ae.styles = x`
         .cb-uploading {
             text-align: left;
         }
@@ -1264,14 +1307,14 @@ oe.styles = x`
             margin-right: 5px;
         }
     `;
-We([
+Ke([
   l({ type: Array })
-], oe.prototype, "files", 2);
-oe = We([
+], ae.prototype, "files", 2);
+ae = Ke([
   k("cb-uploading")
-], oe);
+], ae);
 const Yt = x`
-    ${O}
+    ${I}
     :host {
     }
 
@@ -1291,12 +1334,12 @@ const Yt = x`
         margin-right: 0.2em;
     }
 `;
-var Gt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, Me = (t, e, o, a) => {
+var Gt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, Se = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? Xt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && Gt(e, o, r), r;
 };
-let W = class extends le {
+let K = class extends de {
   constructor() {
     super(...arguments), this.url = "", this.inverse = !1;
   }
@@ -1316,7 +1359,7 @@ let W = class extends le {
         `;
   }
 };
-W.styles = x`
+K.styles = x`
         :host {
             --primary-color: var(--sl-color-primary-600);
         }
@@ -1341,17 +1384,17 @@ W.styles = x`
             text-decoration: underline;
         }
     `;
-Me([
+Se([
   l({ type: String })
-], W.prototype, "url", 2);
-Me([
+], K.prototype, "url", 2);
+Se([
   l({ type: Boolean })
-], W.prototype, "inverse", 2);
-W = Me([
+], K.prototype, "inverse", 2);
+K = Se([
   k("cb-external-link")
-], W);
+], K);
 const Qt = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-2v-1h2a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM1.928 15.849v-3.337h1.136v-.662H0v.662h1.134v3.337h.794Zm4.689-3.999h-.894L4.9 13.289h-.035l-.832-1.439h-.932l1.228 1.983l-1.24 2.016h.862l.853-1.415h.035l.85 1.415h.907l-1.253-1.992l1.274-2.007Zm1.93.662v3.337h-.794v-3.337H6.619v-.662h3.064v.662H8.546Z"/></svg>', eo = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM1.6 11.85H0v3.999h.791v-1.342h.803c.287 0 .531-.057.732-.173c.203-.117.358-.275.463-.474a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.476-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.38a.574.574 0 0 1-.238.241a.794.794 0 0 1-.375.082H.788V12.48h.66c.218 0 .389.06.512.181c.123.122.185.296.185.522Zm1.217-1.333v3.999h1.46c.401 0 .734-.08.998-.237a1.45 1.45 0 0 0 .595-.689c.13-.3.196-.662.196-1.084c0-.42-.065-.778-.196-1.075a1.426 1.426 0 0 0-.589-.68c-.264-.156-.599-.234-1.005-.234H3.362Zm.791.645h.563c.248 0 .45.05.609.152a.89.89 0 0 1 .354.454c.079.201.118.452.118.753a2.3 2.3 0 0 1-.068.592a1.14 1.14 0 0 1-.196.422a.8.8 0 0 1-.334.252a1.298 1.298 0 0 1-.483.082h-.563v-2.707Zm3.743 1.763v1.591h-.79V11.85h2.548v.653H7.896v1.117h1.606v.638H7.896Z"/></svg>', to = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2H9v-1h3a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM.706 13.189v2.66H0V11.85h.806l1.14 2.596h.026l1.14-2.596h.8v3.999h-.716v-2.66h-.038l-.946 2.159h-.516l-.952-2.16H.706Zm3.919 2.66V11.85h1.459c.406 0 .741.078 1.005.234c.263.157.46.383.589.68c.13.297.196.655.196 1.075c0 .422-.066.784-.196 1.084c-.131.301-.33.53-.595.689c-.264.158-.597.237-1 .237H4.626Zm1.353-3.354h-.562v2.707h.562c.186 0 .347-.028.484-.082a.8.8 0 0 0 .334-.252a1.14 1.14 0 0 0 .196-.422c.045-.168.067-.365.067-.592a2.1 2.1 0 0 0-.117-.753a.89.89 0 0 0-.354-.454c-.159-.102-.362-.152-.61-.152Z"/></svg>', oo = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.517 14.841a1.13 1.13 0 0 0 .401.823c.13.108.289.192.478.252c.19.061.411.091.665.091c.338 0 .624-.053.859-.158c.236-.105.416-.252.539-.44c.125-.189.187-.408.187-.656c0-.224-.045-.41-.134-.56a1.001 1.001 0 0 0-.375-.357a2.027 2.027 0 0 0-.566-.21l-.621-.144a.97.97 0 0 1-.404-.176a.37.37 0 0 1-.144-.299c0-.156.062-.284.185-.384c.125-.101.296-.152.512-.152c.143 0 .266.023.37.068a.624.624 0 0 1 .246.181a.56.56 0 0 1 .12.258h.75a1.092 1.092 0 0 0-.2-.566a1.21 1.21 0 0 0-.5-.41a1.813 1.813 0 0 0-.78-.152c-.293 0-.551.05-.776.15c-.225.099-.4.24-.527.421c-.127.182-.19.395-.19.639c0 .201.04.376.122.524c.082.149.2.27.352.367c.152.095.332.167.539.213l.618.144c.207.049.361.113.463.193a.387.387 0 0 1 .152.326a.505.505 0 0 1-.085.29a.559.559 0 0 1-.255.193c-.111.047-.249.07-.413.07c-.117 0-.223-.013-.32-.04a.838.838 0 0 1-.248-.115a.578.578 0 0 1-.255-.384h-.765ZM.806 13.693c0-.248.034-.46.102-.633a.868.868 0 0 1 .302-.399a.814.814 0 0 1 .475-.137c.15 0 .283.032.398.097a.7.7 0 0 1 .272.26a.85.85 0 0 1 .12.381h.765v-.072a1.33 1.33 0 0 0-.466-.964a1.441 1.441 0 0 0-.489-.272a1.838 1.838 0 0 0-.606-.097c-.356 0-.66.074-.911.223c-.25.148-.44.359-.572.632c-.13.274-.196.6-.196.979v.498c0 .379.064.704.193.976c.131.271.322.48.572.626c.25.145.554.217.914.217c.293 0 .554-.055.785-.164c.23-.11.414-.26.55-.454a1.27 1.27 0 0 0 .226-.674v-.076h-.764a.799.799 0 0 1-.118.363a.7.7 0 0 1-.272.25a.874.874 0 0 1-.401.087a.845.845 0 0 1-.478-.132a.833.833 0 0 1-.299-.392a1.699 1.699 0 0 1-.102-.627v-.495Zm8.239 2.238h-.953l-1.338-3.999h.917l.896 3.138h.038l.888-3.138h.879l-1.327 4Z"/></svg>', ro = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM1.6 11.85H0v3.999h.791v-1.342h.803c.287 0 .531-.057.732-.173c.203-.117.358-.275.463-.474a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.476-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.38a.574.574 0 0 1-.238.241a.794.794 0 0 1-.375.082H.788V12.48h.66c.218 0 .389.06.512.181c.123.122.185.296.185.522Zm2.817-1.333h-1.6v3.999h.791v-1.342h.803c.287 0 .531-.057.732-.173c.203-.117.358-.275.463-.474c.108-.201.161-.427.161-.677c0-.25-.052-.476-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.38a.574.574 0 0 1-.238.241a.793.793 0 0 1-.375.082H4.15V12.48h.66c.218 0 .389.06.512.181c.123.122.185.296.185.522Zm2.767-.67v3.336H7.48v-3.337H6.346v-.662h3.065v.662H8.274Z"/></svg>', ao = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-7.839 9.166v.522c0 .256-.039.47-.117.641a.861.861 0 0 1-.322.387a.877.877 0 0 1-.469.126a.883.883 0 0 1-.471-.126a.868.868 0 0 1-.32-.386a1.55 1.55 0 0 1-.117-.642v-.522c0-.257.04-.471.117-.641a.868.868 0 0 1 .32-.387a.868.868 0 0 1 .471-.129c.176 0 .332.043.469.13a.861.861 0 0 1 .322.386c.078.17.117.384.117.641Zm.803.519v-.513c0-.377-.068-.7-.205-.972a1.46 1.46 0 0 0-.589-.63c-.254-.147-.56-.22-.917-.22c-.355 0-.662.073-.92.22a1.441 1.441 0 0 0-.589.627c-.136.271-.205.596-.205.975v.513c0 .375.069.7.205.973c.137.271.333.48.59.627c.257.144.564.216.92.216c.357 0 .662-.072.916-.216c.256-.147.452-.356.59-.627c.136-.274.204-.598.204-.973ZM0 11.926v4h1.459c.402 0 .735-.08.999-.238a1.45 1.45 0 0 0 .595-.689c.13-.3.196-.662.196-1.084c0-.42-.065-.778-.196-1.075a1.426 1.426 0 0 0-.59-.68c-.263-.156-.598-.234-1.004-.234H0Zm.791.645h.563c.248 0 .45.05.609.152a.89.89 0 0 1 .354.454c.079.201.118.452.118.753a2.3 2.3 0 0 1-.068.592a1.141 1.141 0 0 1-.196.422a.8.8 0 0 1-.334.252a1.298 1.298 0 0 1-.483.082H.79V12.57Zm7.422.483a1.732 1.732 0 0 0-.103.633v.495c0 .246.034.455.103.627a.834.834 0 0 0 .298.393a.845.845 0 0 0 .478.131a.868.868 0 0 0 .401-.088a.699.699 0 0 0 .273-.248a.8.8 0 0 0 .117-.364h.765v.076a1.268 1.268 0 0 1-.226.674c-.137.194-.32.345-.55.454a1.81 1.81 0 0 1-.786.164c-.36 0-.664-.072-.914-.216a1.424 1.424 0 0 1-.571-.627c-.13-.272-.194-.597-.194-.976v-.498c0-.379.066-.705.197-.978c.13-.274.321-.485.571-.633c.252-.149.556-.223.911-.223c.219 0 .421.032.607.097c.187.062.35.153.489.272a1.326 1.326 0 0 1 .466.964v.073H9.78a.85.85 0 0 0-.12-.38a.7.7 0 0 0-.273-.261a.802.802 0 0 0-.398-.097a.814.814 0 0 0-.475.138a.868.868 0 0 0-.301.398Z"/></svg>', so = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" fill-rule="evenodd" d="M14 4.5V11h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-6.839 9.688v-.522a1.54 1.54 0 0 0-.117-.641a.861.861 0 0 0-.322-.387a.862.862 0 0 0-.469-.129a.868.868 0 0 0-.471.13a.868.868 0 0 0-.32.386a1.54 1.54 0 0 0-.117.641v.522c0 .256.04.47.117.641a.868.868 0 0 0 .32.387a.883.883 0 0 0 .471.126a.877.877 0 0 0 .469-.126a.861.861 0 0 0 .322-.386a1.55 1.55 0 0 0 .117-.642Zm.803-.516v.513c0 .375-.068.7-.205.973a1.47 1.47 0 0 1-.589.627c-.254.144-.56.216-.917.216a1.86 1.86 0 0 1-.92-.216a1.463 1.463 0 0 1-.589-.627a2.151 2.151 0 0 1-.205-.973v-.513c0-.379.069-.704.205-.975c.137-.274.333-.483.59-.627c.257-.147.564-.22.92-.22c.357 0 .662.073.916.22c.256.146.452.356.59.63c.136.271.204.595.204.972ZM1 15.925v-3.999h1.459c.406 0 .741.078 1.005.235c.264.156.46.382.589.68c.13.296.196.655.196 1.074c0 .422-.065.784-.196 1.084c-.131.301-.33.53-.595.689c-.264.158-.597.237-.999.237H1Zm1.354-3.354H1.79v2.707h.563c.185 0 .346-.028.483-.082a.8.8 0 0 0 .334-.252c.088-.114.153-.254.196-.422a2.3 2.3 0 0 0 .068-.592c0-.3-.04-.552-.118-.753a.89.89 0 0 0-.354-.454c-.158-.102-.361-.152-.61-.152Zm6.756 1.116c0-.248.034-.46.103-.633a.868.868 0 0 1 .301-.398a.814.814 0 0 1 .475-.138c.15 0 .283.032.398.097a.7.7 0 0 1 .273.26a.85.85 0 0 1 .12.381h.765v-.073a1.33 1.33 0 0 0-.466-.964a1.44 1.44 0 0 0-.49-.272a1.836 1.836 0 0 0-.606-.097c-.355 0-.66.074-.911.223c-.25.148-.44.359-.571.633c-.131.273-.197.6-.197.978v.498c0 .379.065.704.194.976c.13.271.321.48.571.627c.25.144.555.216.914.216c.293 0 .555-.054.785-.164c.23-.11.414-.26.551-.454a1.27 1.27 0 0 0 .226-.674v-.076h-.765a.8.8 0 0 1-.117.364a.699.699 0 0 1-.273.248a.874.874 0 0 1-.401.088a.845.845 0 0 1-.478-.131a.834.834 0 0 1-.298-.393a1.7 1.7 0 0 1-.103-.627v-.495Zm5.092-1.76h.894l-1.275 2.006l1.254 1.992h-.908l-.85-1.415h-.035l-.852 1.415h-.862l1.24-2.015l-1.228-1.984h.932l.832 1.439h.035l.823-1.439Z"/></svg>';
-var no = Object.defineProperty, io = Object.getOwnPropertyDescriptor, Se = (t, e, o, a) => {
+var no = Object.defineProperty, io = Object.getOwnPropertyDescriptor, Ae = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? io(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && no(e, o, r), r;
@@ -1365,7 +1408,7 @@ const Pe = {
   doc: ao,
   docx: so
 };
-let K = class extends C {
+let J = class extends C {
   constructor() {
     super(...arguments), this.filename = "", this.url = "";
   }
@@ -1395,16 +1438,16 @@ let K = class extends C {
         `;
   }
 };
-K.styles = Yt;
-Se([
+J.styles = Yt;
+Ae([
   l({ type: String })
-], K.prototype, "filename", 2);
-Se([
+], J.prototype, "filename", 2);
+Ae([
   l({ type: String })
-], K.prototype, "url", 2);
-K = Se([
+], J.prototype, "url", 2);
+J = Ae([
   k("cb-file")
-], K);
+], J);
 const lo = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="currentColor"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/><path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/></g></svg>', co = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" d="M8 8a3 3 0 1 0 0-6a3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0a2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1s1-4 6-4s6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664h10Z"/></svg>', po = x`
     pre code.hljs {
         display: block;
@@ -2571,7 +2614,7 @@ const lo = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="curr
         background-color: #282c34;
     }
 `, ho = x`
-  ${O}
+  ${I}
   ${po}
 
     .cb-message-row {
@@ -2727,21 +2770,21 @@ const lo = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="curr
   }
 `;
 function uo() {
-  const t = new ut({
+  const t = new gt({
     linkify: !0
   });
-  return t.use(gt, { attrs: { target: "_blank", rel: "noopener" } }), t;
+  return t.use(bt, { attrs: { target: "_blank", rel: "noopener" } }), t;
 }
 async function ze(t) {
   const e = uo();
-  return c`${Z(e.render(t))}`;
+  return c`${q(e.render(t))}`;
 }
-var go = Object.defineProperty, bo = Object.getOwnPropertyDescriptor, de = (t, e, o, a) => {
+var go = Object.defineProperty, bo = Object.getOwnPropertyDescriptor, ue = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? bo(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && go(e, o, r), r;
 };
-let V = class extends C {
+let F = class extends C {
   constructor() {
     super(...arguments), this.type = "assistant";
   }
@@ -2785,12 +2828,12 @@ let V = class extends C {
     });
   }
   render() {
-    return B(
+    return D(
       this.message.data || this.message.isThinking,
       () => c`
         <div class="cb-message-row" part="cb-message-row">
           <!-- message -->
-          ${B(
+          ${D(
         this._isBot,
         () => this.renderBotMessage(this.message),
         () => this.renderUserMessage(this.message)
@@ -2827,7 +2870,7 @@ let V = class extends C {
   renderMessageContent(t) {
     var e;
     return t.isThinking ? c`<cb-thinking></cb-thinking>` : t.isUploading ? c`<cb-uploading .files="${t.data.files || []}"></cb-uploading>` : t.type === "text" ? c`<div class="cb-message-text">
-        ${B(
+        ${D(
       t.data.userName,
       () => c`<div style="font-size: 12px; color:#9ca3af">${t.data.userName}</div>`,
       () => null
@@ -2835,7 +2878,7 @@ let V = class extends C {
         ${Ie(
       this._getMessageText(t).then((o) => c`${o}`)
     )}
-      </div>` : t.type === "file" ? c`${me(
+      </div>` : t.type === "file" ? c`${we(
       t.data.files || [],
       (o) => o.id,
       (o) => c`<cb-file filename="${o.name}" url="${o.url}"></cb-file>`
@@ -2850,7 +2893,7 @@ let V = class extends C {
       const e = t.data.userAvatar || "";
       return c` <img src="${e}" style="width: 24px;height: 24px;" /> `;
     }
-    return t.author === "system" ? Le`${Z(p.setting.systemIconSvg)}` : Le`${Z(p.setting.botIconSvg)}`;
+    return t.author === "system" ? ve`${q(d.setting.systemIconSvg)}` : ve`${q(d.setting.botIconSvg)}`;
   }
   renderBotMessage(t) {
     return c`
@@ -2866,52 +2909,53 @@ let V = class extends C {
         <!--<sl-avatar class="avatar user-avatar small" label="User">
           <cb-icon slot="icon" svg="${co}" color="white"></cb-icon>
         </sl-avatar>-->
-        <div class="avatar user-avatar">${Z(p.setting.userIconSvg)}</div>
+        <div class="avatar user-avatar">${q(d.setting.userIconSvg)}</div>
         ${this.renderMessage(t)}
       </div>
     `;
   }
 };
-V.styles = ho;
-de([
+F.styles = ho;
+ue([
   l({ type: Object })
-], V.prototype, "message", 2);
-de([
+], F.prototype, "message", 2);
+ue([
   l({ type: String })
-], V.prototype, "type", 2);
-de([
-  ht(".code-block-header__copy")
-], V.prototype, "copyBtns", 2);
-V = de([
+], F.prototype, "type", 2);
+ue([
+  ut(".code-block-header__copy")
+], F.prototype, "copyBtns", 2);
+F = ue([
   k("cb-message")
-], V);
-var mo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, J = (t, e, o, a) => {
+], F);
+var mo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, Z = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? yo(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && mo(e, o, r), r;
 };
-const Q = ce.noConflict();
+const Q = he.noConflict();
 Q.setLevel("info");
-let R = class extends C {
+let z = class extends C {
   constructor() {
     super(...arguments), this.messages = [], this.actions = [], this.calendlyInjected = !1, this.activeCalendlyAction = -1;
   }
   render() {
     return c`
       <div class="cb-message-list" part="cb-message-list">
-        ${me(
+        ${we(
       this.messages,
       (t) => t.id + JSON.stringify(t.data),
       (t) => c`<cb-message .message="${t}"></cb-message>`
     )}
         ${this.renderActions()}
+        <div id="cb-message-list-bottom-anchor"></div>
       </div>
     `;
   }
   renderActions() {
     return !Array.isArray(this.actions) || this.actions.length <= 0 ? null : c`
       <div class="cb-actions-list">
-        ${me(
+        ${we(
       this.actions,
       (t) => t,
       (t) => this.renderAction(t)
@@ -2919,6 +2963,9 @@ let R = class extends C {
       </div>
     `;
   }
+  scrollToBottom() {
+    this._messageListBottomAnchor.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
+  }
   renderAction(t) {
     switch (t.type) {
       case "calendlyMeeting":
@@ -2932,7 +2979,7 @@ let R = class extends C {
     switch (Q.info("Got Calendly Event:", t.data), t.data.event) {
       case "calendly.event_scheduled": {
         const e = this.activeCalendlyAction;
-        e >= 0 && (p.removeAction(e), p.addSystemMessage("Your meeting has been scheduled!"), this.activeCalendlyAction = -1);
+        e >= 0 && (d.removeAction(e), d.addSystemMessage("Your meeting has been scheduled!"), this.activeCalendlyAction = -1);
       }
     }
   }
@@ -2982,24 +3029,27 @@ let R = class extends C {
     `;
   }
 };
-R.styles = Ut;
-J([
+z.styles = Ut;
+Z([
   l({ type: Array })
-], R.prototype, "messages", 2);
-J([
+], z.prototype, "messages", 2);
+Z([
   l({ type: Array })
-], R.prototype, "actions", 2);
-J([
+], z.prototype, "actions", 2);
+Z([
+  pe("#cb-message-list-bottom-anchor")
+], z.prototype, "_messageListBottomAnchor", 2);
+Z([
   qe({ capture: !1, passive: !0 })
-], R.prototype, "invokeLinkAction", 1);
-J([
+], z.prototype, "invokeLinkAction", 1);
+Z([
   qe({ capture: !1, passive: !0 })
-], R.prototype, "invokeCalendlyAction", 1);
-R = J([
+], z.prototype, "invokeCalendlyAction", 1);
+z = Z([
   k("cb-message-list")
-], R);
+], z);
 const fo = x`
-    ${O}
+    ${I}
 
     :host {
         width: 100%;
@@ -3047,7 +3097,7 @@ var xo = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, P = (t, e,
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && xo(e, o, r), r;
 };
-let A = class extends C {
+let O = class extends C {
   constructor() {
     super(...arguments), this.placeholder = "Type a message...", this.sendButtonLabel = "Send", this.enableFileUpload = !1, this.value = "", this.loading = !1, this.disabled = !1, this.currentKey = "";
   }
@@ -3065,7 +3115,9 @@ let A = class extends C {
           text: this.value
         }
       }
-    }), this.value = "", this.inputElement.blur();
+    }), this.value = "", this.inputElement.blur(), requestIdleCallback(() => {
+      this.inputElement.focus();
+    });
   }
   async _sendFileHandler() {
     const t = await Ot();
@@ -3077,97 +3129,84 @@ let A = class extends C {
   }
   render() {
     return c`
-            <div class="cb-user-input-wrapper" part="user-input-wrapper">
-                <sl-textarea
-                    @sl-input=${this._inputChangeHandler}
-                    placeholder=${this.placeholder}
-                    class="cb-user-input"
-                    clearable="true"
-                    value=${this.value}
-                    rows="1"
-                    resize="auto"
-                    filled
-                    ?disabled=${this.disabled}
-                    enterkeyhint="send"
-                    @keydown=${this._keyDownHandler}
-                ></sl-textarea>
+      <div class="cb-user-input-wrapper" part="user-input-wrapper">
+        <sl-textarea
+          @sl-input=${this._inputChangeHandler}
+          placeholder=${this.placeholder}
+          class="cb-user-input"
+          clearable="true"
+          value=${this.value}
+          rows="1"
+          resize="auto"
+          filled
+          ?disabled=${this.disabled}
+          enterkeyhint="send"
+          @keydown=${this._keyDownHandler}
+        ></sl-textarea>
 
-                <span class="cb-input-buttons">
-                    ${B(
+        <span class="cb-input-buttons">
+          ${D(
       this.enableFileUpload,
       () => c`
-                            <sl-button
-                                @click=${this._sendFileHandler}
-                                name="paperclip"
-                                label="Attachment"
-                                size="large"
-                                class="paperclip-button"
-                                variant="text"
-                                circle
-                            >
-                                <cb-icon svg="${wo}"></cb-icon>
-                                <!-- select file input -->
-                                <input
-                                    type="file"
-                                    id="file"
-                                    name="file"
-                                    class="file-input"
-                                />
-                            </sl-button>
-                        `,
+              <sl-button @click=${this._sendFileHandler} name="paperclip" label="Attachment" size="large" class="paperclip-button" variant="text" circle>
+                <cb-icon svg="${wo}"></cb-icon>
+                <!-- select file input -->
+                <input type="file" id="file" name="file" class="file-input" />
+              </sl-button>
+            `,
       () => c``
     )}
-                    <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="${vo}"></cb-icon>
-                    </sl-button>
-                </span>
-            </div>
-        `;
+          <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="${vo}"></cb-icon>
+          </sl-button>
+        </span>
+      </div>
+    `;
   }
   _keyDownHandler(t) {
     t.key === "Enter" && !t.shiftKey && this._sendHandler();
   }
 };
-A.styles = fo;
+O.styles = fo;
 P([
   l({ type: String, attribute: "placeholder" })
-], A.prototype, "placeholder", 2);
+], O.prototype, "placeholder", 2);
 P([
   l({ type: String, attribute: "send-button-label" })
-], A.prototype, "sendButtonLabel", 2);
+], O.prototype, "sendButtonLabel", 2);
 P([
   l({ type: Boolean, attribute: "enable-file-upload" })
-], A.prototype, "enableFileUpload", 2);
+], O.prototype, "enableFileUpload", 2);
 P([
   l({ type: String })
-], A.prototype, "value", 2);
+], O.prototype, "value", 2);
 P([
   l({ type: Boolean })
-], A.prototype, "loading", 2);
+], O.prototype, "loading", 2);
 P([
   l({ type: Boolean })
-], A.prototype, "disabled", 2);
+], O.prototype, "disabled", 2);
 P([
   l({ type: String })
-], A.prototype, "currentKey", 2);
+], O.prototype, "currentKey", 2);
 P([
-  Ce("sl-textarea")
-], A.prototype, "inputElement", 2);
-A = P([
+  pe("sl-textarea")
+], O.prototype, "inputElement", 2);
+O = P([
   k("cb-user-input")
-], A);
+], O);
 const _o = x`
-    ${O}
+    ${I}
 
     sl-dialog::part(base) {
         z-index: 1000;
@@ -3201,12 +3240,12 @@ const _o = x`
         gap: 8px;
     }
 `;
-var Co = Object.defineProperty, $o = Object.getOwnPropertyDescriptor, pe = (t, e, o, a) => {
+var Co = Object.defineProperty, $o = Object.getOwnPropertyDescriptor, ge = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? $o(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && Co(e, o, r), r;
 };
-let q = class extends C {
+let U = class extends C {
   constructor() {
     super(...arguments), this.open = !1, this.label = "Dialog", this.zindex = 100;
   }
@@ -3237,7 +3276,7 @@ let q = class extends C {
                     <cb-icon
                         color="default"
                         style="font-size: 1em;"
-                        svg="${je}"
+                        svg="${oe}"
                     ></cb-icon>
                 </sl-button>
             </header>
@@ -3250,25 +3289,25 @@ let q = class extends C {
         </sl-dialog>`;
   }
 };
-q.styles = _o;
-pe([
+U.styles = _o;
+ge([
   l({ type: Boolean })
-], q.prototype, "open", 2);
-pe([
+], U.prototype, "open", 2);
+ge([
   l({ type: String, attribute: "label" })
-], q.prototype, "label", 2);
-pe([
+], U.prototype, "label", 2);
+ge([
   l({ type: Number })
-], q.prototype, "zindex", 2);
-q = pe([
+], U.prototype, "zindex", 2);
+U = ge([
   k("cb-dialog")
-], q);
-var jo = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, Ke = (t, e, o, a) => {
+], U);
+var jo = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, Je = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? Mo(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && jo(e, o, r), r;
 };
-let re = class extends C {
+let se = class extends C {
   constructor() {
     super(...arguments), this.open = !1;
   }
@@ -3302,7 +3341,7 @@ let re = class extends C {
     this.emit("cancel");
   }
 };
-re.styles = x`
+se.styles = x`
         .cb-clear-message-dialog {
         }
 
@@ -3310,12 +3349,12 @@ re.styles = x`
             z-index: 1000;
         }
     `;
-Ke([
+Je([
   l({ type: Boolean })
-], re.prototype, "open", 2);
-re = Ke([
+], se.prototype, "open", 2);
+se = Je([
   k("cb-clear-message-dialog")
-], re);
+], se);
 const So = x`
     :host {
         // width: 380px;
@@ -3376,12 +3415,12 @@ const So = x`
         grid-column-start: 2;
     }
 `;
-var Ao = Object.defineProperty, Oo = Object.getOwnPropertyDescriptor, U = (t, e, o, a) => {
+var Ao = Object.defineProperty, Oo = Object.getOwnPropertyDescriptor, N = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? Oo(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && Ao(e, o, r), r;
 };
-let z = class extends C {
+let E = class extends C {
   constructor() {
     super(...arguments), this.open = !1, this.clearMessageDialogOpen = !1, this.customRequest = !1;
   }
@@ -3420,7 +3459,7 @@ let z = class extends C {
                             Enable it for your own backend.
                         </sl-switch>
                     </div> -->
-                    ${B(
+                    ${D(
       this.customRequest,
       () => null,
       () => this.renderInternalServices()
@@ -3544,27 +3583,27 @@ let z = class extends C {
     });
   }
 };
-z.styles = So;
-U([
+E.styles = So;
+N([
   l({ type: Boolean })
-], z.prototype, "open", 2);
-U([
+], E.prototype, "open", 2);
+N([
   l({ type: Object })
-], z.prototype, "setting", 2);
-U([
+], E.prototype, "setting", 2);
+N([
   l({ type: Boolean })
-], z.prototype, "clearMessageDialogOpen", 2);
-U([
-  Ce("sl-dialog")
-], z.prototype, "dialog", 2);
-U([
+], E.prototype, "clearMessageDialogOpen", 2);
+N([
+  pe("sl-dialog")
+], E.prototype, "dialog", 2);
+N([
   l({ type: Boolean })
-], z.prototype, "customRequest", 2);
-z = U([
+], E.prototype, "customRequest", 2);
+E = N([
   k("cb-setting")
-], z);
-const Ho = x`
-  ${O}
+], E);
+const Lo = x`
+  ${I}
   :host {
     --primary-color: var(--sl-color-primary-600);
 
@@ -3590,7 +3629,7 @@ const Ho = x`
 
     transition: all 0.3s ease-in-out;
 
-    z-index: 100;
+    z-index: 99;
   }
 
   .cb-anchor:hover {
@@ -3608,11 +3647,11 @@ const Ho = x`
   }
 
   .cb-engage-popup {
-    min-width: 200px;
+    min-width: 250px;
     min-height: 100px;
-    color: rgb(34, 34, 34);
+    color: var(--enegelai-bot-popup-color, rgb(0, 0, 0));
     padding: 10px;
-    background-color: var(--sl-color-gray-50);
+    background: var(--enegelai-bot-popup-background, var(--sl-color-gray-50));
     //border: 1px solid;
     //border-color: var(--sl-color-gray-100);
     border-radius: 6px;
@@ -3625,22 +3664,40 @@ const Ho = x`
     font-stretch: normal;
     font-variant: normal;
     cursor: pointer;
-    box-shadow: rgba(148, 149, 150, 0.2) 20px 20px 40px 20px;
-    //box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    //box-shadow: rgba(148, 149, 150, 0.4) 20px 20px 20px 20px;
+    box-shadow:
+      0 4px 8px 0 rgba(0, 0, 0, 0.2),
+      0 6px 20px 0 rgba(0, 0, 0, 0.19);
   }
 
   .cb-anchor sl-popup {
-    --arrow-color: var(--sl-color-gray-300);
+    --arrow-color: var(--sl-color-gray-500);
+  }
+
+  .cb-engage-popup-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 6px;
+    color: var(--enegelai-bot-popup-close-color, var(--sl-color-gray-400));
   }
-`, Lo = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234c-.2.032-.352-.176-.273-.362c.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 1 0-2 0a1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0a1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2z"/></svg>';
-var Io = Object.defineProperty, Po = Object.getOwnPropertyDescriptor, Je = (t, e, o, a) => {
+
+  .cb-engage-popup-content {
+    padding: 2px;
+    margin-top: 10px;
+    display: flex;
+    align-items: start;
+    gap: 10px;
+  }
+`, Ho = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234c-.2.032-.352-.176-.273-.362c.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM5 8a1 1 0 1 0-2 0a1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0a1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2z"/></svg>';
+var Io = Object.defineProperty, Po = Object.getOwnPropertyDescriptor, Ye = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? Po(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && Io(e, o, r), r;
 };
-let ae = class extends C {
+let ne = class extends C {
   constructor() {
-    super(...arguments), this.open = !1;
+    super(...arguments), this.store = new Fe(this, d), this.open = !1;
   }
   // handler click
   _clickHandler() {
@@ -3651,37 +3708,43 @@ let ae = class extends C {
       }
     }), this.open = t;
   }
-  _popupClickHandler() {
-    console.log("Popup clicked!");
+  _engageClickHandler(t) {
+    console.log("engage close clicked!"), d.engage = !1, t.stopPropagation();
   }
   render() {
     return c`
       <div class="cb-anchor ${this.open ? "open" : ""}" part="cb-anchor" @click=${this._clickHandler.bind(this)}>
-        <sl-popup placement="top-end" distance="16">
+        <sl-popup placement="top-end" distance="16" ?active="${d.engage && !d.open}">
           <sl-button slot="anchor" label="Start" size="large" variant="primary" class="icon anchor-button" circle>
-            ${B(
+            ${D(
       this.open,
-      () => c`<cb-icon color="white" svg="${je}"></cb-icon>`,
-      () => c`<cb-icon color="white" svg="${Lo}"></cb-icon>`
+      () => c`<cb-icon color="white" svg="${oe}"></cb-icon>`,
+      () => c`<cb-icon color="white" svg="${Ho}"></cb-icon>`
     )}
           </sl-button>
-          <div class="cb-engage-popup">Popup</div>
+          <div class="cb-engage-popup">
+            <div class="cb-engage-popup-close" @click=${this._engageClickHandler.bind(this)}>${ve`${q(oe)}`}</div>
+            <div class="cb-engage-popup-content">
+              <cb-icon svg="${d.setting.logoSvg}"></cb-icon>
+              <div>${d.setting.engageMessage}</div>
+            </div>
+          </div>
         </sl-popup>
       </div>
     `;
   }
 };
-ae.styles = Ho;
-Je([
+ne.styles = Lo;
+Ye([
   l({ type: Boolean })
-], ae.prototype, "open", 2);
-ae = Je([
+], ne.prototype, "open", 2);
+ne = Ye([
   k("cb-anchor")
-], ae);
+], ne);
 const zo = x`
-    ${O}
-`, we = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="currentColor"><path d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1L1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z"/><path d="M7.002 11a1 1 0 1 1 2 0a1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></g></svg>', Ye = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="currentColor"><path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016a.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06a.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017a.163.163 0 0 1-.054-.06a.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/><path d="M7.002 12a1 1 0 1 1 2 0a1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/></g></svg>', Ge = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="currentColor"><path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764a.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0a5.5 5.5 0 1 1-11 0z"/><path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293L5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/></g></svg>', Xe = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="currentColor"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="m8.93 6.588l-2.29.287l-.082.38l.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319c.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246c-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0z"/></g></svg>';
-var Eo = Object.defineProperty, To = Object.getOwnPropertyDescriptor, Qe = (t, e, o, a) => {
+    ${I}
+`, Ce = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="currentColor"><path d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1L1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z"/><path d="M7.002 11a1 1 0 1 1 2 0a1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></g></svg>', Ge = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="currentColor"><path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016a.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06a.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017a.163.163 0 0 1-.054-.06a.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/><path d="M7.002 12a1 1 0 1 1 2 0a1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/></g></svg>', Xe = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="currentColor"><path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764a.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0a5.5 5.5 0 1 1-11 0z"/><path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293L5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/></g></svg>', Qe = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="currentColor"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="m8.93 6.588l-2.29.287l-.082.38l.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319c.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246c-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0z"/></g></svg>';
+var Eo = Object.defineProperty, To = Object.getOwnPropertyDescriptor, et = (t, e, o, a) => {
   for (var r = a > 1 ? void 0 : a ? To(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && Eo(e, o, r), r;
@@ -3689,26 +3752,26 @@ var Eo = Object.defineProperty, To = Object.getOwnPropertyDescriptor, Qe = (t, e
 const Ee = {
   error: {
     variant: "danger",
-    icon: we
+    icon: Ce
   },
   danger: {
     variant: "danger",
-    icon: we
+    icon: Ce
   },
   warning: {
     variant: "warning",
-    icon: Ye
+    icon: Ge
   },
   success: {
     variant: "success",
-    icon: Ge
+    icon: Xe
   },
   info: {
     variant: "primary",
-    icon: Xe
+    icon: Qe
   }
 };
-let se = class extends C {
+let ie = class extends C {
   constructor() {
     super(...arguments), this.status = "info";
   }
@@ -3717,19 +3780,19 @@ let se = class extends C {
     return c`<cb-icon svg=${e} color="${t}"></cb-icon>`;
   }
 };
-se.styles = Ze;
-Qe([
+ie.styles = Ne;
+et([
   l({ type: String })
-], se.prototype, "status", 2);
-se = Qe([
+], ie.prototype, "status", 2);
+ie = et([
   k("cb-status-icon")
-], se);
-var Ro = Object.defineProperty, Bo = Object.getOwnPropertyDescriptor, Vo = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? Bo(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+], ie);
+var Bo = Object.defineProperty, Ro = Object.getOwnPropertyDescriptor, Vo = (t, e, o, a) => {
+  for (var r = a > 1 ? void 0 : a ? Ro(e, o) : e, s = t.length - 1, n; s >= 0; s--)
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
-  return a && r && Ro(e, o, r), r;
+  return a && r && Bo(e, o, r), r;
 };
-let xe = class extends C {
+let $e = class extends C {
   render() {
     return c` <sl-alert variant="danger" open>
             <cb-status-icon status="error" slot="icon"></cb-status-icon>
@@ -3745,10 +3808,10 @@ let xe = class extends C {
     this.emit("setting:show");
   }
 };
-xe.styles = zo;
-xe = Vo([
+$e.styles = zo;
+$e = Vo([
   k("cb-auth-alert")
-], xe);
+], $e);
 class Te extends Error {
   constructor(e, o, a) {
     const r = e.status || e.status === 0 ? e.status : "", s = e.statusText || "", n = `${r} ${s}`.trim(), i = n ? `status code ${n}` : "an unknown error";
@@ -3770,7 +3833,7 @@ class Te extends Error {
     }), this.name = "HTTPError", this.response = e, this.request = o, this.options = a;
   }
 }
-class et extends Error {
+class tt extends Error {
   constructor(e) {
     super("Request timed out"), Object.defineProperty(this, "request", {
       enumerable: !0,
@@ -3784,21 +3847,21 @@ const ee = (t) => t !== null && typeof t == "object", G = (...t) => {
   for (const e of t)
     if ((!ee(e) || Array.isArray(e)) && typeof e < "u")
       throw new TypeError("The `options` argument must be an object");
-  return Ae({}, ...t);
-}, tt = (t = {}, e = {}) => {
+  return Oe({}, ...t);
+}, ot = (t = {}, e = {}) => {
   const o = new globalThis.Headers(t), a = e instanceof globalThis.Headers, r = new globalThis.Headers(e);
   for (const [s, n] of r.entries())
     a && n === "undefined" || n === void 0 ? o.delete(s) : o.set(s, n);
   return o;
-}, Ae = (...t) => {
+}, Oe = (...t) => {
   let e = {}, o = {};
   for (const a of t)
     if (Array.isArray(a))
       Array.isArray(e) || (e = []), e = [...e, ...a];
     else if (ee(a)) {
       for (let [r, s] of Object.entries(a))
-        ee(s) && r in e && (s = Ae(e[r], s)), e = { ...e, [r]: s };
-      ee(a.headers) && (o = tt(o, a.headers), e.headers = o);
+        ee(s) && r in e && (s = Oe(e[r], s)), e = { ...e, [r]: s };
+      ee(a.headers) && (o = ot(o, a.headers), e.headers = o);
     }
   return e;
 }, qo = (() => {
@@ -3812,23 +3875,23 @@ const ee = (t) => t !== null && typeof t == "object", G = (...t) => {
       return t = !0, "half";
     }
   }).headers.has("Content-Type")), t && !e;
-})(), Do = typeof globalThis.AbortController == "function", Fo = typeof globalThis.ReadableStream == "function", Uo = typeof globalThis.FormData == "function", ot = ["get", "post", "put", "patch", "head", "delete"], Zo = {
+})(), Do = typeof globalThis.AbortController == "function", Fo = typeof globalThis.ReadableStream == "function", Uo = typeof globalThis.FormData == "function", rt = ["get", "post", "put", "patch", "head", "delete"], Zo = {
   json: "application/json",
   text: "text/*",
   formData: "multipart/form-data",
   arrayBuffer: "*/*",
   blob: "*/*"
-}, be = 2147483647, rt = Symbol("stop"), No = (t) => ot.includes(t) ? t.toUpperCase() : t, Wo = ["get", "put", "head", "delete", "options", "trace"], Ko = [408, 413, 429, 500, 502, 503, 504], at = [413, 429, 503], Re = {
+}, fe = 2147483647, at = Symbol("stop"), No = (t) => rt.includes(t) ? t.toUpperCase() : t, Wo = ["get", "put", "head", "delete", "options", "trace"], Ko = [408, 413, 429, 500, 502, 503, 504], st = [413, 429, 503], Be = {
   limit: 2,
   methods: Wo,
   statusCodes: Ko,
-  afterStatusCodes: at,
+  afterStatusCodes: st,
   maxRetryAfter: Number.POSITIVE_INFINITY,
   backoffLimit: Number.POSITIVE_INFINITY
 }, Jo = (t = {}) => {
   if (typeof t == "number")
     return {
-      ...Re,
+      ...Be,
       limit: t
     };
   if (t.methods && !Array.isArray(t.methods))
@@ -3836,15 +3899,15 @@ const ee = (t) => t !== null && typeof t == "object", G = (...t) => {
   if (t.statusCodes && !Array.isArray(t.statusCodes))
     throw new Error("retry.statusCodes must be an array");
   return {
-    ...Re,
+    ...Be,
     ...t,
-    afterStatusCodes: at
+    afterStatusCodes: st
   };
 };
 async function Yo(t, e, o) {
   return new Promise((a, r) => {
     const s = setTimeout(() => {
-      e && e.abort(), r(new et(t));
+      e && e.abort(), r(new tt(t));
     }, o.timeout);
     o.fetch(t).then(a).catch(r).then(() => {
       clearTimeout(s);
@@ -3852,7 +3915,7 @@ async function Yo(t, e, o) {
   });
 }
 const Go = !!globalThis.DOMException;
-function Be(t) {
+function Re(t) {
   if (Go)
     return new DOMException((t == null ? void 0 : t.reason) ?? "The operation was aborted.", "AbortError");
   const e = new Error((t == null ? void 0 : t.reason) ?? "The operation was aborted.");
@@ -3862,25 +3925,25 @@ async function Xo(t, { signal: e }) {
   return new Promise((o, a) => {
     if (e) {
       if (e.aborted) {
-        a(Be(e));
+        a(Re(e));
         return;
       }
       e.addEventListener("abort", r, { once: !0 });
     }
     function r() {
-      a(Be(e)), clearTimeout(s);
+      a(Re(e)), clearTimeout(s);
     }
     const s = setTimeout(() => {
       e == null || e.removeEventListener("abort", r), o();
     }, t);
   });
 }
-class ne {
+class le {
   // eslint-disable-next-line @typescript-eslint/promise-function-async
   static create(e, o) {
-    const a = new ne(e, o), r = async () => {
-      if (a._options.timeout > be)
-        throw new RangeError(`The \`timeout\` option cannot be greater than ${be}`);
+    const a = new le(e, o), r = async () => {
+      if (a._options.timeout > fe)
+        throw new RangeError(`The \`timeout\` option cannot be greater than ${fe}`);
       await Promise.resolve();
       let i = await a._fetch();
       for (const g of a._options.hooks.afterResponse) {
@@ -3947,8 +4010,8 @@ class ne {
       // TODO: credentials can be removed when the spec change is implemented in all browsers. Context: https://www.chromestatus.com/feature/4539473312350208
       credentials: this._input.credentials || "same-origin",
       ...o,
-      headers: tt(this._input.headers, o.headers),
-      hooks: Ae({
+      headers: ot(this._input.headers, o.headers),
+      hooks: Oe({
         beforeRequest: [],
         beforeRetry: [],
         beforeError: [],
@@ -3984,7 +4047,7 @@ class ne {
     this._options.json !== void 0 && (this._options.body = JSON.stringify(this._options.json), this.request.headers.set("content-type", this._options.headers.get("content-type") ?? "application/json"), this.request = new globalThis.Request(this.request, { body: this._options.body }));
   }
   _calculateRetryDelay(e) {
-    if (this._retryCount++, this._retryCount < this._options.retry.limit && !(e instanceof et)) {
+    if (this._retryCount++, this._retryCount < this._options.retry.limit && !(e instanceof tt)) {
       if (e instanceof Te) {
         if (!this._options.retry.statusCodes.includes(e.response.status))
           return 0;
@@ -4008,7 +4071,7 @@ class ne {
     try {
       return await e();
     } catch (o) {
-      const a = Math.min(this._calculateRetryDelay(o), be);
+      const a = Math.min(this._calculateRetryDelay(o), fe);
       if (a !== 0 && this._retryCount > 0) {
         await Xo(a, { signal: this._options.signal });
         for (const r of this._options.hooks.beforeRetry)
@@ -4017,7 +4080,7 @@ class ne {
             options: this._options,
             error: o,
             retryCount: this._retryCount
-          }) === rt)
+          }) === at)
             return;
         return this._retry(e);
       }
@@ -4071,12 +4134,12 @@ class ne {
   }
 }
 /*! MIT License © Sindre Sorhus */
-const ke = (t) => {
-  const e = (o, a) => ne.create(o, G(t, a));
-  for (const o of ot)
-    e[o] = (a, r) => ne.create(a, G(t, r, { method: o }));
-  return e.create = (o) => ke(G(o)), e.extend = (o) => ke(G(t, o)), e.stop = rt, e;
-}, Qo = ke(), er = Qo, st = er.extend({
+const je = (t) => {
+  const e = (o, a) => le.create(o, G(t, a));
+  for (const o of rt)
+    e[o] = (a, r) => le.create(a, G(t, r, { method: o }));
+  return e.create = (o) => je(G(o)), e.extend = (o) => je(G(t, o)), e.stop = at, e;
+}, Qo = je(), er = Qo, nt = er.extend({
   hooks: {
     beforeRequest: [
       () => {
@@ -4109,7 +4172,7 @@ async function or(t, e) {
   const o = new FormData();
   for (let r = 0; r < e.length; r++)
     o.append("files", e[r]);
-  const a = await st.post(t, {
+  const a = await nt.post(t, {
     body: o
   });
   try {
@@ -4125,19 +4188,19 @@ async function or(t, e) {
 const Ve = {
   error: {
     variant: "danger",
-    icon: we
+    icon: Ce
   },
   warning: {
     variant: "warning",
-    icon: Ye
+    icon: Ge
   },
   success: {
     variant: "success",
-    icon: Ge
+    icon: Xe
   },
   info: {
     variant: "primary",
-    icon: Xe
+    icon: Qe
   }
 };
 function rr(t) {
@@ -4188,7 +4251,7 @@ async function nr(t) {
     throw new Error("apiKey is required");
   const e = t.options ?? {};
   e.model || (e.model = "gpt-3.5-turbo");
-  const o = await st.post(t.url, {
+  const o = await nt.post(t.url, {
     json: {
       messages: t.messages,
       ...t.options ?? {}
@@ -4213,11 +4276,11 @@ var ir = Object.defineProperty, lr = Object.getOwnPropertyDescriptor, v = (t, e,
     (n = t[s]) && (r = (a ? n(e, o, r) : n(r)) || r);
   return a && r && ir(e, o, r), r;
 };
-const _e = ce.noConflict();
-_e.setLevel("info");
+const te = he.noConflict();
+te.setLevel("info");
 let b = class extends C {
   constructor() {
-    super(...arguments), this.store = new mt(this, p), this.displayLicense = !1, this.name = "ChatBot", this.orgId = "", this.botId = "", this.url = "ws://localhost:3070", this.welcomeMessage = "Hello! How can I help you today ?", this.logoSvg = `  <svg width="24" height="24" viewBox="0 0 40 40">
+    super(...arguments), this.store = new Fe(this, d), this.displayLicense = !1, this.name = "ChatBot", this.orgId = "", this.botId = "", this.url = "ws://localhost:3070", this.logoSvg = `  <svg width="24" height="24" viewBox="0 0 40 40">
     <path
       d="M34.728 0.275L2.245 15.267c-3.748 1.749 -2.498 7.246 1.499 7.246h13.743v13.743c0 3.998 5.497 5.248 7.246 1.499l14.992 -32.483c1.249 -2.999 -1.999 -6.248 -4.998 -4.998z"
       fill="#E24D42"
@@ -4225,6 +4288,7 @@ let b = class extends C {
   </svg>
 `, this.botIconSvg = '<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24">    <path d="M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z" /></svg>', this.userIconSvg = '<svg fill="currentColor" viewBox="0 0 24 24" width="24" height="24">    <path  d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4Z" /></svg>', this.systemIconSvg = '<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24">    <path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"/></svg>', this.stream = !1, this.customRequest = !1, this.enableFileUpload = !1, this.uploadFileUrl = "", this.open = !1, this.loading = !1, this.showSetting = !1, this.showAuthAlert = !1, this.fetchStream = tr;
   }
+  //HTMLElement;
   /**
    * decodeStreamData
    */
@@ -4238,28 +4302,39 @@ let b = class extends C {
       isThinking: !0,
       data: {}
     };
-    return p.addMessage(t), t;
+    return d.addMessage(t), t;
+  }
+  addTestMessage() {
+    const t = {
+      author: "assistant",
+      type: "text",
+      isThinking: !1,
+      data: {
+        text: "Long text.The element may not be scrolled completely to the top or bottom depending on the layout of other elements.The element may not be scrolled completely to the top or bottom depending on the layout of other elements."
+      }
+    };
+    return d.addMessage(t), t;
   }
   render() {
     return c`
-      <div class="cb-wrapper" style="${this.open ? "display:flex" : "display:none"}">
+      <div class="cb-wrapper" style="${d.open ? "display:flex" : "display:none"}">
         <cb-header title="${this.name}"></cb-header>
-        <cb-message-list .messages=${p.messages} .actions=${p.actions}></cb-message-list>
+        <cb-message-list .messages=${d.messages} .actions=${d.actions}></cb-message-list>
         <cb-user-input ?loading=${this.loading} ?disabled=${this.loading || this.showAuthAlert} ?enable-file-upload=${this.enableFileUpload}></cb-user-input>
       </div>
-      <cb-anchor ?open=${this.open}></cb-anchor>
+      <cb-anchor ?open=${d.open}></cb-anchor>
     `;
   }
   connectedCallback() {
-    super.connectedCallback(), _e.info("connectedCallback"), addEventListener("setting:show", () => {
+    super.connectedCallback(), te.info("connectedCallback"), addEventListener("setting:show", () => {
       this.showSetting = !0;
     }), addEventListener("message:send", this._addMessageHandler.bind(this)), addEventListener("message:remove", this._deleteMessageHandler.bind(this)), addEventListener("setting:confirm", this._settingConfirmHandler.bind(this)), addEventListener("setting:hide", () => {
       this.showSetting = !1;
     }), addEventListener("chatbot:toggle", (t) => {
       const e = t.detail;
-      this.open = e.open;
+      d.open = e.open, d.engage = !1;
     }), addEventListener("message:clear", () => {
-      p.clearMessages();
+      d.clearMessages();
     }), addEventListener("message:send:file", this._sendFileHandler.bind(this)), addEventListener("setting:show", () => {
       this.showSetting = !0;
     });
@@ -4268,20 +4343,20 @@ let b = class extends C {
   // Use to initialize
   // This is also called when state changes - ??? - i.e. when message added to the array
   updated(t) {
-    super.updated(t), t.size > 0 && (_e.info("updated,_changedProperties:", t), this._initSetting()), setTimeout(() => {
+    super.updated(t), te.info("updated,_changedProperties:", t), t.size > 0 && (te.info("updated,_changedProperties:", t), this._initSetting()), setTimeout(() => {
       this._scrollToBottom();
     }, 0);
   }
   // initialize setting
   _initSetting() {
-    const t = p.setting;
-    t.orgId = this.orgId, t.botId = this.botId, t.url = this.url, t.welcomeMessage = this.welcomeMessage, t.logoSvg = this.logoSvg, t.botIconSvg = this.botIconSvg, t.userIconSvg = this.userIconSvg, t.systemIconSvg = this.systemIconSvg, p.setSetting(t);
+    const t = d.setting;
+    t.orgId = this.orgId, t.botId = this.botId, t.url = this.url, t.logoSvg = this.logoSvg, t.botIconSvg = this.botIconSvg, t.userIconSvg = this.userIconSvg, t.systemIconSvg = this.systemIconSvg, d.setSetting(t);
   }
   setLoading(t) {
     this.loading = t;
   }
   clearConversation() {
-    p.clearConversation();
+    d.clearConversation();
   }
   // check auth
   _checkAuth() {
@@ -4289,13 +4364,13 @@ let b = class extends C {
   // TODO Remove
   async _sendToOpenai(t, e) {
     let o = "";
-    const a = p.setting.openai.apiBase || "https://api.openai.com/v1", r = await nr({
+    const a = d.setting.openai.apiBase || "https://api.openai.com/v1", r = await nr({
       url: `${a}/chat/completions`,
-      apiKey: p.setting.openai.apiKey,
+      apiKey: d.setting.openai.apiKey,
       messages: e,
       options: {
-        stream: p.setting.stream,
-        model: p.setting.openai.model
+        stream: d.setting.stream,
+        model: d.setting.openai.model
         // temperature: 0.9,
       },
       onMessage: (s, n) => {
@@ -4305,11 +4380,11 @@ let b = class extends C {
           return;
         }
         n && ((i = n.choices[0].delta) != null && i.content) && requestIdleCallback(() => {
-          o += n.choices[0].delta.content, p.updateMessage(t, o);
+          o += n.choices[0].delta.content, d.updateMessage(t, o);
         });
       }
     });
-    !p.setting.stream && r && p.updateMessage(t, r.choices[0].message.content);
+    !d.setting.stream && r && d.updateMessage(t, r.choices[0].message.content);
   }
   // TODO Remove
   async _sendHandler(t) {
@@ -4320,7 +4395,7 @@ let b = class extends C {
       isThinking: !0,
       data: {}
     };
-    if (p.addMessage(e), this.customRequest)
+    if (d.addMessage(e), this.customRequest)
       await this.emit("chatbot:send", {
         detail: {
           newMessage: e,
@@ -4339,11 +4414,11 @@ let b = class extends C {
   }
   _addMessageHandler(t) {
     const e = t.detail;
-    p.sendMessage(e);
+    d.sendMessage(e);
   }
   _deleteMessageHandler(t) {
     const e = t.detail;
-    p.removeMessage(e.id);
+    d.removeMessage(e.id);
   }
   async _sendFileHandler(t) {
     const e = t.detail, a = {
@@ -4360,11 +4435,11 @@ let b = class extends C {
         }))
       }
     };
-    if (p.addMessage(a), this.uploadFileUrl) {
+    if (d.addMessage(a), this.uploadFileUrl) {
       const r = await or(this.uploadFileUrl, e.files);
       r.code === 0 && r.data && (a.isUploading = !1, a.data = {
         files: r.data
-      }, p.updateMessage(a));
+      }, d.updateMessage(a));
     }
     this.emit("chatbot:file:send", {
       detail: {
@@ -4376,18 +4451,12 @@ let b = class extends C {
   // setting confirm handler
   _settingConfirmHandler(t) {
     const e = t.detail;
-    p.setSetting(e.setting), this.showSetting = !1, this._checkAuth();
+    d.setSetting(e.setting), this.showSetting = !1, this._checkAuth();
   }
   // scroll to bottom
   _scrollToBottom(t = !1) {
-    requestIdleCallback(() => {
-      var e;
-      (e = this._messageList) == null || e.scrollTo({
-        top: this._messageList.scrollHeight,
-        behavior: "auto"
-        //smooth ? 'smooth' : 'auto',
-      });
-    });
+    var e;
+    console.log("Scrolling to bottom ..."), (e = this._messageList) == null || e.scrollToBottom();
   }
 };
 b.styles = kt;
@@ -4406,9 +4475,6 @@ v([
 v([
   l({ type: String, attribute: "url" })
 ], b.prototype, "url", 2);
-v([
-  l({ type: String, attribute: "welcome-message" })
-], b.prototype, "welcomeMessage", 2);
 v([
   l({ type: String, attribute: "logo-svg" })
 ], b.prototype, "logoSvg", 2);
@@ -4446,7 +4512,7 @@ v([
   l({ type: Boolean })
 ], b.prototype, "showAuthAlert", 2);
 v([
-  Ce("cb-message-list")
+  pe("cb-message-list")
 ], b.prototype, "_messageList", 2);
 b = v([
   k("enegelai-bot")