@cuekit-ai/react 1.6.8 → 1.6.10

package/dist/index.js

@@ -2524,8 +2524,8 @@ function requireEvents() {
       ReflectApply(handler, this, args);
     } else {
       var len = handler.length;
-      var listeners = arrayClone(handler, len);
-      for (var i2 = 0; i2 < len; ++i2) ReflectApply(listeners[i2], this, args);
+      var listeners2 = arrayClone(handler, len);
+      for (var i2 = 0; i2 < len; ++i2) ReflectApply(listeners2[i2], this, args);
     }
     return true;
   };
@@ -2641,7 +2641,7 @@ function requireEvents() {
   };
   EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
   EventEmitter.prototype.removeAllListeners = function removeAllListeners(type) {
-    var listeners, events2, i2;
+    var listeners2, events2, i2;
     events2 = this._events;
     if (events2 === void 0) return this;
     if (events2.removeListener === void 0) {
@@ -2667,12 +2667,12 @@ function requireEvents() {
       this._eventsCount = 0;
       return this;
     }
-    listeners = events2[type];
-    if (typeof listeners === "function") {
-      this.removeListener(type, listeners);
-    } else if (listeners !== void 0) {
-      for (i2 = listeners.length - 1; i2 >= 0; i2--) {
-        this.removeListener(type, listeners[i2]);
+    listeners2 = events2[type];
+    if (typeof listeners2 === "function") {
+      this.removeListener(type, listeners2);
+    } else if (listeners2 !== void 0) {
+      for (i2 = listeners2.length - 1; i2 >= 0; i2--) {
+        this.removeListener(type, listeners2[i2]);
       }
     }
     return this;
@@ -2685,7 +2685,7 @@ function requireEvents() {
     if (typeof evlistener === "function") return unwrap ? [evlistener.listener || evlistener] : [evlistener];
     return unwrap ? unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length);
   }
-  EventEmitter.prototype.listeners = function listeners(type) {
+  EventEmitter.prototype.listeners = function listeners2(type) {
     return _listeners(this, type, true);
   };
   EventEmitter.prototype.rawListeners = function rawListeners(type) {
@@ -23354,6 +23354,7 @@ __export(webrtc_service_exports, {
   getRoom: () => getRoom,
   getRoomName: () => getRoomName,
   isConnected: () => isConnected,
+  registerWebRTCCallbacks: () => registerWebRTCCallbacks,
   sendData: () => sendData,
   sendRuntimeData: () => sendRuntimeData,
   sendScreenStatus: () => sendScreenStatus,
@@ -23361,7 +23362,8 @@ __export(webrtc_service_exports, {
   sendUserCommand: () => sendUserCommand,
   setAudioContainer: () => setAudioContainer,
   setServerUrl: () => setServerUrl,
-  setWebRTCCallbacks: () => setWebRTCCallbacks
+  setWebRTCCallbacks: () => setWebRTCCallbacks,
+  unregisterWebRTCCallbacks: () => unregisterWebRTCCallbacks
 });
 function normalizeToNavigationCommand(message) {
   if (!message || typeof message !== "object") return message;
@@ -23377,16 +23379,21 @@ function setServerUrl(url) {
 function setAudioContainer(newAudioContainerRef) {
   audioContainerRef = newAudioContainerRef;
 }
+function registerWebRTCCallbacks(callback) {
+  listeners.add(callback);
+  console.log("\u{1F4E1} WebRTC listener registered. Total listeners:", listeners.size);
+}
+function unregisterWebRTCCallbacks(callback) {
+  listeners.delete(callback);
+  console.log("\u{1F4E1} WebRTC listener unregistered. Total listeners:", listeners.size);
+}
 function setWebRTCCallbacks(newCallbacks) {
-  console.log("\u{1F4E1} setWebRTCCallbacks called with:", {
-    hasOnNavigationCommand: !!newCallbacks.onNavigationCommand,
-    hasOnConnectionStateChange: !!newCallbacks.onConnectionStateChange,
-    hasOnParticipantUpdate: !!newCallbacks.onParticipantUpdate
-  });
-  callbacks = newCallbacks;
+  console.warn("\u26A0\uFE0F setWebRTCCallbacks is deprecated. Use registerWebRTCCallbacks instead.");
+  listeners.clear();
+  listeners.add(newCallbacks);
 }
 function getCurrentCallbacks() {
-  return callbacks;
+  return Array.from(listeners)[0] || {};
 }
 async function authenticate(userIdentity, apiKey, appId, language) {
   try {
@@ -23445,7 +23452,7 @@ async function connectToRoom(newLivekitUrl, newToken) {
 function setupEventListeners() {
   if (!room) return;
   room.on(RoomEvent.ConnectionStateChanged, (state) => {
-    callbacks.onConnectionStateChange?.(state);
+    listeners.forEach((l) => l.onConnectionStateChange?.(state));
     if (state === ConnectionState.Connected) {
       setWebRTCConnectionState({ isConnected: true, isConnecting: false });
     } else if (state === ConnectionState.Disconnected) {
@@ -23466,11 +23473,17 @@ function setupEventListeners() {
           audioContainerRef.current.appendChild(element3);
           if (element3 instanceof HTMLAudioElement) {
             const trackId = track.sid || `track_${Date.now()}_${Math.random()}`;
-            callbacks.onAISpeechStart?.(trackId);
+            listeners.forEach((l) => l.onAISpeechStart?.(trackId));
             element3.play().catch((error) => {
             });
-            element3.addEventListener("ended", () => callbacks.onAISpeechEnd?.(trackId));
-            element3.addEventListener("pause", () => callbacks.onAISpeechEnd?.(trackId));
+            element3.addEventListener(
+              "ended",
+              () => listeners.forEach((l) => l.onAISpeechEnd?.(trackId))
+            );
+            element3.addEventListener(
+              "pause",
+              () => listeners.forEach((l) => l.onAISpeechEnd?.(trackId))
+            );
           }
         }
       }
@@ -23486,13 +23499,14 @@ function setupEventListeners() {
       const jsonPart = parts[1];
       console.log("\u{1F4E1} WebRTC Pipe-separated message:", { textPart, jsonPart });
       if (textPart) {
-        callbacks.onNavigationCommand?.({ type: "speech_text", data: textPart });
+        listeners.forEach((l) => l.onNavigationCommand?.({ type: "speech_text", data: textPart }));
       }
       if (jsonPart) {
         try {
           const message = JSON.parse(jsonPart);
           console.log("\u{1F4E1} WebRTC Parsed JSON message:", message);
-          callbacks.onNavigationCommand?.(normalizeToNavigationCommand(message));
+          const normalized = normalizeToNavigationCommand(message);
+          listeners.forEach((l) => l.onNavigationCommand?.(normalized));
         } catch (error) {
           console.log("\u{1F4E1} WebRTC JSON parse error for JSON part:", error, "JSON part:", jsonPart);
         }
@@ -23501,11 +23515,12 @@ function setupEventListeners() {
       try {
         const message = JSON.parse(decodedPayload);
         console.log("\u{1F4E1} WebRTC Parsed message:", message);
-        callbacks.onNavigationCommand?.(normalizeToNavigationCommand(message));
+        const normalized = normalizeToNavigationCommand(message);
+        listeners.forEach((l) => l.onNavigationCommand?.(normalized));
       } catch (error) {
         console.log("\u{1F4E1} WebRTC JSON parse error:", error, "Raw payload:", decodedPayload);
         const message = decodedPayload;
-        callbacks.onNavigationCommand?.({ type: "raw_text", data: message });
+        listeners.forEach((l) => l.onNavigationCommand?.({ type: "raw_text", data: message }));
       }
     }
   }).on(RoomEvent.Disconnected, () => {
@@ -23519,7 +23534,7 @@ function updateParticipantsList() {
     ...Array.from(room.remoteParticipants.values()).map((p) => p.identity)
   ];
   setWebRTCConnectionState({ participants });
-  callbacks.onParticipantUpdate?.(participants);
+  listeners.forEach((l) => l.onParticipantUpdate?.(participants));
 }
 async function sendData(data, reliable = true) {
   if (!room) throw new Error("Not connected to room");
@@ -23624,7 +23639,7 @@ async function disconnectFromRoom() {
 function getRoom() {
   return room;
 }
-var room, reconnectTimeout, serverUrl, callbacks, audioContainerRef, livekitUrl, token, roomName;
+var room, reconnectTimeout, serverUrl, listeners, audioContainerRef, livekitUrl, token, roomName;
 var init_webrtc_service = __esm({
   "src/utils/webrtc-service.ts"() {
     "use strict";
@@ -23636,7 +23651,7 @@ var init_webrtc_service = __esm({
     room = null;
     reconnectTimeout = null;
     serverUrl = WEBRTC_BACKEND_SERVER_URL || "https://api-webrtc.ansyr.ai";
-    callbacks = {};
+    listeners = /* @__PURE__ */ new Set();
     audioContainerRef = null;
     livekitUrl = null;
     token = null;
@@ -24820,6 +24835,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 r3 = 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(r3, g, b2), min = Math.min(r3, g, b2);
+  let h2 = 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 r3:
+        h2 = (g - b2) / d + (g < b2 ? 6 : 0);
+        break;
+      case g:
+        h2 = (b2 - r3) / d + 2;
+        break;
+      case b2:
+        h2 = (r3 - g) / d + 4;
+        break;
+    }
+    h2 /= 6;
+  }
+  const res = {
+    h: Math.round(h2 * 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/providers/ansyr-provider.tsx
 init_navigation();
 init_intent_store();
@@ -24865,45 +24968,6 @@ 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 r3 = 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(r3, g, b2), min = Math.min(r3, g, b2);
-  let h2 = 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 r3:
-        h2 = (g - b2) / d + (g < b2 ? 6 : 0);
-        break;
-      case g:
-        h2 = (b2 - r3) / d + 2;
-        break;
-      case b2:
-        h2 = (r3 - g) / d + 4;
-        break;
-    }
-    h2 /= 6;
-  }
-  const res = {
-    h: Math.round(h2 * 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 = {
@@ -24958,47 +25022,7 @@ var AnsyrProvider = ({
   emptyStateMessage
 }) => {
   const [internalDeviceId, setInternalDeviceId] = (0, import_react.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");
   (0, import_react.useEffect)(() => {
     InitCuekit({ apiKey, appId });
   }, [apiKey, appId]);
@@ -25018,31 +25042,43 @@ var AnsyrProvider = ({
     };
   }, [navigationHandler2]);
   (0, import_react.useEffect)(() => {
-    Promise.resolve().then(() => (init_webrtc_service(), webrtc_service_exports)).then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
-      setWebRTCCallbacks2({
-        onNavigationCommand: (command) => {
-          const data = command.data ?? command;
-          if (!data?.actionType) return;
-          if (data.actionType === "navigate" && data.routeName) {
-            if (navigationHandler2) {
-              navigationHandler2(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);
+    let cleanup = null;
+    Promise.resolve().then(() => (init_webrtc_service(), webrtc_service_exports)).then(
+      ({ registerWebRTCCallbacks: registerWebRTCCallbacks2, unregisterWebRTCCallbacks: unregisterWebRTCCallbacks2 }) => {
+        const listeners2 = {
+          onNavigationCommand: (command) => {
+            const data = command.data ?? command;
+            if (!data?.actionType) return;
+            if (data.actionType === "navigate" && data.routeName) {
+              if (navigationHandler2) {
+                navigationHandler2(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);
+            }
           }
-        }
-      });
-    });
+        };
+        registerWebRTCCallbacks2(listeners2);
+        cleanup = () => {
+          unregisterWebRTCCallbacks2(listeners2);
+        };
+      }
+    );
+    return () => {
+      if (cleanup) {
+        cleanup();
+      }
+    };
   }, [onConnectionStateChange, onParticipantUpdate, navigationHandler2]);
   (0, import_react.useEffect)(() => {
     const updateGlobalStore = (id) => {
@@ -25133,6 +25169,7 @@ var useWebRTC = (options) => {
   const [participants, setParticipants] = (0, import_react2.useState)([]);
   const [room2, setRoom] = (0, import_react2.useState)(null);
   const [error, setError] = (0, import_react2.useState)(null);
+  const listenersRef = (0, import_react2.useRef)(null);
   const audioContainerRef2 = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
     setAudioContainer(audioContainerRef2);
@@ -25148,15 +25185,20 @@ var useWebRTC = (options) => {
       setParticipants(participants2);
       options?.onParticipantUpdate?.(participants2);
     };
-    setWebRTCCallbacks({
+    const listeners2 = {
       onConnectionStateChange: handleConnectionStateChange,
       onParticipantUpdate: handleParticipantUpdate,
       onNavigationCommand: options?.onNavigationCommand,
       onAISpeechStart: options?.onAISpeechStart,
       onAISpeechEnd: options?.onAISpeechEnd
-    });
+    };
+    listenersRef.current = listeners2;
+    registerWebRTCCallbacks(listeners2);
     return () => {
-      setWebRTCCallbacks({});
+      if (listenersRef.current) {
+        unregisterWebRTCCallbacks(listenersRef.current);
+        listenersRef.current = null;
+      }
     };
   }, [
     options?.onConnectionStateChange,
@@ -25218,30 +25260,85 @@ var useCuekit = (options) => {
   const currentUserMessageRef = (0, import_react3.useRef)(null);
   const currentAIMessageRef = (0, import_react3.useRef)(null);
   const handleMessageChunk = (0, import_react3.useCallback)((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 = (0, import_react3.useCallback)(() => {
@@ -25267,12 +25364,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":
@@ -38921,38 +39015,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,
@@ -39143,8 +39205,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",
@@ -39588,8 +39650,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,
@@ -39612,8 +39674,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,
@@ -39651,17 +39713,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
@@ -39670,9 +39729,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
@@ -39683,7 +39740,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
     },
@@ -39692,8 +39749,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
@@ -39703,8 +39759,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
@@ -39715,7 +39770,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",
@@ -39727,7 +39782,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",
@@ -39739,7 +39794,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",
@@ -39751,7 +39806,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",
@@ -42150,47 +42205,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 = {
@@ -42227,18 +42242,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;
@@ -42251,7 +42266,7 @@ var MicButton = ({
       style: {
         ...buttonStyles.container,
         ...getPositionStyle(),
-        ...generateThemeStyles2(theme, currentTheme)
+        ...generateThemeStyles(theme, currentTheme)
       }
     },
     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(
@@ -42269,9 +42284,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"
@@ -42281,9 +42296,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"
@@ -42308,13 +42323,13 @@ var MicButton = ({
         onMouseEnter: (e3) => {
           if (micState === "idle") {
             e3.currentTarget.style.transform = "scale(1.05)";
-            e3.currentTarget.style.boxShadow = "0 20px 25px -5px rgba(129, 119, 237, 0.4)";
+            e3.currentTarget.style.boxShadow = "0 20px 25px -5px hsla(var(--voice-accent) / 0.4)";
           }
         },
         onMouseLeave: (e3) => {
           if (micState === "idle") {
             e3.currentTarget.style.transform = "scale(1)";
-            e3.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(129, 119, 237, 0.3)";
+            e3.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"