@cuekit-ai/react 1.6.5 → 1.6.7

package/dist/{chunk-WBAYQSGF.mjs → chunk-JVYSFKMO.mjs}

@@ -23658,6 +23658,14 @@ function findDOMElementById(elementId) {
 }
 
 // src/utils/webrtc-service.ts
+function normalizeToNavigationCommand(message) {
+  if (!message || typeof message !== "object") return message;
+  if (message.type === "ai_intent" && message.data != null) return message;
+  if ("actionType" in message && typeof message.actionType === "string") {
+    return { type: "ai_intent", data: message };
+  }
+  return message;
+}
 var room = null;
 var reconnectTimeout = null;
 var serverUrl = WEBRTC_BACKEND_SERVER_URL || "https://api-webrtc.ansyr.ai";
@@ -23787,7 +23795,7 @@ function setupEventListeners() {
         try {
           const message = JSON.parse(jsonPart);
           console.log("\u{1F4E1} WebRTC Parsed JSON message:", message);
-          callbacks.onNavigationCommand?.(message);
+          callbacks.onNavigationCommand?.(normalizeToNavigationCommand(message));
         } catch (error) {
           console.log("\u{1F4E1} WebRTC JSON parse error for JSON part:", error, "JSON part:", jsonPart);
         }
@@ -23796,7 +23804,7 @@ function setupEventListeners() {
       try {
         const message = JSON.parse(decodedPayload);
         console.log("\u{1F4E1} WebRTC Parsed message:", message);
-        callbacks.onNavigationCommand?.(message);
+        callbacks.onNavigationCommand?.(normalizeToNavigationCommand(message));
       } catch (error) {
         console.log("\u{1F4E1} WebRTC JSON parse error:", error, "Raw payload:", decodedPayload);
         const message = decodedPayload;

package/dist/cuekit.css

@@ -2,27 +2,42 @@
 
 /* Global CSS Variables for CueKit */
 :root {
-  /* Light theme (default) */
+  /* Custom Color Palette - Purple */
+  --color-primary-25: #fafaff;
+  --color-primary-50: #f6f5ff;
+  --color-primary-100: #ecebff;
+  --color-primary-200: #dad7fe;
+  --color-primary-300: #c0bbfb;
+  --color-primary-400: #9a92f6;
+  --color-primary-500: #8177ed;
+  --color-primary-600: #6257d9;
+  --color-primary-700: #5447cd;
+  --color-primary-800: #42389e;
+  --color-primary-900: #38307d;
+  --color-primary-950: #241c5f;
+
+  /* Light theme (default) - Purple */
   --voice-bg: 0 0% 100%;
   --voice-surface: 0 0% 100%;
-  --voice-border: 214.3 31.8% 91.4%;
+  --voice-border: 252 31% 91%;
   --voice-text: 222.2 84% 4.9%;
-  --voice-text-muted: 215.4 16.3% 46.9%;
-  --voice-accent: 200 98% 39%;
-  --voice-accent-light: 200 98% 95%;
-  --voice-user-bubble: 200 98% 39%;
+  --voice-text-muted: 252 16% 47%;
+  --voice-accent: 252 81% 60%;
+  --voice-accent-light: 252 100% 96%;
+  --voice-user-bubble: 252 81% 60%;
   --voice-user-text: 0 0% 100%;
   --voice-ai-bubble: 0 0% 100%;
   --voice-ai-text: 222.2 84% 4.9%;
-  --indicator-bg: 200 98% 39%;
-  --voice-placeholder: 215.4 16.3% 46.9%;
+  --indicator-bg: 252 81% 60%;
+  --voice-placeholder: 252 16% 47%;
 
-  /* Gradients Light */
-  --gradient-primary: linear-gradient(135deg, hsl(200 98% 39%), hsl(200 98% 50%));
-  --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 40% 98%));
+  /* Gradients Light - Purple */
+  --gradient-primary: linear-gradient(135deg, hsl(252 81% 60%), hsl(252 88% 70%));
+  --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(252 40% 98%));
+  --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 66% 59%));
 
   /* Shadows Light */
-  --shadow-soft: 0 4px 20px -2px hsl(200 98% 39% / 0.1);
+  --shadow-soft: 0 4px 20px -2px hsl(252 81% 60% / 0.1);
   --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.05);
 }
 
