@cuekit-ai/react 1.6.7 → 1.6.9

package/dist/index.mjs

@@ -37,7 +37,7 @@ import {
   setWebRTCCallbacks,
   setWebRTCConfig,
   validateDynamicElements
-} from "./chunk-JVYSFKMO.mjs";
+} from "./chunk-ZP7AXODE.mjs";
 
 // node_modules/inline-style-parser/index.js
 var require_inline_style_parser = __commonJS({
@@ -389,7 +389,7 @@ var require_core = __commonJS({
         root4.CryptoJS = factory();
       }
     })(exports, function() {
-      var CryptoJS = CryptoJS || (function(Math2, undefined2) {
+      var CryptoJS = CryptoJS || function(Math2, undefined2) {
         var crypto;
         if (typeof window !== "undefined" && window.crypto) {
           crypto = window.crypto;
@@ -429,7 +429,7 @@ var require_core = __commonJS({
           }
           throw new Error("Native crypto module could not be used to get secure random number.");
         };
-        var create2 = Object.create || /* @__PURE__ */ (function() {
+        var create2 = Object.create || /* @__PURE__ */ function() {
           function F2() {
           }
           return function(obj) {
@@ -439,10 +439,10 @@ var require_core = __commonJS({
             F2.prototype = null;
             return subtype;
           };
-        })();
+        }();
         var C = {};
         var C_lib = C.lib = {};
-        var Base = C_lib.Base = /* @__PURE__ */ (function() {
+        var Base = C_lib.Base = /* @__PURE__ */ function() {
           return {
             /**
              * Creates a new object that inherits from this object.
@@ -541,7 +541,7 @@ var require_core = __commonJS({
               return this.init.prototype.extend(this);
             }
           };
-        })();
+        }();
         var WordArray = C_lib.WordArray = Base.extend({
           /**
            * Initializes a newly created word array.
@@ -979,7 +979,7 @@ var require_core = __commonJS({
         });
         var C_algo = C.algo = {};
         return C;
-      })(Math);
+      }(Math);
       return CryptoJS;
     });
   }
@@ -1183,6 +1183,94 @@ function InitCuekit(config) {
   setWebRTCConfig(webRTCConfig);
 }
 
+// src/utils/colors.ts
+function hexToHSL(hex) {
+  hex = hex.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex.split("").map((char) => char + char).join("");
+  }
+  if (hex.length !== 6) return null;
+  const r2 = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b2 = parseInt(hex.substring(4, 6), 16) / 255;
+  const max = Math.max(r2, g, b2), min = Math.min(r2, g, b2);
+  let h = 0, s = 0, l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r2:
+        h = (g - b2) / d + (g < b2 ? 6 : 0);
+        break;
+      case g:
+        h = (b2 - r2) / d + 2;
+        break;
+      case b2:
+        h = (r2 - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  const res = {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+  return {
+    ...res,
+    toString: () => `${res.h} ${res.s}% ${res.l}%`
+  };
+}
+
+// src/utils/theme.ts
+var generateThemeStyles = (theme, currentTheme = "dark") => {
+  if (!theme) return {};
+  const colors = currentTheme === "light" ? theme.light : theme.dark;
+  if (!colors) return {};
+  const mapping = {
+    primary: "--voice-accent",
+    statusBg: "--voice-status-bg",
+    statusText: "--voice-status-text",
+    background: "--voice-bg",
+    surface: "--voice-surface",
+    border: "--voice-border",
+    text: "--voice-text",
+    textMuted: "--voice-text-muted",
+    userBubble: "--voice-user-bubble",
+    userText: "--voice-user-text",
+    aiBubble: "--voice-ai-bubble",
+    aiText: "--voice-ai-text"
+  };
+  const styles = {};
+  Object.entries(colors).forEach(([key, value]) => {
+    const varName = mapping[key];
+    if (varName && value) {
+      const hsl = hexToHSL(value);
+      if (hsl) {
+        styles[varName] = hsl.toString();
+        if (key === "primary") {
+          const indicatorHsl = colors.indicator ? hexToHSL(colors.indicator) : hsl;
+          styles["--indicator-bg"] = indicatorHsl ? indicatorHsl.toString() : hsl.toString();
+          const vibrantHsl = colors.primaryVibrant ? hexToHSL(colors.primaryVibrant) : null;
+          const lVibrant = vibrantHsl ? vibrantHsl.l : Math.min(hsl.l + 7, 100);
+          styles["--voice-accent-vibrant"] = vibrantHsl ? vibrantHsl.toString() : `${hsl.h} ${hsl.s}% ${lVibrant}%`;
+          const darkHsl = colors.primaryDark ? hexToHSL(colors.primaryDark) : null;
+          const lDark = darkHsl ? darkHsl.l : Math.max(hsl.l - 10, 0);
+          styles["--voice-accent-dark"] = darkHsl ? darkHsl.toString() : `${hsl.h} ${hsl.s}% ${lDark}%`;
+          styles["--voice-accent-light"] = currentTheme === "light" ? `${hsl.h} ${hsl.s}% 96%` : `${hsl.h} ${hsl.s}% 25%`;
+          const finalVibrant = vibrantHsl ? `hsl(${vibrantHsl.toString()})` : `hsl(${hsl.h} ${hsl.s}% ${lVibrant}%)`;
+          const finalDark = darkHsl ? `hsl(${darkHsl.toString()})` : `hsl(${hsl.h} ${hsl.s}% ${lDark}%)`;
+          styles["--gradient-primary"] = `linear-gradient(135deg, hsl(${hsl.toString()}), ${finalVibrant})`;
+          styles["--gradient-mic-button"] = `radial-gradient(circle at 50% 0%, ${finalVibrant}, ${finalDark})`;
+          const shadowColor = currentTheme === "light" ? `hsl(${hsl.toString()} / 0.1)` : `hsl(${hsl.toString()} / 0.2)`;
+          styles["--shadow-soft"] = `0 4px 20px -2px ${shadowColor}`;
+        }
+      }
+    }
+  });
+  return styles;
+};
+
 // src/utils/webrtc-config.ts
 var configureWebRTCServer = (config) => {
   if (!config.apiKey) {
@@ -1271,9 +1359,12 @@ var AnsyrProvider = ({
   title = "ansyr.ai",
   showLogo = true,
   showAIIcon = true,
-  showUserIcon = true
+  showUserIcon = true,
+  theme,
+  emptyStateMessage
 }) => {
   const [internalDeviceId, setInternalDeviceId] = useState(deviceId);
+  const themeStyles = generateThemeStyles(theme, "dark");
   useEffect(() => {
     InitCuekit({ apiKey, appId });
   }, [apiKey, appId]);
@@ -1293,7 +1384,7 @@ var AnsyrProvider = ({
     };
   }, [navigationHandler]);
   useEffect(() => {
-    import("./webrtc-service-KN5SEJKS.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
+    import("./webrtc-service-IMARTHNM.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
       setWebRTCCallbacks2({
         onNavigationCommand: (command) => {
           const data = command.data ?? command;
@@ -1380,10 +1471,12 @@ var AnsyrProvider = ({
         title,
         showLogo,
         showAIIcon,
-        showUserIcon
+        showUserIcon,
+        theme,
+        emptyStateMessage
       }
     },
-    children
+    /* @__PURE__ */ React.createElement("div", { style: themeStyles }, children)
   );
 };
 
@@ -9387,7 +9480,7 @@ var convert = (
    * @param {Test} [test]
    * @returns {Check}
    */
-  (function(test) {
+  function(test) {
     if (test === null || test === void 0) {
       return ok2;
     }
@@ -9401,7 +9494,7 @@ var convert = (
       return typeFactory(test);
     }
     throw new Error("Expected function, string, or object as test");
-  })
+  }
 );
 function anyFactory(tests) {
   const checks2 = [];
@@ -10581,7 +10674,7 @@ var CallableInstance = (
    * @param {string | symbol} property
    * @returns {(...parameters: Array<unknown>) => unknown}
    */
-  (function(property) {
+  function(property) {
     const self2 = this;
     const constr = self2.constructor;
     const proto = (
@@ -10596,7 +10689,7 @@ var CallableInstance = (
     };
     Object.setPrototypeOf(apply, proto);
     return apply;
-  })
+  }
 );
 
 // node_modules/unified/lib/index.js
@@ -15215,9 +15308,20 @@ var ChatPopup = ({
   onSizeChange,
   persistPosition = true,
   persistSize = true,
-  storageKey = "chat-popup"
+  storageKey = "chat-popup",
+  theme: localTheme,
+  emptyStateMessage: localEmptyStateMessage
 }) => {
-  const { title, showLogo, showAIIcon, showUserIcon } = useAnsyrContext();
+  const {
+    title,
+    showLogo,
+    showAIIcon,
+    showUserIcon,
+    theme: contextTheme,
+    emptyStateMessage: contextEmptyStateMessage
+  } = useAnsyrContext();
+  const theme = localTheme || contextTheme;
+  const emptyStateMessage = localEmptyStateMessage || contextEmptyStateMessage;
   const [inputText, setInputText] = useState6("");
   const [isSending, setIsSending] = useState6(false);
   const messagesEndRef = useRef5(null);
@@ -15312,7 +15416,8 @@ var ChatPopup = ({
         animation: "scaleIn 0.3s ease-out",
         flexDirection: "column",
         fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif",
-        overflow: "hidden"
+        overflow: "hidden",
+        ...generateThemeStyles(theme, currentTheme)
       }
     },
     /* @__PURE__ */ React10.createElement(
@@ -15366,8 +15471,8 @@ var ChatPopup = ({
           "div",
           {
             style: {
-              background: "hsl(var(--voice-accent-light))",
-              color: "hsl(var(--voice-accent))",
+              background: "hsl(var(--voice-status-bg))",
+              color: "hsl(var(--voice-status-text))",
               minHeight: "16px",
               display: "flex",
               alignItems: "center",
@@ -15507,7 +15612,7 @@ var ChatPopup = ({
             fontSize: "14px"
           }
         },
-        "Start a conversation with CueKit AI"
+        emptyStateMessage || "Start a conversation with CueKit AI"
       ) : messages.map((message, index2) => /* @__PURE__ */ React10.createElement(
         "div",
         {
@@ -15811,8 +15916,8 @@ var ChatPopup = ({
             style: {
               padding: "10px 12px",
               borderRadius: 8,
-              border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`,
-              background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+              border: "1px solid hsl(var(--voice-accent))",
+              background: "hsl(var(--voice-accent))",
               color: "#fff",
               fontSize: 12,
               fontWeight: 700,
@@ -15835,8 +15940,8 @@ var ChatPopup = ({
             style: {
               padding: "10px 12px",
               borderRadius: 8,
-              border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`,
-              background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+              border: "1px solid hsl(var(--voice-accent))",
+              background: "hsl(var(--voice-accent))",
               color: "#fff",
               fontSize: 12,
               fontWeight: 700,
@@ -15874,17 +15979,14 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       bottom: 0,
       width: "4px",
-      background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.8
     },
     rightBorder2: {
       position: "absolute",
       top: 0,
-      right: 0,
-      bottom: 0,
-      width: "8px",
-      background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent)))",
       filter: "blur(4px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.6
@@ -15893,9 +15995,7 @@ var BorderGlow = ({ isActive }) => {
       position: "absolute",
       top: 0,
       right: 0,
-      bottom: 0,
-      width: "16px",
-      background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       filter: "blur(12px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.4
@@ -15906,7 +16006,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       bottom: 0,
       width: "4px",
-      background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.8
     },
@@ -15915,8 +16015,7 @@ var BorderGlow = ({ isActive }) => {
       top: 0,
       left: 0,
       bottom: 0,
-      width: "8px",
-      background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent)))",
       filter: "blur(4px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.6
@@ -15926,8 +16025,7 @@ var BorderGlow = ({ isActive }) => {
       top: 0,
       left: 0,
       bottom: 0,
-      width: "16px",
-      background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
+      background: "linear-gradient(to bottom, hsl(var(--voice-accent-light)), hsl(var(--voice-accent)), hsl(var(--voice-accent-light)))",
       filter: "blur(12px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.4
@@ -15938,7 +16036,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       width: "32px",
       height: "32px",
-      background: "#9a92f6",
+      background: "hsl(var(--voice-accent))",
       borderBottomRightRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -15950,7 +16048,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       width: "32px",
       height: "32px",
-      background: "#A39EEC",
+      background: "hsl(var(--voice-accent))",
       borderBottomLeftRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -15962,7 +16060,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       width: "32px",
       height: "32px",
-      background: "#8177ed",
+      background: "hsl(var(--voice-accent))",
       borderTopLeftRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -15974,7 +16072,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       width: "32px",
       height: "32px",
-      background: "#6257d9",
+      background: "hsl(var(--voice-accent))",
       borderTopRightRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -16010,7 +16108,7 @@ var Me = { exports: {} };
 var Or = Me.exports;
 var kt;
 function kr() {
-  return kt || (kt = 1, (function(e2) {
+  return kt || (kt = 1, function(e2) {
     (function(t, n) {
       e2.exports ? e2.exports = n() : t.log = n();
     })(Or, function() {
@@ -16154,7 +16252,7 @@ function kr() {
         return o;
       }, s.default = s, s;
     });
-  })(Me)), Me.exports;
+  }(Me)), Me.exports;
 }
 var _r = kr();
 var Lr = /* @__PURE__ */ Ar(_r);
@@ -16377,7 +16475,7 @@ function Ue(e2, t) {
     0 <= n && e2.splice(n, 1);
   }
 }
-var Oe = (function() {
+var Oe = function() {
   function e2(t) {
     this.initialTeardown = t, this.closed = false, this._parentage = null, this._finalizers = null;
   }
@@ -16461,11 +16559,11 @@ var Oe = (function() {
   }, e2.prototype.remove = function(t) {
     var n = this._finalizers;
     n && Ue(n, t), t instanceof e2 && t._removeParent(this);
-  }, e2.EMPTY = (function() {
+  }, e2.EMPTY = function() {
     var t = new e2();
     return t.closed = true, t;
-  })(), e2;
-})();
+  }(), e2;
+}();
 var an = Oe.EMPTY;
 function cn(e2) {
   return e2 instanceof Oe || e2 && "closed" in e2 && P(e2.remove) && P(e2.add) && P(e2.unsubscribe);
@@ -16497,7 +16595,7 @@ function je() {
 function Re(e2) {
   e2();
 }
-var gt = (function(e2) {
+var gt = function(e2) {
   te(t, e2);
   function t(n) {
     var r2 = e2.call(this) || this;
@@ -16528,8 +16626,8 @@ var gt = (function(e2) {
       this.unsubscribe();
     }
   }, t;
-})(Oe);
-var Nr = (function() {
+}(Oe);
+var Nr = function() {
   function e2(t) {
     this.partialObserver = t;
   }
@@ -16560,8 +16658,8 @@ var Nr = (function() {
         Le(n);
       }
   }, e2;
-})();
-var Ce = (function(e2) {
+}();
+var Ce = function(e2) {
   te(t, e2);
   function t(n, r2, i2) {
     var o = e2.call(this) || this, s;
@@ -16572,7 +16670,7 @@ var Ce = (function(e2) {
     } : s = n, o.destination = new Nr(s), o;
   }
   return t;
-})(gt);
+}(gt);
 function Le(e2) {
   un(e2);
 }
@@ -16585,9 +16683,9 @@ var Ur = {
   error: Fr,
   complete: je
 };
-var bt = (function() {
+var bt = function() {
   return typeof Symbol == "function" && Symbol.observable || "@@observable";
-})();
+}();
 function Ge(e2) {
   return e2;
 }
@@ -16598,7 +16696,7 @@ function jr(e2) {
     }, n);
   };
 }
-var k = (function() {
+var k = function() {
   function e2(t) {
     t && (this._subscribe = t);
   }
@@ -16657,7 +16755,7 @@ var k = (function() {
   }, e2.create = function(t) {
     return new e2(t);
   }, e2;
-})();
+}();
 function Lt(e2) {
   var t;
   return (t = e2 ?? Dr.Promise) !== null && t !== void 0 ? t : Promise;
@@ -16687,7 +16785,7 @@ function j(e2) {
 function F(e2, t, n, r2, i2) {
   return new Hr(e2, t, n, r2, i2);
 }
-var Hr = (function(e2) {
+var Hr = function(e2) {
   te(t, e2);
   function t(n, r2, i2, o, s, a) {
     var c = e2.call(this, n) || this;
@@ -16722,13 +16820,13 @@ var Hr = (function(e2) {
       e2.prototype.unsubscribe.call(this), !r2 && ((n = this.onFinalize) === null || n === void 0 || n.call(this));
     }
   }, t;
-})(gt);
+}(gt);
 var zr = mt(function(e2) {
   return function() {
     e2(this), this.name = "ObjectUnsubscribedError", this.message = "object unsubscribed";
   };
 });
-var ee = (function(e2) {
+var ee = function(e2) {
   te(t, e2);
   function t() {
     var n = e2.call(this) || this;
@@ -16807,8 +16905,8 @@ var ee = (function(e2) {
   }, t.create = function(n, r2) {
     return new It(n, r2);
   }, t;
-})(k);
-var It = (function(e2) {
+}(k);
+var It = function(e2) {
   te(t, e2);
   function t(n, r2) {
     var i2 = e2.call(this) || this;
@@ -16827,8 +16925,8 @@ var It = (function(e2) {
     var r2, i2;
     return (i2 = (r2 = this.source) === null || r2 === void 0 ? void 0 : r2.subscribe(n)) !== null && i2 !== void 0 ? i2 : an;
   }, t;
-})(ee);
-var ln = (function(e2) {
+}(ee);
+var ln = function(e2) {
   te(t, e2);
   function t(n) {
     var r2 = e2.call(this) || this;
@@ -16851,13 +16949,13 @@ var ln = (function(e2) {
   }, t.prototype.next = function(n) {
     e2.prototype.next.call(this, this._value = n);
   }, t;
-})(ee);
+}(ee);
 var Yr = {
   now: function() {
     return Date.now();
   }
 };
-var qr = (function(e2) {
+var qr = function(e2) {
   te(t, e2);
   function t(n, r2) {
     return e2.call(this) || this;
@@ -16865,7 +16963,7 @@ var qr = (function(e2) {
   return t.prototype.schedule = function(n, r2) {
     return this;
   }, t;
-})(Oe);
+}(Oe);
 var Mt = {
   setInterval: function(e2, t) {
     for (var n = [], r2 = 2; r2 < arguments.length; r2++)
@@ -16877,7 +16975,7 @@ var Mt = {
   },
   delegate: void 0
 };
-var Kr = (function(e2) {
+var Kr = function(e2) {
   te(t, e2);
   function t(n, r2) {
     var i2 = e2.call(this, n, r2) || this;
@@ -16919,16 +17017,16 @@ var Kr = (function(e2) {
       this.work = this.state = this.scheduler = null, this.pending = false, Ue(o, this), r2 != null && (this.id = this.recycleAsyncId(i2, r2, null)), this.delay = null, e2.prototype.unsubscribe.call(this);
     }
   }, t;
-})(qr);
-var Rt = (function() {
+}(qr);
+var Rt = function() {
   function e2(t, n) {
     n === void 0 && (n = e2.now), this.schedulerActionCtor = t, this.now = n;
   }
   return e2.prototype.schedule = function(t, n, r2) {
     return n === void 0 && (n = 0), new this.schedulerActionCtor(this, t).schedule(r2, n);
   }, e2.now = Yr.now, e2;
-})();
-var Gr = (function(e2) {
+}();
+var Gr = function(e2) {
   te(t, e2);
   function t(n, r2) {
     r2 === void 0 && (r2 = Rt.now);
@@ -16953,7 +17051,7 @@ var Gr = (function(e2) {
       throw i2;
     }
   }, t;
-})(Rt);
+}(Rt);
 var Qr = new Gr(Kr);
 function Jr(e2) {
   return e2 && P(e2.schedule);
@@ -18074,7 +18172,7 @@ var MicButton = ({
   onLanguageChange,
   showLanguageDropdown = true
 }) => {
-  const { apiKey, appId } = useAnsyrContext();
+  const { apiKey, appId, theme, emptyStateMessage } = useAnsyrContext();
   const [showBodyGlow, setShowBodyGlow] = useState12(false);
   const [currentTheme, setCurrentTheme] = useState12("dark");
   const [showLanguageSelector, setShowLanguageSelector] = useState12(false);
@@ -18363,7 +18461,10 @@ var MicButton = ({
         };
     }
   };
-  const micButtonGradient = currentTheme === "dark" ? "radial-gradient(circle at 50% 0%, #9a92f6, #5447cd)" : "radial-gradient(circle at 50% 0%, #9a92f6, #6257d9)";
+  const generateMicButtonGradient = () => {
+    return "radial-gradient(circle at 50% 0%, hsl(var(--voice-accent-vibrant)), hsl(var(--voice-accent-dark)))";
+  };
+  const micButtonGradient = generateMicButtonGradient();
   const buttonStyles = {
     container: {
       position: "relative",
@@ -18398,18 +18499,18 @@ var MicButton = ({
     switch (micState) {
       case "listening":
         baseStyle.transform = "scale(1.05)";
-        baseStyle.boxShadow = "0 25px 50px -12px rgba(129, 119, 237, 0.6)";
+        baseStyle.boxShadow = "0 25px 50px -12px hsla(var(--voice-accent) / 0.6)";
         break;
       case "thinking":
         baseStyle.transform = "scale(1.02)";
-        baseStyle.boxShadow = "0 20px 25px -5px rgba(154, 146, 246, 0.4)";
+        baseStyle.boxShadow = "0 20px 25px -5px hsla(var(--voice-accent) / 0.4)";
         break;
       case "replying":
         baseStyle.transform = "scale(1.02)";
-        baseStyle.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
+        baseStyle.boxShadow = "0 20px 25px -5px hsla(var(--voice-accent) / 0.4)";
         break;
       default:
-        baseStyle.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
+        baseStyle.boxShadow = "0 10px 15px -3px hsla(var(--voice-accent) / 0.3)";
         break;
     }
     return baseStyle;
@@ -18419,7 +18520,11 @@ var MicButton = ({
     {
       "data-cuekit-ignore": true,
       className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
-      style: { ...buttonStyles.container, ...getPositionStyle() }
+      style: {
+        ...buttonStyles.container,
+        ...getPositionStyle(),
+        ...generateThemeStyles(theme, currentTheme)
+      }
     },
     showLanguageSelector && showLanguageDropdown ? /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-selection" }, /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-header" }, /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-icon" }, /* @__PURE__ */ React15.createElement(mic_default, { width: 20, height: 20 })), /* @__PURE__ */ React15.createElement("span", { className: "voice-chat-language-title" }, "Select Language")), /* @__PURE__ */ React15.createElement(
       LanguageSelector,
@@ -18436,9 +18541,9 @@ var MicButton = ({
         className: "voice-chat-cancel-button",
         onClick: () => setShowLanguageSelector(false),
         style: {
-          background: currentTheme === "dark" ? "hsl(248 32% 17.5%)" : "#f6f5ff",
-          color: currentTheme === "dark" ? "hsl(252 20% 65%)" : "#6257d9",
-          border: `1px solid ${currentTheme === "dark" ? "hsl(248 32% 22%)" : "#c0bbfb"}`
+          background: currentTheme === "dark" ? "hsl(var(--voice-surface))" : "hsl(var(--voice-accent-light))",
+          color: currentTheme === "dark" ? "hsl(var(--voice-text-muted))" : "hsl(var(--voice-accent))",
+          border: "1px solid hsl(var(--voice-border))"
         }
       },
       "Cancel"
@@ -18448,9 +18553,9 @@ var MicButton = ({
         className: "voice-chat-confirm-button",
         onClick: handleLanguageConfirm,
         style: {
-          background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+          background: "hsl(var(--voice-accent))",
           color: "#fff",
-          border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`
+          border: "1px solid hsl(var(--voice-accent))"
         }
       },
       "Start Voice Chat"
@@ -18475,13 +18580,13 @@ var MicButton = ({
         onMouseEnter: (e2) => {
           if (micState === "idle") {
             e2.currentTarget.style.transform = "scale(1.05)";
-            e2.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
+            e2.currentTarget.style.boxShadow = "0 20px 25px -5px hsla(var(--voice-accent) / 0.4)";
           }
         },
         onMouseLeave: (e2) => {
           if (micState === "idle") {
             e2.currentTarget.style.transform = "scale(1)";
-            e2.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
+            e2.currentTarget.style.boxShadow = "0 10px 15px -3px hsla(var(--voice-accent) / 0.3)";
           }
         },
         "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
@@ -18540,7 +18645,9 @@ var MicButton = ({
       resizable: true,
       persistPosition: true,
       persistSize: true,
-      storageKey: "cuekit-chat-popup"
+      storageKey: "cuekit-chat-popup",
+      theme,
+      emptyStateMessage
     }
   ), isChatOpen && isChatMinimized && /* @__PURE__ */ React15.createElement(
     "button",