@enegelai/bot-widget 1.2.3-beta.4 → 1.2.4

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";
+import { css as x, LitElement as le, html as c, svg as He } from "lit";
+import { property as l, customElement as k, queryAll as ht, query as ce, eventOptions as qe } from "lit/decorators.js";
+import { unsafeHTML as N } 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,8 +21,8 @@ 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 ye } from "lit/directives/repeat.js";
+import { when as R } 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";
@@ -46,7 +46,7 @@ const ie = class ie extends Event {
   }
 };
 $(ie, "eventName", "lit-state-changed");
-let T = ie;
+let B = ie;
 const bt = (t, e) => e !== t && (e === e || t === t);
 class X extends EventTarget {
   constructor() {
@@ -116,10 +116,10 @@ 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.
@@ -132,10 +132,10 @@ class mt {
     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);
   }
 }
 /**
@@ -156,7 +156,7 @@ const Fe = ({ finisher: t, descriptor: e }) => (o, a) => {
     e !== void 0 && Object.defineProperty(o, a, e(a)), t == null || t(s, a);
   }
 };
-function L(t) {
+function H(t) {
   return Fe({
     // @ts-ignore ctor is typof State and not typeof ReactiveElement
     finisher: (e, o) => {
@@ -251,26 +251,26 @@ var Ue = { exports: {} };
     function y(u, f, w) {
       return i(u) || m.apply(this, arguments);
     }
-    function he(u, f, w) {
+    function ue(u, f, w) {
       var h = this, Oe;
       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();
+        var T = (r[d] || "silent").toUpperCase();
         if (!(typeof window === o || !S)) {
           try {
-            window.localStorage[S] = E;
+            window.localStorage[S] = T;
             return;
           } catch {
           }
           try {
-            window.document.cookie = encodeURIComponent(S) + "=" + E + ";";
+            window.document.cookie = encodeURIComponent(S) + "=" + T + ";";
           } catch {
           }
         }
       }
-      function He() {
+      function Le() {
         var d;
         if (!(typeof window === o || !S)) {
           try {
@@ -279,10 +279,10 @@ var Ue = { exports: {} };
           }
           if (typeof d === o)
             try {
-              var E = window.document.cookie, Y = E.indexOf(
+              var T = window.document.cookie, Y = T.indexOf(
                 encodeURIComponent(S) + "="
               );
-              Y !== -1 && (d = /^([^;]+)/.exec(E.slice(Y))[1]);
+              Y !== -1 && (d = /^([^;]+)/.exec(T.slice(Y))[1]);
             } catch {
             }
           return h.levels[d] === void 0 && (d = void 0), d;
@@ -310,14 +310,14 @@ var Ue = { exports: {} };
         SILENT: 5
       }, h.methodFactory = w || y, h.getLevel = function() {
         return Oe;
-      }, h.setLevel = function(d, E) {
+      }, h.setLevel = function(d, T) {
         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)
+          if (Oe = d, T !== !1 && it(d), g.call(h, d, u), typeof console === o && d < 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);
+        f = d, Le() || h.setLevel(d, !1);
       }, h.resetLevel = function() {
         h.setLevel(f, !1), lt();
       }, h.enableAll = function(d) {
@@ -325,15 +325,15 @@ var Ue = { exports: {} };
       }, h.disableAll = function(d) {
         h.setLevel(h.levels.SILENT, d);
       };
-      var ge = He();
-      ge == null && (ge = f), h.setLevel(ge, !1);
+      var be = Le();
+      be == null && (be = f), h.setLevel(be, !1);
     }
-    var M = new he(), ue = {};
+    var M = new ue(), ge = {};
     M.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 = ge[f];
+      return w || (w = ge[f] = new ue(
         f,
         M.getLevel(),
         M.methodFactory
@@ -343,12 +343,12 @@ var Ue = { exports: {} };
     return M.noConflict = function() {
       return typeof window !== o && window.log === M && (window.log = nt), M;
     }, M.getLoggers = function() {
-      return ue;
+      return ge;
     }, M.default = M, M;
   });
 })(Ue);
 var xt = Ue.exports;
-const ce = /* @__PURE__ */ wt(xt), kt = x`
+const de = /* @__PURE__ */ wt(xt), kt = x`
   :host {
   }
   .cb-wrapper {
@@ -503,26 +503,26 @@ var _t = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, $e = (t, e
     (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 le {
   constructor() {
     super(...arguments), this.color = "primary", this.svg = "";
   }
   render() {
     return c`<span class="cb-icon color-${this.color}" part="base"
-            >${Z(this.svg)}</span
+            >${N(this.svg)}</span
         >`;
   }
 };
-N.styles = Ze;
+W.styles = Ze;
 $e([
   l({ type: String })
-], N.prototype, "color", 2);
+], W.prototype, "color", 2);
 $e([
   l({ type: String })
-], N.prototype, "svg", 2);
-N = $e([
+], W.prototype, "svg", 2);
+W = $e([
   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 +536,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 fe(t = 10) {
   return St(t);
 }
 function At(t) {
@@ -559,9 +559,9 @@ function Ot(t = !0) {
     }), o.click();
   });
 }