@@ -31,45 +46,47 @@
 .cuekit-voice-popup:not(.cuekit-dark) {
   --voice-bg: 0 0% 100%;
   --voice-surface: 0 0% 100%;
-  --voice-border: 214.3 31.8% 91.4%;
+  --voice-border: 252 31% 91%;
   --voice-text: 222.2 84% 4.9%;
-  --voice-text-muted: 215.4 16.3% 46.9%;
-  --voice-accent: 200 98% 39%;
-  --voice-accent-light: 200 98% 95%;
-  --voice-user-bubble: 200 98% 39%;
+  --voice-text-muted: 252 16% 47%;
+  --voice-accent: 252 81% 60%;
+  --voice-accent-light: 252 100% 96%;
+  --voice-user-bubble: 252 81% 60%;
   --voice-user-text: 0 0% 100%;
   --voice-ai-bubble: 0 0% 100%;
   --voice-ai-text: 222.2 84% 4.9%;
-  --indicator-bg: 200 98% 39%;
-  --voice-placeholder: 215.4 16.3% 46.9%;
-  --gradient-primary: linear-gradient(135deg, hsl(200 98% 39%), hsl(200 98% 50%));
-  --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 40% 98%));
-  --shadow-soft: 0 4px 20px -2px hsl(200 98% 39% / 0.1);
+  --indicator-bg: 252 81% 60%;
+  --voice-placeholder: 252 16% 47%;
+  --gradient-primary: linear-gradient(135deg, hsl(252 81% 60%), hsl(252 88% 70%));
+  --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(252 40% 98%));
+  --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 66% 59%));
+  --shadow-soft: 0 4px 20px -2px hsl(252 81% 60% / 0.1);
   --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.05);
 }
 
 .cuekit-voice-popup.cuekit-dark {
-  /* Dark theme */
-  --voice-bg: 211 32% 11%;
-  --voice-surface: 217.2 32.6% 17.5%;
-  --voice-border: 217.2 32.6% 17.5%;
-  --voice-text: 210 40% 98%;
-  --voice-text-muted: 215 20.2% 65.1%;
-  --voice-accent: 200 98% 60%;
-  --voice-accent-light: 200 98% 20%;
-  --voice-user-bubble: 200.12 80.39% 60%;
+  /* Dark theme - Purple */
+  --voice-bg: 248 35% 11%;
+  --voice-surface: 248 32% 17.5%;
+  --voice-border: 248 32% 22%;
+  --voice-text: 252 40% 98%;
+  --voice-text-muted: 252 20% 65%;
+  --voice-accent: 252 88% 70%;
+  --voice-accent-light: 252 47% 25%;
+  --voice-user-bubble: 252 88% 70%;
   --voice-user-text: 0 0% 100%;
-  --voice-ai-bubble: 200.57 32.71% 20.98%;
+  --voice-ai-bubble: 252 32% 21%;
   --voice-ai-text: 0 0% 100%;
-  --indicator-bg: 200.12 80.39% 60%;
-  --voice-placeholder: 215 20.2% 65.1%;
+  --indicator-bg: 252 88% 70%;
+  --voice-placeholder: 252 20% 65%;
 
-  /* Gradients Dark */
-  --gradient-primary: linear-gradient(135deg, hsl(200 98% 60%), hsl(200 98% 70%));
-  --gradient-surface: linear-gradient(180deg, hsl(217.2 32.6% 17.5%), hsl(211 32% 11%));
+  /* Gradients Dark - Purple */
+  --gradient-primary: linear-gradient(135deg, hsl(252 88% 70%), hsl(252 88% 77%));
+  --gradient-surface: linear-gradient(180deg, hsl(248 32% 17.5%), hsl(248 35% 11%));
+  --gradient-mic-button: radial-gradient(circle at 50% 0%, hsl(252 88% 77%), hsl(252 59% 54%));
 
   /* Shadows Dark */
-  --shadow-soft: 0 4px 20px -2px hsl(200 98% 60% / 0.2);
+  --shadow-soft: 0 4px 20px -2px hsl(252 88% 70% / 0.2);
   --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.3);
 }
 

