@enegelai/bot-widget 1.1.7 → 1.2.1

package/dist/index.es.js

@@ -1,9 +1,9 @@
-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 $ = (t, e, o) => (ht(t, typeof e != "symbol" ? e + "" : e, o), o);
-import { css as w, LitElement as le, html as l } from "lit";
-import { property as c, customElement as x, queryAll as ut, eventOptions as qe, query as Ce } from "lit/decorators.js";
-import { unsafeHTML as De } from "lit-html/directives/unsafe-html.js";
+var st = Object.defineProperty;
+var nt = (t, e, o) => e in t ? st(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var $ = (t, e, o) => (nt(t, typeof e != "symbol" ? e + "" : e, o), o);
+import { css as v, LitElement as le, html as l, svg as Le } from "lit";
+import { property as i, customElement as x, queryAll as it, eventOptions as Ve, query as _e } from "lit/decorators.js";
+import { unsafeHTML as Z } 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,13 +21,14 @@ 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 fe } from "lit/directives/repeat.js";
+import { repeat as me } from "lit/directives/repeat.js";
 import { when as B } from "lit/directives/when.js";
-import { until as Ae } from "lit-html/directives/until.js";
-import bt from "markdown-it";
-import gt from "markdown-it-link-attributes";
-import ge from "highlight.js";
-function Fe(t) {
+import { until as Oe } from "lit-html/directives/until.js";
+import lt from "markdown-it";
+import * as ct from "markdown-it-emoji";
+import dt from "markdown-it-link-attributes";
+import "@shoelace-style/shoelace/dist/components/popup/popup.js";
+function qe(t) {
   return typeof t == "function" ? t() : t;
 }
 const ie = class ie extends Event {
@@ -35,28 +36,28 @@ const ie = class ie extends Event {
    * @param  {string} key of the state that has changed
    * @param  {unknown} value for the changed key
    */
-  constructor(o, a, r) {
+  constructor(o, r, a) {
     super(ie.eventName, {
       cancelable: !1
     });
     $(this, "key");
     $(this, "state");
     $(this, "value");
-    this.key = o, this.value = a, this.state = r;
+    this.key = o, this.value = r, this.state = a;
   }
 };
 $(ie, "eventName", "lit-state-changed");
-let E = ie;
-const mt = (t, e) => e !== t && (e === e || t === t);
-class G extends EventTarget {
+let T = ie;
+const pt = (t, e) => e !== t && (e === e || t === t);
+class X extends EventTarget {
   constructor() {
     super();
     // hold a reference to hooks
     $(this, "hookMap", /* @__PURE__ */ new Map());
-    this.constructor.finalize(), this.propertyMap && [...this.propertyMap].forEach(([o, a]) => {
-      if (a.initialValue !== void 0) {
-        const r = Fe(a.initialValue);
-        this[o] = r, a.value = r;
+    this.constructor.finalize(), this.propertyMap && [...this.propertyMap].forEach(([o, r]) => {
+      if (r.initialValue !== void 0) {
+        const a = qe(r.initialValue);
+        this[o] = a, r.value = a;
       }
     });
   }
@@ -71,24 +72,24 @@ class G extends EventTarget {
       return !1;
     this.finalized = !0;
     const o = Object.keys(this.properties || {});
-    for (const a of o)
-      this.createProperty(a, this.properties[a]);
+    for (const r of o)
+      this.createProperty(r, this.properties[r]);
     return !0;
   }
-  static createProperty(o, a) {
+  static createProperty(o, r) {
     this.finalize();
-    const r = typeof o == "symbol" ? Symbol() : `__${o}`, s = this.getPropertyDescriptor(o, r, a);
+    const a = typeof o == "symbol" ? Symbol() : `__${o}`, s = this.getPropertyDescriptor(o, a, r);
     Object.defineProperty(this.prototype, o, s);
   }
-  static getPropertyDescriptor(o, a, r) {
-    const s = (r == null ? void 0 : r.hasChanged) || mt;
+  static getPropertyDescriptor(o, r, a) {
+    const s = (a == null ? void 0 : a.hasChanged) || pt;
     return {
       get() {
-        return this[a];
+        return this[r];
       },
       set(n) {
-        const i = this[o];
-        this[a] = n, s(n, i) === !0 && this.dispatchStateEvent(o, n, this);
+        const c = this[o];
+        this[r] = n, s(n, c) === !0 && this.dispatchStateEvent(o, n, this);
       },
       configurable: !0,
       enumerable: !0
@@ -99,8 +100,8 @@ class G extends EventTarget {
    * properties marked as skipReset
    */
   reset() {
-    this.hookMap.forEach((o) => o.reset()), [...this.propertyMap].filter(([o, a]) => !(a.skipReset === !0 || a.resetValue === void 0)).forEach(([o, a]) => {
-      this[o] = a.resetValue;
+    this.hookMap.forEach((o) => o.reset()), [...this.propertyMap].filter(([o, r]) => !(r.skipReset === !0 || r.resetValue === void 0)).forEach(([o, r]) => {
+      this[o] = r.resetValue;
     });
   }
   /**
@@ -111,31 +112,31 @@ class G extends EventTarget {
    * @param nameOrNames
    * @returns a unsubscribe function.
    */
-  subscribe(o, a, r) {
-    a && !Array.isArray(a) && (a = [a]);
+  subscribe(o, r, a) {
+    r && !Array.isArray(r) && (r = [r]);
     const s = (n) => {
-      (!a || a.includes(n.key)) && o(n.key, n.value, this);
+      (!r || r.includes(n.key)) && o(n.key, n.value, this);
     };
-    return this.addEventListener(E.eventName, s, r), () => this.removeEventListener(E.eventName, s);
+    return this.addEventListener(T.eventName, s, a), () => this.removeEventListener(T.eventName, s);
   }
-  dispatchStateEvent(o, a, r) {
-    this.dispatchEvent(new E(o, a, r));
+  dispatchStateEvent(o, r, a) {
+    this.dispatchEvent(new T(o, r, a));
   }
 }
 // a map holding decorators definition.
-$(G, "propertyMap"), $(G, "properties"), $(G, "finalized", !1);
-class ft {
-  constructor(e, o, a) {
+$(X, "propertyMap"), $(X, "properties"), $(X, "finalized", !1);
+class ht {
+  constructor(e, o, r) {
     $(this, "host");
     $(this, "state");
     $(this, "callback");
-    this.host = e, this.state = o, this.host.addController(this), this.callback = a || (() => this.host.requestUpdate());
+    this.host = e, this.state = o, this.host.addController(this), this.callback = r || (() => this.host.requestUpdate());
   }
   hostConnected() {
-    this.state.addEventListener(E.eventName, this.callback), this.callback();
+    this.state.addEventListener(T.eventName, this.callback), this.callback();
   }
   hostDisconnected() {
-    this.state.removeEventListener(E.eventName, this.callback);
+    this.state.removeEventListener(T.eventName, this.callback);
   }
 }
 /**
@@ -143,21 +144,21 @@ class ft {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Ze = ({ 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 };
-    return t != null && (n.finisher = function(i) {
-      t(i, s);
+const De = ({ finisher: t, descriptor: e }) => (o, r) => {
+  var a;
+  if (r === void 0) {
+    const s = (a = o.originalKey) !== null && a !== void 0 ? a : o.key, n = e != null ? { kind: "method", placement: "prototype", key: s, descriptor: e(o.key) } : { ...o, key: s };
+    return t != null && (n.finisher = function(c) {
+      t(c, s);
     }), n;
   }
   {
     const s = o.constructor;
-    e !== void 0 && Object.defineProperty(o, a, e(a)), t == null || t(s, a);
+    e !== void 0 && Object.defineProperty(o, r, e(r)), t == null || t(s, r);
   }
 };
 function I(t) {
-  return Ze({
+  return De({
     // @ts-ignore ctor is typof State and not typeof ReactiveElement
     finisher: (e, o) => {
       if (Object.getOwnPropertyDescriptor(e.prototype, o))
@@ -166,7 +167,7 @@ function I(t) {
     }
   });
 }
-function yt(t, e) {
+function ut(t, e) {
   if (t !== null && (e === Boolean || e === Number || e === Array || e === Object))
     try {
       t = JSON.parse(t);
@@ -176,96 +177,96 @@ function yt(t, e) {
   return t;
 }
 new URL(window.location.href);
-const vt = {
+const gt = {
   prefix: "_ls"
 };
 function D(t) {
-  return t = { ...vt, ...t }, Ze({
+  return t = { ...gt, ...t }, De({
     // @ts-ignore ctor is typof State and not typeof ReactiveElement
     finisher: (e, o) => {
-      const a = Object.getOwnPropertyDescriptor(e.prototype, o);
-      if (!a)
+      const r = Object.getOwnPropertyDescriptor(e.prototype, o);
+      if (!r)
         throw new Error("@local-storage decorator need to be called after @property");
-      const r = `${(t == null ? void 0 : t.prefix) || ""}_${(t == null ? void 0 : t.key) || String(o)}`, s = e.propertyMap.get(o), n = s == null ? void 0 : s.type;
+      const a = `${(t == null ? void 0 : t.prefix) || ""}_${(t == null ? void 0 : t.key) || String(o)}`, s = e.propertyMap.get(o), n = s == null ? void 0 : s.type;
       if (s) {
-        const m = s.initialValue;
-        s.initialValue = () => yt(localStorage.getItem(r), n) ?? Fe(m), e.propertyMap.set(o, { ...s, ...t });
+        const _ = s.initialValue;
+        s.initialValue = () => ut(localStorage.getItem(a), n) ?? qe(_), e.propertyMap.set(o, { ...s, ...t });
       }
-      const i = a == null ? void 0 : a.set, g = {
-        ...a,
-        set: function(m) {
-          m !== void 0 && localStorage.setItem(r, n === Object || n === Array ? JSON.stringify(m) : m), i && i.call(this, m);
+      const c = r == null ? void 0 : r.set, w = {
+        ...r,
+        set: function(_) {
+          _ !== void 0 && localStorage.setItem(a, n === Object || n === Array ? JSON.stringify(_) : _), c && c.call(this, _);
         }
       };
-      Object.defineProperty(e.prototype, o, g);
+      Object.defineProperty(e.prototype, o, w);
     }
   });
 }
-var wt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function xt(t) {
+var bt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function mt(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var Ue = { exports: {} };
+var Fe = { exports: {} };
 (function(t) {
   (function(e, o) {
     t.exports ? t.exports = o() : e.log = o();
-  })(wt, function() {
+  })(bt, function() {
     var e = function() {
-    }, o = "undefined", a = typeof window !== o && typeof window.navigator !== o && /Trident\/|MSIE /.test(window.navigator.userAgent), r = [
+    }, o = "undefined", r = typeof window !== o && typeof window.navigator !== o && /Trident\/|MSIE /.test(window.navigator.userAgent), a = [
       "trace",
       "debug",
       "info",
       "warn",
       "error"
     ];
-    function s(h, f) {
-      var y = h[f];
-      if (typeof y.bind == "function")
-        return y.bind(h);
+    function s(h, b) {
+      var f = h[b];
+      if (typeof f.bind == "function")
+        return f.bind(h);
       try {
-        return Function.prototype.bind.call(y, h);
+        return Function.prototype.bind.call(f, h);
       } catch {
         return function() {
-          return Function.prototype.apply.apply(y, [h, arguments]);
+          return Function.prototype.apply.apply(f, [h, arguments]);
         };
       }
     }
     function n() {
       console.log && (console.log.apply ? console.log.apply(console, arguments) : Function.prototype.apply.apply(console.log, [console, arguments])), console.trace && console.trace();
     }
-    function i(h) {
-      return h === "debug" && (h = "log"), typeof console === o ? !1 : h === "trace" && a ? n : console[h] !== void 0 ? s(console, h) : console.log !== void 0 ? s(console, "log") : e;
+    function c(h) {
+      return h === "debug" && (h = "log"), typeof console === o ? !1 : h === "trace" && r ? n : console[h] !== void 0 ? s(console, h) : console.log !== void 0 ? s(console, "log") : e;
     }
-    function u(h, f) {
-      for (var y = 0; y < r.length; y++) {
-        var p = r[y];
-        this[p] = y < h ? e : this.methodFactory(p, h, f);
+    function g(h, b) {
+      for (var f = 0; f < a.length; f++) {
+        var p = a[f];
+        this[p] = f < h ? e : this.methodFactory(p, h, b);
       }
       this.log = this.debug;
     }
-    function g(h, f, y) {
+    function w(h, b, f) {
       return function() {
-        typeof console !== o && (u.call(this, f, y), this[h].apply(this, arguments));
+        typeof console !== o && (g.call(this, b, f), this[h].apply(this, arguments));
       };
     }
-    function m(h, f, y) {
-      return i(h) || g.apply(this, arguments);
+    function _(h, b, f) {
+      return c(h) || w.apply(this, arguments);
     }
-    function he(h, f, y) {
-      var p = this, Oe;
-      f = f ?? "WARN";
+    function he(h, b, f) {
+      var p = this, Ae;
+      b = b ?? "WARN";
       var M = "loglevel";
       typeof h == "string" ? M += ":" + h : typeof h == "symbol" && (M = void 0);
-      function lt(d) {
-        var P = (r[d] || "silent").toUpperCase();
+      function ot(d) {
+        var E = (a[d] || "silent").toUpperCase();
         if (!(typeof window === o || !M)) {
           try {
-            window.localStorage[M] = P;
+            window.localStorage[M] = E;
             return;
           } catch {
           }
           try {
-            window.document.cookie = encodeURIComponent(M) + "=" + P + ";";
+            window.document.cookie = encodeURIComponent(M) + "=" + E + ";";
           } catch {
           }
         }
@@ -279,16 +280,16 @@ var Ue = { exports: {} };
           }
           if (typeof d === o)
             try {
-              var P = window.document.cookie, J = P.indexOf(
+              var E = window.document.cookie, Y = E.indexOf(
                 encodeURIComponent(M) + "="
               );
-              J !== -1 && (d = /^([^;]+)/.exec(P.slice(J))[1]);
+              Y !== -1 && (d = /^([^;]+)/.exec(E.slice(Y))[1]);
             } catch {
             }
           return p.levels[d] === void 0 && (d = void 0), d;
         }
       }
-      function ct() {
+      function rt() {
         if (!(typeof window === o || !M)) {
           try {
             window.localStorage.removeItem(M);
@@ -308,47 +309,47 @@ var Ue = { exports: {} };
         WARN: 3,
         ERROR: 4,
         SILENT: 5
-      }, p.methodFactory = y || m, p.getLevel = function() {
-        return Oe;
-      }, p.setLevel = function(d, P) {
+      }, p.methodFactory = f || _, p.getLevel = function() {
+        return Ae;
+      }, p.setLevel = function(d, E) {
         if (typeof d == "string" && p.levels[d.toUpperCase()] !== void 0 && (d = p.levels[d.toUpperCase()]), typeof d == "number" && d >= 0 && d <= p.levels.SILENT) {
-          if (Oe = d, P !== !1 && lt(d), u.call(p, d, h), typeof console === o && d < p.levels.SILENT)
+          if (Ae = d, E !== !1 && ot(d), g.call(p, d, h), typeof console === o && d < p.levels.SILENT)
             return "No console available for logging";
         } else
           throw "log.setLevel() called with invalid level: " + d;
       }, p.setDefaultLevel = function(d) {
-        f = d, He() || p.setLevel(d, !1);
+        b = d, He() || p.setLevel(d, !1);
       }, p.resetLevel = function() {
-        p.setLevel(f, !1), ct();
+        p.setLevel(b, !1), rt();
       }, p.enableAll = function(d) {
         p.setLevel(p.levels.TRACE, d);
       }, p.disableAll = function(d) {
         p.setLevel(p.levels.SILENT, d);
       };
-      var be = He();
-      be == null && (be = f), p.setLevel(be, !1);
+      var ge = He();
+      ge == null && (ge = b), p.setLevel(ge, !1);
     }
     var j = new he(), ue = {};
-    j.getLogger = function(f) {
-      if (typeof f != "symbol" && typeof f != "string" || f === "")
+    j.getLogger = function(b) {
+      if (typeof b != "symbol" && typeof b != "string" || b === "")
         throw new TypeError("You must supply a name when creating a logger.");
-      var y = ue[f];
-      return y || (y = ue[f] = new he(
-        f,
+      var f = ue[b];
+      return f || (f = ue[b] = new he(
+        b,
         j.getLevel(),
         j.methodFactory
-      )), y;
+      )), f;
     };
-    var it = typeof window !== o ? window.log : void 0;
+    var tt = typeof window !== o ? window.log : void 0;
     return j.noConflict = function() {
-      return typeof window !== o && window.log === j && (window.log = it), j;
+      return typeof window !== o && window.log === j && (window.log = tt), j;
     }, j.getLoggers = function() {
       return ue;
     }, j.default = j, j;
   });
-})(Ue);
-var kt = Ue.exports;
-const ce = /* @__PURE__ */ xt(kt), _t = w`
+})(Fe);
+var yt = Fe.exports;
+const ce = /* @__PURE__ */ mt(yt), ft = v`
   :host {
   }
   .cb-wrapper {
@@ -415,7 +416,7 @@ const ce = /* @__PURE__ */ xt(kt), _t = w`
       border-radius: 0;
     }
   }
-`, S = w`
+`, H = v`
     :host {
         --primary-color: var(--sl-color-primary-600);
     }
@@ -475,8 +476,8 @@ const ce = /* @__PURE__ */ xt(kt), _t = w`
     .text-button:hover {
         text-decoration: underline;
     }
-`, Ne = w`
-    ${S}
+`, Ue = v`
+    ${H}
 
     :host {
         display: inline-flex;
@@ -498,217 +499,582 @@ const ce = /* @__PURE__ */ xt(kt), _t = w`
         color: white;
     }
 `;
-var Ct = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, $e = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? $t(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 && Ct(e, o, r), r;
+var vt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, Ce = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? wt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && vt(e, o, a), a;
 };
-let U = class extends le {
+let N = class extends le {
   constructor() {
     super(...arguments), this.color = "primary", this.svg = "";
   }
   render() {
     return l`<span class="cb-icon color-${this.color}" part="base"
-            >${De(this.svg)}</span
+            >${Z(this.svg)}</span
         >`;
   }
 };
-U.styles = Ne;
-$e([
-  c({ type: String })
-], U.prototype, "color", 2);
-$e([
-  c({ type: String })
-], U.prototype, "svg", 2);
-U = $e([
+N.styles = Ue;
+Ce([
+  i({ type: String })
+], N.prototype, "color", 2);
+Ce([
+  i({ type: String })
+], N.prototype, "svg", 2);
+N = Ce([
   x("cb-icon")
-], U);
-const jt = w`
-    ${S}
-    :host {
-        position: relative;
-        font-weight: bold;
-        font-size: 16px;
-        line-height: 2rem;
-        padding: 10px;
-        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
-        width: 100%;
-        text-align: left;
-        color: rgba(255, 255, 255, 1);
-        border-radius-top-left: 6px;
-        border-radius-top-right: 6px;
-        top: 0;
-        box-sizing: border-box;
-
-        //background: var(--primary-color);
-        background: rgb(0, 208, 117);
-
-        // position: fixed;
-        // z-index: 100;
-        // top: 0;
+], N);
+let xt = (t) => crypto.getRandomValues(new Uint8Array(t)), kt = (t, e, o) => {
+  let r = (2 << Math.log(t.length - 1) / Math.LN2) - 1, a = -~(1.6 * r * e / t.length);
+  return (s = e) => {
+    let n = "";
+    for (; ; ) {
+      let c = o(a), g = a;
+      for (; g--; )
+        if (n += t[c[g] & r] || "", n.length === s)
+          return n;
     }
-
-    .cb-header {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        position: relative;
+  };
+}, _t = (t, e = 21) => kt(t, e, xt);
+const Ct = _t("1234567890abcdefghijklmnopqrstuvwxyz", 10);
+function ye(t = 10) {
+  return Ct(t);
+}
+function $t(t) {
+  return new Promise((e, o) => {
+    try {
+      navigator.clipboard.writeText(t).then(() => {
+        e(t);
+      });
+    } catch (r) {
+      o(r);
     }
-
-    .title {
-        justify-items: center;
+  });
+}
+function jt(t = !0) {
+  return new Promise((e) => {
+    const o = document.createElement("input");
+    o.type = "file", t && (o.multiple = !0), o.style.display = "none", o.addEventListener("change", () => {
+      const r = Array.prototype.slice.call(o.files);
+      e(r);
+    }), o.click();
+  });
+}
+const k = ce.noConflict();
+k.setLevel("info");
+class Mt {
+  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((r) => setTimeout(r, o)), k.info(`WSC: Created, url: ${this.url}`);
+  }
+  connect(e = {}) {
+    if (this.url = (e == null ? void 0 : e.url) || this.url, this.connected = !1, !this.url)
+      return k.error("WSC: URL must be provided to connect"), null;
+    const o = this.url;
+    k.info(`WSC: Connecting to ${o} ...`), this._ws = new WebSocket(o);
+    let r = setTimeout(() => {
+      k.error("WSC: connected message not received in time - terminating"), this._ws.close(), this._ws = null, this.connected = !1;
+    }, 15e3);
+    this._ws.onopen = () => {
+      k.info(`WSC: Connection to ${o} opened`);
+    }, this._ws.onmessage = (a) => {
+      let s = (a == null ? void 0 : a.data) || null;
+      if (!s)
+        return;
+      let n = null;
+      try {
+        n = JSON.parse(s);
+      } catch {
+        k.error(`Failed to parse message: ${s}`);
+        return;
+      }
+      (n == null ? void 0 : n.type) === "connected" && (k.info(`WS[${this.id}] Connected`), clearTimeout(r), this.connected = !0, this.sendQueuedMessages()), this.handleWscMessage(n);
+    }, this._ws.onerror = (a) => {
+      k.error("WSC: Socket error"), clearTimeout(r), this.connected = !1, this._ws = null;
+    }, this._ws.onclose = (a) => {
+      k.info(`WSC: Closed - code:${a.code}, reason:"${a.reason}"`), this.connected = !1, this._ws = null, this.reconnect();
+    };
+  }
+  reconnect() {
+    this.started && setTimeout(() => {
+      this.connect();
+    }, 1e3);
+  }
+  disconnect() {
+    if (!this._ws) {
+      k.info("WSC: already disconnected");
+      return;
     }
-
-    .cb-setting-button {
-        font-size: 1.5rem;
-        color: white;
+    k.info("WSC: disconnect"), this._ws.close();
+  }
+  async start() {
+    this.started = !0, this.connect();
+  }
+  async stop() {
+    this.started = !1, this.disconnect();
+  }
+  // Attempt to connect, and reconnect if failed
+  async startOld() {
+    let e = 1, o = !0;
+    for (; o; ) {
+      if (k.info(`WSC: start: connecting, attempt ${e}`), await this.connect(), this.connected)
+        return k.info("WSC: connected"), !0;
+      e++, o = e <= 4, o && await this.pause(1e3);
     }
-`;
-var Mt = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, St = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? Lt(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 && Mt(e, o, r), r;
-};
-class C extends le {
-  constructor() {
-    super(...arguments), this.lang = "en";
+    return k.error(`WSC: start: failed to connect after ${e} attempts, exiting`), !1;
   }
-  emit(e, o) {
-    const a = new CustomEvent(e, {
-      bubbles: !0,
-      cancelable: !1,
-      composed: !0,
-      detail: {},
-      ...o
-    });
-    return this.dispatchEvent(a), a;
+  handleWscMessage(e) {
+    this.onMessage && typeof this.onMessage == "function" && this.onMessage(e);
+  }
+  sendMessage(e) {
+    if (!this.connected) {
+      this.queue.push(JSON.stringify(e));
+      return;
+    }
+    this._ws.send(JSON.stringify(e));
+  }
+  sendQueuedMessages() {
+    if (Array.isArray(this.queue) && this.queue.length > 0)
+      for (let e = 0; e < this.queue.length; e++)
+        k.info("Sending queued message", this.queue[e]), this._ws.send(this.queue[e]);
+    this.queue = [];
   }
+  // Request assumes that response will be received.
+  // We wait for the response, and then return it.
+  // TODO Reconsider - disabled for now
+  /*
+    executeRequest(payload) {
+      return new Promise((resolve, reject) => {
+        if (!this._ws) {
+          logger.error(`WS[${this.id}]: _ws is NULL - exiting`);
+          resolve(null);
+        }
+  
+        const id = `${this.idCounter++}`;
+        const req = Object.assign({ id: id }, payload);
+        this._ws.send(JSON.stringify(req));
+  
+        // Setting up timeout for max time to wait for the response
+        let timerId = setTimeout(() => {
+          timerId = null;
+          logger.error(`WS[${this.id}]: Error: request timeout id:${id}, req:${JSON.stringify(req)}`);
+          reject(new Error(`WS[${this.id}]: Error: request timeout id:${id}, req:${JSON.stringify(req)}`));
+        }, 5000);
+        // Wait for response
+        this.once(`res-${id}`, (data) => {
+          logger.info(`WS: Response: ${id}: ${JSON.stringify(data)}`);
+          if (timerId) {
+            clearTimeout(timerId);
+            resolve(data);
+          }
+        });
+      });
+    }*/
 }
-St([
-  c({ 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 Ot = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, We = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? Ht(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 && Ot(e, o, r), r;
+var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, z = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? At(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && St(e, o, a), a;
 };
-const At = `<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M24.3481 14.0672C22.533 17.2743 20.3563 19.0776 15.6489 19.598C10.4618 20.1771 6.17492 16.8088 4.48156 14.2944C6.64105 15.0536 8.94167 15.3339 11.2218 15.1154C15.4497 14.7306 17.8624 13.0702 19.5927 10.3506C19.8546 9.94378 20.5629 8.66828 19.3234 8.23945C18.1871 7.84727 17.143 7.83627 16.3314 9.02014C15.0143 10.9517 13.4722 11.6921 10.2442 12.044C5.9425 12.5021 0.777569 9.67256 0.179913 10.2627C-0.889966 11.3182 2.58161 22.9224 15.3759 22.7795C19.9837 22.7281 23.2192 21.1668 26.2481 17.2816C26.9859 16.3396 26.7572 15.1961 25.9492 14.1222C25.4512 13.4587 24.7429 13.4111 24.3629 14.0818" fill="#FFFFFF"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M27.7123 7.10689C29.4278 2.66462 27.7713 -0.131961 27.1368 -1.24653e-05C26.6203 0.11361 25.6611 3.03481 24.296 4.73548C19.7066 2.64629 16.8253 4.54489 16.8917 5.55283C16.9471 6.39217 20.7249 5.7874 24.2702 8.85154C28.0369 12.0953 28.1476 15.6102 29.2249 15.5956C30.0881 15.5956 31.9217 12.1759 27.7123 7.10689Z" fill="#FFFFFF"/>
-    </g>
-</svg>`;
-let te = class extends C {
+const S = ce.noConflict();
+S.setLevel("info");
+const F = "cb_";
+class L extends X {
   constructor() {
-    super(...arguments), this.title = "ChatBot";
-  }
-  render() {
-    return l` <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="${At}"></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>
-                </sl-button>
-            </span>
-        </header>`;
+    super(...arguments), this.actionIdCounter = 0, this.wsClient = null, this.replyMessage = null;
   }
-  _clickHandler() {
-    this.emit("setting:show");
+  // this is called at startup
+  setSetting(e) {
+    S.info("appState: Startup: setSetting", e), this.setting = e, this.initBot().catch((o) => {
+      S.info(`Exception during bot initialization: ${o.message}`);
+    });
   }
-  _clickCloseHandler() {
-    this.emit("chatbot:toggle", {
-      detail: {
-        open: !1
+  clearConversation() {
+    this.wsClient && (this.wsClient.stop().then(() => {
+    }), this.wsClient = null), this.conversationId = ye(), this.connectWs = "false", this.messages = [], this.actions = [], this.addMessage({
+      author: "assistant",
+      type: "text",
+      data: {
+        text: this.setting.welcomeMessage
       }
     });
   }
-};
-te.styles = jt;
-We([
-  c({ type: String, attribute: "title" })
-], te.prototype, "title", 2);
-te = We([
-  x("cb-header")
-], te);
-const Pt = w`
-    ${S}
-    .cb-footer {
-        line-height: 60px;
-        font-size: 16px;
-    }
-
-    .p-2 {
-        padding: 0.5rem;
+  // set language
+  setLanguage(e) {
+    this.language = e;
+  }
+  // set theme
+  setTheme(e) {
+    this.theme = e;
+  }
+  async initBot() {
+    const o = `${this.setting.url.startsWith("localhost") ? "http" : "https"}://${this.setting.url}/api/bot/settings/${this.setting.orgId}/${this.setting.botId}`;
+    let r = null, a = null;
+    try {
+      r = await fetch(o, {
+        headers: {
+          "Access-Control-Allow-Origin": "null",
+          "X-Enegel-Signature": this.setting.botId
+        }
+      }), !r.ok || r.status !== 200 ? S.error(`Failed to get bot ${this.setting.botId} settings: ${r.status} ${r.statusText}`) : a = await r.json();
+    } catch (s) {
+      S.error(`Failed to get bot ${this.setting.botId} settings: ${s.message}`), a = null;
     }
-
-    .link__item {
-        color: var(--primary-color);
+    if (!a) {
+      S.error("No bot settings available - bot disabled"), this.disabled = !0;
+      return;
     }
-`;
-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;
-};
-let ye = class extends C {
-  constructor() {
-    super(...arguments), this.year = (/* @__PURE__ */ new Date()).getFullYear();
+    this.setting.welcomeMessage = (a == null ? void 0 : a.welcomeMessage) || "How can I help ?", Array.isArray(this.messages) && this.messages.length <= 0 && this.addMessage({
+      author: "assistant",
+      type: "text",
+      data: {
+        text: this.setting.welcomeMessage
+      }
+    }), this.connectWs === "true" && (S.info("appState: connectWs is true"), this.getWsClient().catch((s) => {
+      S.error(`Exception during ws client startup: ${s.message}`);
+    }));
   }
-  render() {
-    return l`
-            <div class="cb-footer" part="footer">
-                yugasun@${this.year}
-                <a
-                    class="link__item underline"
-                    href="https://github.com/yugasun/chatbot"
-                    target="_blank"
-                >
-                    Github
-                </a>
-                <span class="p-2"> | </span>
-                <a
-                    class="link__item underline"
-                    href="https://lit.dev/"
-                    target="_blank"
-                >
-                    Lit
-                </a>
-                <span class="p-2"> | </span>
-                <a
-                    class="link__item underline"
-                    href="https://vitejs.dev"
-                    target="_blank"
-                >
-                    Vite
-                </a>
-            </div>
-        `;
+  // Lazy initialization: avoid connecting until we actually need to send something
+  // TODO Depending on state, start ws & connect immediately when initialized
+  //  use case: page refresh in the middle of the conversation
+  async getWsClient() {
+    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 S.info(`Initiating ws connection to ${o} ...`), this.wsClient = new Mt({
+      url: o,
+      orgId: this.setting.orgId,
+      botId: this.setting.botId,
+      convId: this.conversationId
+    }), await this.wsClient.start(), this.wsClient.onMessage = (r) => {
+      this.handleWscMessage(r);
+    }, this.wsClient;
   }
-};
-ye.styles = Pt;
-ye = Tt([
-  x("cb-footer")
-], ye);
-const It = w`
-  ${S}
-
+  handleWscMessage(e) {
+    switch (e == null ? void 0 : e.type) {
+      case "message": {
+        if (this.replyMessage)
+          this.replyMessage.data.text = e.text, this.updateMessage(this.replyMessage, ""), this.replyMessage = null;
+        else {
+          const o = {
+            type: "text",
+            author: "assistant",
+            data: {
+              text: e.text
+            }
+          };
+          "userName" in e && (o.data.userName = e.userName, this.connectWs = "true"), "userAvatar" in e && (o.data.userAvatar = e.userAvatar, this.connectWs = "true");
+          const r = this.formatMessage(o);
+          this.messages = this.messages.concat([r]);
+        }
+        break;
+      }
+      case "message-chunk": {
+        this.replyMessage && (this.replyMessage = this.updateMessage(this.replyMessage, e.text));
+        break;
+      }
+      case "typing": {
+        this.replyMessage = {
+          author: "assistant",
+          type: "text",
+          isThinking: !0,
+          data: {
+            text: ""
+          }
+        }, this.addMessage(this.replyMessage);
+        break;
+      }
+      case "actions": {
+        this.addActions((e == null ? void 0 : e.actions) || []);
+        break;
+      }
+    }
+  }
+  addActions(e) {
+    if (Array.isArray(e) && e.length > 0) {
+      const o = e.map((r) => Object.assign(r, { internalId: this.actionIdCounter++ }));
+      this.actions = this.actions.concat(o);
+    }
+  }
+  removeAction(e) {
+    const o = this.actions.findIndex((r) => r.internalId === e);
+    if (o !== -1) {
+      this.actions.splice(o, 1);
+      const r = [];
+      this.actions = r.concat(this.actions);
+    }
+  }
+  async sendMessage(e) {
+    e = this.formatMessage(e), S.info("Send Message:", e), this.messages = this.messages.concat([e]);
+    const o = await this.getWsClient();
+    if (!o) {
+      S.error("Error - failed to obtain ws client"), this.replyMessage = null;
+      return;
+    }
+    o.sendMessage({
+      type: "message",
+      id: e.id,
+      text: e.data.text
+    });
+  }
+  // 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;
+  }
+  // add message
+  addMessage(e) {
+    e = this.formatMessage(e), this.messages = this.messages.concat([e]);
+  }
+  addSystemMessage(e) {
+    this.addMessage({
+      type: "text",
+      author: "system",
+      data: {
+        text: e
+      }
+    });
+  }
+  // update message
+  updateMessage(e, o) {
+    const r = this.formatMessage(e);
+    return r.isThinking = !1, o && (r.data.text += o), this.messages = this.messages.map((a) => a.id === r.id ? r : a), r;
+  }
+  // remove message
+  removeMessage(e) {
+    this.messages = this.messages.filter((o) => o.id !== e);
+  }
+  // clear messages
+  clearMessages() {
+    this.messages = [];
+  }
+}
+z([
+  D({ prefix: F }),
+  I({ value: "en" })
+], L.prototype, "language", 2);
+z([
+  D({ prefix: F }),
+  I({ value: "light" })
+], L.prototype, "theme", 2);
+z([
+  D({ prefix: F }),
+  I({ value: "false" })
+], L.prototype, "connectWs", 2);
+z([
+  D({ prefix: F }),
+  I({ value: ye() })
+], L.prototype, "conversationId", 2);
+z([
+  D({ prefix: F }),
+  I({ type: Array, value: [] })
+], L.prototype, "messages", 2);
+z([
+  I({
+    type: Array,
+    value: []
+    /*value: [
+      {
+        internalId: 1,
+        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: 2,
+        type: 'link',
+        title: 'Sign Up',
+        url: 'https://signup.ticketspice.com/',
+        // TODO Any other properties
+      },
+    ],*/
+  })
+], L.prototype, "actions", 2);
+z([
+  I({ type: Boolean, value: !1 })
+], L.prototype, "disabled", 2);
+z([
+  D({ prefix: F }),
+  I({
+    type: Object,
+    value: {
+      orgId: null,
+      botId: null,
+      url: null,
+      welcomeMessage: null
+    }
+  })
+], L.prototype, "setting", 2);
+const m = new L(), Ht = v`
+  ${H}
+  :host {
+    position: relative;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 2rem;
+    padding: 10px;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
+    width: 100%;
+    text-align: left;
+    color: rgba(255, 255, 255, 1);
+    border-radius-top-left: 6px;
+    border-radius-top-right: 6px;
+    top: 0;
+    box-sizing: border-box;
+
+    //background: var(--primary-color);
+    background: var(--enegelai-bot-header-background, rgb(0, 208, 117));
+
+    // position: fixed;
+    // z-index: 100;
+    // top: 0;
+  }
+
+  .cb-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+  }
+
+  .title {
+    justify-items: center;
+  }
+
+  .cb-setting-button {
+    font-size: 1.5rem;
+    color: white;
+  }
+`;
+var Lt = Object.defineProperty, Ot = Object.getOwnPropertyDescriptor, Pt = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? Ot(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && Lt(e, o, a), a;
+};
+class C extends le {
+  constructor() {
+    super(...arguments), this.lang = "en";
+  }
+  emit(e, o) {
+    const r = new CustomEvent(e, {
+      bubbles: !0,
+      cancelable: !1,
+      composed: !0,
+      detail: {},
+      ...o
+    });
+    return this.dispatchEvent(r), r;
+  }
+}
+Pt([
+  i({ type: String })
+], C.prototype, "lang", 2);
+const $e = '<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 It = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, Ze = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? zt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && It(e, o, a), a;
+};
+let te = class extends C {
+  constructor() {
+    super(...arguments), this.title = "ChatBot";
+  }
+  render() {
+    return l` <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="${m.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="${$e}"></cb-icon>
+        </sl-button>
+      </span>
+    </header>`;
+  }
+  _clickHandler() {
+    this.emit("setting:show");
+  }
+  _clickCloseHandler() {
+    this.emit("chatbot:toggle", {
+      detail: {
+        open: !1
+      }
+    });
+  }
+};
+te.styles = Ht;
+Ze([
+  i({ type: String, attribute: "title" })
+], te.prototype, "title", 2);
+te = Ze([
+  x("cb-header")
+], te);
+const Et = v`
+    ${H}
+    .cb-footer {
+        line-height: 60px;
+        font-size: 16px;
+    }
+
+    .p-2 {
+        padding: 0.5rem;
+    }
+
+    .link__item {
+        color: var(--primary-color);
+    }
+`;
+var Tt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, Bt = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? Rt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && Tt(e, o, a), a;
+};
+let fe = class extends C {
+  constructor() {
+    super(...arguments), this.year = (/* @__PURE__ */ new Date()).getFullYear();
+  }
+  render() {
+    return l`
+            <div class="cb-footer" part="footer">
+                yugasun@${this.year}
+                <a
+                    class="link__item underline"
+                    href="https://github.com/yugasun/chatbot"
+                    target="_blank"
+                >
+                    Github
+                </a>
+                <span class="p-2"> | </span>
+                <a
+                    class="link__item underline"
+                    href="https://lit.dev/"
+                    target="_blank"
+                >
+                    Lit
+                </a>
+                <span class="p-2"> | </span>
+                <a
+                    class="link__item underline"
+                    href="https://vitejs.dev"
+                    target="_blank"
+                >
+                    Vite
+                </a>
+            </div>
+        `;
+  }
+};
+fe.styles = Et;
+fe = Bt([
+  x("cb-footer")
+], fe);
+const Vt = v`
+  ${H}
+
   :host {
     width: 100%;
     height: 100%;
@@ -733,28 +1099,22 @@ const It = w`
   }
   */
 
-  /* total width */
+  /*
   :host::-webkit-scrollbar {
     background-color: #fff;
     width: 16px;
   }
-
-  /* background of the scrollbar except button or resizer */
   :host::-webkit-scrollbar-track {
     background-color: #fff;
   }
-
-  /* scrollbar itself */
   :host::-webkit-scrollbar-thumb {
     background-color: #babac0;
     border-radius: 16px;
     border: 4px solid #fff;
   }
-
-  /* set button(top and bottom of the scrollbar) */
   :host::-webkit-scrollbar-button {
     display: none;
-  }
+  }*/
 
   .cb-actions-list {
     margin: 10px 0px 0px 0px;
@@ -808,17 +1168,17 @@ const It = w`
     transition: background 0s;
   }
 `;
-var Rt = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, Vt = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? Bt(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;
+var qt = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, Ft = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? Dt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && qt(e, o, a), a;
 };
 let ve = class extends le {
   render() {
     return l` <div class="cb-thinking" style="color: rgb(34, 34, 34);"><span></span><span></span><span></span></div>`;
   }
 };
-ve.styles = w`
+ve.styles = v`
     .cb-thinking {
       text-align: center;
     }
@@ -856,13 +1216,13 @@ ve.styles = w`
       }
     }
   `;
-ve = Vt([
+ve = Ft([
   x("cb-thinking")
 ], ve);
-var qt = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, Ke = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? Dt(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 && qt(e, o, r), r;
+var Ut = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, Ne = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? Zt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && Ut(e, o, a), a;
 };
 let oe = class extends C {
   constructor() {
@@ -880,7 +1240,7 @@ let oe = class extends C {
         </div>`;
   }
 };
-oe.styles = w`
+oe.styles = v`
         .cb-uploading {
             text-align: left;
         }
@@ -898,14 +1258,14 @@ oe.styles = w`
             margin-right: 5px;
         }
     `;
-Ke([
-  c({ type: Array })
+Ne([
+  i({ type: Array })
 ], oe.prototype, "files", 2);
-oe = Ke([
+oe = Ne([
   x("cb-uploading")
 ], oe);
-const Ft = w`
-    ${S}
+const Nt = v`
+    ${H}
     :host {
     }
 
@@ -925,12 +1285,12 @@ const Ft = w`
         margin-right: 0.2em;
     }
 `;
-var Zt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, Me = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? Ut(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;
+var Wt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, je = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? Jt(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && Wt(e, o, a), a;
 };
-let N = class extends le {
+let W = class extends le {
   constructor() {
     super(...arguments), this.url = "", this.inverse = !1;
   }
@@ -950,7 +1310,7 @@ let N = class extends le {
         `;
   }
 };
-N.styles = w`
+W.styles = v`
         :host {
             --primary-color: var(--sl-color-primary-600);
         }
@@ -975,31 +1335,31 @@ N.styles = w`
             text-decoration: underline;
         }
     `;
-Me([
-  c({ type: String })
-], N.prototype, "url", 2);
-Me([
-  c({ type: Boolean })
-], N.prototype, "inverse", 2);
-N = Me([
+je([
+  i({ type: String })
+], W.prototype, "url", 2);
+je([
+  i({ type: Boolean })
+], W.prototype, "inverse", 2);
+W = je([
   x("cb-external-link")
-], N);
-const Nt = '<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>', Wt = '<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>', Kt = '<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>', Jt = '<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>', Yt = '<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>', Gt = '<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>', Qt = '<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 Xt = Object.defineProperty, eo = Object.getOwnPropertyDescriptor, Le = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? eo(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 && Xt(e, o, r), r;
+], W);
+const Kt = '<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>', Yt = '<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>', Gt = '<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>', Xt = '<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>', 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-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>', 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 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>', to = '<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 oo = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, Me = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? ro(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && oo(e, o, a), a;
 };
 const Pe = {
-  pdf: Wt,
-  txt: Nt,
-  md: Kt,
-  csv: Jt,
-  ppd: Yt,
-  doc: Gt,
-  docx: Qt
+  pdf: Yt,
+  txt: Kt,
+  md: Gt,
+  csv: Xt,
+  ppd: Qt,
+  doc: eo,
+  docx: to
 };
-let W = class extends C {
+let J = class extends C {
   constructor() {
     super(...arguments), this.filename = "", this.url = "";
   }
@@ -1029,17 +1389,17 @@ let W = class extends C {
         `;
   }
 };
-W.styles = Ft;
-Le([
-  c({ type: String })
-], W.prototype, "filename", 2);
-Le([
-  c({ type: String })
-], W.prototype, "url", 2);
-W = Le([
+J.styles = Nt;
+Me([
+  i({ type: String })
+], J.prototype, "filename", 2);
+Me([
+  i({ type: String })
+], J.prototype, "url", 2);
+J = Me([
   x("cb-file")
-], W);
-const to = '<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>', oo = '<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>', ro = w`
+], J);
+const ao = '<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>', so = '<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>', no = v`
     pre code.hljs {
         display: block;
         overflow-x: auto;
@@ -2204,9 +2564,9 @@ const to = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="curr
     pre {
         background-color: #282c34;
     }
-`, ao = w`
-  ${S}
-  ${ro}
+`, io = v`
+  ${H}
+  ${no}
 
     .cb-message-row {
     width: 100%;
@@ -2300,7 +2660,7 @@ const to = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="curr
     //margin-left: auto;
     color: rgb(255, 255, 255);
     //background-color: var(--primary-color);
-    background-color: rgba(0, 208, 117, 1);
+    background-color: var(--enegelai-bot-message-user-background, rgba(0, 208, 117, 1));
     text-align: left;
     padding: 6px 12px;
   }
@@ -2315,7 +2675,7 @@ const to = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="curr
     margin-left: 0px;
     margin-top: 2px;
     color: rgb(34, 34, 34);
-    background-color: rgba(234, 234, 234, 0.3);
+    background-color: var(--enegelai-bot-message-bot-background, rgba(234, 234, 234, 0.3));
     padding: 4px 12px 6px 12px;
   }
 
@@ -2325,7 +2685,7 @@ const to = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="curr
     margin-left: 0px;
     margin-top: 2px;
     color: rgba(34, 34, 34, 0.6);
-    background-color: rgba(254, 243, 199, 0.5);
+    background-color: var(--enegelai-bot-message-system-background, rgba(254, 243, 199, 0.5));
     padding: 4px 12px 6px 12px;
   }
 
@@ -2360,66 +2720,20 @@ const to = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><g fill="curr
     font-size: 1em;
   }
 `;
-function ze(t, e) {
-  return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${e}</span><span class="code-block-header__copy">Copy</span></div><code class="hljs code-block-body ${e}">${t}</code></pre>`;
-}
-function so() {
-  const t = new bt({
-    linkify: !0,
-    highlight(e, o) {
-      if (!!(o && ge.getLanguage(o))) {
-        const r = o ?? "";
-        return ze(ge.highlight(e, { language: r }).value, r);
-      }
-      return ze(ge.highlightAuto(e).value, "");
-    }
+function lo() {
+  const t = new lt({
+    linkify: !0
   });
-  return t.use(gt, { attrs: { target: "_blank", rel: "noopener" } }), t;
+  return t.use(dt, { attrs: { target: "_blank", rel: "noopener" } }), t.use(ct), t;
 }
-async function Ee(t) {
-  const e = so();
-  return l`${De(e.render(t))}`;
+async function Ie(t) {
+  const e = lo();
+  return l`${Z(e.render(t))}`;
 }
-let no = (t) => crypto.getRandomValues(new Uint8Array(t)), io = (t, e, o) => {
-  let a = (2 << Math.log(t.length - 1) / Math.LN2) - 1, r = -~(1.6 * a * e / t.length);
-  return (s = e) => {
-    let n = "";
-    for (; ; ) {
-      let i = o(r), u = r;
-      for (; u--; )
-        if (n += t[i[u] & a] || "", n.length === s)
-          return n;
-    }
-  };
-}, lo = (t, e = 21) => io(t, e, no);
-const co = lo("1234567890abcdefghijklmnopqrstuvwxyz", 10);
-function we(t = 10) {
-  return co(t);
-}
-function po(t) {
-  return new Promise((e, o) => {
-    try {
-      navigator.clipboard.writeText(t).then(() => {
-        e(t);
-      });
-    } catch (a) {
-      o(a);
-    }
-  });
-}
-function ho(t = !0) {
-  return new Promise((e) => {
-    const o = document.createElement("input");
-    o.type = "file", t && (o.multiple = !0), o.style.display = "none", o.addEventListener("change", () => {
-      const a = Array.prototype.slice.call(o.files);
-      e(a);
-    }), o.click();
-  });
-}
-var uo = Object.defineProperty, bo = Object.getOwnPropertyDescriptor, de = (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 && uo(e, o, r), r;
+var co = Object.defineProperty, po = Object.getOwnPropertyDescriptor, de = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? po(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && co(e, o, a), a;
 };
 let V = class extends C {
   constructor() {
@@ -2444,473 +2758,142 @@ let V = class extends C {
     this.emit("message:remove", {
       detail: this.message
     });
-  }
-  _addCopyEvents() {
-    this.copyBtns.forEach((t) => {
-      t.addEventListener("click", () => {
-        var o, a;
-        const e = (a = (o = t.parentElement) == null ? void 0 : o.nextElementSibling) == null ? void 0 : a.textContent;
-        e && po(e).then(() => {
-          t.textContent = "Success", setTimeout(() => {
-            t.textContent = "Copy";
-          }, 500);
-        });
-      });
-    });
-  }
-  _removeCopyEvents() {
-    this.copyBtns.forEach((t) => {
-      t.removeEventListener("click", () => {
-      });
-    });
-  }
-  render() {
-    return B(
-      this.message.data || this.message.isThinking,
-      () => l`
-        <div class="cb-message-row" part="cb-message-row">
-          <!-- message -->
-          ${B(
-        this._isBot,
-        () => this.renderBotMessage(this.message),
-        () => this.renderUserMessage(this.message)
-      )}
-        </div>
-      `,
-      () => null
-    );
-  }
-  renderButtons(t = "left") {
-    return l`<div class="cb-message__buttons ${t}">
-      <!-- delete button -->
-      <sl-button class="cb-message__delete-button" name="trash" @click=${this._removeMessageHandler} circle variant="text" size="small">
-        <cb-icon svg="${to}" style="font-size: 1em !important;"></cb-icon>
-      </sl-button>
-    </div>`;
-  }
-  renderMessage(t) {
-    return l`
-      <div
-        class="cb-message__content
-               ${t.author}-message
-               message-type-${t.type}
-               ${t.isThinking ? "thinking" : ""}"
-        style="display: flex"
-      >
-        ${this.renderMessageContent(t)}
-      </div>
-    `;
-  }
-  async _getMessageText(t) {
-    return Ee(t.data.text);
-  }
-  renderMessageContent(t) {
-    var e;
-    return console.log("renderMessageContent!"), t.isThinking ? l`<cb-thinking></cb-thinking>` : t.isUploading ? l`<cb-uploading .files="${t.data.files || []}"></cb-uploading>` : t.type === "text" ? l`<div class="cb-message-text">
-        ${B(
-      t.data.userName,
-      () => l`<div style="font-size: 12px; color:#9ca3af">${t.data.userName}</div>`,
-      () => null
-    )}
-        ${Ae(
-      this._getMessageText(t).then((o) => l`${o}`)
-    )}
-      </div>` : t.type === "file" ? l`${fe(
-      t.data.files || [],
-      (o) => o.id,
-      (o) => l`<cb-file filename="${o.name}" url="${o.url}"></cb-file>`
-    )}` : l`<div class="cb-message-text">
-      ${Ae(
-      Ee(((e = t.data.text) == null ? void 0 : e.toString()) || "").then((o) => l`${o}`)
-    )}
-    </div>`;
-  }
-  renderBotMessageAvatar(t) {
-    if (t.data.userName && t.data.userName !== "") {
-      const e = t.data.userAvatar || "";
-      return l` <img src="${e}" style="width: 24px;height: 24px;" /> `;
-    }
-    return t.author === "system" ? l` <svg fill="currentColor" style="width: 24px;height: 24px;" 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>` : l` <svg fill="currentColor" style="width: 24px;height: 24px;" viewBox="0 0 24 24">
-      <path
-        d="M8,14.25L4.75,11H7C7.25,5.39 9.39,1 12,1C14,1 15.77,3.64 16.55,7.45C20.36,8.23 23,10 23,12C23,13.83 20.83,15.43 17.6,16.3L17.89,14.27C19.8,13.72 21,12.91 21,12C21,10.94 19.35,10 16.87,9.5C16.95,10.29 17,11.13 17,12C17,18.08 14.76,23 12,23C10.17,23 8.57,20.83 7.7,17.6L9.73,17.89C10.28,19.8 11.09,21 12,21C13.66,21 15,16.97 15,12C15,11 14.95,10.05 14.85,9.15C13.95,9.05 13,9 12,9L10.14,9.06L10.43,7.05L12,7C12.87,7 13.71,7.05 14.5,7.13C14,4.65 13.06,3 12,3C10.46,3 9.18,6.5 9,11H11.25L8,14.25M14.25,16L11,19.25V17C5.39,16.75 1,14.61 1,12C1,10.17 3.17,8.57 6.4,7.7L6.11,9.73C4.2,10.28 3,11.09 3,12C3,13.54 6.5,14.82 11,15V12.75L14.25,16Z"
-      />
-    </svg>`;
-  }
-  renderBotMessage(t) {
-    return l`
-      <div class="cb-message cb-bot-message-wrapper" part="cb-message">
-        <div class="avatar assistant-avatar xsmall" style="margin-top:4px;">${this.renderBotMessageAvatar(t)}</div>
-        <div style="margin-left: 4px;width: 100%">${this.renderMessage(t)}</div>
-      </div>
-    `;
-  }
-  renderUserMessage(t) {
-    return l`
-      <div class="cb-message" part="cb-message" style="display: flex; justify-content: end;align-items: start;">
-        <!--<sl-avatar class="avatar user-avatar small" label="User">
-          <cb-icon slot="icon" svg="${oo}" color="white"></cb-icon>
-        </sl-avatar>-->
-        <div class="avatar user-avatar">
-          <svg viewBox="0 0 24 24" width="1.2em" height="1.2em" style="width: 24px;height: 24px;">
-            <path fill="currentColor" 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>
-        </div>
-        ${this.renderMessage(t)}
-      </div>
-    `;
-  }
-};
-V.styles = ao;
-de([
-  c({ type: Object })
-], V.prototype, "message", 2);
-de([
-  c({ type: String })
-], V.prototype, "type", 2);
-de([
-  ut(".code-block-header__copy")
-], V.prototype, "copyBtns", 2);
-V = de([
-  x("cb-message")
-], V);
-const k = ce.noConflict();
-k.setLevel("info");
-class go {
-  constructor(e = {}) {
-    this.id = 0, this.url = (e == null ? void 0 : e.url) || 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)), k.info(`WSC: Created, url: ${this.url}`);
-  }
-  connect(e = {}) {
-    if (this.url = (e == null ? void 0 : e.url) || this.url, this.connected = !1, !this.url)
-      return k.error("WSC: URL must be provided to connect"), null;
-    const o = this.url;
-    k.info(`WSC: Connecting to ${o} ...`), this._ws = new WebSocket(o);
-    let a = setTimeout(() => {
-      k.error("WSC: connected message not received in time - terminating"), this._ws.close(), this._ws = null, this.connected = !1;
-    }, 15e3);
-    this._ws.onopen = () => {
-      k.info(`WSC: Connection to ${o} opened`);
-    }, this._ws.onmessage = (r) => {
-      let s = (r == null ? void 0 : r.data) || null;
-      if (!s)
-        return;
-      let n = null;
-      try {
-        n = JSON.parse(s);
-      } catch {
-        k.error(`Failed to parse message: ${s}`);
-        return;
-      }
-      (n == null ? void 0 : n.type) === "connected" && (k.info(`WS[${this.id}] Connected`), clearTimeout(a), this.connected = !0, this.sendQueuedMessages()), this.handleWscMessage(n);
-    }, this._ws.onerror = (r) => {
-      k.error("WSC: Socket error"), clearTimeout(a), this.connected = !1, this._ws = null;
-    }, this._ws.onclose = (r) => {
-      k.info(`WSC: Closed - code:${r.code}, reason:"${r.reason}"`), this.connected = !1, this._ws = null, this.reconnect();
-    };
-  }
-  reconnect() {
-    this.started && setTimeout(() => {
-      this.connect();
-    }, 1e3);
-  }
-  disconnect() {
-    if (!this._ws) {
-      k.info("WSC: already disconnected");
-      return;
-    }
-    k.info("WSC: disconnect"), this._ws.close();
-  }
-  async start() {
-    this.started = !0, this.connect();
-  }
-  async stop() {
-    this.started = !1, this.disconnect();
-  }
-  // Attempt to connect, and reconnect if failed
-  async startOld() {
-    let e = 1, o = !0;
-    for (; o; ) {
-      if (k.info(`WSC: start: connecting, attempt ${e}`), await this.connect(), this.connected)
-        return k.info("WSC: connected"), !0;
-      e++, o = e <= 4, o && await this.pause(1e3);
-    }
-    return k.error(`WSC: start: failed to connect after ${e} attempts, exiting`), !1;
-  }
-  handleWscMessage(e) {
-    this.onMessage && typeof this.onMessage == "function" && this.onMessage(e);
-  }
-  sendMessage(e) {
-    if (!this.connected) {
-      this.queue.push(JSON.stringify(e));
-      return;
-    }
-    this._ws.send(JSON.stringify(e));
-  }
-  sendQueuedMessages() {
-    if (Array.isArray(this.queue) && this.queue.length > 0)
-      for (let e = 0; e < this.queue.length; e++)
-        k.info("Sending queued message", this.queue[e]), this._ws.send(this.queue[e]);
-    this.queue = [];
-  }
-  // Request assumes that response will be received.
-  // We wait for the response, and then return it.
-  // TODO Reconsider - disabled for now
-  /*
-    executeRequest(payload) {
-      return new Promise((resolve, reject) => {
-        if (!this._ws) {
-          logger.error(`WS[${this.id}]: _ws is NULL - exiting`);
-          resolve(null);
-        }
-  
-        const id = `${this.idCounter++}`;
-        const req = Object.assign({ id: id }, payload);
-        this._ws.send(JSON.stringify(req));
-  
-        // Setting up timeout for max time to wait for the response
-        let timerId = setTimeout(() => {
-          timerId = null;
-          logger.error(`WS[${this.id}]: Error: request timeout id:${id}, req:${JSON.stringify(req)}`);
-          reject(new Error(`WS[${this.id}]: Error: request timeout id:${id}, req:${JSON.stringify(req)}`));
-        }, 5000);
-        // Wait for response
-        this.once(`res-${id}`, (data) => {
-          logger.info(`WS: Response: ${id}: ${JSON.stringify(data)}`);
-          if (timerId) {
-            clearTimeout(timerId);
-            resolve(data);
-          }
-        });
-      });
-    }*/
-}
-var mo = Object.defineProperty, fo = Object.getOwnPropertyDescriptor, R = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? fo(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 z = ce.noConflict();
-z.setLevel("info");
-const F = "cb_";
-class A extends G {
-  constructor() {
-    super(...arguments), this.actionIdCounter = 0, this.wsClient = null, this.replyMessage = null;
-  }
-  // this is called at startup
-  setSetting(e) {
-    z.info("appState: Startup: setSetting", e), this.setting = e, Array.isArray(this.messages) && this.messages.length <= 0 && this.addMessage({
-      author: "assistant",
-      type: "text",
-      data: {
-        text: this.setting.welcomeMessage
-      }
-    }), this.connectWs === "true" && (z.info("appState: connectWs is true"), this.getWsClient().catch((o) => {
-      z.info(`Exception during ws client startup: ${o.message}`);
-    }));
-  }
-  clearConversation() {
-    this.wsClient && (this.wsClient.stop().then(() => {
-    }), this.wsClient = null), this.conversationId = we(), this.connectWs = "false", this.messages = [], this.actions = [], this.addMessage({
-      author: "assistant",
-      type: "text",
-      data: {
-        text: this.setting.welcomeMessage
-      }
-    });
-  }
-  // set language
-  setLanguage(e) {
-    this.language = e;
-  }
-  // set theme
-  setTheme(e) {
-    this.theme = e;
-  }
-  // Lazy initialization: avoid connecting until we actually need to send something
-  // TODO Depending on state, start ws & connect immediately when initialized
-  //  use case: page refresh in the middle of the conversation
-  async getWsClient() {
-    if (this.wsClient)
-      return this.wsClient;
-    const e = `${this.setting.url}/api/bot/connect/${this.setting.orgId}/${this.setting.botId}/${this.conversationId}`;
-    return z.info(`Initiating ws connection to ${e} ...`), this.wsClient = new go({
-      url: e
-    }), await this.wsClient.start(), this.wsClient.onMessage = (o) => {
-      this.handleWscMessage(o);
-    }, this.wsClient;
-  }
-  handleWscMessage(e) {
-    switch (e == null ? void 0 : e.type) {
-      case "message": {
-        if (this.replyMessage)
-          this.replyMessage.data.text = e.text, this.updateMessage(this.replyMessage, ""), this.replyMessage = null;
-        else {
-          const o = {
-            type: "text",
-            author: "assistant",
-            data: {
-              text: e.text
-            }
-          };
-          "userName" in e && (o.data.userName = e.userName, this.connectWs = "true"), "userAvatar" in e && (o.data.userAvatar = e.userAvatar, this.connectWs = "true");
-          const a = this.formatMessage(o);
-          this.messages = this.messages.concat([a]);
-        }
-        break;
-      }
-      case "message-chunk": {
-        this.replyMessage && (this.replyMessage = this.updateMessage(this.replyMessage, e.text));
-        break;
-      }
-      case "typing": {
-        this.replyMessage = {
-          author: "assistant",
-          type: "text",
-          isThinking: !0,
-          data: {
-            text: ""
-          }
-        }, this.addMessage(this.replyMessage);
-        break;
-      }
-      case "actions": {
-        this.addActions((e == null ? void 0 : e.actions) || []);
-        break;
-      }
-    }
-  }
-  addActions(e) {
-    if (Array.isArray(e) && e.length > 0) {
-      const o = e.map((a) => Object.assign(a, { internalId: this.actionIdCounter++ }));
-      this.actions = this.actions.concat(o);
-    }
-  }
-  removeAction(e) {
-    const o = this.actions.findIndex((a) => a.internalId === e);
-    if (o !== -1) {
-      this.actions.splice(o, 1);
-      const a = [];
-      this.actions = a.concat(this.actions);
-    }
-  }
-  async sendMessage(e) {
-    e = this.formatMessage(e), z.info("Send Message:", e), this.messages = this.messages.concat([e]);
-    const o = await this.getWsClient();
-    if (!o) {
-      z.error("Error - failed to obtain ws client"), this.replyMessage = null;
-      return;
-    }
-    o.sendMessage({
-      type: "message",
-      id: e.id,
-      text: e.data.text
+  }
+  _addCopyEvents() {
+    this.copyBtns.forEach((t) => {
+      t.addEventListener("click", () => {
+        var o, r;
+        const e = (r = (o = t.parentElement) == null ? void 0 : o.nextElementSibling) == null ? void 0 : r.textContent;
+        e && $t(e).then(() => {
+          t.textContent = "Success", setTimeout(() => {
+            t.textContent = "Copy";
+          }, 500);
+        });
+      });
     });
   }
-  // TODO revisit below
-  formatMessage(e) {
-    var o;
-    return e.id || (e.id = we()), e.timestamp = Date.now(), e.author === "assistant" && (e.replyId = (o = this.messages[this.messages.length - 1]) == null ? void 0 : o.id), e;
+  _removeCopyEvents() {
+    this.copyBtns.forEach((t) => {
+      t.removeEventListener("click", () => {
+      });
+    });
   }
-  // add message
-  addMessage(e) {
-    e = this.formatMessage(e), this.messages = this.messages.concat([e]);
+  render() {
+    return B(
+      this.message.data || this.message.isThinking,
+      () => l`
+        <div class="cb-message-row" part="cb-message-row">
+          <!-- message -->
+          ${B(
+        this._isBot,
+        () => this.renderBotMessage(this.message),
+        () => this.renderUserMessage(this.message)
+      )}
+        </div>
+      `,
+      () => null
+    );
   }
-  addSystemMessage(e) {
-    this.addMessage({
-      type: "text",
-      author: "system",
-      data: {
-        text: e
-      }
-    });
+  renderButtons(t = "left") {
+    return l`<div class="cb-message__buttons ${t}">
+      <!-- delete button -->
+      <sl-button class="cb-message__delete-button" name="trash" @click=${this._removeMessageHandler} circle variant="text" size="small">
+        <cb-icon svg="${ao}" style="font-size: 1em !important;"></cb-icon>
+      </sl-button>
+    </div>`;
   }
-  // update message
-  updateMessage(e, o) {
-    const a = this.formatMessage(e);
-    return a.isThinking = !1, o && (a.data.text += o), this.messages = this.messages.map((r) => r.id === a.id ? a : r), a;
+  renderMessage(t) {
+    return l`
+      <div
+        class="cb-message__content
+               ${t.author}-message
+               message-type-${t.type}
+               ${t.isThinking ? "thinking" : ""}"
+        style="display: flex"
+      >
+        ${this.renderMessageContent(t)}
+      </div>
+    `;
   }
-  // remove message
-  removeMessage(e) {
-    this.messages = this.messages.filter((o) => o.id !== e);
+  async _getMessageText(t) {
+    return Ie(t.data.text);
   }
-  // clear messages
-  clearMessages() {
-    this.messages = [];
+  renderMessageContent(t) {
+    var e;
+    return t.isThinking ? l`<cb-thinking></cb-thinking>` : t.isUploading ? l`<cb-uploading .files="${t.data.files || []}"></cb-uploading>` : t.type === "text" ? l`<div class="cb-message-text">
+        ${B(
+      t.data.userName,
+      () => l`<div style="font-size: 12px; color:#9ca3af">${t.data.userName}</div>`,
+      () => null
+    )}
+        ${Oe(
+      this._getMessageText(t).then((o) => l`${o}`)
+    )}
+      </div>` : t.type === "file" ? l`${me(
+      t.data.files || [],
+      (o) => o.id,
+      (o) => l`<cb-file filename="${o.name}" url="${o.url}"></cb-file>`
+    )}` : l`<div class="cb-message-text">
+      ${Oe(
+      Ie(((e = t.data.text) == null ? void 0 : e.toString()) || "").then((o) => l`${o}`)
+    )}
+    </div>`;
   }
-}
-R([
-  D({ prefix: F }),
-  I({ value: "en" })
-], A.prototype, "language", 2);
-R([
-  D({ prefix: F }),
-  I({ value: "light" })
-], A.prototype, "theme", 2);
-R([
-  D({ prefix: F }),
-  I({ value: "false" })
-], A.prototype, "connectWs", 2);
-R([
-  D({ prefix: F }),
-  I({ value: we() })
-], A.prototype, "conversationId", 2);
-R([
-  D({ prefix: F }),
-  I({ type: Array, value: [] })
-], A.prototype, "messages", 2);
-R([
-  I({
-    type: Array,
-    value: []
-    /*value: [
-      {
-        internalId: 1,
-        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: 2,
-        type: 'link',
-        title: 'Sign Up',
-        url: 'https://signup.ticketspice.com/',
-        // TODO Any other properties
-      },
-    ],*/
-  })
-], A.prototype, "actions", 2);
-R([
-  D({ prefix: F }),
-  I({
-    type: Object,
-    value: {
-      orgId: null,
-      botId: null,
-      url: null,
-      welcomeMessage: null
+  renderBotMessageAvatar(t) {
+    if (t.data.userName && t.data.userName !== "") {
+      const e = t.data.userAvatar || "";
+      return l` <img src="${e}" style="width: 24px;height: 24px;" /> `;
     }
-  })
-], A.prototype, "setting", 2);
-const b = new A();
-var yo = Object.defineProperty, vo = Object.getOwnPropertyDescriptor, K = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? vo(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 && yo(e, o, r), r;
+    return t.author === "system" ? Le`${Z(m.setting.systemIconSvg)}` : Le`${Z(m.setting.botIconSvg)}`;
+  }
+  renderBotMessage(t) {
+    return l`
+      <div class="cb-message cb-bot-message-wrapper" part="cb-message">
+        <div class="avatar assistant-avatar xsmall" style="margin-top:4px;">${this.renderBotMessageAvatar(t)}</div>
+        <div style="margin-left: 4px;width: 100%">${this.renderMessage(t)}</div>
+      </div>
+    `;
+  }
+  renderUserMessage(t) {
+    return l`
+      <div class="cb-message" part="cb-message" style="display: flex; justify-content: end;align-items: start;">
+        <!--<sl-avatar class="avatar user-avatar small" label="User">
+          <cb-icon slot="icon" svg="${so}" color="white"></cb-icon>
+        </sl-avatar>-->
+        <div class="avatar user-avatar">${Z(m.setting.userIconSvg)}</div>
+        ${this.renderMessage(t)}
+      </div>
+    `;
+  }
+};
+V.styles = io;
+de([
+  i({ type: Object })
+], V.prototype, "message", 2);
+de([
+  i({ type: String })
+], V.prototype, "type", 2);
+de([
+  it(".code-block-header__copy")
+], V.prototype, "copyBtns", 2);
+V = de([
+  x("cb-message")
+], V);
+var ho = Object.defineProperty, uo = Object.getOwnPropertyDescriptor, K = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? uo(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && ho(e, o, a), a;
 };
 const Q = ce.noConflict();
 Q.setLevel("info");
-let T = class extends C {
+let R = class extends C {
   constructor() {
     super(...arguments), this.messages = [], this.actions = [], this.calendlyInjected = !1, this.activeCalendlyAction = -1;
   }
   render() {
     return l`
       <div class="cb-message-list" part="cb-message-list">
-        ${fe(
+        ${me(
       this.messages,
       (t) => t.id + JSON.stringify(t.data),
       (t) => l`<cb-message .message="${t}"></cb-message>`
@@ -2922,7 +2905,7 @@ let T = class extends C {
   renderActions() {
     return !Array.isArray(this.actions) || this.actions.length <= 0 ? null : l`
       <div class="cb-actions-list">
-        ${fe(
+        ${me(
       this.actions,
       (t) => t,
       (t) => this.renderAction(t)
@@ -2943,7 +2926,7 @@ let T = class extends C {
     switch (Q.info("Got Calendly Event:", t.data), t.data.event) {
       case "calendly.event_scheduled": {
         const e = this.activeCalendlyAction;
-        e >= 0 && (b.removeAction(e), b.addSystemMessage("Your meeting has been scheduled!"), this.activeCalendlyAction = -1);
+        e >= 0 && (m.removeAction(e), m.addSystemMessage("Your meeting has been scheduled!"), this.activeCalendlyAction = -1);
       }
     }
   }
@@ -2958,8 +2941,8 @@ let T = class extends C {
       let e = document.createElement("link");
       e.href = "https://assets.calendly.com/assets/external/widget.css", e.rel = "stylesheet", document.body.appendChild(e);
       let o = document.createElement("script");
-      o.type = "text/javascript", o.src = "https://assets.calendly.com/assets/external/widget.js", document.body.appendChild(o), console.log("Injected Calendly"), window.addEventListener("message", (a) => {
-        a.origin === "https://calendly.com" && a.data.event && a.data.event.indexOf("calendly.") !== -1 && this.handleCalendlyEvent(a);
+      o.type = "text/javascript", o.src = "https://assets.calendly.com/assets/external/widget.js", document.body.appendChild(o), console.log("Injected Calendly"), window.addEventListener("message", (r) => {
+        r.origin === "https://calendly.com" && r.data.event && r.data.event.indexOf("calendly.") !== -1 && this.handleCalendlyEvent(r);
       }), this.calendlyInjected = !0;
     }
     return l`
@@ -2993,24 +2976,24 @@ let T = class extends C {
     `;
   }
 };
-T.styles = It;
+R.styles = Vt;
 K([
-  c({ type: Array })
-], T.prototype, "messages", 2);
+  i({ type: Array })
+], R.prototype, "messages", 2);
 K([
-  c({ type: Array })
-], T.prototype, "actions", 2);
+  i({ type: Array })
+], R.prototype, "actions", 2);
 K([
-  qe({ capture: !1, passive: !0 })
-], T.prototype, "invokeLinkAction", 1);
+  Ve({ capture: !1, passive: !0 })
+], R.prototype, "invokeLinkAction", 1);
 K([
-  qe({ capture: !1, passive: !0 })
-], T.prototype, "invokeCalendlyAction", 1);
-T = K([
+  Ve({ capture: !1, passive: !0 })
+], R.prototype, "invokeCalendlyAction", 1);
+R = K([
   x("cb-message-list")
-], T);
-const wo = w`
-    ${S}
+], R);
+const go = v`
+    ${H}
 
     :host {
         width: 100%;
@@ -3052,13 +3035,13 @@ const wo = w`
     .cb-input-buttons {
         padding: 0 5px;
     }
-`, xo = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576L6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76l7.494-7.493Z"/></svg>', ko = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0V3z"/></svg>';
-var _o = Object.defineProperty, Co = Object.getOwnPropertyDescriptor, O = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? Co(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 && _o(e, o, r), r;
+`, bo = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576L6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76l7.494-7.493Z"/></svg>', mo = '<svg viewBox="0 0 16 16" width="1.2em" height="1.2em" ><path fill="currentColor" d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0V3z"/></svg>';
+var yo = Object.defineProperty, fo = Object.getOwnPropertyDescriptor, O = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? fo(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && yo(e, o, a), a;
 };
-let L = class extends C {
+let A = 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 = "";
   }
@@ -3079,7 +3062,7 @@ let L = class extends C {
     }), this.value = "", this.inputElement.blur();
   }
   async _sendFileHandler() {
-    const t = await ho();
+    const t = await jt();
     this.emit("message:send:file", {
       detail: {
         files: t
@@ -3116,7 +3099,7 @@ let L = class extends C {
                                 variant="text"
                                 circle
                             >
-                                <cb-icon svg="${ko}"></cb-icon>
+                                <cb-icon svg="${mo}"></cb-icon>
                                 <!-- select file input -->
                                 <input
                                     type="file"
@@ -3139,7 +3122,7 @@ let L = class extends C {
                         ?loading=${this.loading}
                         circle
                     >
-                        <cb-icon svg="${xo}"></cb-icon>
+                        <cb-icon svg="${bo}"></cb-icon>
                     </sl-button>
                 </span>
             </div>
@@ -3149,36 +3132,36 @@ let L = class extends C {
     t.key === "Enter" && !t.shiftKey && this._sendHandler();
   }
 };
-L.styles = wo;
+A.styles = go;
 O([
-  c({ type: String, attribute: "placeholder" })
-], L.prototype, "placeholder", 2);
+  i({ type: String, attribute: "placeholder" })
+], A.prototype, "placeholder", 2);
 O([
-  c({ type: String, attribute: "send-button-label" })
-], L.prototype, "sendButtonLabel", 2);
+  i({ type: String, attribute: "send-button-label" })
+], A.prototype, "sendButtonLabel", 2);
 O([
-  c({ type: Boolean, attribute: "enable-file-upload" })
-], L.prototype, "enableFileUpload", 2);
+  i({ type: Boolean, attribute: "enable-file-upload" })
+], A.prototype, "enableFileUpload", 2);
 O([
-  c({ type: String })
-], L.prototype, "value", 2);
+  i({ type: String })
+], A.prototype, "value", 2);
 O([
-  c({ type: Boolean })
-], L.prototype, "loading", 2);
+  i({ type: Boolean })
+], A.prototype, "loading", 2);
 O([
-  c({ type: Boolean })
-], L.prototype, "disabled", 2);
+  i({ type: Boolean })
+], A.prototype, "disabled", 2);
 O([
-  c({ type: String })
-], L.prototype, "currentKey", 2);
+  i({ type: String })
+], A.prototype, "currentKey", 2);
 O([
-  Ce("sl-textarea")
-], L.prototype, "inputElement", 2);
-L = O([
+  _e("sl-textarea")
+], A.prototype, "inputElement", 2);
+A = O([
   x("cb-user-input")
-], L);
-const $o = w`
-    ${S}
+], A);
+const vo = v`
+    ${H}
 
     sl-dialog::part(base) {
         z-index: 1000;
@@ -3212,10 +3195,10 @@ const $o = w`
         gap: 8px;
     }
 `;
-var jo = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, pe = (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;
+var wo = Object.defineProperty, xo = Object.getOwnPropertyDescriptor, pe = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? xo(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && wo(e, o, a), a;
 };
 let q = class extends C {
   constructor() {
@@ -3248,7 +3231,7 @@ let q = class extends C {
                     <cb-icon
                         color="default"
                         style="font-size: 1em;"
-                        svg="${je}"
+                        svg="${$e}"
                     ></cb-icon>
                 </sl-button>
             </header>
@@ -3261,23 +3244,23 @@ let q = class extends C {
         </sl-dialog>`;
   }
 };
-q.styles = $o;
+q.styles = vo;
 pe([
-  c({ type: Boolean })
+  i({ type: Boolean })
 ], q.prototype, "open", 2);
 pe([
-  c({ type: String, attribute: "label" })
+  i({ type: String, attribute: "label" })
 ], q.prototype, "label", 2);
 pe([
-  c({ type: Number })
+  i({ type: Number })
 ], q.prototype, "zindex", 2);
 q = pe([
   x("cb-dialog")
 ], q);
-var Lo = Object.defineProperty, So = Object.getOwnPropertyDescriptor, Je = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? So(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 && Lo(e, o, r), r;
+var ko = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, We = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? _o(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && ko(e, o, a), a;
 };
 let re = class extends C {
   constructor() {
@@ -3313,7 +3296,7 @@ let re = class extends C {
     this.emit("cancel");
   }
 };
-re.styles = w`
+re.styles = v`
         .cb-clear-message-dialog {
         }
 
@@ -3321,13 +3304,13 @@ re.styles = w`
             z-index: 1000;
         }
     `;
-Je([
-  c({ type: Boolean })
+We([
+  i({ type: Boolean })
 ], re.prototype, "open", 2);
-re = Je([
+re = We([
   x("cb-clear-message-dialog")
 ], re);
-const Oo = w`
+const Co = v`
     :host {
         // width: 380px;
 
@@ -3387,12 +3370,12 @@ const Oo = w`
         grid-column-start: 2;
     }
 `;
-var Ho = Object.defineProperty, Ao = Object.getOwnPropertyDescriptor, Z = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? Ao(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 && Ho(e, o, r), r;
+var $o = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, U = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? jo(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && $o(e, o, a), a;
 };
-let H = class extends C {
+let P = class extends C {
   constructor() {
     super(...arguments), this.open = !1, this.clearMessageDialogOpen = !1, this.customRequest = !1;
   }
@@ -3528,13 +3511,13 @@ let H = class extends C {
   }
   // input change handler
   _inputChangeHandler(t) {
-    const { name: e, value: o } = t.target, [a, r] = e.split(".");
-    r ? this.setting[a][r] = o : this.setting[a] = o;
+    const { name: e, value: o } = t.target, [r, a] = e.split(".");
+    a ? this.setting[r][a] = o : this.setting[r] = o;
   }
   // checked change handler
   _checkChangeHandler(t) {
-    const { name: e, checked: o } = t.target, [a, r] = e.split(".");
-    r ? this.setting[a][r] = o : this.setting[a] = o, a === "customRequest" && (this.customRequest = o);
+    const { name: e, checked: o } = t.target, [r, a] = e.split(".");
+    a ? this.setting[r][a] = o : this.setting[r] = o, r === "customRequest" && (this.customRequest = o);
   }
   // emit setting confirm event
   _settingConfirmHandler() {
@@ -3555,73 +3538,99 @@ let H = class extends C {
     });
   }
 };
-H.styles = Oo;
-Z([
-  c({ type: Boolean })
-], H.prototype, "open", 2);
-Z([
-  c({ type: Object })
-], H.prototype, "setting", 2);
-Z([
-  c({ type: Boolean })
-], H.prototype, "clearMessageDialogOpen", 2);
-Z([
-  Ce("sl-dialog")
-], H.prototype, "dialog", 2);
-Z([
-  c({ type: Boolean })
-], H.prototype, "customRequest", 2);
-H = Z([
+P.styles = Co;
+U([
+  i({ type: Boolean })
+], P.prototype, "open", 2);
+U([
+  i({ type: Object })
+], P.prototype, "setting", 2);
+U([
+  i({ type: Boolean })
+], P.prototype, "clearMessageDialogOpen", 2);
+U([
+  _e("sl-dialog")
+], P.prototype, "dialog", 2);
+U([
+  i({ type: Boolean })
+], P.prototype, "customRequest", 2);
+P = U([
   x("cb-setting")
-], H);
-const Po = w`
-    ${S}
-    :host {
-        --primary-color: var(--sl-color-primary-600);
+], P);
+const Mo = v`
+  ${H}
+  :host {
+    --primary-color: var(--sl-color-primary-600);
 
-        --anchor-width: 50px;
-    }
+    --anchor-width: 50px;
+  }
 
-    .cb-anchor {
-        width: var(--anchor-width);
-        height: var(--anchor-width);
-        //background-color: var(--primary-color);
-        background: rgb(0, 208, 117);
+  .cb-anchor {
+    width: var(--anchor-width);
+    height: var(--anchor-width);
+    //background-color: var(--primary-color);
+    background: rgb(0, 208, 117);
 
-        position: fixed;
-        right: 25px;
-        bottom: 25px;
-        border-radius: 50%;
+    position: fixed;
+    right: 25px;
+    bottom: 25px;
+    border-radius: 50%;
 
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: white;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 
-        transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
 
-        z-index: 100;
-    }
+    z-index: 100;
+  }
 
-    .cb-anchor:hover {
-        transform: scale(1.1);
-        box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
-    }
+  .cb-anchor:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
+  }
 
-    .anchor-button {
-        font-size: 1.4em;
-    }
+  .anchor-button {
+    font-size: 1.4em;
+  }
+
+  sl-button[variant='primary']::part(base) {
+    background-color: rgb(0, 208, 117);
+    border-color: rgb(0, 208, 117);
+  }
+
+  .cb-engage-popup {
+    min-width: 200px;
+    min-height: 100px;
+    color: rgb(34, 34, 34);
+    padding: 10px;
+    background-color: var(--sl-color-gray-50);
+    //border: 1px solid;
+    //border-color: var(--sl-color-gray-100);
+    border-radius: 6px;
+    font-size: 14px;
+    -webkit-font-smoothing: subpixel-antialiased;
+    font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    //font-size: 0.9rem;
+    font-style: normal;
+    letter-spacing: normal;
+    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);
+  }
 
-    sl-button[variant="primary"]::part(base) {
-        background-color: rgb(0, 208, 117);
-        border-color: rgb(0, 208, 117);
-    }
-`, zo = '<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 Eo = Object.defineProperty, To = Object.getOwnPropertyDescriptor, Ye = (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;
+  .cb-anchor sl-popup {
+    --arrow-color: var(--sl-color-gray-300);
+  }
+`, So = '<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 Ao = Object.defineProperty, Ho = Object.getOwnPropertyDescriptor, Je = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? Ho(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && Ao(e, o, a), a;
 };
 let ae = class extends C {
   constructor() {
@@ -3636,71 +3645,61 @@ let ae = class extends C {
       }
     }), this.open = t;
   }
+  _popupClickHandler() {
+    console.log("Popup clicked!");
+  }
   render() {
     return l`
-            <div
-                class="cb-anchor ${this.open ? "open" : ""}"
-                part="cb-anchor"
-                @click=${this._clickHandler.bind(this)}
-            >
-                <sl-button
-                    label="Start"
-                    size="large"
-                    variant="primary"
-                    class="icon anchor-button"
-                    circle
-                >
-                    ${B(
+      <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(
       this.open,
-      () => l`<cb-icon
-                                color="white"
-                                svg="${je}"
-                            ></cb-icon>`,
-      () => l`<cb-icon
-                                color="white"
-                                svg="${zo}"
-                            ></cb-icon>`
+      () => l`<cb-icon color="white" svg="${$e}"></cb-icon>`,
+      () => l`<cb-icon color="white" svg="${So}"></cb-icon>`
     )}
-                </sl-button>
-            </div>
-        `;
+          </sl-button>
+          <div class="cb-engage-popup">Popup</div>
+        </sl-popup>
+      </div>
+    `;
   }
 };
-ae.styles = Po;
-Ye([
-  c({ type: Boolean })
+ae.styles = Mo;
+Je([
+  i({ type: Boolean })
 ], ae.prototype, "open", 2);
-ae = Ye([
+ae = Je([
   x("cb-anchor")
 ], ae);
-const Io = w`
-    ${S}
-`, 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>', 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>', Qe = '<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 Ro = Object.defineProperty, Bo = Object.getOwnPropertyDescriptor, et = (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 && Ro(e, o, r), r;
+const Lo = v`
+    ${H}
+`, ze = '<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>', Oo = '<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>', Po = '<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>', Io = '<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 zo = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, Ke = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? Eo(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && zo(e, o, a), a;
 };
-const Te = {
+const Ee = {
   error: {
     variant: "danger",
-    icon: xe
+    icon: ze
   },
   danger: {
     variant: "danger",
-    icon: xe
+    icon: ze
   },
   warning: {
     variant: "warning",
-    icon: Ge
+    icon: Oo
   },
   success: {
     variant: "success",
-    icon: Qe
+    icon: Po
   },
   info: {
     variant: "primary",
-    icon: Xe
+    icon: Io
   }
 };
 let se = class extends C {
@@ -3708,23 +3707,23 @@ let se = class extends C {
     super(...arguments), this.status = "info";
   }
   render() {
-    const { variant: t, icon: e } = Te[this.status] || Te.info;
+    const { variant: t, icon: e } = Ee[this.status] || Ee.info;
     return l`<cb-icon svg=${e} color="${t}"></cb-icon>`;
   }
 };
-se.styles = Ne;
-et([
-  c({ type: String })
+se.styles = Ue;
+Ke([
+  i({ type: String })
 ], se.prototype, "status", 2);
-se = et([
+se = Ke([
   x("cb-status-icon")
 ], se);
-var Vo = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, Do = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? qo(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 && Vo(e, o, r), r;
+var To = Object.defineProperty, Ro = Object.getOwnPropertyDescriptor, Bo = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? Ro(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && To(e, o, a), a;
 };
-let ke = class extends C {
+let we = class extends C {
   render() {
     return l` <sl-alert variant="danger" open>
             <cb-status-icon status="error" slot="icon"></cb-status-icon>
@@ -3740,14 +3739,14 @@ let ke = class extends C {
     this.emit("setting:show");
   }
 };
-ke.styles = Io;
-ke = Do([
+we.styles = Lo;
+we = Bo([
   x("cb-auth-alert")
-], ke);
-class Ie 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";
-    super(`Request failed with ${i}`), Object.defineProperty(this, "response", {
+], we);
+class Te extends Error {
+  constructor(e, o, r) {
+    const a = e.status || e.status === 0 ? e.status : "", s = e.statusText || "", n = `${a} ${s}`.trim(), c = n ? `status code ${n}` : "an unknown error";
+    super(`Request failed with ${c}`), Object.defineProperty(this, "response", {
       enumerable: !0,
       configurable: !0,
       writable: !0,
@@ -3762,10 +3761,10 @@ class Ie extends Error {
       configurable: !0,
       writable: !0,
       value: void 0
-    }), this.name = "HTTPError", this.response = e, this.request = o, this.options = a;
+    }), this.name = "HTTPError", this.response = e, this.request = o, this.options = r;
   }
 }
-class tt extends Error {
+class Ye extends Error {
   constructor(e) {
     super("Request timed out"), Object.defineProperty(this, "request", {
       enumerable: !0,
@@ -3775,31 +3774,31 @@ class tt extends Error {
     }), this.name = "TimeoutError", this.request = e;
   }
 }
-const X = (t) => t !== null && typeof t == "object", Y = (...t) => {
+const ee = (t) => t !== null && typeof t == "object", G = (...t) => {
   for (const e of t)
-    if ((!X(e) || Array.isArray(e)) && typeof e < "u")
+    if ((!ee(e) || Array.isArray(e)) && typeof e < "u")
       throw new TypeError("The `options` argument must be an object");
   return Se({}, ...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);
+}, Ge = (t = {}, e = {}) => {
+  const o = new globalThis.Headers(t), r = e instanceof globalThis.Headers, a = new globalThis.Headers(e);
+  for (const [s, n] of a.entries())
+    r && n === "undefined" || n === void 0 ? o.delete(s) : o.set(s, n);
   return o;
 }, Se = (...t) => {
   let e = {}, o = {};
-  for (const a of t)
-    if (Array.isArray(a))
-      Array.isArray(e) || (e = []), e = [...e, ...a];
-    else if (X(a)) {
-      for (let [r, s] of Object.entries(a))
-        X(s) && r in e && (s = Se(e[r], s)), e = { ...e, [r]: s };
-      X(a.headers) && (o = ot(o, a.headers), e.headers = o);
+  for (const r of t)
+    if (Array.isArray(r))
+      Array.isArray(e) || (e = []), e = [...e, ...r];
+    else if (ee(r)) {
+      for (let [a, s] of Object.entries(r))
+        ee(s) && a in e && (s = Se(e[a], s)), e = { ...e, [a]: s };
+      ee(r.headers) && (o = Ge(o, r.headers), e.headers = o);
     }
   return e;
-}, Fo = (() => {
+}, Vo = (() => {
   let t = !1, e = !1;
-  const o = typeof globalThis.ReadableStream == "function", a = typeof globalThis.Request == "function";
-  return o && a && (e = new globalThis.Request("https://a.com", {
+  const o = typeof globalThis.ReadableStream == "function", r = typeof globalThis.Request == "function";
+  return o && r && (e = new globalThis.Request("https://a.com", {
     body: new globalThis.ReadableStream(),
     method: "POST",
     // @ts-expect-error - Types are outdated.
@@ -3807,20 +3806,20 @@ const X = (t) => t !== null && typeof t == "object", Y = (...t) => {
       return t = !0, "half";
     }
   }).headers.has("Content-Type")), t && !e;
-})(), Zo = typeof globalThis.AbortController == "function", Uo = typeof globalThis.ReadableStream == "function", No = typeof globalThis.FormData == "function", rt = ["get", "post", "put", "patch", "head", "delete"], Wo = {
+})(), qo = typeof globalThis.AbortController == "function", Do = typeof globalThis.ReadableStream == "function", Fo = typeof globalThis.FormData == "function", Xe = ["get", "post", "put", "patch", "head", "delete"], Uo = {
   json: "application/json",
   text: "text/*",
   formData: "multipart/form-data",
   arrayBuffer: "*/*",
   blob: "*/*"
-}, me = 2147483647, at = Symbol("stop"), Ko = (t) => rt.includes(t) ? t.toUpperCase() : t, Jo = ["get", "put", "head", "delete", "options", "trace"], Yo = [408, 413, 429, 500, 502, 503, 504], st = [413, 429, 503], Re = {
+}, be = 2147483647, Qe = Symbol("stop"), Zo = (t) => Xe.includes(t) ? t.toUpperCase() : t, No = ["get", "put", "head", "delete", "options", "trace"], Wo = [408, 413, 429, 500, 502, 503, 504], et = [413, 429, 503], Re = {
   limit: 2,
-  methods: Jo,
-  statusCodes: Yo,
-  afterStatusCodes: st,
+  methods: No,
+  statusCodes: Wo,
+  afterStatusCodes: et,
   maxRetryAfter: Number.POSITIVE_INFINITY,
   backoffLimit: Number.POSITIVE_INFINITY
-}, Go = (t = {}) => {
+}, Jo = (t = {}) => {
   if (typeof t == "number")
     return {
       ...Re,
@@ -3833,81 +3832,81 @@ const X = (t) => t !== null && typeof t == "object", Y = (...t) => {
   return {
     ...Re,
     ...t,
-    afterStatusCodes: st
+    afterStatusCodes: et
   };
 };
-async function Qo(t, e, o) {
-  return new Promise((a, r) => {
+async function Ko(t, e, o) {
+  return new Promise((r, a) => {
     const s = setTimeout(() => {
-      e && e.abort(), r(new tt(t));
+      e && e.abort(), a(new Ye(t));
     }, o.timeout);
-    o.fetch(t).then(a).catch(r).then(() => {
+    o.fetch(t).then(r).catch(a).then(() => {
       clearTimeout(s);
     });
   });
 }
-const Xo = !!globalThis.DOMException;
+const Yo = !!globalThis.DOMException;
 function Be(t) {
-  if (Xo)
+  if (Yo)
     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.");
   return e.name = "AbortError", e;
 }
-async function er(t, { signal: e }) {
-  return new Promise((o, a) => {
+async function Go(t, { signal: e }) {
+  return new Promise((o, r) => {
     if (e) {
       if (e.aborted) {
-        a(Be(e));
+        r(Be(e));
         return;
       }
-      e.addEventListener("abort", r, { once: !0 });
+      e.addEventListener("abort", a, { once: !0 });
     }
-    function r() {
-      a(Be(e)), clearTimeout(s);
+    function a() {
+      r(Be(e)), clearTimeout(s);
     }
     const s = setTimeout(() => {
-      e == null || e.removeEventListener("abort", r), o();
+      e == null || e.removeEventListener("abort", a), o();
     }, t);
   });
 }
 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 > me)
-        throw new RangeError(`The \`timeout\` option cannot be greater than ${me}`);
+    const r = new ne(e, o), a = async () => {
+      if (r._options.timeout > be)
+        throw new RangeError(`The \`timeout\` option cannot be greater than ${be}`);
       await Promise.resolve();
-      let i = await a._fetch();
-      for (const u of a._options.hooks.afterResponse) {
-        const g = await u(a.request, a._options, a._decorateResponse(i.clone()));
-        g instanceof globalThis.Response && (i = g);
+      let c = await r._fetch();
+      for (const g of r._options.hooks.afterResponse) {
+        const w = await g(r.request, r._options, r._decorateResponse(c.clone()));
+        w instanceof globalThis.Response && (c = w);
       }
-      if (a._decorateResponse(i), !i.ok && a._options.throwHttpErrors) {
-        let u = new Ie(i, a.request, a._options);
-        for (const g of a._options.hooks.beforeError)
-          u = await g(u);
-        throw u;
+      if (r._decorateResponse(c), !c.ok && r._options.throwHttpErrors) {
+        let g = new Te(c, r.request, r._options);
+        for (const w of r._options.hooks.beforeError)
+          g = await w(g);
+        throw g;
       }
-      if (a._options.onDownloadProgress) {
-        if (typeof a._options.onDownloadProgress != "function")
+      if (r._options.onDownloadProgress) {
+        if (typeof r._options.onDownloadProgress != "function")
           throw new TypeError("The `onDownloadProgress` option must be a function");
-        if (!Uo)
+        if (!Do)
           throw new Error("Streams are not supported in your environment. `ReadableStream` is missing.");
-        return a._stream(i.clone(), a._options.onDownloadProgress);
+        return r._stream(c.clone(), r._options.onDownloadProgress);
       }
-      return i;
-    }, n = a._options.retry.methods.includes(a.request.method.toLowerCase()) ? a._retry(r) : r();
-    for (const [i, u] of Object.entries(Wo))
-      n[i] = async () => {
-        a.request.headers.set("accept", a.request.headers.get("accept") || u);
-        const m = (await n).clone();
-        if (i === "json") {
-          if (m.status === 204 || (await m.clone().arrayBuffer()).byteLength === 0)
+      return c;
+    }, n = r._options.retry.methods.includes(r.request.method.toLowerCase()) ? r._retry(a) : a();
+    for (const [c, g] of Object.entries(Uo))
+      n[c] = async () => {
+        r.request.headers.set("accept", r.request.headers.get("accept") || g);
+        const _ = (await n).clone();
+        if (c === "json") {
+          if (_.status === 204 || (await _.clone().arrayBuffer()).byteLength === 0)
             return "";
           if (o.parseJson)
-            return o.parseJson(await m.text());
+            return o.parseJson(await _.text());
         }
-        return m[i]();
+        return _[c]();
       };
     return n;
   }
@@ -3942,17 +3941,17 @@ 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: ot(this._input.headers, o.headers),
+      headers: Ge(this._input.headers, o.headers),
       hooks: Se({
         beforeRequest: [],
         beforeRetry: [],
         beforeError: [],
         afterResponse: []
       }, o.hooks),
-      method: Ko(o.method ?? this._input.method),
+      method: Zo(o.method ?? this._input.method),
       // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
       prefixUrl: String(o.prefixUrl || ""),
-      retry: Go(o.retry),
+      retry: Jo(o.retry),
       throwHttpErrors: o.throwHttpErrors !== !1,
       timeout: typeof o.timeout > "u" ? 1e4 : o.timeout,
       fetch: o.fetch ?? globalThis.fetch.bind(globalThis)
@@ -3963,30 +3962,30 @@ class ne {
         throw new Error("`input` must not begin with a slash when using `prefixUrl`");
       this._options.prefixUrl.endsWith("/") || (this._options.prefixUrl += "/"), this._input = this._options.prefixUrl + this._input;
     }
-    if (Zo) {
+    if (qo) {
       if (this.abortController = new globalThis.AbortController(), this._options.signal) {
-        const a = this._options.signal;
+        const r = this._options.signal;
         this._options.signal.addEventListener("abort", () => {
-          this.abortController.abort(a.reason);
+          this.abortController.abort(r.reason);
         });
       }
       this._options.signal = this.abortController.signal;
     }
-    if (Fo && (this._options.duplex = "half"), this.request = new globalThis.Request(this._input, this._options), this._options.searchParams) {
-      const r = "?" + (typeof this._options.searchParams == "string" ? this._options.searchParams.replace(/^\?/, "") : new URLSearchParams(this._options.searchParams).toString()), s = this.request.url.replace(/(?:\?.*?)?(?=#|$)/, r);
-      (No && this._options.body instanceof globalThis.FormData || this._options.body instanceof URLSearchParams) && !(this._options.headers && this._options.headers["content-type"]) && this.request.headers.delete("content-type"), this.request = new globalThis.Request(new globalThis.Request(s, { ...this.request }), this._options);
+    if (Vo && (this._options.duplex = "half"), this.request = new globalThis.Request(this._input, this._options), this._options.searchParams) {
+      const a = "?" + (typeof this._options.searchParams == "string" ? this._options.searchParams.replace(/^\?/, "") : new URLSearchParams(this._options.searchParams).toString()), s = this.request.url.replace(/(?:\?.*?)?(?=#|$)/, a);
+      (Fo && this._options.body instanceof globalThis.FormData || this._options.body instanceof URLSearchParams) && !(this._options.headers && this._options.headers["content-type"]) && this.request.headers.delete("content-type"), this.request = new globalThis.Request(new globalThis.Request(s, { ...this.request }), this._options);
     }
     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 tt)) {
-      if (e instanceof Ie) {
+    if (this._retryCount++, this._retryCount < this._options.retry.limit && !(e instanceof Ye)) {
+      if (e instanceof Te) {
         if (!this._options.retry.statusCodes.includes(e.response.status))
           return 0;
-        const a = e.response.headers.get("Retry-After");
-        if (a && this._options.retry.afterStatusCodes.includes(e.response.status)) {
-          let r = Number(a);
-          return Number.isNaN(r) ? r = Date.parse(a) - Date.now() : r *= 1e3, typeof this._options.retry.maxRetryAfter < "u" && r > this._options.retry.maxRetryAfter ? 0 : r;
+        const r = e.response.headers.get("Retry-After");
+        if (r && this._options.retry.afterStatusCodes.includes(e.response.status)) {
+          let a = Number(r);
+          return Number.isNaN(a) ? a = Date.parse(r) - Date.now() : a *= 1e3, typeof this._options.retry.maxRetryAfter < "u" && a > this._options.retry.maxRetryAfter ? 0 : a;
         }
         if (e.response.status === 413)
           return 0;
@@ -4003,16 +4002,16 @@ class ne {
     try {
       return await e();
     } catch (o) {
-      const a = Math.min(this._calculateRetryDelay(o), me);
-      if (a !== 0 && this._retryCount > 0) {
-        await er(a, { signal: this._options.signal });
-        for (const r of this._options.hooks.beforeRetry)
-          if (await r({
+      const r = Math.min(this._calculateRetryDelay(o), be);
+      if (r !== 0 && this._retryCount > 0) {
+        await Go(r, { signal: this._options.signal });
+        for (const a of this._options.hooks.beforeRetry)
+          if (await a({
             request: this.request,
             options: this._options,
             error: o,
             retryCount: this._retryCount
-          }) === at)
+          }) === Qe)
             return;
         return this._retry(e);
       }
@@ -4029,34 +4028,34 @@ class ne {
       if (o instanceof Response)
         return o;
     }
-    return this._options.timeout === !1 ? this._options.fetch(this.request.clone()) : Qo(this.request.clone(), this.abortController, this._options);
+    return this._options.timeout === !1 ? this._options.fetch(this.request.clone()) : Ko(this.request.clone(), this.abortController, this._options);
   }
   /* istanbul ignore next */
   _stream(e, o) {
-    const a = Number(e.headers.get("content-length")) || 0;
-    let r = 0;
-    return e.status === 204 ? (o && o({ percent: 1, totalBytes: a, transferredBytes: r }, new Uint8Array()), new globalThis.Response(null, {
+    const r = Number(e.headers.get("content-length")) || 0;
+    let a = 0;
+    return e.status === 204 ? (o && o({ percent: 1, totalBytes: r, transferredBytes: a }, new Uint8Array()), new globalThis.Response(null, {
       status: e.status,
       statusText: e.statusText,
       headers: e.headers
     })) : new globalThis.Response(new globalThis.ReadableStream({
       async start(s) {
         const n = e.body.getReader();
-        o && o({ percent: 0, transferredBytes: 0, totalBytes: a }, new Uint8Array());
-        async function i() {
-          const { done: u, value: g } = await n.read();
-          if (u) {
+        o && o({ percent: 0, transferredBytes: 0, totalBytes: r }, new Uint8Array());
+        async function c() {
+          const { done: g, value: w } = await n.read();
+          if (g) {
             s.close();
             return;
           }
           if (o) {
-            r += g.byteLength;
-            const m = a === 0 ? 0 : r / a;
-            o({ percent: m, transferredBytes: r, totalBytes: a }, g);
+            a += w.byteLength;
+            const _ = r === 0 ? 0 : a / r;
+            o({ percent: _, transferredBytes: a, totalBytes: r }, w);
           }
-          s.enqueue(g), await i();
+          s.enqueue(w), await c();
         }
-        await i();
+        await c();
       }
     }), {
       status: e.status,
@@ -4066,12 +4065,12 @@ class ne {
   }
 }
 /*! MIT License © Sindre Sorhus */
-const _e = (t) => {
-  const e = (o, a) => ne.create(o, Y(t, a));
-  for (const o of rt)
-    e[o] = (a, r) => ne.create(a, Y(t, r, { method: o }));
-  return e.create = (o) => _e(Y(o)), e.extend = (o) => _e(Y(t, o)), e.stop = at, e;
-}, tr = _e(), or = tr, nt = or.extend({
+const xe = (t) => {
+  const e = (o, r) => ne.create(o, G(t, r));
+  for (const o of Xe)
+    e[o] = (r, a) => ne.create(r, G(t, a, { method: o }));
+  return e.create = (o) => xe(G(o)), e.extend = (o) => xe(G(t, o)), e.stop = Qe, e;
+}, Xo = xe(), Qo = Xo, er = Qo.extend({
   hooks: {
     beforeRequest: [
       () => {
@@ -4079,18 +4078,18 @@ const _e = (t) => {
     ]
   }
 });
-async function rr(t, e) {
-  const { onmessage: o, onclose: a, ...r } = e, s = async (n, i) => {
-    const { value: u, done: g } = await i.read();
-    g ? (n.close(), a == null || a()) : (o == null || o(u), n.enqueue(u), s(n, i));
+async function tr(t, e) {
+  const { onmessage: o, onclose: r, ...a } = e, s = async (n, c) => {
+    const { value: g, done: w } = await c.read();
+    w ? (n.close(), r == null || r()) : (o == null || o(g), n.enqueue(g), s(n, c));
   };
-  return r.body && typeof r.body == "object" && (r.body = JSON.stringify(r.body)), console.log("Fetching:", r), fetch(t, r).then((n) => {
-    const i = n.body.getReader();
+  return a.body && typeof a.body == "object" && (a.body = JSON.stringify(a.body)), console.log("Fetching:", a), fetch(t, a).then((n) => {
+    const c = n.body.getReader();
     return new ReadableStream({
-      start(g) {
+      start(w) {
         s(
-          g,
-          i
+          w,
+          c
         );
       }
     });
@@ -4100,119 +4099,39 @@ async function rr(t, e) {
     }).text()
   );
 }
-async function ar(t, e) {
-  const o = t.getReader(), a = new TextDecoder("utf-8");
-  let r = !1;
-  for (; !r; ) {
-    const { value: s, done: n } = await o.read();
-    if (s) {
-      let i = a.decode(s);
-      const u = i.lastIndexOf("data:"), g = i.lastIndexOf(`
-`);
-      if (u !== -1 && (i = i.slice(u + 6)), g !== -1 && (i = i.slice(0, g)), i = i.trim(), i === `
-` || i === "")
-        continue;
-      if (i === "[DONE]") {
-        r = !0;
-        continue;
-      }
-      try {
-        const m = JSON.parse(i);
-        e(null, m);
-      } catch (m) {
-        console.log("error", m), e(m, null);
-      }
-    }
-    r = n;
-  }
-}
-async function sr(t) {
-  var r;
-  if (!t.apiKey)
-    throw new Error("apiKey is required");
-  const e = t.options ?? {};
-  e.model || (e.model = "gpt-3.5-turbo");
-  const o = await nt.post(t.url, {
-    json: {
-      messages: t.messages,
-      ...t.options ?? {}
-    },
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${t.apiKey}`
-    },
-    timeout: 1e3 * 60 * 10,
-    signal: t.signal
-  }), a = o.body;
-  if (!a)
-    throw new Error("No data");
-  if ((r = t.options) != null && r.stream) {
-    await ar(a, t.onMessage);
-    return;
-  }
-  return o.json();
-}
-async function nr(t, e) {
+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 nt.post(t, {
+  for (let a = 0; a < e.length; a++)
+    o.append("files", e[a]);
+  const r = await er.post(t, {
     body: o
   });
   try {
-    return await a.json();
-  } catch (r) {
+    return await r.json();
+  } catch (a) {
     return {
       code: 1,
       url: "",
-      message: r.message
+      message: a.message
     };
   }
 }
-const Ve = {
-  error: {
-    variant: "danger",
-    icon: xe
-  },
-  warning: {
-    variant: "warning",
-    icon: Ge
-  },
-  success: {
-    variant: "success",
-    icon: Qe
-  },
-  info: {
-    variant: "primary",
-    icon: Xe
-  }
-};
-function ir(t) {
-  const e = document.createElement("div");
-  return e.textContent = t, e.innerHTML;
-}
-function lr(t = "info", e, o = 1e8) {
-  const { variant: a, icon: r } = Ve[t] || Ve.info, s = Object.assign(document.createElement("sl-alert"), {
-    variant: a,
-    closable: !0,
-    duration: o,
-    innerHTML: `
-        <cb-status-icon slot="icon" status="${t}"></cb-status-icon>
-        ${ir(e)}
-      `
-  });
-  return document.body.append(s), s.toast();
-}
-var cr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, _ = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? dr(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 && cr(e, o, r), r;
+var rr = Object.defineProperty, ar = Object.getOwnPropertyDescriptor, y = (t, e, o, r) => {
+  for (var a = r > 1 ? void 0 : r ? ar(e, o) : e, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (a = (r ? n(e, o, a) : n(a)) || a);
+  return r && a && rr(e, o, a), a;
 };
-const ee = ce.noConflict();
-ee.setLevel("info");
-let v = class extends C {
+const ke = ce.noConflict();
+ke.setLevel("info");
+let u = class extends C {
   constructor() {
-    super(...arguments), this.store = new ft(this, b), 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.stream = !1, this.customRequest = !1, this.enableFileUpload = !1, this.uploadFileUrl = "", this.open = !1, this.loading = !1, this.showSetting = !1, this.showAuthAlert = !1, this.fetchStream = rr;
+    super(...arguments), this.store = new ht(this, m), 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">
+    <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"
+    ></path>
+  </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;
   }
   /**
    * decodeStreamData
@@ -4227,20 +4146,20 @@ let v = class extends C {
       isThinking: !0,
       data: {}
     };
-    return b.addMessage(t), t;
+    return m.addMessage(t), t;
   }
   render() {
-    return l`
+    return m.disabled ? (ke.error("Bot is disabled"), null) : l`
       <div class="cb-wrapper" style="${this.open ? "display:flex" : "display:none"}">
         <cb-header title="${this.name}"></cb-header>
-        <cb-message-list .messages=${b.messages} .actions=${b.actions}></cb-message-list>
+        <cb-message-list .messages=${m.messages} .actions=${m.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>
     `;
   }
   connectedCallback() {
-    super.connectedCallback(), ee.info("connectedCallback"), addEventListener("setting:show", () => {
+    super.connectedCallback(), ke.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;
@@ -4248,7 +4167,7 @@ let v = class extends C {
       const e = t.detail;
       this.open = e.open;
     }), addEventListener("message:clear", () => {
-      b.clearMessages();
+      m.clearMessages();
     }), addEventListener("message:send:file", this._sendFileHandler.bind(this)), addEventListener("setting:show", () => {
       this.showSetting = !0;
     });
@@ -4257,116 +4176,131 @@ let v = 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), ee.info("updated,_changedProperties:", t), t.size > 0 && this._initSetting(), setTimeout(() => {
+    super.updated(t), t.size > 0 && this._initSetting(), setTimeout(() => {
       this._scrollToBottom();
     }, 0);
   }
   // initialize setting
   _initSetting() {
-    ee.info("_initSetting");
-    const t = b.setting;
-    t.orgId = this.orgId, t.botId = this.botId, t.url = this.url, t.welcomeMessage = this.welcomeMessage, b.setSetting(t);
+    const t = m.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, m.setSetting(t);
   }
   setLoading(t) {
     this.loading = t;
   }
   clearConversation() {
-    b.clearConversation();
+    m.clearConversation();
   }
   // check auth
   _checkAuth() {
   }
-  // send to openai
-  async _sendToOpenai(t, e) {
-    let o = "";
-    const a = b.setting.openai.apiBase || "https://api.openai.com/v1", r = await sr({
-      url: `${a}/chat/completions`,
-      apiKey: b.setting.openai.apiKey,
-      messages: e,
+  /* TODO Remove
+  private async _sendToOpenai(newMsg: Chatbot.NewMessage, messages: Chatbot.OpenaiMessage[]) {
+    let text = '';
+    const apiBase = appState.setting.openai.apiBase || 'https://api.openai.com/v1';
+    const data = await openai.chat({
+      url: `${apiBase}/chat/completions`,
+      apiKey: appState.setting.openai.apiKey,
+      messages: messages,
       options: {
-        stream: b.setting.stream,
-        model: b.setting.openai.model
+        stream: appState.setting.stream,
+        model: appState.setting.openai.model,
         // temperature: 0.9,
       },
-      onMessage: (s, n) => {
-        var i;
-        if (s) {
-          console.error(s);
+      onMessage: (err, data) => {
+        if (err) {
+          console.error(err);
           return;
         }
-        n && ((i = n.choices[0].delta) != null && i.content) && requestIdleCallback(() => {
-          o += n.choices[0].delta.content, b.updateMessage(t, o);
-        });
-      }
+        if (data && data.choices[0].delta?.content) {
+          requestIdleCallback(() => {
+            // handle openai response
+            text += data.choices[0].delta.content;
+            // update message
+            appState.updateMessage(newMsg, text);
+          });
+        }
+      },
     });
-    !b.setting.stream && r && b.updateMessage(t, r.choices[0].message.content);
-  }
-  // send to bot service
-  async _sendHandler(t) {
-    this.setLoading(!0);
-    const e = {
-      author: "assistant",
-      type: "text",
-      isThinking: !0,
-      data: {}
-    };
-    if (b.addMessage(e), this.customRequest)
-      await this.emit("chatbot:send", {
-        detail: {
-          newMessage: e,
-          messages: t
-        },
-        bubbles: !0,
-        composed: !0
-      });
-    else
-      try {
-        await this._sendToOpenai(e, t);
-      } catch (o) {
-        lr("error", o.message), console.error(o);
+    if (!appState.setting.stream && data) {
+      // update message
+      appState.updateMessage(newMsg, data.choices[0].message.content);
+    }
+  } */
+  /* TODO Remove
+    private async _sendHandler(messages: Chatbot.OpenaiMessage[]) {
+      this.setLoading(true);
+  
+      const newMsg: Chatbot.NewMessage = {
+        author: 'assistant',
+        type: 'text',
+        isThinking: true,
+        data: {},
+      };
+  
+      // add message to store
+      appState.addMessage(newMsg);
+  
+      if (this.customRequest) {
+        await this.emit('chatbot:send', {
+          detail: {
+            newMessage: newMsg,
+            messages,
+          },
+          bubbles: true,
+          composed: true,
+        });
+      } else {
+        try {
+          await this._sendToOpenai(newMsg, messages);
+        } catch (err) {
+          notify('error', (err as Error).message);
+          console.error(err);
+        }
       }
-    this.setLoading(!1);
-  }
+  
+      this.setLoading(false);
+    }*/
   _addMessageHandler(t) {
     const e = t.detail;
-    b.sendMessage(e);
+    m.sendMessage(e);
   }
   _deleteMessageHandler(t) {
     const e = t.detail;
-    b.removeMessage(e.id);
+    m.removeMessage(e.id);
   }
   async _sendFileHandler(t) {
-    const e = t.detail, a = {
+    const e = t.detail, r = {
       author: "user",
       type: "file",
       isUploading: !0,
       data: {
-        files: e.files.map((r, s) => ({
-          id: `${r.name}-${s}`,
-          name: r.name,
-          size: r.size,
-          type: r.type,
+        files: e.files.map((a, s) => ({
+          id: `${a.name}-${s}`,
+          name: a.name,
+          size: a.size,
+          type: a.type,
           url: ""
         }))
       }
     };
-    if (b.addMessage(a), this.uploadFileUrl) {
-      const r = await nr(this.uploadFileUrl, e.files);
-      r.code === 0 && r.data && (a.isUploading = !1, a.data = {
-        files: r.data
-      }, b.updateMessage(a));
+    if (m.addMessage(r), this.uploadFileUrl) {
+      const a = await or(this.uploadFileUrl, e.files);
+      a.code === 0 && a.data && (r.isUploading = !1, r.data = {
+        files: a.data
+      }, m.updateMessage(r));
     }
     this.emit("chatbot:file:send", {
       detail: {
         files: e.files,
-        message: a
+        message: r
       }
     });
   }
   // setting confirm handler
   _settingConfirmHandler(t) {
     const e = t.detail;
-    b.setSetting(e.setting), this.showSetting = !1, this._checkAuth();
+    m.setSetting(e.setting), this.showSetting = !1, this._checkAuth();
   }
   // scroll to bottom
   _scrollToBottom(t = !1) {
@@ -4374,60 +4308,73 @@ let v = class extends C {
       var e;
       (e = this._messageList) == null || e.scrollTo({
         top: this._messageList.scrollHeight,
-        behavior: t ? "smooth" : "auto"
+        behavior: "auto"
+        //smooth ? 'smooth' : 'auto',
       });
     });
   }
 };
-v.styles = _t;
-_([
-  c({ type: Boolean, attribute: "display-license" })
-], v.prototype, "displayLicense", 2);
-_([
-  c({ type: String, attribute: "name" })
-], v.prototype, "name", 2);
-_([
-  c({ type: String, attribute: "org-id" })
-], v.prototype, "orgId", 2);
-_([
-  c({ type: String, attribute: "bot-id" })
-], v.prototype, "botId", 2);
-_([
-  c({ type: String, attribute: "url" })
-], v.prototype, "url", 2);
-_([
-  c({ type: String, attribute: "welcome-message" })
-], v.prototype, "welcomeMessage", 2);
-_([
-  c({ type: Boolean, attribute: "stream" })
-], v.prototype, "stream", 2);
-_([
-  c({ type: Boolean, attribute: "custom-request" })
-], v.prototype, "customRequest", 2);
-_([
-  c({ type: Boolean, attribute: "enable-file-upload" })
-], v.prototype, "enableFileUpload", 2);
-_([
-  c({ type: String, attribute: "upload-file-url" })
-], v.prototype, "uploadFileUrl", 2);
-_([
-  c({ type: Boolean, attribute: "open" })
-], v.prototype, "open", 2);
-_([
-  c({ type: Boolean })
-], v.prototype, "loading", 2);
-_([
-  c({ type: Boolean })
-], v.prototype, "showSetting", 2);
-_([
-  c({ type: Boolean })
-], v.prototype, "showAuthAlert", 2);
-_([
-  Ce("cb-message-list")
-], v.prototype, "_messageList", 2);
-v = _([
-  x("chat-bot")
-], v);
+u.styles = ft;
+y([
+  i({ type: Boolean, attribute: "display-license" })
+], u.prototype, "displayLicense", 2);
+y([
+  i({ type: String, attribute: "name" })
+], u.prototype, "name", 2);
+y([
+  i({ type: String, attribute: "org-id" })
+], u.prototype, "orgId", 2);
+y([
+  i({ type: String, attribute: "bot-id" })
+], u.prototype, "botId", 2);
+y([
+  i({ type: String, attribute: "url" })
+], u.prototype, "url", 2);
+y([
+  i({ type: String, attribute: "welcome-message" })
+], u.prototype, "welcomeMessage", 2);
+y([
+  i({ type: String, attribute: "logo-svg" })
+], u.prototype, "logoSvg", 2);
+y([
+  i({ type: String, attribute: "bot-icon-svg" })
+], u.prototype, "botIconSvg", 2);
+y([
+  i({ type: String, attribute: "user-icon-svg" })
+], u.prototype, "userIconSvg", 2);
+y([
+  i({ type: String, attribute: "system-icon-svg" })
+], u.prototype, "systemIconSvg", 2);
+y([
+  i({ type: Boolean, attribute: "stream" })
+], u.prototype, "stream", 2);
+y([
+  i({ type: Boolean, attribute: "custom-request" })
+], u.prototype, "customRequest", 2);
+y([
+  i({ type: Boolean, attribute: "enable-file-upload" })
+], u.prototype, "enableFileUpload", 2);
+y([
+  i({ type: String, attribute: "upload-file-url" })
+], u.prototype, "uploadFileUrl", 2);
+y([
+  i({ type: Boolean, attribute: "open" })
+], u.prototype, "open", 2);
+y([
+  i({ type: Boolean })
+], u.prototype, "loading", 2);
+y([
+  i({ type: Boolean })
+], u.prototype, "showSetting", 2);
+y([
+  i({ type: Boolean })
+], u.prototype, "showAuthAlert", 2);
+y([
+  _e("cb-message-list")
+], u.prototype, "_messageList", 2);
+u = y([
+  x("enegelai-bot")
+], u);
 export {
-  v as default
+  u as default
 };