advanced-chat-kai 1.1.2 → 1.1.4

package/README.md

@@ -3,32 +3,33 @@
 <img alt="light" src="https://github.com/user-attachments/assets/c7efa2e4-c7f5-4a83-968c-cbc0b0fea91f" />
 <img alt="dark" src="https://github.com/user-attachments/assets/b547b8b6-2154-4334-8f5d-16fb2c8e264c"" />
 
-![npm version](https://img.shields.io/npm/v/advanced-chat-kai) ![npm downloads](https://img.shields.io/npm/dm/advanced-chat-kai) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/advanced-chat-kai) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) [![codecov](https://codecov.io/gh/spider-hand/advanced-chat-kai/graph/badge.svg?token=ETHZJ2CTPF)](https://codecov.io/gh/spider-hand/advanced-chat-kai)
+![npm version](https://img.shields.io/npm/v/advanced-chat-kai) ![npm downloads](https://img.shields.io/npm/dm/advanced-chat-kai) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/advanced-chat-kai) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) [![codecov](https://codecov.io/gh/spider-hand/advanced-chat-kai/graph/badge.svg?token=ETHZJ2CTPF)](https://codecov.io/gh/spider-hand/advanced-chat-kai) ![Lit](https://img.shields.io/badge/lit-%23324FFF.svg?&logo=lit&logoColor=white)
 
-A highly customizable Web Component for building chat interfaces
+A highly customizable chat Web Component that integrates easily with shadcn - works with any framework (React, Vue, Angular, Svelte, etc.)
 
-> "Kai" (改) means "improved" in Japanese - this is a modern, lightweight, and framework-agnostic chat component built for flexibility and ease of integration.
+> "Kai" (改) means "improved" in Japanese - inspired by vue-advanced-chat, this project started with the goal of building an improved alternative.
 
 ## Features
 
-- Framework-agnostic - Can be used with any frontend framework or none at all
-- Backend-agnostic - No assumptions about your backend; integrate freely
-- Lightweight - Built with Lit for minimal bundle size and high performance
-- Logic-free - You own the data, state and behavior; components only handle UI
-- Theming support - Built-in light and dark themes
-- Customizable style - Easily style components with CSS variables
+- **Framework-agnostic** - Can be used with any frontend framework
+- **Backend-agnostic** - No assumptions about your backend
+- **Lightweight** - Built with Lit for minimal bundle size and high performance
+- **Logic-free** - Component handles only UI
+- **Theming** - Light and dark themes with CSS variables, which is designed to be easily used with shadcn based UI
 
 ### Comparison
 
-|                     | Bundle size (minified) | Bundle size (minified + gzipped) | Download time (slow 3G) | Download time (4G) |
-| ------------------- | ---------------------- | -------------------------------- | ----------------------- | ------------------ |
-| `advanced-chat-kai` | 112.9kB                | 23.2kB                           | 465ms                   | 27ms               |
-| `vue-advanced-chat` | 493.4kB                | 149.8kB                          | 3s                      | 171ms              |
-|                     | 📦 **77% smaller**     | 📦 **84% smaller**               | ⚡️ **85% faster**       | ⚡️ **84% faster**  |
+|                   | Bundle size (minified) | Bundle size (minified + gzipped) | Download time (slow 3G) | Download time (4G) |
+| ----------------- | ---------------------- | -------------------------------- | ----------------------- | ------------------ |
+| advanced-chat-kai | 112.9kB                | 23.1kB                           | 465ms                   | 27ms               |
+| vue-advanced-chat | 493.4kB                | 149.8kB                          | 3s                      | 171ms              |
+|                   | 📦 **77% smaller**     | 📦 **84% smaller**               | ⚡️ **85% faster**       | ⚡️ **84% faster**  |
 
 ## Demo
 
-Try it out [here](https://advanced-chat-kai-demo.pages.dev/).
+👉 [Storybook](https://main--6810a95e2c6e78e3e3be0658.chromatic.com)
+
+👉 [Live Chat Example](https://advanced-chat-kai-demo.pages.dev)
 
 ## Table of contents
 
@@ -382,6 +383,18 @@ CSS variable names are based on the [shadcn](https://ui.shadcn.com/docs/theming)
 | `--chat-spacing-6`   | `1.5rem`   |
 | `--chat-spacing-8`   | `2rem`     |
 
+### Shadow Variables
+
+| Variable            | Default                                                               |
+| ------------------- | --------------------------------------------------------------------- |
+| `--chat-shadow-2xs` | `0 1px rgb(0 0 0 / 0.05)`                                             |
+| `--chat-shadow-xs`  | `0 1px 2px 0 rgb(0 0 0 / 0.05)`                                       |
+| `--chat-shadow-sm`  | `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`       |
+| `--chat-shadow-md`  | `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`    |
+| `--chat-shadow-lg`  | `0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`  |
+| `--chat-shadow-xl`  | `0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)` |
+| `--chat-shadow-2xl` | `0 25px 50px -12px rgb(0 0 0 / 0.25)`                                 |
+
 ### Custom Variables
 
 | Variable                         | Description                              |

package/dist/advanced-chat-kai.es.js

@@ -45,7 +45,7 @@ const _e = (i) => new Jt(typeof i == "string" ? i : i + "", void 0, wt), u = (i,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: ye, defineProperty: xe, getOwnPropertyDescriptor: we, getOwnPropertyNames: $e, getOwnPropertySymbols: ke, getPrototypeOf: Ae } = Object, dt = globalThis, Ht = dt.trustedTypes, Me = Ht ? Ht.emptyScript : "", Ee = dt.reactiveElementPolyfillSupport, X = (i, t) => i, lt = { toAttribute(i, t) {
+const { is: ye, defineProperty: xe, getOwnPropertyDescriptor: we, getOwnPropertyNames: $e, getOwnPropertySymbols: ke, getPrototypeOf: Ae } = Object, dt = globalThis, Ht = dt.trustedTypes, Me = Ht ? Ht.emptyScript : "", Ee = dt.reactiveElementPolyfillSupport, X = (i, t) => i, ht = { toAttribute(i, t) {
   switch (t) {
     case Boolean:
       i = i ? Me : null;
@@ -73,7 +73,7 @@ const { is: ye, defineProperty: xe, getOwnPropertyDescriptor: we, getOwnProperty
       }
   }
   return s;
-} }, $t = (i, t) => !ye(i, t), Dt = { attribute: !0, type: String, converter: lt, reflect: !1, useDefault: !1, hasChanged: $t };
+} }, $t = (i, t) => !ye(i, t), Dt = { attribute: !0, type: String, converter: ht, reflect: !1, useDefault: !1, hasChanged: $t };
 Symbol.metadata ??= Symbol("metadata"), dt.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let N = class extends HTMLElement {
   static addInitializer(t) {
@@ -95,8 +95,8 @@ let N = class extends HTMLElement {
       this[s] = r;
     } };
     return { get: e, set(r) {
-      const h = e?.call(this);
-      a?.call(this, r), this.requestUpdate(t, h, o);
+      const l = e?.call(this);
+      a?.call(this, r), this.requestUpdate(t, l, o);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
@@ -172,17 +172,17 @@ let N = class extends HTMLElement {
   _$ET(t, s) {
     const o = this.constructor.elementProperties.get(t), e = this.constructor._$Eu(t, o);
     if (e !== void 0 && o.reflect === !0) {
-      const a = (o.converter?.toAttribute !== void 0 ? o.converter : lt).toAttribute(s, o.type);
+      const a = (o.converter?.toAttribute !== void 0 ? o.converter : ht).toAttribute(s, o.type);
       this._$Em = t, a == null ? this.removeAttribute(e) : this.setAttribute(e, a), this._$Em = null;
     }
   }
   _$AK(t, s) {
     const o = this.constructor, e = o._$Eh.get(t);
     if (e !== void 0 && this._$Em !== e) {
-      const a = o.getPropertyOptions(e), r = typeof a.converter == "function" ? { fromAttribute: a.converter } : a.converter?.fromAttribute !== void 0 ? a.converter : lt;
+      const a = o.getPropertyOptions(e), r = typeof a.converter == "function" ? { fromAttribute: a.converter } : a.converter?.fromAttribute !== void 0 ? a.converter : ht;
       this._$Em = e;
-      const h = r.fromAttribute(s, a.type);
-      this[e] = h ?? this._$Ej?.get(e) ?? h, this._$Em = null;
+      const l = r.fromAttribute(s, a.type);
+      this[e] = l ?? this._$Ej?.get(e) ?? l, this._$Em = null;
     }
   }
   requestUpdate(t, s, o, e = !1, a) {
@@ -218,8 +218,8 @@ let N = class extends HTMLElement {
       }
       const o = this.constructor.elementProperties;
       if (o.size > 0) for (const [e, a] of o) {
-        const { wrapped: r } = a, h = this[e];
-        r !== !0 || this._$AL.has(e) || h === void 0 || this.C(e, void 0, a, h);
+        const { wrapped: r } = a, l = this[e];
+        r !== !0 || this._$AL.has(e) || l === void 0 || this.C(e, void 0, a, l);
       }
     }
     let t = !1;
@@ -262,9 +262,9 @@ N.elementStyles = [], N.shadowRootOptions = { mode: "open" }, N[X("elementProper
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const kt = globalThis, Ft = (i) => i, ht = kt.trustedTypes, Vt = ht ? ht.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, Qt = "$lit$", R = `lit$${Math.random().toFixed(9).slice(2)}$`, te = "?" + R, Ce = `<${te}>`, U = document, Z = () => U.createComment(""), J = (i) => i === null || typeof i != "object" && typeof i != "function", At = Array.isArray, je = (i) => At(i) || typeof i?.[Symbol.iterator] == "function", _t = `[ 	
+const kt = globalThis, Ft = (i) => i, lt = kt.trustedTypes, Vt = lt ? lt.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, Qt = "$lit$", R = `lit$${Math.random().toFixed(9).slice(2)}$`, te = "?" + R, Ce = `<${te}>`, U = document, Z = () => U.createComment(""), J = (i) => i === null || typeof i != "object" && typeof i != "function", At = Array.isArray, je = (i) => At(i) || typeof i?.[Symbol.iterator] == "function", _t = `[ 	
 \f\r]`, G = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, qt = /-->/g, Wt = />/g, O = RegExp(`>|${_t}(?:([^\\s"'>=/]+)(${_t}*=${_t}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Kt = /'/g, Gt = /"/g, ee = /^(?:script|style|textarea|title)$/i, Se = (i) => (t, ...s) => ({ _$litType$: i, strings: t, values: s }), c = Se(1), C = Symbol.for("lit-noChange"), l = Symbol.for("lit-nothing"), Xt = /* @__PURE__ */ new WeakMap(), I = U.createTreeWalker(U, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Kt = /'/g, Gt = /"/g, ee = /^(?:script|style|textarea|title)$/i, Se = (i) => (t, ...s) => ({ _$litType$: i, strings: t, values: s }), c = Se(1), C = Symbol.for("lit-noChange"), h = Symbol.for("lit-nothing"), Xt = /* @__PURE__ */ new WeakMap(), I = U.createTreeWalker(U, 129);
 function se(i, t) {
   if (!At(i) || !i.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Vt !== void 0 ? Vt.createHTML(t) : t;
@@ -272,12 +272,12 @@ function se(i, t) {
 const Te = (i, t) => {
   const s = i.length - 1, o = [];
   let e, a = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", r = G;
-  for (let h = 0; h < s; h++) {
-    const d = i[h];
+  for (let l = 0; l < s; l++) {
+    const d = i[l];
     let y, $, f = -1, E = 0;
     for (; E < d.length && (r.lastIndex = E, $ = r.exec(d), $ !== null); ) E = r.lastIndex, r === G ? $[1] === "!--" ? r = qt : $[1] !== void 0 ? r = Wt : $[2] !== void 0 ? (ee.test($[2]) && (e = RegExp("</" + $[2], "g")), r = O) : $[3] !== void 0 && (r = O) : r === O ? $[0] === ">" ? (r = e ?? G, f = -1) : $[1] === void 0 ? f = -2 : (f = r.lastIndex - $[2].length, y = $[1], r = $[3] === void 0 ? O : $[3] === '"' ? Gt : Kt) : r === Gt || r === Kt ? r = O : r === qt || r === Wt ? r = G : (r = O, e = void 0);
-    const L = r === O && i[h + 1].startsWith("/>") ? " " : "";
-    a += r === G ? d + Ce : f >= 0 ? (o.push(y), d.slice(0, f) + Qt + d.slice(f) + R + L) : d + R + (f === -2 ? h : L);
+    const L = r === O && i[l + 1].startsWith("/>") ? " " : "";
+    a += r === G ? d + Ce : f >= 0 ? (o.push(y), d.slice(0, f) + Qt + d.slice(f) + R + L) : d + R + (f === -2 ? l : L);
   }
   return [se(i, a + (i[s] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), o];
 };
@@ -286,12 +286,12 @@ class Q {
     let e;
     this.parts = [];
     let a = 0, r = 0;
-    const h = t.length - 1, d = this.parts, [y, $] = Te(t, s);
+    const l = t.length - 1, d = this.parts, [y, $] = Te(t, s);
     if (this.el = Q.createElement(y, o), I.currentNode = this.el.content, s === 2 || s === 3) {
       const f = this.el.content.firstChild;
       f.replaceWith(...f.childNodes);
     }
-    for (; (e = I.nextNode()) !== null && d.length < h; ) {
+    for (; (e = I.nextNode()) !== null && d.length < l; ) {
       if (e.nodeType === 1) {
         if (e.hasAttributes()) for (const f of e.getAttributeNames()) if (f.endsWith(Qt)) {
           const E = $[r++], L = e.getAttribute(f).split(R), nt = /([.?@])?(.*)/.exec(E);
@@ -300,7 +300,7 @@ class Q {
         if (ee.test(e.tagName)) {
           const f = e.textContent.split(R), E = f.length - 1;
           if (E > 0) {
-            e.textContent = ht ? ht.emptyScript : "";
+            e.textContent = lt ? lt.emptyScript : "";
             for (let L = 0; L < E; L++) e.append(f[L], Z()), I.nextNode(), d.push({ type: 2, index: ++a });
             e.append(f[E], Z());
           }
@@ -337,11 +337,11 @@ class Le {
   u(t) {
     const { el: { content: s }, parts: o } = this._$AD, e = (t?.creationScope ?? U).importNode(s, !0);
     I.currentNode = e;
-    let a = I.nextNode(), r = 0, h = 0, d = o[0];
+    let a = I.nextNode(), r = 0, l = 0, d = o[0];
     for (; d !== void 0; ) {
       if (r === d.index) {
         let y;
-        d.type === 2 ? y = new tt(a, a.nextSibling, this, t) : d.type === 1 ? y = new d.ctor(a, d.name, d.strings, this, t) : d.type === 6 && (y = new Oe(a, this, t)), this._$AV.push(y), d = o[++h];
+        d.type === 2 ? y = new tt(a, a.nextSibling, this, t) : d.type === 1 ? y = new d.ctor(a, d.name, d.strings, this, t) : d.type === 6 && (y = new Oe(a, this, t)), this._$AV.push(y), d = o[++l];
       }
       r !== d?.index && (a = I.nextNode(), r++);
     }
@@ -357,7 +357,7 @@ class tt {
     return this._$AM?._$AU ?? this._$Cv;
   }
   constructor(t, s, o, e) {
-    this.type = 2, this._$AH = l, this._$AN = void 0, this._$AA = t, this._$AB = s, this._$AM = o, this.options = e, this._$Cv = e?.isConnected ?? !0;
+    this.type = 2, this._$AH = h, this._$AN = void 0, this._$AA = t, this._$AB = s, this._$AM = o, this.options = e, this._$Cv = e?.isConnected ?? !0;
   }
   get parentNode() {
     let t = this._$AA.parentNode;
@@ -371,7 +371,7 @@ class tt {
     return this._$AB;
   }
   _$AI(t, s = this) {
-    t = H(this, t, s), J(t) ? t === l || t == null || t === "" ? (this._$AH !== l && this._$AR(), this._$AH = l) : t !== this._$AH && t !== C && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : je(t) ? this.k(t) : this._(t);
+    t = H(this, t, s), J(t) ? t === h || t == null || t === "" ? (this._$AH !== h && this._$AR(), this._$AH = h) : t !== this._$AH && t !== C && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : je(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -380,7 +380,7 @@ class tt {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== l && J(this._$AH) ? this._$AA.nextSibling.data = t : this.T(U.createTextNode(t)), this._$AH = t;
+    this._$AH !== h && J(this._$AH) ? this._$AA.nextSibling.data = t : this.T(U.createTextNode(t)), this._$AH = t;
   }
   $(t) {
     const { values: s, _$litType$: o } = t, e = typeof o == "number" ? this._$AC(t) : (o.el === void 0 && (o.el = Q.createElement(se(o.h, o.h[0]), this.options)), o);
@@ -419,21 +419,21 @@ class pt {
     return this._$AM._$AU;
   }
   constructor(t, s, o, e, a) {
-    this.type = 1, this._$AH = l, this._$AN = void 0, this.element = t, this.name = s, this._$AM = e, this.options = a, o.length > 2 || o[0] !== "" || o[1] !== "" ? (this._$AH = Array(o.length - 1).fill(new String()), this.strings = o) : this._$AH = l;
+    this.type = 1, this._$AH = h, this._$AN = void 0, this.element = t, this.name = s, this._$AM = e, this.options = a, o.length > 2 || o[0] !== "" || o[1] !== "" ? (this._$AH = Array(o.length - 1).fill(new String()), this.strings = o) : this._$AH = h;
   }
   _$AI(t, s = this, o, e) {
     const a = this.strings;
     let r = !1;
     if (a === void 0) t = H(this, t, s, 0), r = !J(t) || t !== this._$AH && t !== C, r && (this._$AH = t);
     else {
-      const h = t;
+      const l = t;
       let d, y;
-      for (t = a[0], d = 0; d < a.length - 1; d++) y = H(this, h[o + d], s, d), y === C && (y = this._$AH[d]), r ||= !J(y) || y !== this._$AH[d], y === l ? t = l : t !== l && (t += (y ?? "") + a[d + 1]), this._$AH[d] = y;
+      for (t = a[0], d = 0; d < a.length - 1; d++) y = H(this, l[o + d], s, d), y === C && (y = this._$AH[d]), r ||= !J(y) || y !== this._$AH[d], y === h ? t = h : t !== h && (t += (y ?? "") + a[d + 1]), this._$AH[d] = y;
     }
     r && !e && this.j(t);
   }
   j(t) {
-    t === l ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
+    t === h ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
 class Re extends pt {
@@ -441,7 +441,7 @@ class Re extends pt {
     super(...arguments), this.type = 3;
   }
   j(t) {
-    this.element[this.name] = t === l ? void 0 : t;
+    this.element[this.name] = t === h ? void 0 : t;
   }
 }
 class Pe extends pt {
@@ -449,7 +449,7 @@ class Pe extends pt {
     super(...arguments), this.type = 4;
   }
   j(t) {
-    this.element.toggleAttribute(this.name, !!t && t !== l);
+    this.element.toggleAttribute(this.name, !!t && t !== h);
   }
 }
 class Be extends pt {
@@ -457,8 +457,8 @@ class Be extends pt {
     super(t, s, o, e, a), this.type = 5;
   }
   _$AI(t, s = this) {
-    if ((t = H(this, t, s, 0) ?? l) === C) return;
-    const o = this._$AH, e = t === l && o !== l || t.capture !== o.capture || t.once !== o.once || t.passive !== o.passive, a = t !== l && (o === l || e);
+    if ((t = H(this, t, s, 0) ?? h) === C) return;
+    const o = this._$AH, e = t === h && o !== h || t.capture !== o.capture || t.once !== o.once || t.passive !== o.passive, a = t !== h && (o === h || e);
     e && this.element.removeEventListener(this.name, this, o), a && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
   handleEvent(t) {
@@ -524,23 +524,23 @@ ze?.({ LitElement: m });
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Ne = { attribute: !0, type: String, converter: lt, reflect: !1, hasChanged: $t }, He = (i = Ne, t, s) => {
+const Ne = { attribute: !0, type: String, converter: ht, reflect: !1, hasChanged: $t }, He = (i = Ne, t, s) => {
   const { kind: o, metadata: e } = s;
   let a = globalThis.litPropertyMetadata.get(e);
   if (a === void 0 && globalThis.litPropertyMetadata.set(e, a = /* @__PURE__ */ new Map()), o === "setter" && ((i = Object.create(i)).wrapped = !0), a.set(s.name, i), o === "accessor") {
     const { name: r } = s;
-    return { set(h) {
+    return { set(l) {
       const d = t.get.call(this);
-      t.set.call(this, h), this.requestUpdate(r, d, i, !0, h);
-    }, init(h) {
-      return h !== void 0 && this.C(r, void 0, i, h), h;
+      t.set.call(this, l), this.requestUpdate(r, d, i, !0, l);
+    }, init(l) {
+      return l !== void 0 && this.C(r, void 0, i, l), l;
     } };
   }
   if (o === "setter") {
     const { name: r } = s;
-    return function(h) {
+    return function(l) {
       const d = this[r];
-      t.call(this, h), this.requestUpdate(r, d, i, !0, h);
+      t.call(this, l), this.requestUpdate(r, d, i, !0, l);
     };
   }
   throw Error("Unsupported decorator location: " + o);
@@ -718,7 +718,7 @@ let Ve = class extends Event {
     }, this.onProviderRequest = (e) => {
       if (e.context !== this.context || (e.contextTarget ?? e.composedPath()[0]) === this.host) return;
       const a = /* @__PURE__ */ new Set();
-      for (const [r, { consumerHost: h }] of this.subscriptions) a.has(r) || (a.add(r), h.dispatchEvent(new oe(this.context, h, r, !0)));
+      for (const [r, { consumerHost: l }] of this.subscriptions) a.has(r) || (a.add(r), l.dispatchEvent(new oe(this.context, l, r, !0)));
       e.stopPropagation();
     }, this.host = t, s.context !== void 0 ? this.context = s.context : this.context = s, this.attachListeners(), this.host.addController?.(this);
   }
@@ -754,13 +754,13 @@ function D({ context: i }) {
         const r = /* @__PURE__ */ new WeakMap();
         a = { get() {
           return r.get(this);
-        }, set(h) {
-          o.get(this).setValue(h), r.set(this, h);
+        }, set(l) {
+          o.get(this).setValue(l), r.set(this, l);
         }, configurable: !0, enumerable: !0 };
       } else {
         const r = e.set;
-        a = { ...e, set(h) {
-          o.get(this).setValue(h), r?.call(this, h);
+        a = { ...e, set(l) {
+          o.get(this).setValue(l), r?.call(this, l);
         } };
       }
       return void Object.defineProperty(t, s, a);
@@ -832,7 +832,7 @@ const v = u`
     --chat-spacing-6: 1.5rem;
     --chat-spacing-8: 2rem;
 
-    /** Overlays & Shadows */
+    /** Overlays */
     --chat-overlay-subtle: oklch(0% 0 0deg / 5%);
     --chat-overlay-light: oklch(0% 0 0deg / 8%);
     --chat-overlay: oklch(0% 0 0deg / 10%);
@@ -841,6 +841,7 @@ const v = u`
   }
 
   :host([theme="light"]) {
+    /** Colors */
     --chat-background: oklch(100% 0 0deg);
     --chat-foreground: oklch(14.5% 0 0deg);
     --chat-card: oklch(100% 0 0deg);
@@ -878,9 +879,23 @@ const v = u`
     --chat-warning-foreground: oklch(100% 0 0deg);
     --chat-info: oklch(54.6% 0.245 262.881deg);
     --chat-info-foreground: oklch(100% 0 0deg);
+
+    /** Shadows */
+    --chat-shadow-2xs: 0 1px rgb(0 0 0 / 5%);
+    --chat-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
+    --chat-shadow-sm:
+      0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
+    --chat-shadow-md:
+      0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
+    --chat-shadow-lg:
+      0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+    --chat-shadow-xl:
+      0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
+    --chat-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
   }
 
   :host([theme="dark"]) {
+    /** Colors */
     --chat-background: oklch(14.5% 0 0deg);
     --chat-foreground: oklch(98.5% 0 0deg);
     --chat-card: oklch(20.5% 0 0deg);
@@ -918,6 +933,15 @@ const v = u`
     --chat-warning-foreground: oklch(14.5% 0 0deg);
     --chat-info: oklch(70.7% 0.165 254.624deg);
     --chat-info-foreground: oklch(14.5% 0 0deg);
+
+    /** Shadows */
+    --chat-shadow-2xs: none;
+    --chat-shadow-xs: none;
+    --chat-shadow-sm: none;
+    --chat-shadow-md: none;
+    --chat-shadow-lg: none;
+    --chat-shadow-xl: none;
+    --chat-shadow-2xl: none;
   }
 `;
 var qe = Object.defineProperty, et = (i, t, s, o) => {
@@ -954,7 +978,7 @@ class F extends m {
         background-color: var(--chat-popover);
         border: 1px solid var(--chat-border);
         border-radius: var(--chat-radius-lg);
-        box-shadow: 0 0.125rem 0.25rem var(--chat-overlay);
+        box-shadow: var(--chat-shadow-sm);
       }
 
       .action-list__item {
@@ -1167,7 +1191,7 @@ class mt extends m {
               <circle cx="12" cy="5" r="1" />
               <circle cx="12" cy="19" r="1" />
             </svg>
-          </button>` : l}
+          </button>` : h}
       ${this._showActionList ? c`<chat-action-list
             style="position: absolute; top: 4em; right: 1.2em;"
             .actionType="${"room"}"
@@ -1175,7 +1199,7 @@ class mt extends m {
             .actions="${this.roomContext.roomActions}"
             @select-action="${this._closeActionList}"
             @close="${this._closeActionList}"
-          ></chat-action-list>` : l}
+          ></chat-action-list>` : h}
     </header>`;
   }
 }
@@ -1197,10 +1221,10 @@ Lt([
  */
 class yt extends jt {
   constructor(t) {
-    if (super(t), this.it = l, t.type !== Et.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(t), this.it = h, t.type !== Et.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(t) {
-    if (t === l || t == null) return this._t = void 0, this.it = t;
+    if (t === h || t == null) return this._t = void 0, this.it = t;
     if (t === C) return t;
     if (typeof t != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (t === this.it) return this._t;
@@ -1318,7 +1342,7 @@ class z extends m {
         display: flex;
         overflow: hidden;
         border-radius: var(--chat-radius-lg);
-        box-shadow: 0 0.25rem 0.5rem var(--chat-overlay-medium);
+        box-shadow: var(--chat-shadow-sm);
       }
 
       emoji-picker {
@@ -1348,7 +1372,7 @@ class z extends m {
     return c`${this._hasEmojiPickerLoaded ? c`<emoji-picker
           style="width: ${this.width}px; height: ${this.height}px"
           @emoji-click="${this._onClickEmoji}"
-        ></emoji-picker>` : l}`;
+        ></emoji-picker>` : h}`;
   }
 }
 q([
@@ -1419,7 +1443,7 @@ class W extends m {
         background-color: var(--chat-secondary);
         border: 1px solid var(--chat-border);
         border-radius: var(--chat-radius-lg);
-        box-shadow: 0 0.125rem 0.25rem var(--chat-overlay);
+        box-shadow: var(--chat-shadow-xs);
       }
 
       .message-menu--mine {
@@ -1477,7 +1501,7 @@ class W extends m {
               <path d="M16 5h6" />
               <path d="M19 2v6" />
             </svg>
-          </button>` : l}
+          </button>` : h}
       ${this.isReplyAvailable ? c`<button
             class="message-menu__button"
             @click="${this._replyToMesssage}"
@@ -1497,7 +1521,7 @@ class W extends m {
               <path d="M20 18v-2a4 4 0 0 0-4-4H4" />
               <path d="m9 17-5-5 5-5" />
             </svg>
-          </button>` : l}
+          </button>` : h}
       ${this.isMessageActionAvailable ? c`<button
             class="message-menu__button"
             @click="${this._clickActionButton}"
@@ -1518,7 +1542,7 @@ class W extends m {
               <circle cx="19" cy="12" r="1" />
               <circle cx="5" cy="12" r="1" />
             </svg>
-          </button>` : l}
+          </button>` : h}
     </div>`;
   }
 }
@@ -1578,7 +1602,7 @@ class K extends m {
         background-color: var(--chat-secondary);
         border: 1px solid var(--chat-border);
         border-radius: var(--chat-radius);
-        box-shadow: 0 0.125rem 0.25rem var(--chat-overlay);
+        box-shadow: var(--chat-shadow-xs);
       }
 
       .message-reaction-list--mine {
@@ -1909,7 +1933,7 @@ class Bt extends m {
       ${this.replyTo.senderAvatar ? c`<chat-avatar
             .size="${2.4}"
             .src="${this.replyTo.senderAvatar}"
-          ></chat-avatar>` : l}
+          ></chat-avatar>` : h}
       <div class="message-reply-to__container">
         <span
           class=${x({
@@ -2185,7 +2209,7 @@ class _ extends m {
       "message-item--selected": this.isReplying || this.message.isSelected
     })}"
     >
-      ${this._isAlignedLeft && this.showTheirAvatar ? c`<chat-avatar .src="${this.message.senderAvatar ?? null}"></chat-avatar>` : l}
+      ${this._isAlignedLeft && this.showTheirAvatar ? c`<chat-avatar .src="${this.message.senderAvatar ?? null}"></chat-avatar>` : h}
       <div class="message-item__container">
         <div
           class=${x({
@@ -2195,7 +2219,7 @@ class _ extends m {
         >
           ${this._isAlignedLeft ? c`<span class="message-item__name"
                 >${this.message.senderName}</span
-              >` : l}<span class="message-item__date"
+              >` : h}<span class="message-item__date"
             >${this._formatTimestamp(this.message.timestamp)}</span
           >
         </div>
@@ -2213,17 +2237,17 @@ class _ extends m {
           ${this.message.replyTo && !this.message.isDeleted ? c`<chat-message-reply-to
                 .replyTo="${this.message.replyTo}"
                 .mine="${this._mine}"
-              ></chat-message-reply-to>` : l}
+              ></chat-message-reply-to>` : h}
           ${this.message.isDeleted ? c`<chat-deleted-message
                 .fontSize="${1.4}"
               ></chat-deleted-message>` : this.message.content !== "" ? c`<span
                   >${this.isMarkdownAvailable ? Ke(this._content) : this._content}</span
-                >` : l}
+                >` : h}
           ${!this.message.isDeleted && this.message.attachments.length > 0 ? c`<chat-message-attachment-list
                 style="margin-top: 0.8em;"
                 .attachments=${this.message.attachments}
                 .mine="${this._mine}"
-              ></chat-message-attachment-list>` : l}
+              ></chat-message-attachment-list>` : h}
           ${!this.message.isDeleted && this._hover && this._isMessageMenuAvailable ? c`<chat-message-menu
                 style=${Y({
       position: "absolute",
@@ -2239,7 +2263,7 @@ class _ extends m {
                 @click-emoji-button="${this._toggleEmojiPicker}"
                 @click-action-button="${this._openActionList}"
                 @blur="${this._onBlurMenu}"
-              ></chat-message-menu>` : l}
+              ></chat-message-menu>` : h}
           ${!this.message.isDeleted && this._showActionList ? c`<chat-action-list
                 style=${Y({
       position: "absolute",
@@ -2254,7 +2278,7 @@ class _ extends m {
                 .actions="${this._mine ? this.myMessageActions : this.theirMessageActions}"
                 @select-action="${this._closeActionList}"
                 @close="${this._closeActionList}"
-              ></chat-action-list>` : l}
+              ></chat-action-list>` : h}
           ${!this.message.isDeleted && this.isEmojiReactionAvailable && this._showEmojiPicker ? c`<chat-emoji-picker
                 style=${Y({
       position: "absolute",
@@ -2269,14 +2293,14 @@ class _ extends m {
                 .messageId="${this.message.id}"
                 @select-emoji="${this._closeEmojiPicker}"
                 @close="${this._closeEmojiPicker}"
-              ></chat-emoji-picker>` : l}
+              ></chat-emoji-picker>` : h}
         </div>
         ${!this.message.isDeleted && Object.keys(this.message.reactions).length > 0 ? c`<chat-message-reaction-list
               .messageId="${this.message.id}"
               .mine="${this._mine}"
               .alignMyMessagesLeft="${this.alignMyMessagesLeft}"
               .reactions="${this.message.reactions}"
-            ></chat-message-reaction-list>` : l}
+            ></chat-message-reaction-list>` : h}
       </div>
     </div>`;
   }
@@ -2350,7 +2374,7 @@ var os = Object.defineProperty, is = (i, t, s, o) => {
     (r = i[a]) && (e = r(t, s, e) || e);
   return e && os(t, s, e), e;
 };
-class le extends m {
+class he extends m {
   constructor() {
     super(...arguments), this.size = 3.2;
   }
@@ -2390,8 +2414,8 @@ class le extends m {
 }
 is([
   n({ type: Number })
-], le.prototype, "size");
-var as = Object.defineProperty, he = (i, t, s, o) => {
+], he.prototype, "size");
+var as = Object.defineProperty, le = (i, t, s, o) => {
   for (var e = void 0, a = i.length - 1, r; a >= 0; a--)
     (r = i[a]) && (e = r(t, s, e) || e);
   return e && as(t, s, e), e;
@@ -2458,10 +2482,10 @@ class It extends m {
     </div>`;
   }
 }
-he([
+le([
   n({ type: Array })
 ], It.prototype, "suggestions");
-he([
+le([
   n({ type: Boolean })
 ], It.prototype, "alignMyMessagesLeft");
 class rs extends m {
@@ -2603,10 +2627,10 @@ class de extends m {
 cs([
   n({ type: Object })
 ], de.prototype, "message");
-var ls = Object.defineProperty, hs = (i, t, s, o) => {
+var hs = Object.defineProperty, ls = (i, t, s, o) => {
   for (var e = void 0, a = i.length - 1, r; a >= 0; a--)
     (r = i[a]) && (e = r(t, s, e) || e);
-  return e && ls(t, s, e), e;
+  return e && hs(t, s, e), e;
 };
 class pe extends m {
   constructor() {
@@ -2631,7 +2655,7 @@ class pe extends m {
         background-color: var(--chat-primary);
         border: none;
         border-radius: var(--chat-radius-full);
-        box-shadow: 0 0.125rem 0.25rem var(--chat-overlay);
+        box-shadow: var(--chat-shadow-sm);
       }
     `
     ];
@@ -2645,7 +2669,7 @@ class pe extends m {
     </button>`;
   }
 }
-hs([
+ls([
   k({ context: st, subscribe: !0 }),
   n({ type: Object })
 ], pe.prototype, "i18nContext");
@@ -2682,14 +2706,14 @@ class j extends m {
   }
   updated(t) {
     if (t.has("messageContext")) {
-      const { id: s, roomId: o } = t.get("messageContext")?.messages[0] ?? {}, e = t.get("messageContext")?.messages.length ?? 0, a = this.scrollHeight, r = this.scrollTop, { id: h, roomId: d } = this.messageContext.messages[0] ?? {}, y = this.messageContext.messages.length;
+      const { id: s, roomId: o } = t.get("messageContext")?.messages[0] ?? {}, e = t.get("messageContext")?.messages.length ?? 0, a = this.scrollHeight, r = this.scrollTop, { id: l, roomId: d } = this.messageContext.messages[0] ?? {}, y = this.messageContext.messages.length;
       if (o !== d) {
         this._showScrollToBottomButton = !1, this._showNotificationBadge = !1, setTimeout(() => {
           this._scrollToBottom(void 0, "instant");
         });
         return;
       }
-      y > e && (s !== h ? setTimeout(() => {
+      y > e && (s !== l ? setTimeout(() => {
         const $ = this.scrollHeight;
         this.scrollTop = r + ($ - a);
       }) : this._isWithinClientHeight || this.messageContext.messages[this.messageContext.messages.length - 1].senderId === this.currentUserId ? setTimeout(() => {
@@ -2758,7 +2782,7 @@ class j extends m {
         background-color: var(--chat-popover);
         border: 1px solid var(--chat-border);
         border-radius: var(--chat-radius-full);
-        box-shadow: 0 0.125rem 0.25rem var(--chat-overlay);
+        box-shadow: var(--chat-shadow-sm);
       }
 
       .message-list__button:hover {
@@ -2777,7 +2801,7 @@ class j extends m {
         <div class="message-list__top"></div>
         ${this.messageContext.isLoadingMessage ? c`<chat-loader
               style="position: absolute; top: 50%; transform: translateY(-50%);"
-            ></chat-loader>` : c` ${!this.messageContext.isLoadingMessage && this.messageContext.isLoadingMoreMessages ? c`<chat-loader></chat-loader>` : l}
+            ></chat-loader>` : c` ${!this.messageContext.isLoadingMessage && this.messageContext.isLoadingMoreMessages ? c`<chat-loader></chat-loader>` : h}
               ${this.messageContext.messages.map(
       (t, s) => t.type === "message" ? c`<chat-message-item
                       .message="${t}"
@@ -2795,14 +2819,14 @@ class j extends m {
                       .containerBottom="${this._rectBottom}"
                     ></chat-message-item>` : t.type === "divider" ? c`<chat-message-divider
                         .message="${t}"
-                      ></chat-message-divider>` : l
+                      ></chat-message-divider>` : h
     )}
-              ${this.messageContext.isTyping ? c`<chat-message-typing></chat-message-typing>` : l}
+              ${this.messageContext.isTyping ? c`<chat-message-typing></chat-message-typing>` : h}
               ${this.messageContext.suggestions.length > 0 ? c`<chat-suggestion-list
                     style="align-self: ${this.messageContext.alignMyMessagesLeft ? "flex-start" : "flex-end"};"
                     .suggestions="${this.messageContext.suggestions}"
                     .alignMyMessagesLeft="${this.messageContext.alignMyMessagesLeft}"
-                  ></chat-suggestion-list>` : l}
+                  ></chat-suggestion-list>` : h}
               <button
                 class="${x({
       "message-list__button": !0,
@@ -2815,7 +2839,7 @@ class j extends m {
         <div class="message-list__bottom"></div>
         ${this._showNotificationBadge ? c`<chat-notification-badge
               @click-notification-badge="${this._scrollToBottom}"
-            ></chat-notification-badge>` : l}
+            ></chat-notification-badge>` : h}
       </div>
     `;
   }
@@ -3140,7 +3164,7 @@ class A extends m {
     );
   }
   _onSelectEmoji(t) {
-    this._textareaValue += t.detail.emoji, this._textarea.value = this._textareaValue, this._showEmojiPicker = !1;
+    t.stopPropagation(), this._textareaValue += t.detail.emoji, this._textarea.value = this._textareaValue, this._showEmojiPicker = !1;
   }
   _toggleEmojiPicker() {
     this._showEmojiPicker = !this._showEmojiPicker;
@@ -3255,10 +3279,10 @@ class A extends m {
             >${this.i18nContext.i18n.CLOSED_ROOM_MESSAGE}</span
           >` : c` ${this.footerContext.attachments.length > 0 ? c`<chat-footer-attachment-section
                   .attachments=${this.footerContext.attachments}
-                ></chat-footer-attachment-section>` : l}
+                ></chat-footer-attachment-section>` : h}
             ${this.messageContext.replyTo ? c`<chat-footer-reply-to-section
                   .replyTo="${this.messageContext.replyTo}"
-                ></chat-footer-reply-to-section>` : l}
+                ></chat-footer-reply-to-section>` : h}
             <textarea
               class="footer__textarea"
               .placeholder="${this.i18nContext.i18n.CHAT_FOOTER_TEXTAREA_PLACEHOLDER}"
@@ -3292,7 +3316,7 @@ class A extends m {
                       type="file"
                       class="footer__file"
                       @change="${this._handleFileChange}"
-                    />` : l}
+                    />` : h}
               ${this.footerContext.isEmojiPickerAvailable ? c`<button
                     class="footer__button footer__button--emoji"
                     @click="${this._toggleEmojiPicker}"
@@ -3316,7 +3340,7 @@ class A extends m {
                       <path d="M16 5h6" />
                       <path d="M19 2v6" />
                     </svg>
-                  </button>` : l}
+                  </button>` : h}
               <button
                 class="${x({
       footer__button: !0,
@@ -3346,7 +3370,7 @@ class A extends m {
                     style="position: absolute; bottom: calc(100% + 0.8em); left: 0; display: ${this._showEmojiPicker ? "block" : "none"};"
                     @select-emoji="${this._onSelectEmoji}"
                     @close="${this._closeEmojiPicker}"
-                  ></chat-emoji-picker>` : l}
+                  ></chat-emoji-picker>` : h}
             </div>`}
     </footer>`;
   }
@@ -3559,7 +3583,7 @@ class at extends m {
     >
       <chat-header></chat-header><chat-message-list></chat-message-list
       ><chat-footer></chat-footer>
-      ${this.dialog ? c`<chat-dialog .dialog="${this.dialog}"></chat-dialog>` : l}
+      ${this.dialog ? c`<chat-dialog .dialog="${this.dialog}"></chat-dialog>` : h}
     </div>`;
   }
 }
@@ -3752,7 +3776,7 @@ class M extends m {
       role="button"
       tabindex="0"
     >
-      ${this.showAvatar ? c`<chat-avatar .src="${this.room.avatar ?? null}"></chat-avatar>` : l}
+      ${this.showAvatar ? c`<chat-avatar .src="${this.room.avatar ?? null}"></chat-avatar>` : h}
       <div class="room-item__text">
         <span class="room-item__title">${this.room.sidebarTitle}</span>
         <span class="room-item__subtitle">
@@ -3788,7 +3812,7 @@ class M extends m {
       [`room-item__badge--${this.room.badge.type}`]: !0
     })}"
                   >${this.room.badge.label}</span
-                >` : l}
+                >` : h}
           </div>`}
       ${this._showActionList ? c`<chat-action-list
             style=${Y({
@@ -3803,7 +3827,7 @@ class M extends m {
             .actions="${this.actions}"
             @select-action="${this._closeActionList}"
             @close="${this._closeActionList}"
-          ></chat-action-list>` : l}
+          ></chat-action-list>` : h}
     </div>`;
   }
 }
@@ -3918,7 +3942,7 @@ class rt extends m {
       ${!this.roomContext.isLoadingRoom && this.roomContext.isLoadingMoreRooms ? c`<chat-loader
             style="padding: 1.6em 0;"
             .size="${2.4}"
-          ></chat-loader>` : l} `;
+          ></chat-loader>` : h} `;
   }
 }
 ft([
@@ -4299,7 +4323,7 @@ class p extends m {
         overflow: hidden;
         border: 1px solid var(--chat-border);
         border-radius: var(--chat-radius-2xl);
-        box-shadow: rgb(0 0 0 / 15%) 0 0.1875rem 0.1875rem 0;
+        box-shadow: var(--chat-shadow-sm);
       }
 
       .main--fullscreen {
@@ -4316,7 +4340,7 @@ class p extends m {
     })}
       style="height: ${this.height}; width: ${this.width}"
     >
-      ${this.isSingleRoom ? l : c`<chat-sidebar
+      ${this.isSingleRoom ? h : c`<chat-sidebar
             .show="${this.showSidebar}"
             .isMobile="${this.isMobile}"
             @close="${this._closeSidebar}"
@@ -4463,7 +4487,7 @@ customElements.define(
 customElements.define("chat-footer-reply-to-section", ge);
 customElements.define("chat-footer", A);
 customElements.define("chat-header", mt);
-customElements.define("chat-loader", le);
+customElements.define("chat-loader", he);
 customElements.define("chat-message-divider", de);
 customElements.define(
   "chat-message-attachment-list",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "advanced-chat-kai",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "A highly customizable chat web component",
   "main": "dist/advanced-chat-kai.es.js",
   "module": "dist/advanced-chat-kai.es.js",
@@ -63,6 +63,7 @@
     "@vitest/browser": "^3.1.2",
     "@vitest/coverage-v8": "^3.1.2",
     "@vitest/ui": "^3.1.2",
+    "chromatic": "^15.1.1",
     "emoji-picker-element": "^1.26.3",
     "eslint": "^9.25.1",
     "eslint-config-prettier": "^10.1.2",