package/dist/index.d.mts

@@ -85,6 +85,7 @@ type MicButtonProps = {
     language?: Language;
     defaultLanguage?: Language;
     onLanguageChange?: (language: Language) => void;
+    showLanguageDropdown?: boolean;
 };
 
 declare const MicButton: React__default.FC<MicButtonProps>;

package/dist/index.d.ts

@@ -85,6 +85,7 @@ type MicButtonProps = {
     language?: Language;
     defaultLanguage?: Language;
     onLanguageChange?: (language: Language) => void;
+    showLanguageDropdown?: boolean;
 };
 
 declare const MicButton: React__default.FC<MicButtonProps>;

package/dist/index.js

@@ -23682,6 +23682,14 @@ __export(webrtc_service_exports, {
   setServerUrl: () => setServerUrl,
   setWebRTCCallbacks: () => setWebRTCCallbacks
 });
+function normalizeToNavigationCommand(message) {
+  if (!message || typeof message !== "object") return message;
+  if (message.type === "ai_intent" && message.data != null) return message;
+  if ("actionType" in message && typeof message.actionType === "string") {
+    return { type: "ai_intent", data: message };
+  }
+  return message;
+}
 function setServerUrl(url) {
   serverUrl = url;
 }
@@ -23803,7 +23811,7 @@ function setupEventListeners() {
         try {
           const message = JSON.parse(jsonPart);
           console.log("\u{1F4E1} WebRTC Parsed JSON message:", message);
-          callbacks.onNavigationCommand?.(message);
+          callbacks.onNavigationCommand?.(normalizeToNavigationCommand(message));
         } catch (error) {
           console.log("\u{1F4E1} WebRTC JSON parse error for JSON part:", error, "JSON part:", jsonPart);
         }
@@ -23812,7 +23820,7 @@ function setupEventListeners() {
       try {
         const message = JSON.parse(decodedPayload);
         console.log("\u{1F4E1} WebRTC Parsed message:", message);
-        callbacks.onNavigationCommand?.(message);
+        callbacks.onNavigationCommand?.(normalizeToNavigationCommand(message));
       } catch (error) {
         console.log("\u{1F4E1} WebRTC JSON parse error:", error, "Raw payload:", decodedPayload);
         const message = decodedPayload;
@@ -25250,12 +25258,14 @@ var AnsyrProvider = ({
     Promise.resolve().then(() => (init_webrtc_service(), webrtc_service_exports)).then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
       setWebRTCCallbacks2({
         onNavigationCommand: (command) => {
-          if (command.data.actionType === "navigate" && command.data.routeName) {
+          const data = command.data ?? command;
+          if (!data?.actionType) return;
+          if (data.actionType === "navigate" && data.routeName) {
             if (navigationHandler2) {
-              navigationHandler2(command.data.routeName);
+              navigationHandler2(data.routeName);
             }
-          } else if (command.data.actionType === "click" && command.data.elementId) {
-            console.log("AI intent: Click element", command.data.elementId);
+          } else if (data.actionType === "click" && data.elementId) {
+            console.log("AI intent: Click element", data.elementId);
           }
         },
         onConnectionStateChange: (state) => {
@@ -39769,8 +39779,9 @@ var ChatPopup = ({
             style: {
               padding: "10px 12px",
               borderRadius: 8,
-              border: "1px solid hsl(var(--voice-accent))",
-              background: "hsl(var(--voice-accent))",
+              border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`,
+              background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+              color: "#fff",
               fontSize: 12,
               fontWeight: 700,
               display: "flex",
@@ -39782,25 +39793,7 @@ var ChatPopup = ({
             "aria-label": muteState.isMuted ? "Unmute microphone" : "Mute microphone",
             title: muteState.isMuted ? "Unmute microphone" : "Mute microphone"
           },
-          muteState.isMuted ? /* @__PURE__ */ import_react14.default.createElement(
-            mic_off_default,
-            {
-              style: {
-                width: 16,
-                height: 16,
-                color: "hsl(var(--voice-user-text))"
-              }
-            }
-          ) : /* @__PURE__ */ import_react14.default.createElement(
-            mic_default,
-            {
-              style: {
-                width: 16,
-                height: 16,
-                color: "hsl(var(--voice-user-text))"
-              }
-            }
-          )
+          muteState.isMuted ? /* @__PURE__ */ import_react14.default.createElement(mic_off_default, { style: { width: 16, height: 16, color: "#fff" } }) : /* @__PURE__ */ import_react14.default.createElement(mic_default, { style: { width: 16, height: 16, color: "#fff" } })
         ),
         isConnected2 && onEndCall && /* @__PURE__ */ import_react14.default.createElement(
           "button",
@@ -39810,9 +39803,9 @@ var ChatPopup = ({
             style: {
               padding: "10px 12px",
               borderRadius: 8,
-              border: "1px solid hsl(var(--voice-accent))",
-              background: "hsl(var(--voice-accent))",
-              color: "hsl(var(--voice-user-text))",
+              border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`,
+              background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+              color: "#fff",
               fontSize: 12,
               fontWeight: 700,
               display: "flex",
@@ -39821,7 +39814,7 @@ var ChatPopup = ({
               cursor: "pointer"
             }
           },
-          /* @__PURE__ */ import_react14.default.createElement(phone_off_default, { style: { width: 16, height: 16 } })
+          /* @__PURE__ */ import_react14.default.createElement(phone_off_default, { style: { width: 16, height: 16, color: "#fff" } })
         )
       )
     )
@@ -39849,7 +39842,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       bottom: 0,
       width: "4px",
-      background: "linear-gradient(to bottom, #06b6d4, #3b82f6, #2563eb)",
+      background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.8
     },
@@ -39859,7 +39852,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       bottom: 0,
       width: "8px",
-      background: "linear-gradient(to bottom, #22d3ee, #3b82f6, #3b82f6)",
+      background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
       filter: "blur(4px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.6
@@ -39870,7 +39863,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       bottom: 0,
       width: "16px",
-      background: "linear-gradient(to bottom, #67e8f9, #3b82f6, #60a5fa)",
+      background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
       filter: "blur(12px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.4
@@ -39881,7 +39874,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       bottom: 0,
       width: "4px",
-      background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #2563eb)",
+      background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.8
     },
@@ -39891,7 +39884,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       bottom: 0,
       width: "8px",
-      background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #3b82f6)",
+      background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
       filter: "blur(4px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.6
@@ -39902,7 +39895,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       bottom: 0,
       width: "16px",
-      background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #60a5fa)",
+      background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
       filter: "blur(12px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.4
@@ -39913,7 +39906,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       width: "32px",
       height: "32px",
-      background: "#f59e0b",
+      background: "#9a92f6",
       borderBottomRightRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -39925,7 +39918,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       width: "32px",
       height: "32px",
-      background: "#06b6d4",
+      background: "#A39EEC",
       borderBottomLeftRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -39937,7 +39930,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       width: "32px",
       height: "32px",
-      background: "#3b82f6",
+      background: "#8177ed",
       borderTopLeftRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -39949,7 +39942,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       width: "32px",
       height: "32px",
-      background: "#2563eb",
+      background: "#6257d9",
       borderTopRightRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -42055,7 +42048,8 @@ var MicButton = ({
   showBorderGlow = false,
   language,
   defaultLanguage,
-  onLanguageChange
+  onLanguageChange,
+  showLanguageDropdown = true
 }) => {
   const { apiKey, appId } = useAnsyrContext();
   const [showBodyGlow, setShowBodyGlow] = (0, import_react20.useState)(false);
@@ -42214,6 +42208,7 @@ var MicButton = ({
   );
   const handleLanguageConfirm = (0, import_react20.useCallback)(() => {
     setShowLanguageSelector(false);
+    openChat();
     voiceConnect(`user_${Date.now()}`, apiKey, appId, selectedLanguage).then(() => {
       if (showBorderGlow) setShowBodyGlow(true);
       openChat();
@@ -42230,10 +42225,11 @@ var MicButton = ({
       }).catch((error) => {
       });
     } else {
-      if (!language && !defaultLanguage && !selectedLanguage) {
+      if (showLanguageDropdown && !language && !defaultLanguage && !selectedLanguage) {
         setShowLanguageSelector(true);
         return;
       }
+      openChat();
       voiceConnect(`user_${Date.now()}`, apiKey, appId, selectedLanguage).then(() => {
         if (showBorderGlow) setShowBodyGlow(true);
         openChat();
@@ -42252,6 +42248,7 @@ var MicButton = ({
     appId,
     language,
     selectedLanguage,
+    showLanguageDropdown,
     openChat,
     showBorderGlow,
     sendChatMessage,
@@ -42343,6 +42340,7 @@ var MicButton = ({
         };
     }
   };
+  const micButtonGradient = currentTheme === "dark" ? "radial-gradient(circle at 50% 0%, #9a92f6, #5447cd)" : "radial-gradient(circle at 50% 0%, #9a92f6, #6257d9)";
   const buttonStyles = {
     container: {
       position: "relative",
@@ -42358,7 +42356,7 @@ var MicButton = ({
       width: `${buttonSize}px`,
       height: `${buttonSize}px`,
       borderRadius: "50%",
-      background: "oklch(0.23 0.08 252.75)",
+      background: micButtonGradient,
       transition: "all 0.5s",
       border: "none",
       boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
@@ -42377,18 +42375,18 @@ var MicButton = ({
     switch (micState) {
       case "listening":
         baseStyle.transform = "scale(1.05)";
-        baseStyle.boxShadow = "0 25px 50px -12px rgba(59, 130, 246, 0.6)";
+        baseStyle.boxShadow = "0 25px 50px -12px rgba(129, 119, 237, 0.6)";
         break;
       case "thinking":
         baseStyle.transform = "scale(1.02)";
-        baseStyle.boxShadow = "0 20px 25px -5px rgba(196, 132, 252, 0.4)";
+        baseStyle.boxShadow = "0 20px 25px -5px rgba(154, 146, 246, 0.4)";
         break;
       case "replying":
         baseStyle.transform = "scale(1.02)";
-        baseStyle.boxShadow = "0 20px 25px -5px rgba(34, 211, 238, 0.4)";
+        baseStyle.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
         break;
       default:
-        baseStyle.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
+        baseStyle.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
         break;
     }
     return baseStyle;
@@ -42400,7 +42398,7 @@ var MicButton = ({
       className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
       style: { ...buttonStyles.container, ...getPositionStyle() }
     },
-    showLanguageSelector ? /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-selection" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-header" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-icon" }, /* @__PURE__ */ import_react20.default.createElement(mic_default, { width: 20, height: 20 })), /* @__PURE__ */ import_react20.default.createElement("span", { className: "voice-chat-language-title" }, "Select Language")), /* @__PURE__ */ import_react20.default.createElement(
+    showLanguageSelector && showLanguageDropdown ? /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-selection" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-header" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-icon" }, /* @__PURE__ */ import_react20.default.createElement(mic_default, { width: 20, height: 20 })), /* @__PURE__ */ import_react20.default.createElement("span", { className: "voice-chat-language-title" }, "Select Language")), /* @__PURE__ */ import_react20.default.createElement(
       LanguageSelector,
       {
         selectedLanguage,
@@ -42413,10 +42411,27 @@ var MicButton = ({
       "button",
       {
         className: "voice-chat-cancel-button",
-        onClick: () => setShowLanguageSelector(false)
+        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"}`
+        }
       },
       "Cancel"
-    ), /* @__PURE__ */ import_react20.default.createElement("button", { className: "voice-chat-confirm-button", onClick: handleLanguageConfirm }, "Start Voice Chat"))) : /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-main-button" }, /* @__PURE__ */ import_react20.default.createElement(
+    ), /* @__PURE__ */ import_react20.default.createElement(
+      "button",
+      {
+        className: "voice-chat-confirm-button",
+        onClick: handleLanguageConfirm,
+        style: {
+          background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+          color: "#fff",
+          border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`
+        }
+      },
+      "Start Voice Chat"
+    ))) : /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-main-button" }, showLanguageDropdown && /* @__PURE__ */ import_react20.default.createElement(
       LanguageSelector,
       {
         selectedLanguage,
@@ -42432,18 +42447,18 @@ var MicButton = ({
       {
         "data-testid": "ignore",
         onClick: handleMicClick,
-        disabled: micState === "thinking" || micState === "replying",
+        disabled: micState === "thinking" || micState === "replying" || isConnecting,
         style: getDynamicButtonStyle(),
         onMouseEnter: (e3) => {
           if (micState === "idle") {
             e3.currentTarget.style.transform = "scale(1.05)";
-            e3.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(59, 130, 246, 0.4)";
+            e3.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
           }
         },
         onMouseLeave: (e3) => {
           if (micState === "idle") {
             e3.currentTarget.style.transform = "scale(1)";
-            e3.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
+            e3.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
           }
         },
         "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
@@ -42510,7 +42525,7 @@ var MicButton = ({
       onClick: restoreChat,
       style: {
         position: "fixed",
-        zIndex: 5e5,
+        zIndex: 999,
         bottom: bottomSpace + buttonSize + 30,
         right: screenPosition === "bottom-right" ? 20 : void 0,
         left: screenPosition === "bottom-left" ? 20 : screenPosition === "bottom-center" ? "50%" : void 0,

package/dist/index.mjs

@@ -37,7 +37,7 @@ import {
   setWebRTCCallbacks,
   setWebRTCConfig,
   validateDynamicElements
-} from "./chunk-WBAYQSGF.mjs";
+} from "./chunk-JVYSFKMO.mjs";
 
 // node_modules/inline-style-parser/index.js
 var require_inline_style_parser = __commonJS({
@@ -1293,15 +1293,17 @@ var AnsyrProvider = ({
     };
   }, [navigationHandler]);
   useEffect(() => {
-    import("./webrtc-service-CJ34OHJN.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
+    import("./webrtc-service-KN5SEJKS.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
       setWebRTCCallbacks2({
         onNavigationCommand: (command) => {
-          if (command.data.actionType === "navigate" && command.data.routeName) {
+          const data = command.data ?? command;
+          if (!data?.actionType) return;
+          if (data.actionType === "navigate" && data.routeName) {
             if (navigationHandler) {
-              navigationHandler(command.data.routeName);
+              navigationHandler(data.routeName);
             }
-          } else if (command.data.actionType === "click" && command.data.elementId) {
-            console.log("AI intent: Click element", command.data.elementId);
+          } else if (data.actionType === "click" && data.elementId) {
+            console.log("AI intent: Click element", data.elementId);
           }
         },
         onConnectionStateChange: (state) => {
@@ -15809,8 +15811,9 @@ var ChatPopup = ({
             style: {
               padding: "10px 12px",
               borderRadius: 8,
-              border: "1px solid hsl(var(--voice-accent))",
-              background: "hsl(var(--voice-accent))",
+              border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`,
+              background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+              color: "#fff",
               fontSize: 12,
               fontWeight: 700,
               display: "flex",
@@ -15822,25 +15825,7 @@ var ChatPopup = ({
             "aria-label": muteState.isMuted ? "Unmute microphone" : "Mute microphone",
             title: muteState.isMuted ? "Unmute microphone" : "Mute microphone"
           },
-          muteState.isMuted ? /* @__PURE__ */ React10.createElement(
-            mic_off_default,
-            {
-              style: {
-                width: 16,
-                height: 16,
-                color: "hsl(var(--voice-user-text))"
-              }
-            }
-          ) : /* @__PURE__ */ React10.createElement(
-            mic_default,
-            {
-              style: {
-                width: 16,
-                height: 16,
-                color: "hsl(var(--voice-user-text))"
-              }
-            }
-          )
+          muteState.isMuted ? /* @__PURE__ */ React10.createElement(mic_off_default, { style: { width: 16, height: 16, color: "#fff" } }) : /* @__PURE__ */ React10.createElement(mic_default, { style: { width: 16, height: 16, color: "#fff" } })
         ),
         isConnected && onEndCall && /* @__PURE__ */ React10.createElement(
           "button",
@@ -15850,9 +15835,9 @@ var ChatPopup = ({
             style: {
               padding: "10px 12px",
               borderRadius: 8,
-              border: "1px solid hsl(var(--voice-accent))",
-              background: "hsl(var(--voice-accent))",
-              color: "hsl(var(--voice-user-text))",
+              border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`,
+              background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+              color: "#fff",
               fontSize: 12,
               fontWeight: 700,
               display: "flex",
@@ -15861,7 +15846,7 @@ var ChatPopup = ({
               cursor: "pointer"
             }
           },
-          /* @__PURE__ */ React10.createElement(phone_off_default, { style: { width: 16, height: 16 } })
+          /* @__PURE__ */ React10.createElement(phone_off_default, { style: { width: 16, height: 16, color: "#fff" } })
         )
       )
     )
@@ -15889,7 +15874,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       bottom: 0,
       width: "4px",
-      background: "linear-gradient(to bottom, #06b6d4, #3b82f6, #2563eb)",
+      background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.8
     },
@@ -15899,7 +15884,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       bottom: 0,
       width: "8px",
-      background: "linear-gradient(to bottom, #22d3ee, #3b82f6, #3b82f6)",
+      background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
       filter: "blur(4px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.6
@@ -15910,7 +15895,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       bottom: 0,
       width: "16px",
-      background: "linear-gradient(to bottom, #67e8f9, #3b82f6, #60a5fa)",
+      background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
       filter: "blur(12px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.4
@@ -15921,7 +15906,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       bottom: 0,
       width: "4px",
-      background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #2563eb)",
+      background: "linear-gradient(to bottom, #A39EEC, #8177ed, #6257d9)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.8
     },
@@ -15931,7 +15916,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       bottom: 0,
       width: "8px",
-      background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #3b82f6)",
+      background: "linear-gradient(to bottom, #c0bbfb, #8177ed, #8177ed)",
       filter: "blur(4px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.6
@@ -15942,7 +15927,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       bottom: 0,
       width: "16px",
-      background: "linear-gradient(to bottom, #f59e0b, #3b82f6, #60a5fa)",
+      background: "linear-gradient(to bottom, #dad7fe, #8177ed, #9a92f6)",
       filter: "blur(12px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       opacity: 0.4
@@ -15953,7 +15938,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       width: "32px",
       height: "32px",
-      background: "#f59e0b",
+      background: "#9a92f6",
       borderBottomRightRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -15965,7 +15950,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       width: "32px",
       height: "32px",
-      background: "#06b6d4",
+      background: "#A39EEC",
       borderBottomLeftRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -15977,7 +15962,7 @@ var BorderGlow = ({ isActive }) => {
       right: 0,
       width: "32px",
       height: "32px",
-      background: "#3b82f6",
+      background: "#8177ed",
       borderTopLeftRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -15989,7 +15974,7 @@ var BorderGlow = ({ isActive }) => {
       left: 0,
       width: "32px",
       height: "32px",
-      background: "#2563eb",
+      background: "#6257d9",
       borderTopRightRadius: "50%",
       filter: "blur(16px)",
       animation: "borderPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
@@ -18086,7 +18071,8 @@ var MicButton = ({
   showBorderGlow = false,
   language,
   defaultLanguage,
-  onLanguageChange
+  onLanguageChange,
+  showLanguageDropdown = true
 }) => {
   const { apiKey, appId } = useAnsyrContext();
   const [showBodyGlow, setShowBodyGlow] = useState12(false);
@@ -18245,6 +18231,7 @@ var MicButton = ({
   );
   const handleLanguageConfirm = useCallback6(() => {
     setShowLanguageSelector(false);
+    openChat();
     voiceConnect(`user_${Date.now()}`, apiKey, appId, selectedLanguage).then(() => {
       if (showBorderGlow) setShowBodyGlow(true);
       openChat();
@@ -18261,10 +18248,11 @@ var MicButton = ({
       }).catch((error) => {
       });
     } else {
-      if (!language && !defaultLanguage && !selectedLanguage) {
+      if (showLanguageDropdown && !language && !defaultLanguage && !selectedLanguage) {
         setShowLanguageSelector(true);
         return;
       }
+      openChat();
       voiceConnect(`user_${Date.now()}`, apiKey, appId, selectedLanguage).then(() => {
         if (showBorderGlow) setShowBodyGlow(true);
         openChat();
@@ -18283,6 +18271,7 @@ var MicButton = ({
     appId,
     language,
     selectedLanguage,
+    showLanguageDropdown,
     openChat,
     showBorderGlow,
     sendChatMessage,
@@ -18374,6 +18363,7 @@ var MicButton = ({
         };
     }
   };
+  const micButtonGradient = currentTheme === "dark" ? "radial-gradient(circle at 50% 0%, #9a92f6, #5447cd)" : "radial-gradient(circle at 50% 0%, #9a92f6, #6257d9)";
   const buttonStyles = {
     container: {
       position: "relative",
@@ -18389,7 +18379,7 @@ var MicButton = ({
       width: `${buttonSize}px`,
       height: `${buttonSize}px`,
       borderRadius: "50%",
-      background: "oklch(0.23 0.08 252.75)",
+      background: micButtonGradient,
       transition: "all 0.5s",
       border: "none",
       boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
@@ -18408,18 +18398,18 @@ var MicButton = ({
     switch (micState) {
       case "listening":
         baseStyle.transform = "scale(1.05)";
-        baseStyle.boxShadow = "0 25px 50px -12px rgba(59, 130, 246, 0.6)";
+        baseStyle.boxShadow = "0 25px 50px -12px rgba(129, 119, 237, 0.6)";
         break;
       case "thinking":
         baseStyle.transform = "scale(1.02)";
-        baseStyle.boxShadow = "0 20px 25px -5px rgba(196, 132, 252, 0.4)";
+        baseStyle.boxShadow = "0 20px 25px -5px rgba(154, 146, 246, 0.4)";
         break;
       case "replying":
         baseStyle.transform = "scale(1.02)";
-        baseStyle.boxShadow = "0 20px 25px -5px rgba(34, 211, 238, 0.4)";
+        baseStyle.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
         break;
       default:
-        baseStyle.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
+        baseStyle.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
         break;
     }
     return baseStyle;
@@ -18431,7 +18421,7 @@ var MicButton = ({
       className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
       style: { ...buttonStyles.container, ...getPositionStyle() }
     },
-    showLanguageSelector ? /* @__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(
+    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,
       {
         selectedLanguage,
@@ -18444,10 +18434,27 @@ var MicButton = ({
       "button",
       {
         className: "voice-chat-cancel-button",
-        onClick: () => setShowLanguageSelector(false)
+        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"}`
+        }
       },
       "Cancel"
-    ), /* @__PURE__ */ React15.createElement("button", { className: "voice-chat-confirm-button", onClick: handleLanguageConfirm }, "Start Voice Chat"))) : /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-main-button" }, /* @__PURE__ */ React15.createElement(
+    ), /* @__PURE__ */ React15.createElement(
+      "button",
+      {
+        className: "voice-chat-confirm-button",
+        onClick: handleLanguageConfirm,
+        style: {
+          background: currentTheme === "dark" ? "#8177ed" : "#6257d9",
+          color: "#fff",
+          border: `1px solid ${currentTheme === "dark" ? "#8177ed" : "#6257d9"}`
+        }
+      },
+      "Start Voice Chat"
+    ))) : /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-main-button" }, showLanguageDropdown && /* @__PURE__ */ React15.createElement(
       LanguageSelector,
       {
         selectedLanguage,
@@ -18463,18 +18470,18 @@ var MicButton = ({
       {
         "data-testid": "ignore",
         onClick: handleMicClick,
-        disabled: micState === "thinking" || micState === "replying",
+        disabled: micState === "thinking" || micState === "replying" || isConnecting,
         style: getDynamicButtonStyle(),
         onMouseEnter: (e2) => {
           if (micState === "idle") {
             e2.currentTarget.style.transform = "scale(1.05)";
-            e2.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(59, 130, 246, 0.4)";
+            e2.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
           }
         },
         onMouseLeave: (e2) => {
           if (micState === "idle") {
             e2.currentTarget.style.transform = "scale(1)";
-            e2.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(59, 130, 246, 0.3)";
+            e2.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
           }
         },
         "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
@@ -18541,7 +18548,7 @@ var MicButton = ({
       onClick: restoreChat,
       style: {
         position: "fixed",
-        zIndex: 5e5,
+        zIndex: 999,
         bottom: bottomSpace + buttonSize + 30,
         right: screenPosition === "bottom-right" ? 20 : void 0,
         left: screenPosition === "bottom-left" ? 20 : screenPosition === "bottom-center" ? "50%" : void 0,

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuekit-ai/react",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {