@enegelai/bot-widget 1.1.4

package/dist/index.es.js

@@ -0,0 +1,4433 @@
+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";
+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";
+import "@shoelace-style/shoelace/dist/components/avatar/avatar.js";
+import "@shoelace-style/shoelace/dist/components/input/input.js";
+import "@shoelace-style/shoelace/dist/components/textarea/textarea.js";
+import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
+import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";
+import "@shoelace-style/shoelace/dist/components/tab/tab.js";
+import "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";
+import "@shoelace-style/shoelace/dist/components/radio/radio.js";
+import "@shoelace-style/shoelace/dist/components/radio-group/radio-group.js";
+import "@shoelace-style/shoelace/dist/components/radio-button/radio-button.js";
+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 { 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) {
+  return typeof t == "function" ? t() : t;
+}
+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) {
+    super(ie.eventName, {
+      cancelable: !1
+    });
+    $(this, "key");
+    $(this, "state");
+    $(this, "value");
+    this.key = o, this.value = a, this.state = r;
+  }
+};
+$(ie, "eventName", "lit-state-changed");
+let E = ie;
+const mt = (t, e) => e !== t && (e === e || t === t);
+class G 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;
+      }
+    });
+  }
+  get propertyMap() {
+    return this.constructor.propertyMap;
+  }
+  get stateValue() {
+    return Object.fromEntries([...this.propertyMap].map(([o]) => [o, this[o]]));
+  }
+  static finalize() {
+    if (this.finalized)
+      return !1;
+    this.finalized = !0;
+    const o = Object.keys(this.properties || {});
+    for (const a of o)
+      this.createProperty(a, this.properties[a]);
+    return !0;
+  }
+  static createProperty(o, a) {
+    this.finalize();
+    const r = typeof o == "symbol" ? Symbol() : `__${o}`, s = this.getPropertyDescriptor(o, r, a);
+    Object.defineProperty(this.prototype, o, s);
+  }
+  static getPropertyDescriptor(o, a, r) {
+    const s = (r == null ? void 0 : r.hasChanged) || mt;
+    return {
+      get() {
+        return this[a];
+      },
+      set(n) {
+        const i = this[o];
+        this[a] = n, s(n, i) === !0 && this.dispatchStateEvent(o, n, this);
+      },
+      configurable: !0,
+      enumerable: !0
+    };
+  }
+  /**
+   * Reset the state to its original values, skipping
+   * 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;
+    });
+  }
+  /**
+   * subscribe to state change event. The callback will be called anytime
+   * a state property change if `nameOrNames` is undefined, or only for matching
+   * property values specified by `nameOrNames`
+   * @param callback the callback function to call
+   * @param nameOrNames
+   * @returns a unsubscribe function.
+   */
+  subscribe(o, a, r) {
+    a && !Array.isArray(a) && (a = [a]);
+    const s = (n) => {
+      (!a || a.includes(n.key)) && o(n.key, n.value, this);
+    };
+    return this.addEventListener(E.eventName, s, r), () => this.removeEventListener(E.eventName, s);
+  }
+  dispatchStateEvent(o, a, r) {
+    this.dispatchEvent(new E(o, a, r));
+  }
+}
+// a map holding decorators definition.
+$(G, "propertyMap"), $(G, "properties"), $(G, "finalized", !1);
+class ft {
+  constructor(e, o, a) {
+    $(this, "host");
+    $(this, "state");
+    $(this, "callback");
+    this.host = e, this.state = o, this.host.addController(this), this.callback = a || (() => this.host.requestUpdate());
+  }
+  hostConnected() {
+    this.state.addEventListener(E.eventName, this.callback), this.callback();
+  }
+  hostDisconnected() {
+    this.state.removeEventListener(E.eventName, this.callback);
+  }
+}
+/**
+ * @license
+ * 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);
+    }), n;
+  }
+  {
+    const s = o.constructor;
+    e !== void 0 && Object.defineProperty(o, a, e(a)), t == null || t(s, a);
+  }
+};
+function I(t) {
+  return Ze({
+    // @ts-ignore ctor is typof State and not typeof ReactiveElement
+    finisher: (e, o) => {
+      if (Object.getOwnPropertyDescriptor(e.prototype, o))
+        throw new Error("@property must be called before all state decorators");
+      return e.propertyMap || (e.propertyMap = /* @__PURE__ */ new Map()), e.propertyMap.set(o, { ...t, initialValue: t == null ? void 0 : t.value, resetValue: t == null ? void 0 : t.value }), e.createProperty(o, t);
+    }
+  });
+}
+function yt(t, e) {
+  if (t !== null && (e === Boolean || e === Number || e === Array || e === Object))
+    try {
+      t = JSON.parse(t);
+    } catch {
+      console.warn("cannot parse value", t);
+    }
+  return t;
+}
+new URL(window.location.href);
+const vt = {
+  prefix: "_ls"
+};
+function D(t) {
+  return t = { ...vt, ...t }, Ze({
+    // @ts-ignore ctor is typof State and not typeof ReactiveElement
+    finisher: (e, o) => {
+      const a = Object.getOwnPropertyDescriptor(e.prototype, o);
+      if (!a)
+        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;
+      if (s) {
+        const m = s.initialValue;
+        s.initialValue = () => yt(localStorage.getItem(r), n) ?? Fe(m), 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);
+        }
+      };
+      Object.defineProperty(e.prototype, o, g);
+    }
+  });
+}
+var wt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function xt(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+var Ue = { exports: {} };
+(function(t) {
+  (function(e, o) {
+    t.exports ? t.exports = o() : e.log = o();
+  })(wt, function() {
+    var e = function() {
+    }, o = "undefined", a = typeof window !== o && typeof window.navigator !== o && /Trident\/|MSIE /.test(window.navigator.userAgent), r = [
+      "trace",
+      "debug",
+      "info",
+      "warn",
+      "error"
+    ];
+    function s(h, f) {
+      var y = h[f];
+      if (typeof y.bind == "function")
+        return y.bind(h);
+      try {
+        return Function.prototype.bind.call(y, h);
+      } catch {
+        return function() {
+          return Function.prototype.apply.apply(y, [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 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);
+      }
+      this.log = this.debug;
+    }
+    function g(h, f, y) {
+      return function() {
+        typeof console !== o && (u.call(this, f, y), this[h].apply(this, arguments));
+      };
+    }
+    function m(h, f, y) {
+      return i(h) || g.apply(this, arguments);
+    }
+    function he(h, f, y) {
+      var p = this, Oe;
+      f = f ?? "WARN";
+      var M = "loglevel";
+      typeof h == "string" ? M += ":" + h : typeof h == "symbol" && (M = void 0);
+      function lt(d) {
+        var P = (r[d] || "silent").toUpperCase();
+        if (!(typeof window === o || !M)) {
+          try {
+            window.localStorage[M] = P;
+            return;
+          } catch {
+          }
+          try {
+            window.document.cookie = encodeURIComponent(M) + "=" + P + ";";
+          } catch {
+          }
+        }
+      }
+      function He() {
+        var d;
+        if (!(typeof window === o || !M)) {
+          try {
+            d = window.localStorage[M];
+          } catch {
+          }
+          if (typeof d === o)
+            try {
+              var P = window.document.cookie, J = P.indexOf(
+                encodeURIComponent(M) + "="
+              );
+              J !== -1 && (d = /^([^;]+)/.exec(P.slice(J))[1]);
+            } catch {
+            }
+          return p.levels[d] === void 0 && (d = void 0), d;
+        }
+      }
+      function ct() {
+        if (!(typeof window === o || !M)) {
+          try {
+            window.localStorage.removeItem(M);
+            return;
+          } catch {
+          }
+          try {
+            window.document.cookie = encodeURIComponent(M) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+          } catch {
+          }
+        }
+      }
+      p.name = h, p.levels = {
+        TRACE: 0,
+        DEBUG: 1,
+        INFO: 2,
+        WARN: 3,
+        ERROR: 4,
+        SILENT: 5
+      }, p.methodFactory = y || m, p.getLevel = function() {
+        return Oe;
+      }, p.setLevel = function(d, P) {
+        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)
+            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);
+      }, p.resetLevel = function() {
+        p.setLevel(f, !1), ct();
+      }, 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 j = new he(), ue = {};
+    j.getLogger = function(f) {
+      if (typeof f != "symbol" && typeof f != "string" || f === "")
+        throw new TypeError("You must supply a name when creating a logger.");
+      var y = ue[f];
+      return y || (y = ue[f] = new he(
+        f,
+        j.getLevel(),
+        j.methodFactory
+      )), y;
+    };
+    var it = typeof window !== o ? window.log : void 0;
+    return j.noConflict = function() {
+      return typeof window !== o && window.log === j && (window.log = it), j;
+    }, j.getLoggers = function() {
+      return ue;
+    }, j.default = j, j;
+  });
+})(Ue);
+var kt = Ue.exports;
+const ce = /* @__PURE__ */ xt(kt), _t = w`
+  :host {
+  }
+  .cb-wrapper {
+    color: var(--sl-color-neutral-600);
+    width: 420px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    border-radius: 6px;
+
+    height: calc(100% - 120px);
+    max-height: 800px;
+    position: fixed;
+    right: 25px;
+    bottom: 100px;
+    background: rgb(255, 255, 255);
+    overflow: hidden;
+
+    box-shadow: rgba(148, 149, 150, 0.2) 20px 20px 40px 20px;
+
+    //font-family: Inter, sans-serif, Avenir, Helvetica, Arial;
+    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-size: 100%;
+    font-style: normal;
+    letter-spacing: normal;
+    font-stretch: normal;
+    font-variant: normal;
+    font-weight: 400;
+    line-height: 20px;
+
+    z-index: 100;
+
+    //animation: fadeIn 0.1s ease-in-out;
+  }
+
+  .cb-alert-box {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 5px 10px;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      display: none;
+    }
+    to {
+      opacity: 1;
+      display: block;
+    }
+  }
+
+  @media (max-width: 450px) {
+    .cb-wrapper {
+      width: 100%;
+      height: 100%;
+      max-height: 100%;
+      right: 0;
+      bottom: 0;
+      border-radius: 0;
+    }
+  }
+`, S = w`
+    :host {
+        --primary-color: var(--sl-color-primary-600);
+    }
+
+    .link__item,
+    .link__item:visited,
+    .link__item:active {
+        color: var(--primary-color);
+    }
+
+    .link__item.inverse,
+    .link__item.inverse:visited,
+    .link__item.inverse:active {
+        color: white;
+    }
+
+    sl-button.icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .color-white {
+        color: white;
+    }
+
+    .color-default {
+        color: var(--sl-color-neutral-600);
+    }
+
+    .color-primary {
+        color: var(--sl-color-primary-600);
+    }
+
+    .color-success,
+    .color-green {
+        color: var(--sl-color-success-600);
+    }
+
+    .color-warning {
+        color: var(--sl-color-warning-600);
+    }
+
+    .color-danger,
+    .color-error {
+        color: var(--sl-color-danger-600);
+    }
+
+    .color-default {
+        color: var(--sl-color-neutral-600);
+    }
+
+    .text-button {
+        cursor: pointer;
+    }
+
+    .text-button:hover {
+        text-decoration: underline;
+    }
+`, Ne = w`
+    ${S}
+
+    :host {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        vertical-align: sub;
+        font-size: 1.2rem;
+    }
+
+    .cb-icon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        vertical-align: sub;
+        font-size: 1.2rem;
+    }
+
+    .color-white {
+        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;
+};
+let U = 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
+        >`;
+  }
+};
+U.styles = Ne;
+$e([
+  c({ type: String })
+], U.prototype, "color", 2);
+$e([
+  c({ type: String })
+], U.prototype, "svg", 2);
+U = $e([
+  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;
+    }
+
+    .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 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";
+  }
+  emit(e, o) {
+    const a = new CustomEvent(e, {
+      bubbles: !0,
+      cancelable: !1,
+      composed: !0,
+      detail: {},
+      ...o
+    });
+    return this.dispatchEvent(a), a;
+  }
+}
+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;
+};
+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 {
+  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>`;
+  }
+  _clickHandler() {
+    this.emit("setting:show");
+  }
+  _clickCloseHandler() {
+    this.emit("chatbot:toggle", {
+      detail: {
+        open: !1
+      }
+    });
+  }
+};
+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;
+    }
+
+    .link__item {
+        color: var(--primary-color);
+    }
+`;
+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();
+  }
+  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>
+        `;
+  }
+};
+ye.styles = Pt;
+ye = Tt([
+  x("cb-footer")
+], ye);
+const It = w`
+  ${S}
+
+  :host {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-y: auto;
+    background-size: 100%;
+    padding: 20px 10px;
+  }
+
+  /*
+  :host::-webkit-scrollbar {
+    width: 10px;
+  }
+  :host::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: #e7e7e7;
+    border: 1px solid #cacaca;
+  }
+  :host::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: #d55959;
+  }
+  */
+
+  /* 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;
+    padding: 10px 0px;
+    //border-top: 1px solid rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: center;
+  }
+
+  .cb-action {
+    padding: 6px 6px;
+    margin: 1px 4px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: rgba(255, 255, 255, 1);
+    background-color: #ff9119;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .cb-action svg {
+    color: rgba(255, 255, 255, 0.7);
+  }
+  .cb-action:hover svg {
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .cb-action:hover {
+    background-color: rgba(255, 145, 25, 0.8);
+  }
+
+  .cb-action-icon {
+    width: 18px;
+    height: 18px;
+    margin-right: 6px;
+  }
+
+  /* Ripple effect */
+  .ripple {
+    background-position: center;
+    transition: background 0.8s;
+  }
+  .ripple:hover {
+    background: #ff9119 radial-gradient(circle, transparent 1%, #ff9119 1%) center/15000%;
+  }
+  .ripple:active {
+    background-color: #fdba74;
+    background-size: 100%;
+    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;
+};
+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`
+    .cb-thinking {
+      text-align: center;
+    }
+
+    .cb-thinking span {
+      display: inline-block;
+      background-color: #b6b5ba;
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+      margin-right: 3px;
+      animation: jump 2s infinite;
+    }
+
+    .cb-thinking span:first-child {
+      animation-delay: -1s;
+    }
+
+    .cb-thinking span:nth-child(2) {
+      animation-delay: -0.85s;
+    }
+
+    .cb-thinking span:nth-child(3) {
+      animation-delay: -0.7s;
+    }
+
+    @keyframes jump {
+      10% {
+        transform: translateY(-10px);
+        opacity: 0.9;
+      }
+      50% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  `;
+ve = Vt([
+  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;
+};
+let oe = class extends C {
+  constructor() {
+    super(...arguments), this.files = [];
+  }
+  render() {
+    return l` <div class="cb-uploading">
+            <div class="cb-uploading__title">
+                <sl-spinner class="cb-spinner"></sl-spinner>
+                <span>Uploading...</span>
+            </div>
+            <div class="cb-uploading__filelist">
+                ${this.files.map((t) => l`${t.name}<br />`)}
+            </div>
+        </div>`;
+  }
+};
+oe.styles = w`
+        .cb-uploading {
+            text-align: left;
+        }
+
+        .cb-uploading__title {
+            font-size: 1rem;
+            display: flex;
+            align-items: center;
+        }
+
+        .cb-spinner {
+            font-size: 1rem;
+            --indicator-color: var(--primary-color);
+            --track-color: white;
+            margin-right: 5px;
+        }
+    `;
+Ke([
+  c({ type: Array })
+], oe.prototype, "files", 2);
+oe = Ke([
+  x("cb-uploading")
+], oe);
+const Ft = w`
+    ${S}
+    :host {
+    }
+
+    .cb-file {
+        width: 100%;
+        border-radius: 0.2rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 1;
+        color: white;
+    }
+
+    .cb-file-icon {
+        font-size: 2em;
+        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;
+};
+let N = class extends le {
+  constructor() {
+    super(...arguments), this.url = "", this.inverse = !1;
+  }
+  render() {
+    return l`
+            <a
+                class="
+                    cb-external-link link__item
+                    ${this.inverse ? "inverse" : ""}}
+                "
+                href="${this.url}"
+                target="_blank"
+                reference="noopener noreferrer"
+            >
+                <slot></slot>
+            </a>
+        `;
+  }
+};
+N.styles = w`
+        :host {
+            --primary-color: var(--sl-color-primary-600);
+        }
+
+        .cb-external-link {
+            display: inline-block;
+        }
+
+        .link__item,
+        .link__item:visited,
+        .link__item:active {
+            color: var(--primary-color);
+        }
+
+        .link__item.inverse,
+        .link__item.inverse:visited,
+        .link__item.inverse:active {
+            color: white;
+        }
+
+        .cb-external-link:hover {
+            text-decoration: underline;
+        }
+    `;
+Me([
+  c({ type: String })
+], N.prototype, "url", 2);
+Me([
+  c({ type: Boolean })
+], N.prototype, "inverse", 2);
+N = Me([
+  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;
+};
+const Pe = {
+  pdf: Wt,
+  txt: Nt,
+  md: Kt,
+  csv: Jt,
+  ppd: Yt,
+  doc: Gt,
+  docx: Qt
+};
+let W = class extends C {
+  constructor() {
+    super(...arguments), this.filename = "", this.url = "";
+  }
+  get type() {
+    const t = "txt";
+    if (!this.filename)
+      return t;
+    const e = this.filename.split(".").pop();
+    return e ? e.toLowerCase() : t;
+  }
+  render() {
+    return l`
+            <cb-external-link url="${this.url}" inverse>
+                <div class="cb-file">
+                    ${this.renderFileIcon()}
+                    <span class="cb-file-name">${this.filename}</span>
+                </div>
+            </cb-external-link>
+        `;
+  }
+  renderFileIcon() {
+    return l`
+            <cb-icon
+                class="cb-file-icon"
+                svg="${Pe[this.type] || Pe.txt}"
+            ></cb-icon>
+        `;
+  }
+};
+W.styles = Ft;
+Le([
+  c({ type: String })
+], W.prototype, "filename", 2);
+Le([
+  c({ type: String })
+], W.prototype, "url", 2);
+W = Le([
+  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`
+    pre code.hljs {
+        display: block;
+        overflow-x: auto;
+        padding: 1em;
+    }
+    code.hljs {
+        padding: 3px 5px;
+    }
+    .hljs {
+        color: #abb2bf;
+        background: #282c34;
+    }
+    .hljs-keyword,
+    .hljs-operator,
+    .hljs-pattern-match {
+        color: #f92672;
+    }
+    .hljs-function,
+    .hljs-pattern-match .hljs-constructor {
+        color: #61aeee;
+    }
+    .hljs-function .hljs-params {
+        color: #a6e22e;
+    }
+    .hljs-function .hljs-params .hljs-typing {
+        color: #fd971f;
+    }
+    .hljs-module-access .hljs-module {
+        color: #7e57c2;
+    }
+    .hljs-constructor {
+        color: #e2b93d;
+    }
+    .hljs-constructor .hljs-string {
+        color: #9ccc65;
+    }
+    .hljs-comment,
+    .hljs-quote {
+        color: #b18eb1;
+        font-style: italic;
+    }
+    .hljs-doctag,
+    .hljs-formula {
+        color: #c678dd;
+    }
+    .hljs-deletion,
+    .hljs-name,
+    .hljs-section,
+    .hljs-selector-tag,
+    .hljs-subst {
+        color: #e06c75;
+    }
+    .hljs-literal {
+        color: #56b6c2;
+    }
+    .hljs-addition,
+    .hljs-attribute,
+    .hljs-meta .hljs-string,
+    .hljs-regexp,
+    .hljs-string {
+        color: #98c379;
+    }
+    .hljs-built_in,
+    .hljs-class .hljs-title,
+    .hljs-title.class_ {
+        color: #e6c07b;
+    }
+    .hljs-attr,
+    .hljs-number,
+    .hljs-selector-attr,
+    .hljs-selector-class,
+    .hljs-selector-pseudo,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-variable {
+        color: #d19a66;
+    }
+    .hljs-bullet,
+    .hljs-link,
+    .hljs-meta,
+    .hljs-selector-id,
+    .hljs-symbol,
+    .hljs-title {
+        color: #61aeee;
+    }
+    .hljs-emphasis {
+        font-style: italic;
+    }
+    .hljs-strong {
+        font-weight: 700;
+    }
+    .hljs-link {
+        text-decoration: underline;
+    }
+    pre code.hljs {
+        display: block;
+        overflow-x: auto;
+        padding: 1em;
+    }
+    code.hljs {
+        padding: 3px 5px;
+    }
+    .hljs {
+        color: #383a42;
+        background: #fafafa;
+    }
+    .hljs-comment,
+    .hljs-quote {
+        color: #a0a1a7;
+        font-style: italic;
+    }
+    .hljs-doctag,
+    .hljs-formula,
+    .hljs-keyword {
+        color: #a626a4;
+    }
+    .hljs-deletion,
+    .hljs-name,
+    .hljs-section,
+    .hljs-selector-tag,
+    .hljs-subst {
+        color: #e45649;
+    }
+    .hljs-literal {
+        color: #0184bb;
+    }
+    .hljs-addition,
+    .hljs-attribute,
+    .hljs-meta .hljs-string,
+    .hljs-regexp,
+    .hljs-string {
+        color: #50a14f;
+    }
+    .hljs-attr,
+    .hljs-number,
+    .hljs-selector-attr,
+    .hljs-selector-class,
+    .hljs-selector-pseudo,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-variable {
+        color: #986801;
+    }
+    .hljs-bullet,
+    .hljs-link,
+    .hljs-meta,
+    .hljs-selector-id,
+    .hljs-symbol,
+    .hljs-title {
+        color: #4078f2;
+    }
+    .hljs-built_in,
+    .hljs-class .hljs-title,
+    .hljs-title.class_ {
+        color: #c18401;
+    }
+    .hljs-emphasis {
+        font-style: italic;
+    }
+    .hljs-strong {
+        font-weight: 700;
+    }
+    .hljs-link {
+        text-decoration: underline;
+    }
+    .markdown-body {
+        color-scheme: dark;
+        --color-prettylights-syntax-comment: #8b949e;
+        --color-prettylights-syntax-constant: #79c0ff;
+        --color-prettylights-syntax-entity: #d2a8ff;
+        --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+        --color-prettylights-syntax-entity-tag: #7ee787;
+        --color-prettylights-syntax-keyword: #ff7b72;
+        --color-prettylights-syntax-string: #a5d6ff;
+        --color-prettylights-syntax-variable: #ffa657;
+        --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+        --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+        --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+        --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+        --color-prettylights-syntax-carriage-return-bg: #b62324;
+        --color-prettylights-syntax-string-regexp: #7ee787;
+        --color-prettylights-syntax-markup-list: #f2cc60;
+        --color-prettylights-syntax-markup-heading: #1f6feb;
+        --color-prettylights-syntax-markup-italic: #c9d1d9;
+        --color-prettylights-syntax-markup-bold: #c9d1d9;
+        --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+        --color-prettylights-syntax-markup-deleted-bg: #67060c;
+        --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+        --color-prettylights-syntax-markup-inserted-bg: #033a16;
+        --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+        --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+        --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+        --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+        --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+        --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+        --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+        --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+        --color-fg-default: #c9d1d9;
+        --color-fg-muted: #8b949e;
+        --color-fg-subtle: #6e7681;
+        --color-canvas-default: #0d1117;
+        --color-canvas-subtle: #161b22;
+        --color-border-default: #30363d;
+        --color-border-muted: #21262d;
+        --color-neutral-muted: rgba(110, 118, 129, 0.4);
+        --color-accent-fg: #58a6ff;
+        --color-accent-emphasis: #1f6feb;
+        --color-attention-subtle: rgba(187, 128, 9, 0.15);
+        --color-danger-fg: #f85149;
+    }
+    .markdown-body {
+        color-scheme: light;
+        --color-prettylights-syntax-comment: #6e7781;
+        --color-prettylights-syntax-constant: #0550ae;
+        --color-prettylights-syntax-entity: #8250df;
+        --color-prettylights-syntax-storage-modifier-import: #24292f;
+        --color-prettylights-syntax-entity-tag: #116329;
+        --color-prettylights-syntax-keyword: #cf222e;
+        --color-prettylights-syntax-string: #0a3069;
+        --color-prettylights-syntax-variable: #953800;
+        --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+        --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+        --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+        --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+        --color-prettylights-syntax-carriage-return-bg: #cf222e;
+        --color-prettylights-syntax-string-regexp: #116329;
+        --color-prettylights-syntax-markup-list: #3b2300;
+        --color-prettylights-syntax-markup-heading: #0550ae;
+        --color-prettylights-syntax-markup-italic: #24292f;
+        --color-prettylights-syntax-markup-bold: #24292f;
+        --color-prettylights-syntax-markup-deleted-text: #82071e;
+        --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+        --color-prettylights-syntax-markup-inserted-text: #116329;
+        --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+        --color-prettylights-syntax-markup-changed-text: #953800;
+        --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+        --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+        --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+        --color-prettylights-syntax-meta-diff-range: #8250df;
+        --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+        --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+        --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+        --color-fg-default: #24292f;
+        --color-fg-muted: #57606a;
+        --color-fg-subtle: #6e7781;
+        --color-canvas-default: #ffffff;
+        --color-canvas-subtle: #f6f8fa;
+        --color-border-default: #d0d7de;
+        --color-border-muted: hsl(210, 18%, 87%);
+        --color-neutral-muted: rgba(175, 184, 193, 0.2);
+        --color-accent-fg: #0969da;
+        --color-accent-emphasis: #0969da;
+        --color-attention-subtle: #fff8c5;
+        --color-danger-fg: #cf222e;
+    }
+    .markdown-body {
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+        margin: 0;
+        color: var(--color-fg-default);
+        background-color: var(--color-canvas-default);
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans,
+            Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+        font-size: 16px;
+        line-height: 1.5;
+        word-wrap: break-word;
+    }
+    .markdown-body .octicon {
+        display: inline-block;
+        fill: currentColor;
+        vertical-align: text-bottom;
+    }
+    .markdown-body h1:hover .anchor .octicon-link:before,
+    .markdown-body h2:hover .anchor .octicon-link:before,
+    .markdown-body h3:hover .anchor .octicon-link:before,
+    .markdown-body h4:hover .anchor .octicon-link:before,
+    .markdown-body h5:hover .anchor .octicon-link:before,
+    .markdown-body h6:hover .anchor .octicon-link:before {
+        width: 16px;
+        height: 16px;
+        content: ' ';
+        display: inline-block;
+        background-color: currentColor;
+        -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+        mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+    }
+    .markdown-body details,
+    .markdown-body figcaption,
+    .markdown-body figure {
+        display: block;
+    }
+    .markdown-body summary {
+        display: list-item;
+    }
+    .markdown-body [hidden] {
+        display: none !important;
+    }
+    .markdown-body a {
+        background-color: transparent;
+        color: var(--color-accent-fg);
+        text-decoration: none;
+    }
+    .markdown-body abbr[title] {
+        border-bottom: none;
+        -webkit-text-decoration: underline dotted;
+        text-decoration: underline dotted;
+    }
+    .markdown-body b,
+    .markdown-body strong {
+        font-weight: var(--base-text-weight-semibold, 600);
+    }
+    .markdown-body dfn {
+        font-style: italic;
+    }
+    .markdown-body h1 {
+        margin: 0.67em 0;
+        font-weight: var(--base-text-weight-semibold, 600);
+        padding-bottom: 0.3em;
+        font-size: 2em;
+        border-bottom: 1px solid var(--color-border-muted);
+    }
+    .markdown-body mark {
+        background-color: var(--color-attention-subtle);
+        color: var(--color-fg-default);
+    }
+    .markdown-body small {
+        font-size: 90%;
+    }
+    .markdown-body sub,
+    .markdown-body sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+    .markdown-body sub {
+        bottom: -0.25em;
+    }
+    .markdown-body sup {
+        top: -0.5em;
+    }
+    .markdown-body img {
+        border-style: none;
+        max-width: 100%;
+        box-sizing: content-box;
+        background-color: var(--color-canvas-default);
+    }
+    .markdown-body code,
+    .markdown-body kbd,
+    .markdown-body pre,
+    .markdown-body samp {
+        font-family: monospace;
+        font-size: 1em;
+    }
+    .markdown-body figure {
+        margin: 1em 40px;
+    }
+    .markdown-body hr {
+        box-sizing: content-box;
+        overflow: hidden;
+        background: transparent;
+        border-bottom: 1px solid var(--color-border-muted);
+        height: 0.25em;
+        padding: 0;
+        margin: 24px 0;
+        background-color: var(--color-border-default);
+        border: 0;
+    }
+    .markdown-body input {
+        font: inherit;
+        margin: 0;
+        overflow: visible;
+        font-family: inherit;
+        font-size: inherit;
+        line-height: inherit;
+    }
+    .markdown-body [type='button'],
+    .markdown-body [type='reset'],
+    .markdown-body [type='submit'] {
+        -webkit-appearance: button;
+    }
+    .markdown-body [type='checkbox'],
+    .markdown-body [type='radio'] {
+        box-sizing: border-box;
+        padding: 0;
+    }
+    .markdown-body [type='number']::-webkit-inner-spin-button,
+    .markdown-body [type='number']::-webkit-outer-spin-button {
+        height: auto;
+    }
+    .markdown-body [type='search']::-webkit-search-cancel-button,
+    .markdown-body [type='search']::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+    .markdown-body ::-webkit-input-placeholder {
+        color: inherit;
+        opacity: 0.54;
+    }
+    .markdown-body ::-webkit-file-upload-button {
+        -webkit-appearance: button;
+        font: inherit;
+    }
+    .markdown-body a:hover {
+        text-decoration: underline;
+    }
+    .markdown-body ::-moz-placeholder {
+        color: var(--color-fg-subtle);
+        opacity: 1;
+    }
+    .markdown-body ::placeholder {
+        color: var(--color-fg-subtle);
+        opacity: 1;
+    }
+    .markdown-body hr:before {
+        display: table;
+        content: '';
+    }
+    .markdown-body hr:after {
+        display: table;
+        clear: both;
+        content: '';
+    }
+    .markdown-body table {
+        border-spacing: 0;
+        border-collapse: collapse;
+        display: block;
+        width: -moz-max-content;
+        width: max-content;
+        max-width: 100%;
+        overflow: auto;
+    }
+    .markdown-body td,
+    .markdown-body th {
+        padding: 0;
+    }
+    .markdown-body details summary {
+        cursor: pointer;
+    }
+    .markdown-body details:not([open]) > *:not(summary) {
+        display: none !important;
+    }
+    .markdown-body a:focus,
+    .markdown-body [role='button']:focus,
+    .markdown-body input[type='radio']:focus,
+    .markdown-body input[type='checkbox']:focus {
+        outline: 2px solid var(--color-accent-fg);
+        outline-offset: -2px;
+        box-shadow: none;
+    }
+    .markdown-body a:focus:not(:focus-visible),
+    .markdown-body [role='button']:focus:not(:focus-visible),
+    .markdown-body input[type='radio']:focus:not(:focus-visible),
+    .markdown-body input[type='checkbox']:focus:not(:focus-visible) {
+        outline: solid 1px transparent;
+    }
+    .markdown-body a:focus-visible,
+    .markdown-body [role='button']:focus-visible,
+    .markdown-body input[type='radio']:focus-visible,
+    .markdown-body input[type='checkbox']:focus-visible {
+        outline: 2px solid var(--color-accent-fg);
+        outline-offset: -2px;
+        box-shadow: none;
+    }
+    .markdown-body a:not([class]):focus,
+    .markdown-body a:not([class]):focus-visible,
+    .markdown-body input[type='radio']:focus,
+    .markdown-body input[type='radio']:focus-visible,
+    .markdown-body input[type='checkbox']:focus,
+    .markdown-body input[type='checkbox']:focus-visible {
+        outline-offset: 0;
+    }
+    .markdown-body kbd {
+        display: inline-block;
+        padding: 3px 5px;
+        font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+            Liberation Mono, monospace;
+        line-height: 10px;
+        color: var(--color-fg-default);
+        vertical-align: middle;
+        background-color: var(--color-canvas-subtle);
+        border: solid 1px var(--color-neutral-muted);
+        border-bottom-color: var(--color-neutral-muted);
+        border-radius: 6px;
+        box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
+    }
+    .markdown-body h1,
+    .markdown-body h2,
+    .markdown-body h3,
+    .markdown-body h4,
+    .markdown-body h5,
+    .markdown-body h6 {
+        margin-top: 24px;
+        margin-bottom: 16px;
+        font-weight: var(--base-text-weight-semibold, 600);
+        line-height: 1.25;
+    }
+    .markdown-body h2 {
+        font-weight: var(--base-text-weight-semibold, 600);
+        padding-bottom: 0.3em;
+        font-size: 1.5em;
+        border-bottom: 1px solid var(--color-border-muted);
+    }
+    .markdown-body h3 {
+        font-weight: var(--base-text-weight-semibold, 600);
+        font-size: 1.25em;
+    }
+    .markdown-body h4 {
+        font-weight: var(--base-text-weight-semibold, 600);
+        font-size: 1em;
+    }
+    .markdown-body h5 {
+        font-weight: var(--base-text-weight-semibold, 600);
+        font-size: 0.875em;
+    }
+    .markdown-body h6 {
+        font-weight: var(--base-text-weight-semibold, 600);
+        font-size: 0.85em;
+        color: var(--color-fg-muted);
+    }
+    .markdown-body p {
+        margin-top: 0;
+        margin-bottom: 10px;
+    }
+    .markdown-body blockquote {
+        margin: 0;
+        padding: 0 1em;
+        color: var(--color-fg-muted);
+        border-left: 0.25em solid var(--color-border-default);
+    }
+    .markdown-body ul,
+    .markdown-body ol {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-left: 2em;
+    }
+    .markdown-body ol ol,
+    .markdown-body ul ol {
+        list-style-type: lower-roman;
+    }
+    .markdown-body ul ul ol,
+    .markdown-body ul ol ol,
+    .markdown-body ol ul ol,
+    .markdown-body ol ol ol {
+        list-style-type: lower-alpha;
+    }
+    .markdown-body dd {
+        margin-left: 0;
+    }
+    .markdown-body tt,
+    .markdown-body code,
+    .markdown-body samp {
+        font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+            Liberation Mono, monospace;
+        font-size: 12px;
+    }
+    .markdown-body pre {
+        margin-top: 0;
+        margin-bottom: 0;
+        font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+            Liberation Mono, monospace;
+        font-size: 12px;
+        word-wrap: normal;
+    }
+    .markdown-body .octicon {
+        display: inline-block;
+        overflow: visible !important;
+        vertical-align: text-bottom;
+        fill: currentColor;
+    }
+    .markdown-body input::-webkit-outer-spin-button,
+    .markdown-body input::-webkit-inner-spin-button {
+        margin: 0;
+        -webkit-appearance: none;
+        appearance: none;
+    }
+    .markdown-body:before {
+        display: table;
+        content: '';
+    }
+    .markdown-body:after {
+        display: table;
+        clear: both;
+        content: '';
+    }
+    .markdown-body > *:first-child {
+        margin-top: 0 !important;
+    }
+    .markdown-body > *:last-child {
+        margin-bottom: 0 !important;
+    }
+    .markdown-body a:not([href]) {
+        color: inherit;
+        text-decoration: none;
+    }
+    .markdown-body .absent {
+        color: var(--color-danger-fg);
+    }
+    .markdown-body .anchor {
+        float: left;
+        padding-right: 4px;
+        margin-left: -20px;
+        line-height: 1;
+    }
+    .markdown-body .anchor:focus {
+        outline: none;
+    }
+    .markdown-body p,
+    .markdown-body blockquote,
+    .markdown-body ul,
+    .markdown-body ol,
+    .markdown-body dl,
+    .markdown-body table,
+    .markdown-body pre,
+    .markdown-body details {
+        margin-top: 0;
+        margin-bottom: 16px;
+    }
+    .markdown-body blockquote > :first-child {
+        margin-top: 0;
+    }
+    .markdown-body blockquote > :last-child {
+        margin-bottom: 0;
+    }
+    .markdown-body h1 .octicon-link,
+    .markdown-body h2 .octicon-link,
+    .markdown-body h3 .octicon-link,
+    .markdown-body h4 .octicon-link,
+    .markdown-body h5 .octicon-link,
+    .markdown-body h6 .octicon-link {
+        color: var(--color-fg-default);
+        vertical-align: middle;
+        visibility: hidden;
+    }
+    .markdown-body h1:hover .anchor,
+    .markdown-body h2:hover .anchor,
+    .markdown-body h3:hover .anchor,
+    .markdown-body h4:hover .anchor,
+    .markdown-body h5:hover .anchor,
+    .markdown-body h6:hover .anchor {
+        text-decoration: none;
+    }
+    .markdown-body h1:hover .anchor .octicon-link,
+    .markdown-body h2:hover .anchor .octicon-link,
+    .markdown-body h3:hover .anchor .octicon-link,
+    .markdown-body h4:hover .anchor .octicon-link,
+    .markdown-body h5:hover .anchor .octicon-link,
+    .markdown-body h6:hover .anchor .octicon-link {
+        visibility: visible;
+    }
+    .markdown-body h1 tt,
+    .markdown-body h1 code,
+    .markdown-body h2 tt,
+    .markdown-body h2 code,
+    .markdown-body h3 tt,
+    .markdown-body h3 code,
+    .markdown-body h4 tt,
+    .markdown-body h4 code,
+    .markdown-body h5 tt,
+    .markdown-body h5 code,
+    .markdown-body h6 tt,
+    .markdown-body h6 code {
+        padding: 0 0.2em;
+        font-size: inherit;
+    }
+    .markdown-body summary h1,
+    .markdown-body summary h2,
+    .markdown-body summary h3,
+    .markdown-body summary h4,
+    .markdown-body summary h5,
+    .markdown-body summary h6 {
+        display: inline-block;
+    }
+    .markdown-body summary h1 .anchor,
+    .markdown-body summary h2 .anchor,
+    .markdown-body summary h3 .anchor,
+    .markdown-body summary h4 .anchor,
+    .markdown-body summary h5 .anchor,
+    .markdown-body summary h6 .anchor {
+        margin-left: -40px;
+    }
+    .markdown-body summary h1,
+    .markdown-body summary h2 {
+        padding-bottom: 0;
+        border-bottom: 0;
+    }
+    .markdown-body ul.no-list,
+    .markdown-body ol.no-list {
+        padding: 0;
+        list-style-type: none;
+    }
+    .markdown-body ol[type='a'] {
+        list-style-type: lower-alpha;
+    }
+    .markdown-body ol[type='A'] {
+        list-style-type: upper-alpha;
+    }
+    .markdown-body ol[type='i'] {
+        list-style-type: lower-roman;
+    }
+    .markdown-body ol[type='I'] {
+        list-style-type: upper-roman;
+    }
+    .markdown-body ol[type='1'] {
+        list-style-type: decimal;
+    }
+    .markdown-body div > ol:not([type]) {
+        list-style-type: decimal;
+    }
+    .markdown-body ul ul,
+    .markdown-body ul ol,
+    .markdown-body ol ol,
+    .markdown-body ol ul {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .markdown-body li > p {
+        margin-top: 16px;
+    }
+    .markdown-body li + li {
+        margin-top: 0.25em;
+    }
+    .markdown-body dl {
+        padding: 0;
+    }
+    .markdown-body dl dt {
+        padding: 0;
+        margin-top: 16px;
+        font-size: 1em;
+        font-style: italic;
+        font-weight: var(--base-text-weight-semibold, 600);
+    }
+    .markdown-body dl dd {
+        padding: 0 16px;
+        margin-bottom: 16px;
+    }
+    .markdown-body table th {
+        font-weight: var(--base-text-weight-semibold, 600);
+    }
+    .markdown-body table th,
+    .markdown-body table td {
+        padding: 6px 13px;
+        border: 1px solid var(--color-border-default);
+    }
+    .markdown-body table tr {
+        background-color: var(--color-canvas-default);
+        border-top: 1px solid var(--color-border-muted);
+    }
+    .markdown-body table tr:nth-child(2n) {
+        background-color: var(--color-canvas-subtle);
+    }
+    .markdown-body table img {
+        background-color: transparent;
+    }
+    .markdown-body img[align='right'] {
+        padding-left: 20px;
+    }
+    .markdown-body img[align='left'] {
+        padding-right: 20px;
+    }
+    .markdown-body .emoji {
+        max-width: none;
+        vertical-align: text-top;
+        background-color: transparent;
+    }
+    .markdown-body span.frame {
+        display: block;
+        overflow: hidden;
+    }
+    .markdown-body span.frame > span {
+        display: block;
+        float: left;
+        width: auto;
+        padding: 7px;
+        margin: 13px 0 0;
+        overflow: hidden;
+        border: 1px solid var(--color-border-default);
+    }
+    .markdown-body span.frame span img {
+        display: block;
+        float: left;
+    }
+    .markdown-body span.frame span span {
+        display: block;
+        padding: 5px 0 0;
+        clear: both;
+        color: var(--color-fg-default);
+    }
+    .markdown-body span.align-center {
+        display: block;
+        overflow: hidden;
+        clear: both;
+    }
+    .markdown-body span.align-center > span {
+        display: block;
+        margin: 13px auto 0;
+        overflow: hidden;
+        text-align: center;
+    }
+    .markdown-body span.align-center span img {
+        margin: 0 auto;
+        text-align: center;
+    }
+    .markdown-body span.align-right {
+        display: block;
+        overflow: hidden;
+        clear: both;
+    }
+    .markdown-body span.align-right > span {
+        display: block;
+        margin: 13px 0 0;
+        overflow: hidden;
+        text-align: right;
+    }
+    .markdown-body span.align-right span img {
+        margin: 0;
+        text-align: right;
+    }
+    .markdown-body span.float-left {
+        display: block;
+        float: left;
+        margin-right: 13px;
+        overflow: hidden;
+    }
+    .markdown-body span.float-left span {
+        margin: 13px 0 0;
+    }
+    .markdown-body span.float-right {
+        display: block;
+        float: right;
+        margin-left: 13px;
+        overflow: hidden;
+    }
+    .markdown-body span.float-right > span {
+        display: block;
+        margin: 13px auto 0;
+        overflow: hidden;
+        text-align: right;
+    }
+    .markdown-body code,
+    .markdown-body tt {
+        padding: 0.2em 0.4em;
+        margin: 0;
+        font-size: 85%;
+        white-space: break-spaces;
+        background-color: var(--color-neutral-muted);
+        border-radius: 6px;
+    }
+    .markdown-body code br,
+    .markdown-body tt br {
+        display: none;
+    }
+    .markdown-body del code {
+        text-decoration: inherit;
+    }
+    .markdown-body samp {
+        font-size: 85%;
+    }
+    .markdown-body pre code {
+        font-size: 100%;
+    }
+    .markdown-body pre > code {
+        padding: 0;
+        margin: 0;
+        word-break: normal;
+        white-space: pre;
+        background: transparent;
+        border: 0;
+    }
+    .markdown-body .highlight {
+        margin-bottom: 16px;
+    }
+    .markdown-body .highlight pre {
+        margin-bottom: 0;
+        word-break: normal;
+    }
+    .markdown-body .highlight pre,
+    .markdown-body pre {
+        padding: 16px;
+        overflow: auto;
+        font-size: 85%;
+        line-height: 1.45;
+        background-color: var(--color-canvas-subtle);
+        border-radius: 6px;
+    }
+    .markdown-body pre code,
+    .markdown-body pre tt {
+        display: inline;
+        max-width: auto;
+        padding: 0;
+        margin: 0;
+        overflow: visible;
+        line-height: inherit;
+        word-wrap: normal;
+        background-color: transparent;
+        border: 0;
+    }
+    .markdown-body .csv-data td,
+    .markdown-body .csv-data th {
+        padding: 5px;
+        overflow: hidden;
+        font-size: 12px;
+        line-height: 1;
+        text-align: left;
+        white-space: nowrap;
+    }
+    .markdown-body .csv-data .blob-num {
+        padding: 10px 8px 9px;
+        text-align: right;
+        background: var(--color-canvas-default);
+        border: 0;
+    }
+    .markdown-body .csv-data tr {
+        border-top: 0;
+    }
+    .markdown-body .csv-data th {
+        font-weight: var(--base-text-weight-semibold, 600);
+        background: var(--color-canvas-subtle);
+        border-top: 0;
+    }
+    .markdown-body [data-footnote-ref]:before {
+        content: '[';
+    }
+    .markdown-body [data-footnote-ref]:after {
+        content: ']';
+    }
+    .markdown-body .footnotes {
+        font-size: 12px;
+        color: var(--color-fg-muted);
+        border-top: 1px solid var(--color-border-default);
+    }
+    .markdown-body .footnotes ol {
+        padding-left: 16px;
+    }
+    .markdown-body .footnotes ol ul {
+        display: inline-block;
+        padding-left: 16px;
+        margin-top: 16px;
+    }
+    .markdown-body .footnotes li {
+        position: relative;
+    }
+    .markdown-body .footnotes li:target:before {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        bottom: -8px;
+        left: -24px;
+        pointer-events: none;
+        content: '';
+        border: 2px solid var(--color-accent-emphasis);
+        border-radius: 6px;
+    }
+    .markdown-body .footnotes li:target {
+        color: var(--color-fg-default);
+    }
+    .markdown-body .footnotes .data-footnote-backref g-emoji {
+        font-family: monospace;
+    }
+    .markdown-body .pl-c {
+        color: var(--color-prettylights-syntax-comment);
+    }
+    .markdown-body .pl-c1,
+    .markdown-body .pl-s .pl-v {
+        color: var(--color-prettylights-syntax-constant);
+    }
+    .markdown-body .pl-e,
+    .markdown-body .pl-en {
+        color: var(--color-prettylights-syntax-entity);
+    }
+    .markdown-body .pl-smi,
+    .markdown-body .pl-s .pl-s1 {
+        color: var(--color-prettylights-syntax-storage-modifier-import);
+    }
+    .markdown-body .pl-ent {
+        color: var(--color-prettylights-syntax-entity-tag);
+    }
+    .markdown-body .pl-k {
+        color: var(--color-prettylights-syntax-keyword);
+    }
+    .markdown-body .pl-s,
+    .markdown-body .pl-pds,
+    .markdown-body .pl-s .pl-pse .pl-s1,
+    .markdown-body .pl-sr,
+    .markdown-body .pl-sr .pl-cce,
+    .markdown-body .pl-sr .pl-sre,
+    .markdown-body .pl-sr .pl-sra {
+        color: var(--color-prettylights-syntax-string);
+    }
+    .markdown-body .pl-v,
+    .markdown-body .pl-smw {
+        color: var(--color-prettylights-syntax-variable);
+    }
+    .markdown-body .pl-bu {
+        color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
+    }
+    .markdown-body .pl-ii {
+        color: var(--color-prettylights-syntax-invalid-illegal-text);
+        background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
+    }
+    .markdown-body .pl-c2 {
+        color: var(--color-prettylights-syntax-carriage-return-text);
+        background-color: var(--color-prettylights-syntax-carriage-return-bg);
+    }
+    .markdown-body .pl-sr .pl-cce {
+        font-weight: 700;
+        color: var(--color-prettylights-syntax-string-regexp);
+    }
+    .markdown-body .pl-ml {
+        color: var(--color-prettylights-syntax-markup-list);
+    }
+    .markdown-body .pl-mh,
+    .markdown-body .pl-mh .pl-en,
+    .markdown-body .pl-ms {
+        font-weight: 700;
+        color: var(--color-prettylights-syntax-markup-heading);
+    }
+    .markdown-body .pl-mi {
+        font-style: italic;
+        color: var(--color-prettylights-syntax-markup-italic);
+    }
+    .markdown-body .pl-mb {
+        font-weight: 700;
+        color: var(--color-prettylights-syntax-markup-bold);
+    }
+    .markdown-body .pl-md {
+        color: var(--color-prettylights-syntax-markup-deleted-text);
+        background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+    }
+    .markdown-body .pl-mi1 {
+        color: var(--color-prettylights-syntax-markup-inserted-text);
+        background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+    }
+    .markdown-body .pl-mc {
+        color: var(--color-prettylights-syntax-markup-changed-text);
+        background-color: var(--color-prettylights-syntax-markup-changed-bg);
+    }
+    .markdown-body .pl-mi2 {
+        color: var(--color-prettylights-syntax-markup-ignored-text);
+        background-color: var(--color-prettylights-syntax-markup-ignored-bg);
+    }
+    .markdown-body .pl-mdr {
+        font-weight: 700;
+        color: var(--color-prettylights-syntax-meta-diff-range);
+    }
+    .markdown-body .pl-ba {
+        color: var(--color-prettylights-syntax-brackethighlighter-angle);
+    }
+    .markdown-body .pl-sg {
+        color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
+    }
+    .markdown-body .pl-corl {
+        text-decoration: underline;
+        color: var(--color-prettylights-syntax-constant-other-reference-link);
+    }
+    .markdown-body g-emoji {
+        display: inline-block;
+        min-width: 1ch;
+        font-family: 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol;
+        font-size: 1em;
+        font-style: normal !important;
+        font-weight: var(--base-text-weight-normal, 400);
+        line-height: 1;
+        vertical-align: -0.075em;
+    }
+    .markdown-body g-emoji img {
+        width: 1em;
+        height: 1em;
+    }
+    .markdown-body .task-list-item {
+        list-style-type: none;
+    }
+    .markdown-body .task-list-item label {
+        font-weight: var(--base-text-weight-normal, 400);
+    }
+    .markdown-body .task-list-item.enabled label {
+        cursor: pointer;
+    }
+    .markdown-body .task-list-item + .task-list-item {
+        margin-top: 4px;
+    }
+    .markdown-body .task-list-item .handle {
+        display: none;
+    }
+    .markdown-body .task-list-item-checkbox {
+        margin: 0 0.2em 0.25em -1.4em;
+        vertical-align: middle;
+    }
+    .markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
+        margin: 0 -1.6em 0.25em 0.2em;
+    }
+    .markdown-body .contains-task-list {
+        position: relative;
+    }
+    .markdown-body .contains-task-list:hover .task-list-item-convert-container,
+    .markdown-body
+        .contains-task-list:focus-within
+        .task-list-item-convert-container {
+        display: block;
+        width: auto;
+        height: 24px;
+        overflow: visible;
+        clip: auto;
+    }
+    .markdown-body ::-webkit-calendar-picker-indicator {
+        filter: invert(50%);
+    }
+
+    .markdown-body {
+        background-color: transparent;
+        font-size: 14px;
+    }
+    .markdown-body p {
+        white-space: pre-wrap;
+    }
+    .markdown-body ol {
+        list-style-type: decimal;
+    }
+    .markdown-body ul {
+        list-style-type: disc;
+    }
+    .markdown-body pre code,
+    .markdown-body pre tt {
+        line-height: 1.65;
+    }
+    .markdown-body .highlight pre,
+    .markdown-body pre {
+        background-color: #fff;
+    }
+    .markdown-body code.hljs {
+        padding: 0;
+    }
+    .markdown-body .code-block-wrapper {
+        position: relative;
+        padding-top: 24px;
+    }
+    .markdown-body .code-block-header {
+        position: absolute;
+        top: 5px;
+        right: 0;
+        width: 100%;
+        padding: 0 1rem;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        color: #b3b3b3;
+    }
+    .markdown-body .code-block-header__copy {
+        cursor: pointer;
+        margin-left: 0.5rem;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+    }
+    .markdown-body .code-block-header__copy:hover {
+        color: #65a665;
+    }
+    .message-reply .whitespace-pre-wrap {
+        white-space: pre-wrap;
+        color: var(--n-text-color);
+    }
+    .highlight pre,
+    pre {
+        background-color: #282c34;
+    }
+`, ao = w`
+  ${S}
+  ${ro}
+
+    .cb-message-row {
+    width: 100%;
+  }
+  .cb-message {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    margin-top: 10px;
+  }
+
+  .cb-message__content {
+    max-width: 80%;
+  }
+
+  .cb-message__content.thinking {
+    max-width: 5rem;
+  }
+
+  .cb-message__content:hover .cb-message__buttons {
+    z-index: 1;
+  }
+
+  .cb-message__content:hover .cb-message__buttons.left {
+    left: -30px;
+  }
+
+  .cb-message__content:hover .cb-message__buttons.right {
+    right: -30px;
+  }
+
+  .cb-message__buttons {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    z-index: -1;
+    transition: all 0.2s ease-in-out;
+  }
+  .cb-message__buttons.left {
+    left: 0px;
+  }
+  .cb-message__buttons.left.show {
+    left: -30px;
+  }
+
+  .cb-message__buttons.right {
+    right: 0px;
+  }
+  .cb-message__buttons.right.show {
+    right: -30px;
+  }
+
+  .cb-message__blank {
+    flex: 1;
+    max-width: 20%;
+  }
+
+  .user-avatar {
+    margin-right: 2px;
+    //color: rgba(0, 208, 117, 0.2);
+    color: rgba(0, 0, 0, 0.1);
+  }
+
+  .assistant-avatar {
+    font-size: 8px;
+    z-index: 20;
+  }
+  .assistant-avatar img {
+    border-radius: 4px;
+  }
+  .assistant-avatar svg {
+    color: rgba(0, 0, 0, 0.1);
+    //color: rgba(0, 208, 117, 0.2);
+  }
+
+  .user-message,
+  .assistant-message,
+  .system-message {
+    //padding: 0.5rem;
+    //max-width: calc(100% - 120px);
+    word-wrap: break-word;
+
+    border-radius: 6px;
+    font-size: 14px;
+    position: relative;
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
+
+  .user-message {
+    //margin-right: 0px;
+    //margin-left: auto;
+    color: rgb(255, 255, 255);
+    //background-color: var(--primary-color);
+    background-color: rgba(0, 208, 117, 1);
+    text-align: left;
+    padding: 6px 12px;
+  }
+
+  .user-message.cb-message__content {
+    max-width: 75%;
+  }
+
+  .assistant-message {
+    margin-right: auto;
+    //margin-left: -12px;
+    margin-left: 0px;
+    margin-top: 2px;
+    color: rgb(34, 34, 34);
+    background-color: rgba(234, 234, 234, 0.3);
+    padding: 4px 12px 6px 12px;
+  }
+
+  .system-message {
+    margin-right: auto;
+    //margin-left: -12px;
+    margin-left: 0px;
+    margin-top: 2px;
+    color: rgba(34, 34, 34, 0.6);
+    background-color: rgba(254, 243, 199, 0.5);
+    padding: 4px 12px 6px 12px;
+  }
+
+  .assistant-message.cb-message__content {
+    max-width: 85%;
+  }
+
+  .cb-bot-message-wrapper {
+    padding: 4px 4px;
+    //display: flex;
+    //background-color: rgba(234, 234, 234, 0.3);
+  }
+
+  sl-avatar.small {
+    --size: 2.5rem;
+  }
+
+  sl-avatar.xsmall {
+    --size: 2rem;
+  }
+
+  .cb-message-text {
+    text-align: left;
+  }
+
+  .cb-message-text p {
+    padding: 0;
+    margin: 0;
+  }
+
+  cb-icon::part(base) {
+    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, "");
+    }
+  });
+  return t.use(gt, { attrs: { target: "_blank", rel: "noopener" } }), t;
+}
+async function Ee(t) {
+  const e = so();
+  return l`${De(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;
+};
+let V = class extends C {
+  constructor() {
+    super(...arguments), this.type = "assistant";
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._removeCopyEvents();
+  }
+  /**
+   * updated lifecycle hook: same to vue mounted or react useEffect
+   * @param changedProperties
+   */
+  updated(t) {
+    super.updated(t), t.has("message") && requestIdleCallback(() => {
+      this._addCopyEvents();
+    });
+  }
+  get _isBot() {
+    return this.message.author === "assistant" || this.message.author === "system";
+  }
+  _removeMessageHandler() {
+    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
+    });
+  }
+  // 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;
+  }
+  // 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 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;
+  }
+  // remove message
+  removeMessage(e) {
+    this.messages = this.messages.filter((o) => o.id !== e);
+  }
+  // clear messages
+  clearMessages() {
+    this.messages = [];
+  }
+}
+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
+    }
+  })
+], 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;
+};
+const Q = ce.noConflict();
+Q.setLevel("info");
+let T = 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(
+      this.messages,
+      (t) => t.id + JSON.stringify(t.data),
+      (t) => l`<cb-message .message="${t}"></cb-message>`
+    )}
+        ${this.renderActions()}
+      </div>
+    `;
+  }
+  renderActions() {
+    return !Array.isArray(this.actions) || this.actions.length <= 0 ? null : l`
+      <div class="cb-actions-list">
+        ${fe(
+      this.actions,
+      (t) => t,
+      (t) => this.renderAction(t)
+    )}
+      </div>
+    `;
+  }
+  renderAction(t) {
+    switch (t.type) {
+      case "calendlyMeeting":
+        return this.renderCalendlyAction(t);
+      case "link":
+        return this.renderLinkAction(t);
+    }
+    return null;
+  }
+  handleCalendlyEvent(t) {
+    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);
+      }
+    }
+  }
+  invokeLinkAction(t = {}) {
+    Q.info("invokeLinkAction:", t), window.open(t.url, "_blank");
+  }
+  invokeCalendlyAction(t = {}) {
+    return Q.info("invokeCalendlyAction:", t), "Calendly" in window && (this.activeCalendlyAction = t.internalId, window.Calendly.initPopupWidget({ url: t.url })), !1;
+  }
+  renderCalendlyAction(t) {
+    if (!("Calendly" in window) && !this.calendlyInjected) {
+      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);
+      }), this.calendlyInjected = !0;
+    }
+    return l`
+      <div class="cb-actions-list">
+        <div class="cb-action ripple" @click="${this.invokeCalendlyAction.bind(this, t)}">
+          <div class="cb-action-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+              <path
+                d="M22.86 17.74C22.77 17.85 22.65 17.91 22.53 17.94L20.66 18.3L21.95 21.14C22.11 21.43 21.97 21.79 21.67 21.93L19.53 22.94C19.44 23 19.36 23 19.27 23C19.05 23 18.84 22.88 18.74 22.66L17.45 19.83L15.96 21.04C15.86 21.12 15.74 21.17 15.59 21.17C15.26 21.17 15 20.9 15 20.57V11.6C15 11.27 15.26 11 15.59 11C15.74 11 15.88 11.05 16 11.13L22.77 16.89C23.04 17.12 23.07 17.5 22.86 17.74M12 15V10H7V15H12M19 3H18V1H16V3H8V1H6V3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H13V19H5V8H19V11.06L21 12.76V5C21 3.9 20.1 3 19 3Z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          ${t.title}
+        </div>
+      </div>
+    `;
+  }
+  renderLinkAction(t) {
+    return l`
+      <div class="cb-actions-list">
+        <div class="cb-action ripple" @click="${this.invokeLinkAction.bind(this, t)}">
+          <div class="cb-action-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+              <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" fill="currentColor" />
+            </svg>
+          </div>
+          ${t.title}
+        </div>
+      </div>
+    `;
+  }
+};
+T.styles = It;
+K([
+  c({ type: Array })
+], T.prototype, "messages", 2);
+K([
+  c({ type: Array })
+], T.prototype, "actions", 2);
+K([
+  qe({ capture: !1, passive: !0 })
+], T.prototype, "invokeLinkAction", 1);
+K([
+  qe({ capture: !1, passive: !0 })
+], T.prototype, "invokeCalendlyAction", 1);
+T = K([
+  x("cb-message-list")
+], T);
+const wo = w`
+    ${S}
+
+    :host {
+        width: 100%;
+        background: rgb(244, 247, 249);
+        position: relative;
+        padding: 6px 5px;
+        box-sizing: border-box;
+        border-radius-bottom-left: 6px;
+        border-radius-bottom-right: 6px;
+    }
+
+    .cb-user-input-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .cb-user-input {
+        flex: 1;
+    }
+
+    .send-button {
+        font-size: 1.5rem;
+    }
+
+    .paperclip-button {
+        font-size: 1.5rem;
+        position: relative;
+    }
+
+    .file-input {
+        visibility: hidden;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+    }
+
+    .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;
+};
+let L = 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 = "";
+  }
+  _inputChangeHandler(t) {
+    const e = t.target;
+    this.value = e.value;
+  }
+  _sendHandler() {
+    this.emit("message:send", {
+      detail: {
+        timestamp: Date.now(),
+        author: "user",
+        type: "text",
+        data: {
+          text: this.value
+        }
+      }
+    }), this.value = "", this.inputElement.blur();
+  }
+  async _sendFileHandler() {
+    const t = await ho();
+    this.emit("message:send:file", {
+      detail: {
+        files: t
+      }
+    });
+  }
+  render() {
+    return l`
+            <div class="cb-user-input-wrapper" part="user-input-wrapper">
+                <sl-textarea
+                    @sl-input=${this._inputChangeHandler}
+                    placeholder=${this.placeholder}
+                    class="cb-user-input"
+                    clearable="true"
+                    value=${this.value}
+                    rows="1"
+                    resize="auto"
+                    filled
+                    ?disabled=${this.disabled}
+                    enterkeyhint="send"
+                    @keydown=${this._keyDownHandler}
+                ></sl-textarea>
+
+                <span class="cb-input-buttons">
+                    ${B(
+      this.enableFileUpload,
+      () => l`
+                            <sl-button
+                                @click=${this._sendFileHandler}
+                                name="paperclip"
+                                label="Attachment"
+                                size="large"
+                                class="paperclip-button"
+                                variant="text"
+                                circle
+                            >
+                                <cb-icon svg="${ko}"></cb-icon>
+                                <!-- select file input -->
+                                <input
+                                    type="file"
+                                    id="file"
+                                    name="file"
+                                    class="file-input"
+                                />
+                            </sl-button>
+                        `,
+      () => l``
+    )}
+                    <sl-button
+                        @click=${this._sendHandler}
+                        name="send"
+                        label="Send"
+                        size="small"
+                        class="send-button"
+                        variant="text"
+                        ?disabled=${this.value.length === 0}
+                        ?loading=${this.loading}
+                        circle
+                    >
+                        <cb-icon svg="${xo}"></cb-icon>
+                    </sl-button>
+                </span>
+            </div>
+        `;
+  }
+  _keyDownHandler(t) {
+    t.key === "Enter" && !t.shiftKey && this._sendHandler();
+  }
+};
+L.styles = wo;
+O([
+  c({ type: String, attribute: "placeholder" })
+], L.prototype, "placeholder", 2);
+O([
+  c({ type: String, attribute: "send-button-label" })
+], L.prototype, "sendButtonLabel", 2);
+O([
+  c({ type: Boolean, attribute: "enable-file-upload" })
+], L.prototype, "enableFileUpload", 2);
+O([
+  c({ type: String })
+], L.prototype, "value", 2);
+O([
+  c({ type: Boolean })
+], L.prototype, "loading", 2);
+O([
+  c({ type: Boolean })
+], L.prototype, "disabled", 2);
+O([
+  c({ type: String })
+], L.prototype, "currentKey", 2);
+O([
+  Ce("sl-textarea")
+], L.prototype, "inputElement", 2);
+L = O([
+  x("cb-user-input")
+], L);
+const $o = w`
+    ${S}
+
+    sl-dialog::part(base) {
+        z-index: 1000;
+    }
+
+    .cb-header {
+        display: flex;
+        padding: 0px 0px 20px 0px;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .cb-header .title {
+        font-weight: bold;
+        font-size: 1.3rem;
+    }
+
+    .cb-dialog__body {
+        flex: 1 1 auto;
+        display: block;
+        padding: var(--body-spacing) 0;
+        overflow: auto;
+    }
+
+    .cb-dialog__footer {
+        display: flex;
+        padding: var(--body-spacing) 0;
+        overflow: auto;
+        justify-content: flex-end;
+        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;
+};
+let q = class extends C {
+  constructor() {
+    super(...arguments), this.open = !1, this.label = "Dialog", this.zindex = 100;
+  }
+  _settingCancelHandler() {
+    this.emit("cancel");
+  }
+  render() {
+    return l` <sl-dialog
+            label="Setting"
+            class="cb-dialog"
+            style="sl-dialog::part(base) { z-index: ${this.zindex}; }"
+            ?open=${this.open}
+            ?no-header=${!0}
+            @sl-hide=${this._settingCancelHandler}
+        >
+            <header class="cb-header">
+                <div class="cb-header__left">
+                    ${this.label ? l`<span class="title">${this.label}</span>` : ""}
+                </div>
+                <sl-button
+                    @click=${this._settingCancelHandler}
+                    name="close"
+                    label="Close"
+                    class="close-button"
+                    variant="text"
+                    circle
+                >
+                    <cb-icon
+                        color="default"
+                        style="font-size: 1em;"
+                        svg="${je}"
+                    ></cb-icon>
+                </sl-button>
+            </header>
+            <div class="cb-dialog__body">
+                <slot></slot>
+            </div>
+            <div part="footer" class="cb-dialog__footer">
+                <slot name="cb-footer"></slot>
+            </div>
+        </sl-dialog>`;
+  }
+};
+q.styles = $o;
+pe([
+  c({ type: Boolean })
+], q.prototype, "open", 2);
+pe([
+  c({ type: String, attribute: "label" })
+], q.prototype, "label", 2);
+pe([
+  c({ 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;
+};
+let re = class extends C {
+  constructor() {
+    super(...arguments), this.open = !1;
+  }
+  render() {
+    return l` <cb-dialog
+            label="Confirm"
+            class="cb-clear-message-dialog"
+            ?open=${this.open}
+            zindex="1000"
+            @cancel=${this._cancelHandler}
+        >
+            Confirm to clear all history messages?
+            <sl-button
+                slot="cb-footer"
+                variant="primary"
+                @click=${this._confirmHandler}
+                >Confirm</sl-button
+            >
+            <sl-button
+                slot="cb-footer"
+                variant="default"
+                @click=${this._cancelHandler}
+                >Close</sl-button
+            >
+        </cb-dialog>`;
+  }
+  _confirmHandler() {
+    this.emit("confirm");
+  }
+  _cancelHandler() {
+    this.emit("cancel");
+  }
+};
+re.styles = w`
+        .cb-clear-message-dialog {
+        }
+
+        sl-dialog::part(base) {
+            z-index: 1000;
+        }
+    `;
+Je([
+  c({ type: Boolean })
+], re.prototype, "open", 2);
+re = Je([
+  x("cb-clear-message-dialog")
+], re);
+const Oo = w`
+    :host {
+        // width: 380px;
+
+        --label-width: 7.6rem;
+    }
+
+    // sl-dialog.cb-dialog {
+    //     --width: 380px;
+    // }
+
+    // sl-dialog::part(base) {
+    //     justify-content: flex-end;
+    // }
+    // sl-dialog::part(panel) {
+    // }
+
+    .form-item {
+        margin-bottom: var(--sl-spacing-medium);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    .form-item .label {
+        width: var(--label-width);
+    }
+
+    .form-item sl-input {
+        flex: 1;
+    }
+
+    .setting-input {
+        min-width: 15rem;
+    }
+
+    .setting-input::part(form-control-input) {
+        min-width: 20rem;
+    }
+
+    .setting-input + .setting-input {
+        margin-top: var(--sl-spacing-medium);
+    }
+
+    .setting-input::part(form-control) {
+        display: grid;
+        grid: auto / var(--label-width) 1fr;
+        gap: var(--sl-spacing-3x-small) var(--gap-width);
+        align-items: center;
+    }
+
+    .setting-input::part(form-control-label) {
+        text-align: right;
+    }
+
+    .setting-input::part(form-control-help-text) {
+        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;
+};
+let H = class extends C {
+  constructor() {
+    super(...arguments), this.open = !1, this.clearMessageDialogOpen = !1, this.customRequest = !1;
+  }
+  render() {
+    return this.customRequest = this.setting.customRequest, l`
+            <cb-dialog
+                label="Setting"
+                class="cb-dialog"
+                ?open=${this.open}
+                ?no-header=${!0}
+                @cancel=${this._settingCancelHandler}
+            >
+                <form>
+                    <div class="form-item">
+                        <label class="label">Clear Cache</label>
+                        <sl-button
+                            variant="danger"
+                            size="small"
+                            @click=${() => {
+      this.clearMessageDialogOpen = !0;
+    }}
+                        >
+                            Clear
+                        </sl-button>
+                    </div>
+                    <!-- <div class="form-item">
+                        <label class="label"> Custom Request </label>
+
+                        <sl-switch
+                            class="item"
+                            label="Custom Request"
+                            name="customRequest"
+                            ?checked="${this.customRequest}"
+                            @sl-change=${this._checkChangeHandler}
+                        >
+                            Enable it for your own backend.
+                        </sl-switch>
+                    </div> -->
+                    ${B(
+      this.customRequest,
+      () => null,
+      () => this.renderInternalServices()
+    )}
+
+                    <div class="form-item">
+                        <label class="label">Streaming</label>
+                        <sl-switch
+                            class="item"
+                            label="Stream"
+                            name="stream"
+                            ?checked="${this.setting.stream}"
+                            @sl-change=${this._checkChangeHandler}
+                        ></sl-switch>
+                    </div>
+                    <div class="form-item">
+                        <label class="label">Use Context</label>
+                        <sl-switch
+                            class="item"
+                            label="Use Context"
+                            name="useContext"
+                            ?checked="${this.setting.useContext}"
+                            @sl-change=${this._checkChangeHandler}
+                        ></sl-switch>
+                        <!-- <sl-input
+                            size="small"
+                            type="number"
+                            name="maxContextLength"
+                            value=${this.setting.maxContextLength}
+                            placeholder="Number of consecutive sessions"
+                        ></sl-input> -->
+                    </div>
+                </form>
+
+                <sl-button
+                    slot="cb-footer"
+                    variant="primary"
+                    @click=${this._settingConfirmHandler}
+                >
+                    Confirm
+                </sl-button>
+                <sl-button
+                    slot="cb-footer"
+                    variant="default"
+                    @click=${this._settingCancelHandler}
+                    >Cancel</sl-button
+                >
+            </cb-dialog>
+            <cb-clear-message-dialog
+                .open=${this.clearMessageDialogOpen}
+                @confirm=${this._clearCacheHandler}
+                @cancel=${() => {
+      this.clearMessageDialogOpen = !1;
+    }}
+            ></cb-clear-message-dialog>
+        `;
+  }
+  renderInternalServices() {
+    return l`
+            <div class="form-item">
+                <label class="label">Service</label>
+                <sl-radio-group name="openai" value="openai" size="small">
+                    <sl-radio-button value="openai">OpenAI</sl-radio-button>
+                </sl-radio-group>
+            </div>
+
+            <div class="form-item">
+                <label class="label">API Key</label>
+                <sl-input
+                    autofocus
+                    size="small"
+                    name="openai.apiKey"
+                    value=${this.setting.openai.apiKey}
+                    placeholder="Please input api key for openai"
+                    @sl-change=${this._inputChangeHandler}
+                ></sl-input>
+            </div>
+            <div class="form-item">
+                <label class="label">API Base</label>
+                <sl-input
+                    autofocus
+                    size="small"
+                    name="openai.apiBase"
+                    value=${this.setting.openai.apiBase}
+                    placeholder="Please input api base for openai"
+                    @sl-change=${this._inputChangeHandler}
+                ></sl-input>
+            </div>
+        `;
+  }
+  // clear message cache handler
+  _clearCacheHandler() {
+    this.emit("message:clear"), this.clearMessageDialogOpen = !1;
+  }
+  // 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;
+  }
+  // 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);
+  }
+  // emit setting confirm event
+  _settingConfirmHandler() {
+    this.emit("setting:confirm", {
+      detail: {
+        setting: this.setting
+      }
+    });
+  }
+  // emit setting cancel event
+  _settingCancelHandler() {
+    this.emit("setting:hide");
+  }
+  updated(t) {
+    var e;
+    super.updated(t), (e = this.dialog) == null || e.addEventListener("sl-request-close", (o) => {
+      o.detail.source === "overlay" && o.preventDefault();
+    });
+  }
+};
+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([
+  x("cb-setting")
+], H);
+const Po = w`
+    ${S}
+    :host {
+        --primary-color: var(--sl-color-primary-600);
+
+        --anchor-width: 50px;
+    }
+
+    .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%;
+
+        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;
+
+        z-index: 100;
+    }
+
+    .cb-anchor:hover {
+        transform: scale(1.1);
+        box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
+    }
+
+    .anchor-button {
+        font-size: 1.4em;
+    }
+
+    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;
+};
+let ae = class extends C {
+  constructor() {
+    super(...arguments), this.open = !1;
+  }
+  // handler click
+  _clickHandler() {
+    const t = !this.open;
+    this.emit("chatbot:toggle", {
+      detail: {
+        open: t
+      }
+    }), this.open = t;
+  }
+  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(
+      this.open,
+      () => l`<cb-icon
+                                color="white"
+                                svg="${je}"
+                            ></cb-icon>`,
+      () => l`<cb-icon
+                                color="white"
+                                svg="${zo}"
+                            ></cb-icon>`
+    )}
+                </sl-button>
+            </div>
+        `;
+  }
+};
+ae.styles = Po;
+Ye([
+  c({ type: Boolean })
+], ae.prototype, "open", 2);
+ae = Ye([
+  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 Te = {
+  error: {
+    variant: "danger",
+    icon: xe
+  },
+  danger: {
+    variant: "danger",
+    icon: xe
+  },
+  warning: {
+    variant: "warning",
+    icon: Ge
+  },
+  success: {
+    variant: "success",
+    icon: Qe
+  },
+  info: {
+    variant: "primary",
+    icon: Xe
+  }
+};
+let se = class extends C {
+  constructor() {
+    super(...arguments), this.status = "info";
+  }
+  render() {
+    const { variant: t, icon: e } = Te[this.status] || Te.info;
+    return l`<cb-icon svg=${e} color="${t}"></cb-icon>`;
+  }
+};
+se.styles = Ne;
+et([
+  c({ type: String })
+], se.prototype, "status", 2);
+se = et([
+  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;
+};
+let ke = class extends C {
+  render() {
+    return l` <sl-alert variant="danger" open>
+            <cb-status-icon status="error" slot="icon"></cb-status-icon>
+            Please config openai api key in the settings.
+            <span
+                @click="${this._handleConfig}"
+                class="color-primary text-button"
+                >Config Now</span
+            >
+        </sl-alert>`;
+  }
+  _handleConfig() {
+    this.emit("setting:show");
+  }
+};
+ke.styles = Io;
+ke = Do([
+  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", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "request", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "options", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this.name = "HTTPError", this.response = e, this.request = o, this.options = a;
+  }
+}
+class tt extends Error {
+  constructor(e) {
+    super("Request timed out"), Object.defineProperty(this, "request", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this.name = "TimeoutError", this.request = e;
+  }
+}
+const X = (t) => t !== null && typeof t == "object", Y = (...t) => {
+  for (const e of t)
+    if ((!X(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);
+  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);
+    }
+  return e;
+}, Fo = (() => {
+  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", {
+    body: new globalThis.ReadableStream(),
+    method: "POST",
+    // @ts-expect-error - Types are outdated.
+    get duplex() {
+      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 = {
+  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 = {
+  limit: 2,
+  methods: Jo,
+  statusCodes: Yo,
+  afterStatusCodes: st,
+  maxRetryAfter: Number.POSITIVE_INFINITY,
+  backoffLimit: Number.POSITIVE_INFINITY
+}, Go = (t = {}) => {
+  if (typeof t == "number")
+    return {
+      ...Re,
+      limit: t
+    };
+  if (t.methods && !Array.isArray(t.methods))
+    throw new Error("retry.methods must be an array");
+  if (t.statusCodes && !Array.isArray(t.statusCodes))
+    throw new Error("retry.statusCodes must be an array");
+  return {
+    ...Re,
+    ...t,
+    afterStatusCodes: st
+  };
+};
+async function Qo(t, e, o) {
+  return new Promise((a, r) => {
+    const s = setTimeout(() => {
+      e && e.abort(), r(new tt(t));
+    }, o.timeout);
+    o.fetch(t).then(a).catch(r).then(() => {
+      clearTimeout(s);
+    });
+  });
+}
+const Xo = !!globalThis.DOMException;
+function Be(t) {
+  if (Xo)
+    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) => {
+    if (e) {
+      if (e.aborted) {
+        a(Be(e));
+        return;
+      }
+      e.addEventListener("abort", r, { once: !0 });
+    }
+    function r() {
+      a(Be(e)), clearTimeout(s);
+    }
+    const s = setTimeout(() => {
+      e == null || e.removeEventListener("abort", r), 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}`);
+      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);
+      }
+      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 (a._options.onDownloadProgress) {
+        if (typeof a._options.onDownloadProgress != "function")
+          throw new TypeError("The `onDownloadProgress` option must be a function");
+        if (!Uo)
+          throw new Error("Streams are not supported in your environment. `ReadableStream` is missing.");
+        return a._stream(i.clone(), a._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 "";
+          if (o.parseJson)
+            return o.parseJson(await m.text());
+        }
+        return m[i]();
+      };
+    return n;
+  }
+  // eslint-disable-next-line complexity
+  constructor(e, o = {}) {
+    if (Object.defineProperty(this, "request", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "abortController", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "_retryCount", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 0
+    }), Object.defineProperty(this, "_input", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "_options", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this._input = e, this._options = {
+      // 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),
+      hooks: Se({
+        beforeRequest: [],
+        beforeRetry: [],
+        beforeError: [],
+        afterResponse: []
+      }, o.hooks),
+      method: Ko(o.method ?? this._input.method),
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      prefixUrl: String(o.prefixUrl || ""),
+      retry: Go(o.retry),
+      throwHttpErrors: o.throwHttpErrors !== !1,
+      timeout: typeof o.timeout > "u" ? 1e4 : o.timeout,
+      fetch: o.fetch ?? globalThis.fetch.bind(globalThis)
+    }, typeof this._input != "string" && !(this._input instanceof URL || this._input instanceof globalThis.Request))
+      throw new TypeError("`input` must be a string, URL, or Request");
+    if (this._options.prefixUrl && typeof this._input == "string") {
+      if (this._input.startsWith("/"))
+        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 (this.abortController = new globalThis.AbortController(), this._options.signal) {
+        const a = this._options.signal;
+        this._options.signal.addEventListener("abort", () => {
+          this.abortController.abort(a.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);
+    }
+    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._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;
+        }
+        if (e.response.status === 413)
+          return 0;
+      }
+      const o = 0.3;
+      return Math.min(this._options.retry.backoffLimit, o * 2 ** (this._retryCount - 1) * 1e3);
+    }
+    return 0;
+  }
+  _decorateResponse(e) {
+    return this._options.parseJson && (e.json = async () => this._options.parseJson(await e.text())), e;
+  }
+  async _retry(e) {
+    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({
+            request: this.request,
+            options: this._options,
+            error: o,
+            retryCount: this._retryCount
+          }) === at)
+            return;
+        return this._retry(e);
+      }
+      throw o;
+    }
+  }
+  async _fetch() {
+    for (const e of this._options.hooks.beforeRequest) {
+      const o = await e(this.request, this._options);
+      if (o instanceof Request) {
+        this.request = o;
+        break;
+      }
+      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);
+  }
+  /* 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, {
+      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) {
+            s.close();
+            return;
+          }
+          if (o) {
+            r += g.byteLength;
+            const m = a === 0 ? 0 : r / a;
+            o({ percent: m, transferredBytes: r, totalBytes: a }, g);
+          }
+          s.enqueue(g), await i();
+        }
+        await i();
+      }
+    }), {
+      status: e.status,
+      statusText: e.statusText,
+      headers: e.headers
+    });
+  }
+}
+/*! 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({
+  hooks: {
+    beforeRequest: [
+      () => {
+      }
+    ]
+  }
+});
+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));
+  };
+  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 new ReadableStream({
+      start(g) {
+        s(
+          g,
+          i
+        );
+      }
+    });
+  }).then(
+    (n) => new Response(n, {
+      headers: { "Content-Type": "text/html" }
+    }).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) {
+  const o = new FormData();
+  for (let r = 0; r < e.length; r++)
+    o.append("files", e[r]);
+  const a = await nt.post(t, {
+    body: o
+  });
+  try {
+    return await a.json();
+  } catch (r) {
+    return {
+      code: 1,
+      url: "",
+      message: r.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;
+};
+const ee = ce.noConflict();
+ee.setLevel("info");
+let v = 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;
+  }
+  /**
+   * decodeStreamData
+   */
+  decodeStreamData(t) {
+    return new TextDecoder().decode(t);
+  }
+  addMessage() {
+    const t = {
+      author: "assistant",
+      type: "text",
+      isThinking: !0,
+      data: {}
+    };
+    return b.addMessage(t), t;
+  }
+  render() {
+    return 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-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", () => {
+      this.showSetting = !0;
+    }), addEventListener("message:send", this._addMessageHandler.bind(this)), addEventListener("message:remove", this._deleteMessageHandler.bind(this)), addEventListener("setting:confirm", this._settingConfirmHandler.bind(this)), addEventListener("setting:hide", () => {
+      this.showSetting = !1;
+    }), addEventListener("chatbot:toggle", (t) => {
+      const e = t.detail;
+      this.open = e.open;
+    }), addEventListener("message:clear", () => {
+      b.clearMessages();
+    }), addEventListener("message:send:file", this._sendFileHandler.bind(this)), addEventListener("setting:show", () => {
+      this.showSetting = !0;
+    });
+  }
+  // This is called when component is loaded, with all the settings (props) values
+  // 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(() => {
+      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);
+  }
+  setLoading(t) {
+    this.loading = t;
+  }
+  clearConversation() {
+    b.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,
+      options: {
+        stream: b.setting.stream,
+        model: b.setting.openai.model
+        // temperature: 0.9,
+      },
+      onMessage: (s, n) => {
+        var i;
+        if (s) {
+          console.error(s);
+          return;
+        }
+        n && ((i = n.choices[0].delta) != null && i.content) && requestIdleCallback(() => {
+          o += n.choices[0].delta.content, b.updateMessage(t, o);
+        });
+      }
+    });
+    !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);
+      }
+    this.setLoading(!1);
+  }
+  _addMessageHandler(t) {
+    const e = t.detail;
+    b.sendMessage(e);
+  }
+  _deleteMessageHandler(t) {
+    const e = t.detail;
+    b.removeMessage(e.id);
+  }
+  async _sendFileHandler(t) {
+    const e = t.detail, a = {
+      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,
+          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));
+    }
+    this.emit("chatbot:file:send", {
+      detail: {
+        files: e.files,
+        message: a
+      }
+    });
+  }
+  // setting confirm handler
+  _settingConfirmHandler(t) {
+    const e = t.detail;
+    b.setSetting(e.setting), this.showSetting = !1, this._checkAuth();
+  }
+  // scroll to bottom
+  _scrollToBottom(t = !1) {
+    requestIdleCallback(() => {
+      var e;
+      (e = this._messageList) == null || e.scrollTo({
+        top: this._messageList.scrollHeight,
+        behavior: t ? "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);
+export {
+  v as default
+};