@cuekit-ai/react 1.6.8 → 1.6.10

package/dist/index.mjs

@@ -23,6 +23,7 @@ import {
   getRoom,
   getRoomName,
   onStateChange,
+  registerWebRTCCallbacks,
   resolveRoutePath,
   sendData,
   sendRuntimeData,
@@ -34,10 +35,10 @@ import {
   setAudioContainer,
   setNavigationHandler,
   setServerUrl,
-  setWebRTCCallbacks,
   setWebRTCConfig,
+  unregisterWebRTCCallbacks,
   validateDynamicElements
-} from "./chunk-ZP7AXODE.mjs";
+} from "./chunk-XVA5MZMJ.mjs";
 
 // node_modules/inline-style-parser/index.js
 var require_inline_style_parser = __commonJS({
@@ -1183,45 +1184,6 @@ function InitCuekit(config) {
   setWebRTCConfig(webRTCConfig);
 }
 
-// src/utils/webrtc-config.ts
-var configureWebRTCServer = (config) => {
-  if (!config.apiKey) {
-    throw new Error("API key is required for WebRTC configuration");
-  }
-  const finalConfig = {
-    serverUrl: WEBRTC_BACKEND_SERVER_URL,
-    apiKey: config.apiKey,
-    roomName: config.roomName,
-    participantName: config.participantName,
-    tokenTtlSeconds: config.tokenTtlSeconds
-  };
-  setServerUrl(finalConfig.serverUrl);
-  if (typeof window !== "undefined") {
-    ;
-    window.CuekitWebRTCConfig = finalConfig;
-  }
-};
-var getWebRTCServerConfig = () => {
-  if (typeof window !== "undefined") {
-    return window.CuekitWebRTCConfig || null;
-  }
-  return null;
-};
-var initWebRTCWithDeployedBackend = (apiKey, customConfig) => {
-  const config = {
-    serverUrl: WEBRTC_BACKEND_SERVER_URL,
-    apiKey,
-    roomName: customConfig?.roomName || "default-room",
-    participantName: customConfig?.participantName || "user",
-    tokenTtlSeconds: customConfig?.tokenTtlSeconds || 7200
-  };
-  configureWebRTCServer(config);
-  return config;
-};
-var initWebRTC = (apiKey) => {
-  return initWebRTCWithDeployedBackend(apiKey);
-};
-
 // src/utils/colors.ts
 function hexToHSL(hex) {
   hex = hex.replace(/^#/, "");
@@ -1261,6 +1223,94 @@ function hexToHSL(hex) {
   };
 }
 
+// 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) {
+    throw new Error("API key is required for WebRTC configuration");
+  }
+  const finalConfig = {
+    serverUrl: WEBRTC_BACKEND_SERVER_URL,
+    apiKey: config.apiKey,
+    roomName: config.roomName,
+    participantName: config.participantName,
+    tokenTtlSeconds: config.tokenTtlSeconds
+  };
+  setServerUrl(finalConfig.serverUrl);
+  if (typeof window !== "undefined") {
+    ;
+    window.CuekitWebRTCConfig = finalConfig;
+  }
+};
+var getWebRTCServerConfig = () => {
+  if (typeof window !== "undefined") {
+    return window.CuekitWebRTCConfig || null;
+  }
+  return null;
+};
+var initWebRTCWithDeployedBackend = (apiKey, customConfig) => {
+  const config = {
+    serverUrl: WEBRTC_BACKEND_SERVER_URL,
+    apiKey,
+    roomName: customConfig?.roomName || "default-room",
+    participantName: customConfig?.participantName || "user",
+    tokenTtlSeconds: customConfig?.tokenTtlSeconds || 7200
+  };
+  configureWebRTCServer(config);
+  return config;
+};
+var initWebRTC = (apiKey) => {
+  return initWebRTCWithDeployedBackend(apiKey);
+};
+
 // src/providers/ansyr-provider.tsx
 if (typeof window !== "undefined" && !globalThis.AnsyrStore) {
   globalThis.AnsyrStore = {
@@ -1315,47 +1365,7 @@ var AnsyrProvider = ({
   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);
+  const themeStyles = generateThemeStyles(theme, "dark");
   useEffect(() => {
     InitCuekit({ apiKey, appId });
   }, [apiKey, appId]);
@@ -1375,31 +1385,43 @@ var AnsyrProvider = ({
     };
   }, [navigationHandler]);
   useEffect(() => {
-    import("./webrtc-service-IMARTHNM.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
-      setWebRTCCallbacks2({
-        onNavigationCommand: (command) => {
-          const data = command.data ?? command;
-          if (!data?.actionType) return;
-          if (data.actionType === "navigate" && data.routeName) {
-            if (navigationHandler) {
-              navigationHandler(data.routeName);
+    let cleanup = null;
+    import("./webrtc-service-XS2JQUBW.mjs").then(
+      ({ registerWebRTCCallbacks: registerWebRTCCallbacks2, unregisterWebRTCCallbacks: unregisterWebRTCCallbacks2 }) => {
+        const listeners = {
+          onNavigationCommand: (command) => {
+            const data = command.data ?? command;
+            if (!data?.actionType) return;
+            if (data.actionType === "navigate" && data.routeName) {
+              if (navigationHandler) {
+                navigationHandler(data.routeName);
+              }
+            } else if (data.actionType === "click" && data.elementId) {
+              console.log("AI intent: Click element", data.elementId);
+            }
+          },
+          onConnectionStateChange: (state) => {
+            if (onConnectionStateChange) {
+              onConnectionStateChange(state);
+            }
+          },
+          onParticipantUpdate: (participants) => {
+            if (onParticipantUpdate) {
+              onParticipantUpdate(participants);
             }
-          } else if (data.actionType === "click" && data.elementId) {
-            console.log("AI intent: Click element", data.elementId);
-          }
-        },
-        onConnectionStateChange: (state) => {
-          if (onConnectionStateChange) {
-            onConnectionStateChange(state);
-          }
-        },
-        onParticipantUpdate: (participants) => {
-          if (onParticipantUpdate) {
-            onParticipantUpdate(participants);
           }
-        }
-      });
-    });
+        };
+        registerWebRTCCallbacks2(listeners);
+        cleanup = () => {
+          unregisterWebRTCCallbacks2(listeners);
+        };
+      }
+    );
+    return () => {
+      if (cleanup) {
+        cleanup();
+      }
+    };
   }, [onConnectionStateChange, onParticipantUpdate, navigationHandler]);
   useEffect(() => {
     const updateGlobalStore = (id) => {
@@ -1486,6 +1508,7 @@ var useWebRTC = (options) => {
   const [participants, setParticipants] = useState2([]);
   const [room, setRoom] = useState2(null);
   const [error, setError] = useState2(null);
+  const listenersRef = useRef(null);
   const audioContainerRef = useRef(null);
   useEffect2(() => {
     setAudioContainer(audioContainerRef);
@@ -1501,15 +1524,20 @@ var useWebRTC = (options) => {
       setParticipants(participants2);
       options?.onParticipantUpdate?.(participants2);
     };
-    setWebRTCCallbacks({
+    const listeners = {
       onConnectionStateChange: handleConnectionStateChange,
       onParticipantUpdate: handleParticipantUpdate,
       onNavigationCommand: options?.onNavigationCommand,
       onAISpeechStart: options?.onAISpeechStart,
       onAISpeechEnd: options?.onAISpeechEnd
-    });
+    };
+    listenersRef.current = listeners;
+    registerWebRTCCallbacks(listeners);
     return () => {
-      setWebRTCCallbacks({});
+      if (listenersRef.current) {
+        unregisterWebRTCCallbacks(listenersRef.current);
+        listenersRef.current = null;
+      }
     };
   }, [
     options?.onConnectionStateChange,
@@ -1569,30 +1597,85 @@ var useCuekit = (options) => {
   const currentUserMessageRef = useRef2(null);
   const currentAIMessageRef = useRef2(null);
   const handleMessageChunk = useCallback2((text7, role, isFinal) => {
-    const currentMessageRef = role === "user" ? currentUserMessageRef : currentAIMessageRef;
-    const messageToUpdate = currentMessageRef.current;
-    if (!messageToUpdate && !text7 && isFinal) {
-      return;
-    }
-    if (messageToUpdate) {
-      const updatedMessage = { ...messageToUpdate, text: messageToUpdate.text + text7, isFinal };
-      currentMessageRef.current = updatedMessage;
-      setMessages(
-        (prev) => prev.map((msg) => msg.id === messageToUpdate.id ? updatedMessage : msg)
-      );
-    } else {
-      const newMessage = {
-        id: `${role}-${Date.now()}`,
+    const activeRef = role === "user" ? currentUserMessageRef : currentAIMessageRef;
+    console.log(`\u{1F50D} handleMessageChunk called:`, {
+      role,
+      text: text7.substring(0, 50) + (text7.length > 50 ? "..." : ""),
+      textLength: text7.length,
+      isFinal,
+      hasExistingMessage: !!activeRef.current,
+      existingMessageId: activeRef.current?.id
+    });
+    const messageToUpdate = activeRef.current;
+    let updatedMessage = null;
+    setMessages((prev) => {
+      console.log(`\u{1F50D} setMessages callback:`, {
         role,
-        text: text7,
-        isFinal,
-        timestamp: (/* @__PURE__ */ new Date()).toISOString()
-      };
-      currentMessageRef.current = newMessage;
-      setMessages((prev) => [...prev, newMessage]);
+        messageToUpdate: messageToUpdate ? { id: messageToUpdate.id, textLength: messageToUpdate.text.length } : null,
+        prevMessagesCount: prev.length,
+        prevMessages: prev.map((m) => ({
+          id: m.id,
+          role: m.role,
+          textLength: m.text.length,
+          isFinal: m.isFinal
+        }))
+      });
+      if (!messageToUpdate && !text7 && isFinal) {
+        console.log(`\u{1F50D} Skipping empty final chunk (no existing message)`);
+        return prev;
+      }
+      if (messageToUpdate) {
+        const existsInState = prev.some((msg) => msg.id === messageToUpdate.id);
+        const newUpdatedMessage = { ...messageToUpdate, text: messageToUpdate.text + text7, isFinal };
+        updatedMessage = newUpdatedMessage;
+        if (!existsInState) {
+          console.log(`\u{1F50D} \u26A0\uFE0F Message ${messageToUpdate.id} not in state yet, adding it:`, {
+            id: newUpdatedMessage.id,
+            textLength: newUpdatedMessage.text.length,
+            isFinal: newUpdatedMessage.isFinal
+          });
+          return [...prev, newUpdatedMessage];
+        } else {
+          console.log(`\u{1F50D} Updating existing ${role} message:`, {
+            id: newUpdatedMessage.id,
+            newTextLength: newUpdatedMessage.text.length,
+            isFinal: newUpdatedMessage.isFinal
+          });
+          return prev.map((msg) => msg.id === messageToUpdate.id ? newUpdatedMessage : msg);
+        }
+      } else {
+        const newMessage = {
+          id: `${role}-${Date.now()}`,
+          role,
+          text: text7,
+          isFinal,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        updatedMessage = newMessage;
+        console.log(`\u{1F50D} Creating NEW ${role} message:`, {
+          id: newMessage.id,
+          textLength: newMessage.text.length,
+          isFinal: newMessage.isFinal
+        });
+        const newArray = [...prev, newMessage];
+        console.log(
+          `\u{1F50D} New messages array:`,
+          newArray.map((m) => ({
+            id: m.id,
+            role: m.role,
+            textLength: m.text.length,
+            isFinal: m.isFinal
+          }))
+        );
+        return newArray;
+      }
+    });
+    if (updatedMessage && !isFinal) {
+      activeRef.current = updatedMessage;
     }
     if (isFinal) {
-      currentMessageRef.current = null;
+      console.log(`\u{1F50D} Clearing ${role} ref (message finalized)`);
+      activeRef.current = null;
     }
   }, []);
   const handleAIInterruption = useCallback2(() => {
@@ -1618,12 +1701,9 @@ var useCuekit = (options) => {
   const handleNavigationCommand = (event) => {
     console.log(`\u2B07\uFE0F Received event from backend: ${event.type}`, event);
     switch (event.type) {
-      case "speech_text": {
-        console.log("\u{1F5E3}\uFE0F AI Speech text:", event.data);
-        break;
-      }
+      // raw_text is a redundant "reliability packet" - we already process ai_speech_chunk
       case "raw_text": {
-        console.log("\u{1F4DD} Raw text message:", event.data);
+        console.log("\u{1F4DD} Raw text message (ignored, using ai_speech_chunk instead):", event.data);
         break;
       }
       case "user_speech_chunk":
@@ -15272,38 +15352,6 @@ 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,
@@ -15494,8 +15542,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",
@@ -15939,8 +15987,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,
@@ -15963,8 +16011,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,
@@ -16002,17 +16050,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
@@ -16021,9 +16066,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
@@ -16034,7 +16077,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
     },
@@ -16043,8 +16086,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
@@ -16054,8 +16096,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
@@ -16066,7 +16107,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",
@@ -16078,7 +16119,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",
@@ -16090,7 +16131,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",
@@ -16102,7 +16143,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",
@@ -18492,47 +18533,7 @@ var MicButton = ({
     }
   };
   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;
+    return "radial-gradient(circle at 50% 0%, hsl(var(--voice-accent-vibrant)), hsl(var(--voice-accent-dark)))";
   };
   const micButtonGradient = generateMicButtonGradient();
   const buttonStyles = {
@@ -18569,18 +18570,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;
@@ -18593,7 +18594,7 @@ var MicButton = ({
       style: {
         ...buttonStyles.container,
         ...getPositionStyle(),
-        ...generateThemeStyles2(theme, currentTheme)
+        ...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(
@@ -18611,9 +18612,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"
@@ -18623,9 +18624,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"
@@ -18650,13 +18651,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"