-const _ = ce.noConflict();
+const _ = de.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,15 +669,15 @@ class Ht {
       });
     }*/
 }
-var Lt = Object.defineProperty, It = Object.getOwnPropertyDescriptor, I = (t, e, o, a) => {
+var Ht = Object.defineProperty, It = Object.getOwnPropertyDescriptor, I = (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();
+const j = de.noConflict();
 j.setLevel("info");
 const F = "cb_";
-class H extends X {
+class L extends X {
   constructor() {
     super(...arguments), this.actionIdCounter = 0, this.wsClient = null, this.replyMessage = null;
   }
@@ -689,7 +689,7 @@ class H extends X {
   }
   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 = fe(), this.connectWs = "false", this.messages = [], this.actions = [], this.addMessage({
       author: "assistant",
       type: "text",
       data: {
@@ -743,7 +743,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 j.info(`Initiating ws connection to ${o} ...`), this.wsClient = new Lt({
       url: o,
       orgId: this.setting.orgId,
       botId: this.setting.botId,
@@ -822,7 +822,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 = fe()), 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) {
@@ -853,26 +853,26 @@ class H extends X {
 }
 I([
   D({ prefix: F }),
-  L({ value: "en" })
-], H.prototype, "language", 2);
+  H({ value: "en" })
+], L.prototype, "language", 2);
 I([
   D({ prefix: F }),
-  L({ value: "light" })
-], H.prototype, "theme", 2);
+  H({ value: "light" })
+], L.prototype, "theme", 2);
 I([
   D({ prefix: F }),
-  L({ value: "false" })
-], H.prototype, "connectWs", 2);
+  H({ value: "false" })
+], L.prototype, "connectWs", 2);
 I([
   D({ prefix: F }),
-  L({ value: ye() })
-], H.prototype, "conversationId", 2);
+  H({ value: fe() })
+], L.prototype, "conversationId", 2);
 I([
   D({ prefix: F }),
-  L({ type: Array, value: [] })
-], H.prototype, "messages", 2);
+  H({ type: Array, value: [] })
+], L.prototype, "messages", 2);
 I([
-  L({
+  H({
     type: Array,
     value: []
     /*value: [
@@ -892,16 +892,16 @@ I([
       },
     ],*/
   })
-], H.prototype, "actions", 2);
+], L.prototype, "actions", 2);
 I([
-  L({ type: Boolean, value: !1 })
-], H.prototype, "botSettingsInitialized", 2);
+  H({ type: Boolean, value: !1 })
+], L.prototype, "botSettingsInitialized", 2);
 I([
-  L({ type: Boolean, value: !1 })
-], H.prototype, "disabled", 2);
+  H({ type: Boolean, value: !1 })
+], L.prototype, "disabled", 2);
 I([
   D({ prefix: F }),
-  L({
+  H({
     type: Object,
     value: {
       orgId: null,
@@ -910,8 +910,8 @@ I([
       welcomeMessage: null
     }
   })
-], H.prototype, "setting", 2);
-const p = new H(), Pt = x`
+], L.prototype, "setting", 2);
+const p = new L(), Pt = x`
   ${O}
   :host {
     position: relative;
@@ -977,10 +977,10 @@ 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--)
+var Bt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, Ne = (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 {
   constructor() {
@@ -1039,7 +1039,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 ve = class extends C {
   constructor() {
     super(...arguments), this.year = (/* @__PURE__ */ new Date()).getFullYear();
   }
@@ -1074,10 +1074,10 @@ let fe = class extends C {
         `;
   }
 };
-fe.styles = Vt;
-fe = Ft([
+ve.styles = Vt;
+ve = Ft([
   k("cb-footer")
-], fe);
+], ve);
 const Ut = x`
   ${O}
 
@@ -1179,12 +1179,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 we = class extends le {
   render() {
     return c` <div class="cb-thinking" style="color: rgb(34, 34, 34);"><span></span><span></span><span></span></div>`;
   }
 };
-ve.styles = x`
+we.styles = x`
     .cb-thinking {
       text-align: center;
     }
@@ -1222,9 +1222,9 @@ ve.styles = x`
       }
     }
   `;
-ve = Wt([
+we = Wt([
   k("cb-thinking")
-], ve);
+], we);
 var Kt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, We = (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);
@@ -1296,7 +1296,7 @@ var Gt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, Me = (t, e
     (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 le {
   constructor() {
     super(...arguments), this.url = "", this.inverse = !1;
   }
@@ -1316,7 +1316,7 @@ let W = class extends le {
         `;
   }
 };
-W.styles = x`
+K.styles = x`
         :host {
             --primary-color: var(--sl-color-primary-600);
         }
@@ -1343,13 +1343,13 @@ W.styles = x`
     `;
 Me([
   l({ type: String })
-], W.prototype, "url", 2);
+], K.prototype, "url", 2);
 Me([
   l({ type: Boolean })
-], W.prototype, "inverse", 2);
-W = Me([
+], K.prototype, "inverse", 2);
+K = Me([
   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) => {
   for (var r = a > 1 ? void 0 : a ? io(e, o) : e, s = t.length - 1, n; s >= 0; s--)
@@ -1365,7 +1365,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 +1395,16 @@ let K = class extends C {
         `;
   }
 };
-K.styles = Yt;
+J.styles = Yt;
 Se([
   l({ type: String })
-], K.prototype, "filename", 2);
+], J.prototype, "filename", 2);
 Se([
   l({ type: String })
-], K.prototype, "url", 2);
-K = Se([
+], J.prototype, "url", 2);
+J = Se([
   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;
@@ -2734,9 +2734,9 @@ function uo() {
 }
 async function ze(t) {
   const e = uo();
-  return c`${Z(e.render(t))}`;
+  return c`${N(e.render(t))}`;
 }
-var go = Object.defineProperty, bo = Object.getOwnPropertyDescriptor, de = (t, e, o, a) => {
+var go = Object.defineProperty, bo = Object.getOwnPropertyDescriptor, pe = (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;
@@ -2785,12 +2785,12 @@ let V = class extends C {
     });
   }
   render() {
-    return B(
+    return R(
       this.message.data || this.message.isThinking,
       () => c`
         <div class="cb-message-row" part="cb-message-row">
           <!-- message -->
-          ${B(
+          ${R(
         this._isBot,
         () => this.renderBotMessage(this.message),
         () => this.renderUserMessage(this.message)
@@ -2827,7 +2827,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(
+        ${R(
       t.data.userName,
       () => c`<div style="font-size: 12px; color:#9ca3af">${t.data.userName}</div>`,
       () => null
@@ -2835,7 +2835,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`${ye(
       t.data.files || [],
       (o) => o.id,
       (o) => c`<cb-file filename="${o.name}" url="${o.url}"></cb-file>`
@@ -2850,7 +2850,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" ? He`${N(p.setting.systemIconSvg)}` : He`${N(p.setting.botIconSvg)}`;
   }
   renderBotMessage(t) {
     return c`
@@ -2866,52 +2866,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">${N(p.setting.userIconSvg)}</div>
         ${this.renderMessage(t)}
       </div>
     `;
   }
 };
 V.styles = ho;
-de([
+pe([
   l({ type: Object })
 ], V.prototype, "message", 2);
-de([
+pe([
   l({ type: String })
 ], V.prototype, "type", 2);
-de([
+pe([
   ht(".code-block-header__copy")
 ], V.prototype, "copyBtns", 2);
-V = de([
+V = pe([
   k("cb-message")
 ], V);
-var mo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, J = (t, e, o, a) => {
+var mo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, U = (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 = de.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(
+        ${ye(
       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(
+        ${ye(
       this.actions,
       (t) => t,
       (t) => this.renderAction(t)
@@ -2919,6 +2920,9 @@ let R = class extends C {
       </div>
     `;
   }
+  scrollToBottom() {
+    this._messageListBottomAnchor.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
+  }
   renderAction(t) {
     switch (t.type) {
       case "calendlyMeeting":
@@ -2982,22 +2986,25 @@ let R = class extends C {
     `;
   }
 };
-R.styles = Ut;
-J([
+z.styles = Ut;
+U([
   l({ type: Array })
-], R.prototype, "messages", 2);
-J([
+], z.prototype, "messages", 2);
+U([
   l({ type: Array })
-], R.prototype, "actions", 2);
-J([
+], z.prototype, "actions", 2);
+U([
+  ce("#cb-message-list-bottom-anchor")
+], z.prototype, "_messageListBottomAnchor", 2);
+U([
   qe({ capture: !1, passive: !0 })
-], R.prototype, "invokeLinkAction", 1);
-J([
+], z.prototype, "invokeLinkAction", 1);
+U([
   qe({ capture: !1, passive: !0 })
-], R.prototype, "invokeCalendlyAction", 1);
-R = J([
+], z.prototype, "invokeCalendlyAction", 1);
+z = U([
   k("cb-message-list")
-], R);
+], z);
 const fo = x`
     ${O}
 
@@ -3093,7 +3100,7 @@ let A = class extends C {
                 ></sl-textarea>
 
                 <span class="cb-input-buttons">
-                    ${B(
+                    ${R(
       this.enableFileUpload,
       () => c`
                             <sl-button
@@ -3161,7 +3168,7 @@ P([
   l({ type: String })
 ], A.prototype, "currentKey", 2);
 P([
-  Ce("sl-textarea")
+  ce("sl-textarea")
 ], A.prototype, "inputElement", 2);
 A = P([
   k("cb-user-input")
@@ -3201,7 +3208,7 @@ const _o = x`
         gap: 8px;
     }
 `;
-var Co = Object.defineProperty, $o = Object.getOwnPropertyDescriptor, pe = (t, e, o, a) => {
+var Co = Object.defineProperty, $o = Object.getOwnPropertyDescriptor, he = (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;
@@ -3251,16 +3258,16 @@ let q = class extends C {
   }
 };
 q.styles = _o;
-pe([
+he([
   l({ type: Boolean })
 ], q.prototype, "open", 2);
-pe([
+he([
   l({ type: String, attribute: "label" })
 ], q.prototype, "label", 2);
-pe([
+he([
   l({ type: Number })
 ], q.prototype, "zindex", 2);
-q = pe([
+q = he([
   k("cb-dialog")
 ], q);
 var jo = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, Ke = (t, e, o, a) => {
@@ -3376,12 +3383,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, Z = (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 +3427,7 @@ let z = class extends C {
                             Enable it for your own backend.
                         </sl-switch>
                     </div> -->
-                    ${B(
+                    ${R(
       this.customRequest,
       () => null,
       () => this.renderInternalServices()
@@ -3544,26 +3551,26 @@ let z = class extends C {
     });
   }
 };
-z.styles = So;
-U([
+E.styles = So;
+Z([
   l({ type: Boolean })
-], z.prototype, "open", 2);
-U([
+], E.prototype, "open", 2);
+Z([
   l({ type: Object })
-], z.prototype, "setting", 2);
-U([
+], E.prototype, "setting", 2);
+Z([
   l({ type: Boolean })
-], z.prototype, "clearMessageDialogOpen", 2);
-U([
-  Ce("sl-dialog")
-], z.prototype, "dialog", 2);
-U([
+], E.prototype, "clearMessageDialogOpen", 2);
+Z([
+  ce("sl-dialog")
+], E.prototype, "dialog", 2);
+Z([
   l({ type: Boolean })
-], z.prototype, "customRequest", 2);
-z = U([
+], E.prototype, "customRequest", 2);
+E = Z([
   k("cb-setting")
-], z);
-const Ho = x`
+], E);
+const Lo = x`
   ${O}
   :host {
     --primary-color: var(--sl-color-primary-600);
@@ -3590,7 +3597,7 @@ const Ho = x`
 
     transition: all 0.3s ease-in-out;
 
-    z-index: 100;
+    z-index: 99;
   }
 
   .cb-anchor:hover {
@@ -3632,7 +3639,7 @@ const Ho = x`
   .cb-anchor sl-popup {
     --arrow-color: var(--sl-color-gray-300);
   }
-`, 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>';
+`, 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, Je = (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);
@@ -3659,10 +3666,10 @@ let ae = class extends C {
       <div class="cb-anchor ${this.open ? "open" : ""}" part="cb-anchor" @click=${this._clickHandler.bind(this)}>
         <sl-popup placement="top-end" distance="16">
           <sl-button slot="anchor" label="Start" size="large" variant="primary" class="icon anchor-button" circle>
-            ${B(
+            ${R(
       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="${Ho}"></cb-icon>`
     )}
           </sl-button>
           <div class="cb-engage-popup">Popup</div>
@@ -3671,7 +3678,7 @@ let ae = class extends C {
     `;
   }
 };
-ae.styles = Ho;
+ae.styles = Lo;
 Je([
   l({ type: Boolean })
 ], ae.prototype, "open", 2);
@@ -3680,7 +3687,7 @@ ae = Je([
 ], ae);
 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>';
+`, xe = '<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) => {
   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);
@@ -3689,11 +3696,11 @@ var Eo = Object.defineProperty, To = Object.getOwnPropertyDescriptor, Qe = (t, e
 const Ee = {
   error: {
     variant: "danger",
-    icon: we
+    icon: xe
   },
   danger: {
     variant: "danger",
-    icon: we
+    icon: xe
   },
   warning: {
     variant: "warning",
@@ -3724,12 +3731,12 @@ Qe([
 se = Qe([
   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--)
+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 ke = class extends C {
   render() {
     return c` <sl-alert variant="danger" open>
             <cb-status-icon status="error" slot="icon"></cb-status-icon>
@@ -3745,10 +3752,10 @@ let xe = class extends C {
     this.emit("setting:show");
   }
 };
-xe.styles = zo;
-xe = Vo([
+ke.styles = zo;
+ke = Vo([
   k("cb-auth-alert")
-], xe);
+], ke);
 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";
@@ -3818,7 +3825,7 @@ const ee = (t) => t !== null && typeof t == "object", G = (...t) => {
   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 = {
+}, me = 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], Be = {
   limit: 2,
   methods: Wo,
   statusCodes: Ko,
@@ -3828,7 +3835,7 @@ const ee = (t) => t !== null && typeof t == "object", G = (...t) => {
 }, Jo = (t = {}) => {
   if (typeof t == "number")
     return {
-      ...Re,
+      ...Be,
       limit: t
     };
   if (t.methods && !Array.isArray(t.methods))
@@ -3836,7 +3843,7 @@ 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
   };
@@ -3852,7 +3859,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,13 +3869,13 @@ 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();
@@ -3879,8 +3886,8 @@ class ne {
   // 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}`);
+      if (a._options.timeout > me)
+        throw new RangeError(`The \`timeout\` option cannot be greater than ${me}`);
       await Promise.resolve();
       let i = await a._fetch();
       for (const g of a._options.hooks.afterResponse) {
@@ -4008,7 +4015,7 @@ class ne {
     try {
       return await e();
     } catch (o) {
-      const a = Math.min(this._calculateRetryDelay(o), be);
+      const a = Math.min(this._calculateRetryDelay(o), me);
       if (a !== 0 && this._retryCount > 0) {
         await Xo(a, { signal: this._options.signal });
         for (const r of this._options.hooks.beforeRetry)
@@ -4071,12 +4078,12 @@ class ne {
   }
 }
 /*! MIT License © Sindre Sorhus */
-const ke = (t) => {
+const _e = (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({
+  return e.create = (o) => _e(G(o)), e.extend = (o) => _e(G(t, o)), e.stop = rt, e;
+}, Qo = _e(), er = Qo, st = er.extend({
   hooks: {
     beforeRequest: [
       () => {
@@ -4125,7 +4132,7 @@ async function or(t, e) {
 const Ve = {
   error: {
     variant: "danger",
-    icon: we
+    icon: xe
   },
   warning: {
     variant: "warning",
@@ -4213,8 +4220,8 @@ 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 Ce = de.noConflict();
+Ce.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">
@@ -4225,6 +4232,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
    */
@@ -4240,6 +4248,17 @@ let b = class extends C {
     };
     return p.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 p.addMessage(t), t;
+  }
   render() {
     return c`
       <div class="cb-wrapper" style="${this.open ? "display:flex" : "display:none"}">
@@ -4251,7 +4270,7 @@ let b = class extends C {
     `;
   }
   connectedCallback() {
-    super.connectedCallback(), _e.info("connectedCallback"), addEventListener("setting:show", () => {
+    super.connectedCallback(), Ce.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;
@@ -4268,7 +4287,7 @@ 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), t.size > 0 && (Ce.info("updated,_changedProperties:", t), this._initSetting()), setTimeout(() => {
       this._scrollToBottom();
     }, 0);
   }
@@ -4380,14 +4399,8 @@ let b = class extends C {
   }
   // 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;
+    (e = this._messageList) == null || e.scrollToBottom();
   }
 };
 b.styles = kt;
@@ -4446,7 +4459,7 @@ v([
   l({ type: Boolean })
 ], b.prototype, "showAuthAlert", 2);
 v([
-  Ce("cb-message-list")
+  ce("cb-message-list")
 ], b.prototype, "_messageList", 2);
 b = v([
   k("enegelai-bot")