@cuekit-ai/react 1.6.7 → 1.6.8

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;
     });
   }
@@ -1222,6 +1222,45 @@ var initWebRTC = (apiKey) => {
   return initWebRTCWithDeployedBackend(apiKey);
 };
 
+// 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/providers/ansyr-provider.tsx
 if (typeof window !== "undefined" && !globalThis.AnsyrStore) {
   globalThis.AnsyrStore = {
@@ -1271,9 +1310,52 @@ var AnsyrProvider = ({
   title = "ansyr.ai",
   showLogo = true,
   showAIIcon = true,
-  showUserIcon = true
+  showUserIcon = true,
+  theme,
+  emptyStateMessage
 }) => {
   const [internalDeviceId, setInternalDeviceId] = useState(deviceId);
+  const generateThemeStyles2 = (theme2) => {
+    if (!theme2) return {};
+    const mapColorsToVars = (colors) => {
+      const mapping = {
+        primary: "--voice-accent",
+        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 styles2 = {};
+      Object.entries(colors).forEach(([key, value]) => {
+        const varName = mapping[key];
+        if (varName && value) {
+          const hsl = hexToHSL(value);
+          if (hsl) {
+            styles2[varName] = hsl.toString();
+            if (key === "primary") {
+              styles2["--indicator-bg"] = hsl.toString();
+              styles2["--voice-accent-light"] = `${hsl.h} ${hsl.s}% 96%`;
+            }
+          }
+        }
+      });
+      return styles2;
+    };
+    const styles = {};
+    if (theme2.light) {
+      const lightStyles = mapColorsToVars(theme2.light);
+      Object.entries(lightStyles).forEach(([key, value]) => {
+        styles[key] = value;
+      });
+    }
+    return styles;
+  };
+  const themeStyles = generateThemeStyles2(theme);
   useEffect(() => {
     InitCuekit({ apiKey, appId });
   }, [apiKey, appId]);
@@ -1293,7 +1375,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 +1462,12 @@ var AnsyrProvider = ({
         title,
         showLogo,
         showAIIcon,
-        showUserIcon
+        showUserIcon,
+        theme,
+        emptyStateMessage
       }
     },
-    children
+    /* @__PURE__ */ React.createElement("div", { style: themeStyles }, children)
   );
 };
 
@@ -9387,7 +9471,7 @@ var convert = (
    * @param {Test} [test]
    * @returns {Check}
    */
-  (function(test) {
+  function(test) {
     if (test === null || test === void 0) {
       return ok2;
     }
@@ -9401,7 +9485,7 @@ var convert = (
       return typeFactory(test);
     }
     throw new Error("Expected function, string, or object as test");
-  })
+  }
 );
 function anyFactory(tests) {
   const checks2 = [];
@@ -10581,7 +10665,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 +10680,7 @@ var CallableInstance = (
     };
     Object.setPrototypeOf(apply, proto);
     return apply;
-  })
+  }
 );
 
 // node_modules/unified/lib/index.js
@@ -15188,6 +15272,38 @@ var useDraggableResizableContainer = (storageKey) => {
 };
 
 // src/components/chat-popup.tsx
+var generateThemeStyles = (theme, currentTheme = "dark") => {
+  if (!theme) return {};
+  const colors = currentTheme === "light" ? theme.light : theme.dark;
+  if (!colors) return {};
+  const mapping = {
+    primary: "--voice-accent",
+    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") {
+          styles["--indicator-bg"] = hsl.toString();
+          styles["--voice-accent-light"] = currentTheme === "light" ? `${hsl.h} ${hsl.s}% 96%` : `${hsl.h} ${hsl.s}% 25%`;
+        }
+      }
+    }
+  });
+  return styles;
+};
 var ChatPopup = ({
   isOpen,
   isMinimized,
@@ -15215,9 +15331,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 +15439,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(
@@ -15507,7 +15635,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",
         {
@@ -16010,7 +16138,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 +16282,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 +16505,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 +16589,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 +16625,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 +16656,8 @@ var gt = (function(e2) {
       this.unsubscribe();
     }
   }, t;
-})(Oe);
-var Nr = (function() {
+}(Oe);
+var Nr = function() {
   function e2(t) {
     this.partialObserver = t;
   }
@@ -16560,8 +16688,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 +16700,7 @@ var Ce = (function(e2) {
     } : s = n, o.destination = new Nr(s), o;
   }
   return t;
-})(gt);
+}(gt);
 function Le(e2) {
   un(e2);
 }
@@ -16585,9 +16713,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 +16726,7 @@ function jr(e2) {
     }, n);
   };
 }
-var k = (function() {
+var k = function() {
   function e2(t) {
     t && (this._subscribe = t);
   }
@@ -16657,7 +16785,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 +16815,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 +16850,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 +16935,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 +16955,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 +16979,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 +16993,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 +17005,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 +17047,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 +17081,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 +18202,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 +18491,50 @@ var MicButton = ({
         };
     }
   };
-  const micButtonGradient = currentTheme === "dark" ? "radial-gradient(circle at 50% 0%, #9a92f6, #5447cd)" : "radial-gradient(circle at 50% 0%, #9a92f6, #6257d9)";
+  const generateMicButtonGradient = () => {
+    const colors = currentTheme === "light" ? theme?.light : theme?.dark;
+    if (colors?.primary) {
+      const hsl = hexToHSL(colors.primary);
+      if (hsl) {
+        const lightHsl = `${hsl.h} ${hsl.s}% ${Math.min(hsl.l + 10, 100)}%`;
+        return `radial-gradient(circle at 50% 0%, hsl(${lightHsl}), hsl(${hsl.toString()}))`;
+      }
+    }
+    return currentTheme === "dark" ? "radial-gradient(circle at 50% 0%, #9a92f6, #5447cd)" : "radial-gradient(circle at 50% 0%, #9a92f6, #6257d9)";
+  };
+  const generateThemeStyles2 = (theme2, currentTheme2 = "dark") => {
+    if (!theme2) return {};
+    const colors = currentTheme2 === "light" ? theme2.light : theme2.dark;
+    if (!colors) return {};
+    const mapping = {
+      primary: "--voice-accent",
+      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") {
+            styles["--indicator-bg"] = hsl.toString();
+            styles["--voice-accent-light"] = currentTheme2 === "light" ? `${hsl.h} ${hsl.s}% 96%` : `${hsl.h} ${hsl.s}% 25%`;
+          }
+        }
+      }
+    });
+    return styles;
+  };
+  const micButtonGradient = generateMicButtonGradient();
   const buttonStyles = {
     container: {
       position: "relative",
@@ -18419,7 +18590,11 @@ var MicButton = ({
     {
       "data-cuekit-ignore": true,
       className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
-      style: { ...buttonStyles.container, ...getPositionStyle() }
+      style: {
+        ...buttonStyles.container,
+        ...getPositionStyle(),
+        ...generateThemeStyles2(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,
@@ -18540,7 +18715,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",

package/dist/{webrtc-service-KN5SEJKS.mjs → webrtc-service-IMARTHNM.mjs}

@@ -15,7 +15,7 @@ import {
   setAudioContainer,
   setServerUrl,
   setWebRTCCallbacks
-} from "./chunk-JVYSFKMO.mjs";
+} from "./chunk-ZP7AXODE.mjs";
 export {
   authenticate,
   connectToRoom,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuekit-ai/react",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -36,12 +36,14 @@
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "@types/react": "^18.2.0 || ^19.0.0",
+    "@types/react-dom": "^18.2.0 || ^19.0.0"
   },
   "devDependencies": {
     "@types/node": "^24.2.1",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/crypto-js": "^4.2.2",
     "tsup": "^8.5.0",
     "typescript": "^5.4.5"