@cuekit-ai/react 1.4.0 → 1.6.0

package/dist/index.mjs

@@ -37,7 +37,7 @@ import {
   setWebRTCCallbacks,
   setWebRTCConfig,
   validateDynamicElements
-} from "./chunk-VQ6DNY3R.mjs";
+} from "./chunk-24V3WQXJ.mjs";
 
 // node_modules/inline-style-parser/index.js
 var require_inline_style_parser = __commonJS({
@@ -74,17 +74,17 @@ var require_inline_style_parser = __commonJS({
       function position3() {
         var start2 = { line: lineno, column };
         return function(node2) {
-          node2.position = new Position(start2);
+          node2.position = new Position2(start2);
           whitespace2();
           return node2;
         };
       }
-      function Position(start2) {
+      function Position2(start2) {
         this.start = start2;
         this.end = { line: lineno, column };
         this.source = options.source;
       }
-      Position.prototype.content = style;
+      Position2.prototype.content = style;
       var errorsList = [];
       function error(msg) {
         var err = new Error(
@@ -389,7 +389,7 @@ var require_core = __commonJS({
         root4.CryptoJS = factory();
       }
     })(exports, function() {
-      var CryptoJS = CryptoJS || function(Math2, undefined2) {
+      var CryptoJS = CryptoJS || (function(Math2, undefined2) {
         var crypto;
         if (typeof window !== "undefined" && window.crypto) {
           crypto = window.crypto;
@@ -429,7 +429,7 @@ var require_core = __commonJS({
           }
           throw new Error("Native crypto module could not be used to get secure random number.");
         };
-        var create2 = Object.create || /* @__PURE__ */ function() {
+        var create2 = Object.create || /* @__PURE__ */ (function() {
           function F2() {
           }
           return function(obj) {
@@ -439,10 +439,10 @@ var require_core = __commonJS({
             F2.prototype = null;
             return subtype;
           };
-        }();
+        })();
         var C = {};
         var C_lib = C.lib = {};
-        var Base = C_lib.Base = /* @__PURE__ */ function() {
+        var Base = C_lib.Base = /* @__PURE__ */ (function() {
           return {
             /**
              * Creates a new object that inherits from this object.
@@ -541,7 +541,7 @@ var require_core = __commonJS({
               return this.init.prototype.extend(this);
             }
           };
-        }();
+        })();
         var WordArray = C_lib.WordArray = Base.extend({
           /**
            * Initializes a newly created word array.
@@ -979,7 +979,7 @@ var require_core = __commonJS({
         });
         var C_algo = C.algo = {};
         return C;
-      }(Math);
+      })(Math);
       return CryptoJS;
     });
   }
@@ -1165,7 +1165,7 @@ var require_md5 = __commonJS({
   }
 });
 
-// src/providers/cuekit-provider.tsx
+// src/providers/ansyr-provider.tsx
 import React, { createContext, useContext, useEffect, useState } from "react";
 
 // src/core/init.ts
@@ -1222,9 +1222,9 @@ var initWebRTC = (apiKey) => {
   return initWebRTCWithDeployedBackend(apiKey);
 };
 
-// src/providers/cuekit-provider.tsx
-if (typeof window !== "undefined" && !globalThis.CuekitStore) {
-  globalThis.CuekitStore = {
+// src/providers/ansyr-provider.tsx
+if (typeof window !== "undefined" && !globalThis.AnsyrStore) {
+  globalThis.AnsyrStore = {
     intent: null,
     lastText: "",
     lastClickedLabel: "",
@@ -1232,38 +1232,46 @@ if (typeof window !== "undefined" && !globalThis.CuekitStore) {
     appId: void 0,
     deviceId: void 0,
     update(data) {
-      Object.assign(globalThis.CuekitStore, data);
+      Object.assign(globalThis.AnsyrStore, data);
     }
   };
 }
-var QubeContext = createContext({
+var AnsyrContext = createContext({
   apiKey: "",
-  appId: ""
+  appId: "",
+  title: "ansyr.ai",
+  showLogo: true,
+  showAIIcon: true,
+  showUserIcon: true
 });
-var useQubeContext = () => useContext(QubeContext);
+var useAnsyrContext = () => useContext(AnsyrContext);
 var getUniqueId = () => {
   if (typeof window === "undefined") {
     return "server-" + Date.now().toString(36);
   }
   try {
-    let id = localStorage.getItem("cuekit_device_id");
+    let id = localStorage.getItem("ansyr_device_id");
     if (!id) {
       id = Date.now().toString(36) + Math.random().toString(36).substring(2);
-      localStorage.setItem("cuekit_device_id", id);
+      localStorage.setItem("ansyr_device_id", id);
     }
     return id;
   } catch {
     return "anon-" + Date.now().toString(36);
   }
 };
-var CuekitProvider = ({
+var AnsyrProvider = ({
   apiKey,
   deviceId = "",
   appId,
   children,
   navigationHandler,
   onConnectionStateChange,
-  onParticipantUpdate
+  onParticipantUpdate,
+  title = "ansyr.ai",
+  showLogo = true,
+  showAIIcon = true,
+  showUserIcon = true
 }) => {
   const [internalDeviceId, setInternalDeviceId] = useState(deviceId);
   useEffect(() => {
@@ -1285,7 +1293,7 @@ var CuekitProvider = ({
     };
   }, [navigationHandler]);
   useEffect(() => {
-    import("./webrtc-service-3TOBGQF7.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
+    import("./webrtc-service-N76TYFI4.mjs").then(({ setWebRTCCallbacks: setWebRTCCallbacks2 }) => {
       setWebRTCCallbacks2({
         onNavigationCommand: (command) => {
           if (command.data.actionType === "navigate" && command.data.routeName) {
@@ -1311,8 +1319,8 @@ var CuekitProvider = ({
   }, [onConnectionStateChange, onParticipantUpdate, navigationHandler]);
   useEffect(() => {
     const updateGlobalStore = (id) => {
-      if (typeof window !== "undefined" && globalThis.CuekitStore) {
-        globalThis.CuekitStore.update({
+      if (typeof window !== "undefined" && globalThis.AnsyrStore) {
+        globalThis.AnsyrStore.update({
           apiKey,
           appId,
           deviceId: id
@@ -1362,11 +1370,15 @@ var CuekitProvider = ({
     };
   }, [apiKey, appId, internalDeviceId]);
   return /* @__PURE__ */ React.createElement(
-    QubeContext.Provider,
+    AnsyrContext.Provider,
     {
       value: {
         apiKey,
-        appId
+        appId,
+        title,
+        showLogo,
+        showAIIcon,
+        showUserIcon
       }
     },
     children
@@ -1374,7 +1386,7 @@ var CuekitProvider = ({
 };
 
 // src/components/mic-button.tsx
-import React11, { useState as useState10, useEffect as useEffect10, useCallback as useCallback5, useRef as useRef7 } from "react";
+import React15, { useState as useState12, useEffect as useEffect12, useCallback as useCallback6, useRef as useRef10 } from "react";
 
 // src/hooks/use-cuekit.ts
 import { useState as useState3, useCallback as useCallback2, useRef as useRef2 } from "react";
@@ -1420,22 +1432,25 @@ var useWebRTC = (options) => {
     options?.onAISpeechStart,
     options?.onAISpeechEnd
   ]);
-  const connect = useCallback(async (identity, apiKey, appId) => {
-    try {
-      setError(null);
-      setIsConnecting(true);
-      const authData = await authenticate(identity, apiKey || _apiKey, appId || _appId);
-      await connectToRoom(authData.livekit_url, authData.livekit_token);
-      setRoom(getRoom());
-      setIsConnected(true);
-      return authData;
-    } catch (err) {
-      setError(err.message || "Failed to connect");
-      setIsConnected(false);
-    } finally {
-      setIsConnecting(false);
-    }
-  }, []);
+  const connect = useCallback(
+    async (identity, apiKey, appId, language) => {
+      try {
+        setError(null);
+        setIsConnecting(true);
+        const authData = await authenticate(identity, apiKey || _apiKey, appId || _appId, language);
+        await connectToRoom(authData.livekit_url, authData.livekit_token);
+        setRoom(getRoom());
+        setIsConnected(true);
+        return authData;
+      } catch (err) {
+        setError(err.message || "Failed to connect");
+        setIsConnected(false);
+      } finally {
+        setIsConnecting(false);
+      }
+    },
+    []
+  );
   const disconnect = useCallback(async () => {
     await disconnectFromRoom();
     setIsConnected(false);
@@ -1513,6 +1528,7 @@ var useCuekit = (options) => {
   }, []);
   const [micState, setMicState] = useState3("idle");
   const [status, setStatus] = useState3("");
+  const [muteState, setMuteState] = useState3({ isMuted: false, canMute: false });
   const handleNavigationCommand = (event) => {
     console.log(`\u2B07\uFE0F Received event from backend: ${event.type}`, event);
     switch (event.type) {
@@ -1577,6 +1593,22 @@ var useCuekit = (options) => {
         }
         break;
       }
+      case "chat": {
+        const chatData = event.data;
+        console.log("\u{1F4AC} Chat message received:", chatData);
+        if (chatData.message && chatData.sender === "ai") {
+          const newMessage = {
+            id: `ai-${Date.now()}`,
+            role: "ai",
+            text: chatData.message,
+            isFinal: true,
+            timestamp: new Date(chatData.timestamp || Date.now()).toISOString()
+          };
+          setMessages((prev) => [...prev, newMessage]);
+          setMicState("listening");
+        }
+        break;
+      }
       case "request_runtime_data": {
         console.log("\u{1F9E0} Requesting runtime data");
         sendRuntimeData();
@@ -1609,17 +1641,21 @@ var useCuekit = (options) => {
     switch (state) {
       case "connecting":
         setStatus("Connecting...");
+        setMuteState((prev) => ({ ...prev, canMute: false }));
         break;
       case "connected":
         setStatus("");
         setMicState("listening");
+        setMuteState((prev) => ({ ...prev, canMute: true }));
         break;
       case "disconnected":
         setStatus("Disconnected");
         setMicState("idle");
+        setMuteState({ isMuted: false, canMute: false });
         break;
       case "reconnecting":
         setStatus("Reconnecting...");
+        setMuteState((prev) => ({ ...prev, canMute: false }));
         break;
       default:
         break;
@@ -1632,8 +1668,8 @@ var useCuekit = (options) => {
     onNavigationCommand: handleNavigationCommand
   });
   const connect = useCallback2(
-    async (identity, apiKey, appId) => {
-      await webrtc.connect(identity, apiKey, appId);
+    async (identity, apiKey, appId, language) => {
+      await webrtc.connect(identity, apiKey, appId, language);
     },
     [webrtc]
   );
@@ -1641,7 +1677,88 @@ var useCuekit = (options) => {
     await webrtc.disconnect();
     clearMessages();
     setMicState("idle");
+    setMuteState({ isMuted: false, canMute: false });
   }, [webrtc, clearMessages]);
+  const toggleMute = useCallback2(async () => {
+    if (!webrtc.isConnected) return;
+    try {
+      const room = webrtc.room;
+      if (!room) return;
+      const localParticipant = room.localParticipant;
+      const audioTrack = localParticipant.getTrackPublication(Track.Source.Microphone)?.track;
+      if (audioTrack) {
+        if (muteState.isMuted) {
+          await audioTrack.unmute();
+          setMuteState((prev) => ({ ...prev, isMuted: false }));
+        } else {
+          await audioTrack.mute();
+          setMuteState((prev) => ({ ...prev, isMuted: true }));
+        }
+      }
+    } catch (error) {
+      console.error("Failed to toggle mute:", error);
+    }
+  }, [webrtc, muteState.isMuted]);
+  const setMute = useCallback2(
+    async (muted) => {
+      if (!webrtc.isConnected) return;
+      try {
+        const room = webrtc.room;
+        if (!room) return;
+        const localParticipant = room.localParticipant;
+        const audioTrack = localParticipant.getTrackPublication(Track.Source.Microphone)?.track;
+        if (audioTrack) {
+          if (muted && !muteState.isMuted) {
+            await audioTrack.mute();
+            setMuteState((prev) => ({ ...prev, isMuted: true }));
+          } else if (!muted && muteState.isMuted) {
+            await audioTrack.unmute();
+            setMuteState((prev) => ({ ...prev, isMuted: false }));
+          }
+        }
+      } catch (error) {
+        console.error("Failed to set mute:", error);
+      }
+    },
+    [webrtc, muteState.isMuted]
+  );
+  const sendChatMessage = useCallback2(
+    async (message) => {
+      if (!webrtc.isConnected) {
+        console.warn("Cannot send chat message: not connected to LiveKit");
+        return;
+      }
+      try {
+        const room = webrtc.room;
+        if (!room) return;
+        const payload = {
+          type: "chat",
+          message,
+          timestamp: Date.now(),
+          sender: "user"
+        };
+        console.log("\u{1F4E4} Sending chat message via LiveKit:", payload);
+        const encoder = new TextEncoder();
+        const encodedData = encoder.encode(JSON.stringify(payload));
+        await room.localParticipant.publishData(encodedData, {
+          reliable: true
+        });
+        const newMessage = {
+          id: `user-${Date.now()}`,
+          role: "user",
+          text: message,
+          isFinal: true,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        setMessages((prev) => [...prev, newMessage]);
+        setMicState("thinking");
+      } catch (error) {
+        console.error("Failed to send chat message:", error);
+        throw error;
+      }
+    },
+    [webrtc]
+  );
   return {
     ...webrtc,
     messages,
@@ -1650,12 +1767,16 @@ var useCuekit = (options) => {
     status,
     setStatus,
     connect,
-    disconnect
+    disconnect,
+    muteState,
+    toggleMute,
+    setMute,
+    sendChatMessage
   };
 };
 
 // src/components/chat-popup.tsx
-import React6, { useState as useState5, useEffect as useEffect5, useRef as useRef3 } from "react";
+import React10, { useState as useState6, useEffect as useEffect6, useRef as useRef5 } from "react";
 
 // node_modules/devlop/lib/default.js
 function ok() {
@@ -3530,7 +3651,7 @@ var urlAttributes = {
 
 // node_modules/react-markdown/lib/index.js
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 
 // node_modules/mdast-util-to-string/lib/index.js
 var emptyOptions2 = {};
@@ -9252,7 +9373,7 @@ var convert = (
    * @param {Test} [test]
    * @returns {Check}
    */
-  function(test) {
+  (function(test) {
     if (test === null || test === void 0) {
       return ok2;
     }
@@ -9266,7 +9387,7 @@ var convert = (
       return typeFactory(test);
     }
     throw new Error("Expected function, string, or object as test");
-  }
+  })
 );
 function anyFactory(tests) {
   const checks2 = [];
@@ -10446,7 +10567,7 @@ var CallableInstance = (
    * @param {string | symbol} property
    * @returns {(...parameters: Array<unknown>) => unknown}
    */
-  function(property) {
+  (function(property) {
     const self2 = this;
     const constr = self2.constructor;
     const proto = (
@@ -10461,7 +10582,7 @@ var CallableInstance = (
     };
     Object.setPrototypeOf(apply, proto);
     return apply;
-  }
+  })
 );
 
 // node_modules/unified/lib/index.js
@@ -14399,6 +14520,659 @@ var PhoneOffIcon = ({ width = 24, height = 24, className, ...props }) => {
 };
 var phone_off_default = PhoneOffIcon;
 
+// src/components/svgs/mic-off.tsx
+import React6 from "react";
+var MicOffIcon = ({ style, className }) => {
+  return /* @__PURE__ */ React6.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: `lucide lucide-mic-off-icon lucide-mic-off ${className || ""}`,
+      style
+    },
+    /* @__PURE__ */ React6.createElement("path", { d: "M12 19v3" }),
+    /* @__PURE__ */ React6.createElement("path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33" }),
+    /* @__PURE__ */ React6.createElement("path", { d: "M16.95 16.95A7 7 0 0 1 5 12v-2" }),
+    /* @__PURE__ */ React6.createElement("path", { d: "M18.89 13.23A7 7 0 0 0 19 12v-2" }),
+    /* @__PURE__ */ React6.createElement("path", { d: "m2 2 20 20" }),
+    /* @__PURE__ */ React6.createElement("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" })
+  );
+};
+var mic_off_default = MicOffIcon;
+
+// src/components/svgs/mic.tsx
+import React7 from "react";
+var MicIcon = ({ width = 24, height = 24, className, ...props }) => {
+  return /* @__PURE__ */ React7.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React7.createElement("path", { d: "M12 19v3" }),
+    /* @__PURE__ */ React7.createElement("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ React7.createElement("rect", { x: "9", y: "2", width: "6", height: "13", rx: "3" })
+  );
+};
+var mic_default = MicIcon;
+
+// src/components/draggable-resizable-container.tsx
+import React9, { useRef as useRef4, useEffect as useEffect5 } from "react";
+
+// src/utils/draggable-resizable.ts
+import { useCallback as useCallback3, useRef as useRef3, useState as useState5, useEffect as useEffect4 } from "react";
+var absoluteToRelative = (position3, size, viewportWidth, viewportHeight) => {
+  return {
+    position: {
+      xPercent: position3.x / viewportWidth * 100,
+      yPercent: position3.y / viewportHeight * 100
+    },
+    size: {
+      widthPercent: size.width / viewportWidth * 100,
+      heightPercent: size.height / viewportHeight * 100
+    }
+  };
+};
+var relativeToAbsolute = (relativePosition, relativeSize, viewportWidth, viewportHeight) => {
+  return {
+    position: {
+      x: relativePosition.xPercent / 100 * viewportWidth,
+      y: relativePosition.yPercent / 100 * viewportHeight
+    },
+    size: {
+      width: relativeSize.widthPercent / 100 * viewportWidth,
+      height: relativeSize.heightPercent / 100 * viewportHeight
+    }
+  };
+};
+var DEFAULT_BOUNDS = {
+  minWidth: 300,
+  minHeight: 200,
+  maxWidth: typeof window !== "undefined" ? Math.min(window.innerWidth * 0.92, 800) : 800,
+  maxHeight: typeof window !== "undefined" ? Math.min(window.innerHeight * 0.9, 600) : 600
+};
+var DEFAULT_POSITION = { x: 0, y: 0 };
+var DEFAULT_SIZE = {
+  width: 420,
+  height: typeof window !== "undefined" ? Math.min(window.innerHeight * 0.55, 500) : 400
+};
+function useDraggableResizable(options = {}) {
+  const {
+    bounds = DEFAULT_BOUNDS,
+    initialPosition = DEFAULT_POSITION,
+    initialSize = DEFAULT_SIZE,
+    onPositionChange,
+    onSizeChange,
+    disabled = false,
+    dragHandle
+  } = options;
+  const [position3, setPositionState] = useState5(initialPosition);
+  const [size, setSizeState] = useState5(initialSize);
+  const [dragState, setDragState] = useState5({
+    isDragging: false,
+    startPosition: { x: 0, y: 0 },
+    startMousePosition: { x: 0, y: 0 }
+  });
+  const [resizeState, setResizeState] = useState5({
+    isResizing: false,
+    direction: "se",
+    startSize: { width: 0, height: 0 },
+    startPosition: { x: 0, y: 0 },
+    startMousePosition: { x: 0, y: 0 }
+  });
+  const containerRef = useRef3(null);
+  const constrainPosition = useCallback3((pos, size2) => {
+    const maxX = window.innerWidth - size2.width;
+    const maxY = window.innerHeight - size2.height;
+    return {
+      x: Math.max(0, Math.min(pos.x, maxX)),
+      y: Math.max(0, Math.min(pos.y, maxY))
+    };
+  }, []);
+  const constrainSize = useCallback3(
+    (newSize) => {
+      return {
+        width: Math.max(bounds.minWidth, Math.min(newSize.width, bounds.maxWidth || Infinity)),
+        height: Math.max(bounds.minHeight, Math.min(newSize.height, bounds.maxHeight || Infinity))
+      };
+    },
+    [bounds]
+  );
+  const setPosition = useCallback3(
+    (newPosition) => {
+      const constrainedPosition = constrainPosition(newPosition, size);
+      setPositionState(constrainedPosition);
+      onPositionChange?.(constrainedPosition);
+    },
+    [size, constrainPosition, onPositionChange]
+  );
+  const setSize = useCallback3(
+    (newSize) => {
+      const constrainedSize = constrainSize(newSize);
+      setSizeState(constrainedSize);
+      onSizeChange?.(constrainedSize);
+      const constrainedPosition = constrainPosition(position3, constrainedSize);
+      if (constrainedPosition.x !== position3.x || constrainedPosition.y !== position3.y) {
+        setPositionState(constrainedPosition);
+        onPositionChange?.(constrainedPosition);
+      }
+    },
+    [position3, constrainSize, constrainPosition, onSizeChange, onPositionChange]
+  );
+  const resetToInitial = useCallback3(() => {
+    setPositionState(initialPosition);
+    setSizeState(initialSize);
+    onPositionChange?.(initialPosition);
+    onSizeChange?.(initialSize);
+  }, [initialPosition, initialSize, onPositionChange, onSizeChange]);
+  const handleDragStart = useCallback3(
+    (e2) => {
+      if (disabled) return;
+      if (dragHandle) {
+        const target = e2.target;
+        if (!target.closest(dragHandle)) return;
+      }
+      e2.preventDefault();
+      e2.stopPropagation();
+      setDragState({
+        isDragging: true,
+        startPosition: { ...position3 },
+        startMousePosition: { x: e2.clientX, y: e2.clientY }
+      });
+    },
+    [disabled, dragHandle, position3]
+  );
+  const handleResizeStart = useCallback3(
+    (direction) => (e2) => {
+      if (disabled) return;
+      e2.preventDefault();
+      e2.stopPropagation();
+      setResizeState({
+        isResizing: true,
+        direction,
+        startSize: { ...size },
+        startPosition: { ...position3 },
+        startMousePosition: { x: e2.clientX, y: e2.clientY }
+      });
+    },
+    [disabled, size, position3]
+  );
+  useEffect4(() => {
+    const handleMouseMove = (e2) => {
+      if (dragState.isDragging) {
+        const deltaX = e2.clientX - dragState.startMousePosition.x;
+        const deltaY = e2.clientY - dragState.startMousePosition.y;
+        const newPosition = {
+          x: dragState.startPosition.x + deltaX,
+          y: dragState.startPosition.y + deltaY
+        };
+        setPosition(newPosition);
+      } else if (resizeState.isResizing) {
+        const deltaX = e2.clientX - resizeState.startMousePosition.x;
+        const deltaY = e2.clientY - resizeState.startMousePosition.y;
+        let newSize = { ...resizeState.startSize };
+        let newPosition = { ...resizeState.startPosition };
+        const { direction } = resizeState;
+        if (direction.includes("e")) {
+          newSize.width = resizeState.startSize.width + deltaX;
+        }
+        if (direction.includes("w")) {
+          newSize.width = resizeState.startSize.width - deltaX;
+          newPosition.x = resizeState.startPosition.x + deltaX;
+        }
+        if (direction.includes("s")) {
+          newSize.height = resizeState.startSize.height + deltaY;
+        }
+        if (direction.includes("n")) {
+          newSize.height = resizeState.startSize.height - deltaY;
+          newPosition.y = resizeState.startPosition.y + deltaY;
+        }
+        setSize(newSize);
+        if (newPosition.x !== resizeState.startPosition.x || newPosition.y !== resizeState.startPosition.y) {
+          setPosition(newPosition);
+        }
+      }
+    };
+    const handleMouseUp = () => {
+      setDragState((prev) => ({ ...prev, isDragging: false }));
+      setResizeState((prev) => ({ ...prev, isResizing: false }));
+    };
+    if (dragState.isDragging || resizeState.isResizing) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragState, resizeState, setPosition, setSize]);
+  const resizeHandlers = {
+    n: { onMouseDown: handleResizeStart("n") },
+    s: { onMouseDown: handleResizeStart("s") },
+    e: { onMouseDown: handleResizeStart("e") },
+    w: { onMouseDown: handleResizeStart("w") },
+    ne: { onMouseDown: handleResizeStart("ne") },
+    nw: { onMouseDown: handleResizeStart("nw") },
+    se: { onMouseDown: handleResizeStart("se") },
+    sw: { onMouseDown: handleResizeStart("sw") }
+  };
+  return {
+    position: position3,
+    size,
+    isDragging: dragState.isDragging,
+    isResizing: resizeState.isResizing,
+    dragHandlers: {
+      onMouseDown: handleDragStart
+    },
+    resizeHandlers,
+    setPosition,
+    setSize,
+    resetToInitial
+  };
+}
+function getResizeCursor(direction) {
+  const cursorMap = {
+    n: "n-resize",
+    s: "s-resize",
+    e: "e-resize",
+    w: "w-resize",
+    ne: "ne-resize",
+    nw: "nw-resize",
+    se: "se-resize",
+    sw: "sw-resize"
+  };
+  return cursorMap[direction];
+}
+
+// src/components/resize-handle.tsx
+import React8 from "react";
+var ResizeHandle = ({
+  direction,
+  onMouseDown,
+  disabled = false,
+  className = "",
+  style = {},
+  size = 8
+}) => {
+  const getHandleStyle = () => {
+    const baseStyle = {
+      position: "absolute",
+      backgroundColor: "transparent",
+      cursor: disabled ? "default" : getResizeCursor(direction),
+      zIndex: 1e3,
+      userSelect: "none",
+      ...style
+    };
+    switch (direction) {
+      case "n":
+        return {
+          ...baseStyle,
+          top: -size / 2,
+          left: 0,
+          right: 0,
+          height: size
+        };
+      case "s":
+        return {
+          ...baseStyle,
+          bottom: -size / 2,
+          left: 0,
+          right: 0,
+          height: size
+        };
+      case "e":
+        return {
+          ...baseStyle,
+          top: 0,
+          bottom: 0,
+          right: -size / 2,
+          width: size
+        };
+      case "w":
+        return {
+          ...baseStyle,
+          top: 0,
+          bottom: 0,
+          left: -size / 2,
+          width: size
+        };
+      case "ne":
+        return {
+          ...baseStyle,
+          top: -size / 2,
+          right: -size / 2,
+          width: size,
+          height: size
+        };
+      case "nw":
+        return {
+          ...baseStyle,
+          top: -size / 2,
+          left: -size / 2,
+          width: size,
+          height: size
+        };
+      case "se":
+        return {
+          ...baseStyle,
+          bottom: -size / 2,
+          right: -size / 2,
+          width: size,
+          height: size
+        };
+      case "sw":
+        return {
+          ...baseStyle,
+          bottom: -size / 2,
+          left: -size / 2,
+          width: size,
+          height: size
+        };
+      default:
+        return baseStyle;
+    }
+  };
+  const handleMouseDown = (e2) => {
+    if (!disabled) {
+      onMouseDown(e2);
+    }
+  };
+  return /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      className: `resize-handle resize-handle-${direction} ${className}`,
+      style: getHandleStyle(),
+      onMouseDown: handleMouseDown,
+      "data-direction": direction,
+      "aria-label": `Resize ${direction}`
+    }
+  );
+};
+var ResizeHandles = ({
+  onResizeStart,
+  disabled = false,
+  className = "",
+  style = {},
+  size = 8,
+  showHandles = ["n", "s", "e", "w", "ne", "nw", "se", "sw"]
+}) => {
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, showHandles.map((direction) => /* @__PURE__ */ React8.createElement(
+    ResizeHandle,
+    {
+      key: direction,
+      direction,
+      onMouseDown: onResizeStart(direction),
+      disabled,
+      className,
+      style,
+      size
+    }
+  )));
+};
+
+// src/components/draggable-resizable-container.tsx
+var DraggableResizableContainer = ({
+  children,
+  className = "",
+  style = {},
+  dragHandle,
+  showResizeHandles = true,
+  resizeHandleSize = 8,
+  onPositionChange,
+  onSizeChange,
+  onDragStart,
+  onDragEnd,
+  onResizeStart,
+  onResizeEnd,
+  storageKey,
+  persistPosition = false,
+  persistSize = false,
+  ...options
+}) => {
+  const containerRef = useRef4(null);
+  const loadPersistedData = () => {
+    if (!storageKey || typeof window === "undefined") return {};
+    try {
+      const data = localStorage.getItem(`cuekit-${storageKey}`);
+      if (data) {
+        const parsed = JSON.parse(data);
+        if (parsed.relativePosition && parsed.relativeSize) {
+          const viewportWidth = window.innerWidth;
+          const viewportHeight = window.innerHeight;
+          const { position: position4, size: size2 } = relativeToAbsolute(
+            parsed.relativePosition,
+            parsed.relativeSize,
+            viewportWidth,
+            viewportHeight
+          );
+          return { position: position4, size: size2 };
+        }
+        return {
+          position: parsed.position,
+          size: parsed.size
+        };
+      }
+    } catch (error) {
+      console.warn("Failed to load persisted position/size:", error);
+    }
+    return {};
+  };
+  const savePersistedData = (position4, size2) => {
+    if (!storageKey || typeof window === "undefined") return;
+    try {
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const { position: relativePosition, size: relativeSize } = absoluteToRelative(
+        position4,
+        size2,
+        viewportWidth,
+        viewportHeight
+      );
+      const data = {};
+      if (persistPosition) {
+        data.position = position4;
+        data.relativePosition = relativePosition;
+      }
+      if (persistSize) {
+        data.size = size2;
+        data.relativeSize = relativeSize;
+      }
+      localStorage.setItem(`cuekit-${storageKey}`, JSON.stringify(data));
+    } catch (error) {
+      console.warn("Failed to save persisted position/size:", error);
+    }
+  };
+  const persistedData = loadPersistedData();
+  const initialPosition = persistedData.position || options.initialPosition;
+  const initialSize = persistedData.size || options.initialSize;
+  useEffect5(() => {
+    const handleResize = () => {
+      if (!storageKey || typeof window === "undefined") return;
+      try {
+        const data = localStorage.getItem(`cuekit-${storageKey}`);
+        if (data) {
+          const parsed = JSON.parse(data);
+          if (parsed.relativePosition && parsed.relativeSize) {
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const { position: position4, size: size2 } = relativeToAbsolute(
+              parsed.relativePosition,
+              parsed.relativeSize,
+              viewportWidth,
+              viewportHeight
+            );
+            if (containerRef.current) {
+              containerRef.current.style.left = `${position4.x}px`;
+              containerRef.current.style.top = `${position4.y}px`;
+              containerRef.current.style.width = `${size2.width}px`;
+              containerRef.current.style.height = `${size2.height}px`;
+            }
+          }
+        }
+      } catch (error) {
+        console.warn("Failed to update position on resize:", error);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [storageKey]);
+  const {
+    position: position3,
+    size,
+    isDragging,
+    isResizing,
+    dragHandlers,
+    resizeHandlers,
+    setPosition,
+    setSize
+  } = useDraggableResizable({
+    ...options,
+    initialPosition,
+    initialSize,
+    onPositionChange: (pos) => {
+      onPositionChange?.(pos);
+      if (persistPosition || persistSize) {
+        savePersistedData(pos, size);
+      }
+    },
+    onSizeChange: (newSize) => {
+      onSizeChange?.(newSize);
+      if (persistPosition || persistSize) {
+        savePersistedData(position3, newSize);
+      }
+    }
+  });
+  const handleDragStart = (e2) => {
+    dragHandlers.onMouseDown(e2);
+    onDragStart?.();
+  };
+  const handleResizeStart = (direction) => (e2) => {
+    resizeHandlers[direction].onMouseDown(e2);
+    onResizeStart?.();
+  };
+  useEffect5(() => {
+    if (!isDragging) {
+      onDragEnd?.();
+    }
+  }, [isDragging, onDragEnd]);
+  useEffect5(() => {
+    if (!isResizing) {
+      onResizeEnd?.();
+    }
+  }, [isResizing, onResizeEnd]);
+  const containerStyle = {
+    position: "fixed",
+    left: position3.x,
+    top: position3.y,
+    width: size.width,
+    height: size.height,
+    transform: "none",
+    // We use left/top instead of transform for better performance
+    zIndex: 1e3,
+    ...style
+  };
+  const containerClassName = [
+    "draggable-resizable-container",
+    isDragging ? "is-dragging" : "",
+    isResizing ? "is-resizing" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React9.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: containerClassName,
+      style: containerStyle,
+      "data-cuekit-ignore": true
+    },
+    /* @__PURE__ */ React9.createElement(
+      "div",
+      {
+        className: "drag-handle",
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: "20px",
+          // Height of the header area
+          cursor: "move",
+          zIndex: 10
+        },
+        onMouseDown: handleDragStart,
+        "data-drag-handle": "true"
+      }
+    ),
+    /* @__PURE__ */ React9.createElement(
+      "div",
+      {
+        className: "draggable-content",
+        style: {
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column"
+        }
+      },
+      children
+    ),
+    showResizeHandles && /* @__PURE__ */ React9.createElement(
+      ResizeHandles,
+      {
+        onResizeStart: handleResizeStart,
+        disabled: options.disabled,
+        size: resizeHandleSize
+      }
+    )
+  );
+};
+var useDraggableResizableContainer = (storageKey) => {
+  const loadData = () => {
+    if (!storageKey || typeof window === "undefined") return null;
+    try {
+      const data = localStorage.getItem(`cuekit-${storageKey}`);
+      return data ? JSON.parse(data) : null;
+    } catch {
+      return null;
+    }
+  };
+  const saveData = (data) => {
+    if (!storageKey || typeof window === "undefined") return;
+    try {
+      localStorage.setItem(`cuekit-${storageKey}`, JSON.stringify(data));
+    } catch (error) {
+      console.warn("Failed to save data:", error);
+    }
+  };
+  const clearData = () => {
+    if (!storageKey || typeof window === "undefined") return;
+    try {
+      localStorage.removeItem(`cuekit-${storageKey}`);
+    } catch (error) {
+      console.warn("Failed to clear data:", error);
+    }
+  };
+  return { loadData, saveData, clearData };
+};
+
 // src/components/chat-popup.tsx
 var ChatPopup = ({
   isOpen,
@@ -14415,15 +15189,28 @@ var ChatPopup = ({
   currentTheme = "dark",
   onThemeToggle,
   status,
-  anchor
+  anchor,
+  muteState,
+  onToggleMute,
+  // Draggable/Resizable props
+  draggable = true,
+  resizable = true,
+  initialPosition,
+  initialSize,
+  onPositionChange,
+  onSizeChange,
+  persistPosition = true,
+  persistSize = true,
+  storageKey = "chat-popup"
 }) => {
-  const [inputText, setInputText] = useState5("");
-  const [isSending, setIsSending] = useState5(false);
-  const messagesEndRef = useRef3(null);
+  const { title, showLogo, showAIIcon, showUserIcon } = useAnsyrContext();
+  const [inputText, setInputText] = useState6("");
+  const [isSending, setIsSending] = useState6(false);
+  const messagesEndRef = useRef5(null);
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
-  useEffect5(() => {
+  useEffect6(() => {
     console.log("\u{1F4EC} ChatPopup received messages:", JSON.stringify(messages, null, 2));
     scrollToBottom();
   }, [messages]);
@@ -14445,7 +15232,6 @@ var ChatPopup = ({
       handleSend();
     }
   };
-  if (!isOpen || isMinimized) return null;
   const getStatusText = () => {
     if (status) return status;
     if (micState === "listening") return "Listening...";
@@ -14453,48 +15239,57 @@ var ChatPopup = ({
     if (micState === "replying") return "Responding...";
     return "Listening...";
   };
-  const getPositionStyle = () => {
+  const getInitialPosition = () => {
+    if (initialPosition) return initialPosition;
     if (!anchor) {
       return {
-        bottom: "100px",
-        right: "20px"
+        x: window.innerWidth - 420 - 20,
+        y: window.innerHeight - window.innerHeight * 0.55 - 20
       };
     }
     const bottomOffset = anchor.bottom + anchor.size + 16;
-    const baseStyle = {
-      bottom: `${bottomOffset}px`
-    };
+    const popupHeight = window.innerHeight * 0.55;
+    const y = window.innerHeight - bottomOffset - popupHeight;
     switch (anchor.position) {
       case "bottom-center":
-        return {
-          ...baseStyle,
-          left: "50%",
-          transform: "translateX(-50%)"
-        };
+        return { x: (window.innerWidth - 420) / 2, y };
       case "bottom-left":
-        return {
-          ...baseStyle,
-          left: "20px"
-        };
+        return { x: 20, y };
       case "bottom-right":
       default:
-        return {
-          ...baseStyle,
-          right: "20px"
-        };
+        return { x: window.innerWidth - 420 - 20, y };
     }
   };
-  const positionStyle = getPositionStyle();
-  return /* @__PURE__ */ React6.createElement(
-    "div",
+  const getInitialSize = () => {
+    if (initialSize) return initialSize;
+    return {
+      width: 420,
+      height: window.innerHeight * 0.55
+    };
+  };
+  if (!isOpen || isMinimized) return null;
+  return /* @__PURE__ */ React10.createElement(
+    DraggableResizableContainer,
     {
-      "data-cuekit-ignore": true,
+      initialPosition: getInitialPosition(),
+      initialSize: getInitialSize(),
+      onPositionChange,
+      onSizeChange,
+      persistPosition,
+      persistSize,
+      storageKey,
+      disabled: !draggable && !resizable,
+      showResizeHandles: resizable,
+      bounds: {
+        minWidth: 300,
+        minHeight: 200,
+        maxWidth: Math.min(window.innerWidth * 0.92, 800),
+        // Cap at 800px max width
+        maxHeight: Math.min(window.innerHeight * 0.9, 600)
+        // Cap at 600px max height
+      },
       className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
       style: {
-        position: "fixed",
-        width: "420px",
-        maxWidth: "92vw",
-        height: "55vh",
         borderRadius: "10px",
         background: "hsl(var(--voice-bg))",
         boxShadow: "var(--shadow-card)",
@@ -14502,13 +15297,11 @@ var ChatPopup = ({
         display: "flex",
         animation: "scaleIn 0.3s ease-out",
         flexDirection: "column",
-        zIndex: 1e3,
         fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif",
-        overflow: "hidden",
-        ...positionStyle
+        overflow: "hidden"
       }
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         style: {
@@ -14519,14 +15312,14 @@ var ChatPopup = ({
           justifyContent: "space-between"
         }
       },
-      /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } }, /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React10.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } }, showLogo && /* @__PURE__ */ React10.createElement(
         "img",
         {
           src: "https://dashboard.cuekit.ai/_next/image?url=%2Fimages%2Fcuekit-logo-2.png&w=256&q=100",
           alt: "Cuekit AI",
           style: { width: 58, objectFit: "cover" }
         }
-      ), /* @__PURE__ */ React6.createElement(
+      ), /* @__PURE__ */ React10.createElement(
         "div",
         {
           style: {
@@ -14537,10 +15330,11 @@ var ChatPopup = ({
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React10.createElement(
           "span",
           {
             style: {
+              paddingLeft: showLogo ? 0 : 12,
               fontSize: 18,
               fontWeight: 700,
               lineHeight: "1.2",
@@ -14552,9 +15346,9 @@ var ChatPopup = ({
               WebkitTextFillColor: "transparent"
             }
           },
-          "Cuekit.ai"
+          title
         ),
-        /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 } }, /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React10.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 } }, /* @__PURE__ */ React10.createElement(
           "div",
           {
             style: {
@@ -14570,7 +15364,7 @@ var ChatPopup = ({
               fontWeight: "500"
             }
           },
-          /* @__PURE__ */ React6.createElement(
+          /* @__PURE__ */ React10.createElement(
             "span",
             {
               style: {
@@ -14581,8 +15375,8 @@ var ChatPopup = ({
           )
         ))
       )),
-      /* @__PURE__ */ React6.createElement("div", { style: { minWidth: 100, textAlign: "center" } }),
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React10.createElement("div", { style: { minWidth: 100, textAlign: "center" } }),
+      /* @__PURE__ */ React10.createElement(
         "div",
         {
           style: {
@@ -14594,7 +15388,7 @@ var ChatPopup = ({
             top: 16
           }
         },
-        onThemeToggle && /* @__PURE__ */ React6.createElement(
+        onThemeToggle && /* @__PURE__ */ React10.createElement(
           "button",
           {
             onClick: () => {
@@ -14624,7 +15418,7 @@ var ChatPopup = ({
             "aria-label": "Toggle theme",
             title: `Switch to ${currentTheme === "dark" ? "light" : "dark"} mode`
           },
-          currentTheme === "dark" ? /* @__PURE__ */ React6.createElement(
+          currentTheme === "dark" ? /* @__PURE__ */ React10.createElement(
             sun_default,
             {
               style: {
@@ -14634,7 +15428,7 @@ var ChatPopup = ({
                 animation: "themeToggleEnter 0.3s ease-in-out"
               }
             }
-          ) : /* @__PURE__ */ React6.createElement(
+          ) : /* @__PURE__ */ React10.createElement(
             moon_default,
             {
               style: {
@@ -14646,7 +15440,7 @@ var ChatPopup = ({
             }
           )
         ),
-        /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React10.createElement(
           "button",
           {
             onClick: onMinimize,
@@ -14673,11 +15467,11 @@ var ChatPopup = ({
             "aria-label": "Minimize",
             title: "Minimize chat"
           },
-          /* @__PURE__ */ React6.createElement(close_default, { style: { width: 16, height: 16, color: "hsl(var(--voice-text-muted))" } })
+          /* @__PURE__ */ React10.createElement(close_default, { style: { width: 16, height: 16, color: "hsl(var(--voice-text-muted))" } })
         )
       )
     ),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         style: {
@@ -14690,7 +15484,7 @@ var ChatPopup = ({
           color: "hsl(var(--voice-text))"
         }
       },
-      messages.length === 0 ? /* @__PURE__ */ React6.createElement(
+      messages.length === 0 ? /* @__PURE__ */ React10.createElement(
         "div",
         {
           style: {
@@ -14700,7 +15494,7 @@ var ChatPopup = ({
           }
         },
         "Start a conversation with CueKit AI"
-      ) : messages.map((message, index2) => /* @__PURE__ */ React6.createElement(
+      ) : messages.map((message, index2) => /* @__PURE__ */ React10.createElement(
         "div",
         {
           key: index2,
@@ -14714,7 +15508,7 @@ var ChatPopup = ({
             justifyContent: message.sender === "user" ? "flex-end" : "flex-start"
           }
         },
-        message.sender === "assistant" && /* @__PURE__ */ React6.createElement(
+        message.sender === "assistant" && showAIIcon && /* @__PURE__ */ React10.createElement(
           "div",
           {
             style: {
@@ -14729,7 +15523,7 @@ var ChatPopup = ({
               overflow: "hidden"
             }
           },
-          /* @__PURE__ */ React6.createElement(
+          /* @__PURE__ */ React10.createElement(
             "img",
             {
               src: "https://dashboard.cuekit.ai/_next/image?url=%2Fimages%2Fcuekit-logo-2.png&w=256&q=100",
@@ -14743,7 +15537,7 @@ var ChatPopup = ({
             }
           )
         ),
-        /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React10.createElement(
           "div",
           {
             style: {
@@ -14754,7 +15548,7 @@ var ChatPopup = ({
               flex: 1
             }
           },
-          /* @__PURE__ */ React6.createElement(
+          /* @__PURE__ */ React10.createElement(
             "div",
             {
               style: {
@@ -14772,12 +15566,12 @@ var ChatPopup = ({
                 marginLeft: message.sender === "user" ? "auto" : 0
               }
             },
-            /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement(
+            /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement(
               Markdown,
               {
                 remarkPlugins: [remarkGfm],
                 components: {
-                  p: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  p: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "p",
                     {
                       style: {
@@ -14788,7 +15582,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h1: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  h1: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "h1",
                     {
                       style: {
@@ -14800,7 +15594,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h2: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  h2: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "h2",
                     {
                       style: {
@@ -14812,7 +15606,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h3: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  h3: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "h3",
                     {
                       style: {
@@ -14824,7 +15618,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  ul: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  ul: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "ul",
                     {
                       style: {
@@ -14836,7 +15630,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  ol: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  ol: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "ol",
                     {
                       style: {
@@ -14848,7 +15642,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  li: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  li: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "li",
                     {
                       style: {
@@ -14859,7 +15653,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  strong: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  strong: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "strong",
                     {
                       style: {
@@ -14870,7 +15664,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  em: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  em: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "em",
                     {
                       style: {
@@ -14881,7 +15675,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  code: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  code: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "code",
                     {
                       style: {
@@ -14894,7 +15688,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  pre: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  pre: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "pre",
                     {
                       style: {
@@ -14909,7 +15703,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  blockquote: ({ children }) => /* @__PURE__ */ React6.createElement(
+                  blockquote: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "blockquote",
                     {
                       style: {
@@ -14928,7 +15722,7 @@ var ChatPopup = ({
               message.text
             ))
           ),
-          message.sender === "user" && /* @__PURE__ */ React6.createElement(
+          message.sender === "user" && showUserIcon && /* @__PURE__ */ React10.createElement(
             "div",
             {
               style: {
@@ -14949,9 +15743,9 @@ var ChatPopup = ({
           )
         )
       )),
-      /* @__PURE__ */ React6.createElement("div", { ref: messagesEndRef })
+      /* @__PURE__ */ React10.createElement("div", { ref: messagesEndRef })
     ),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         style: {
@@ -14960,7 +15754,7 @@ var ChatPopup = ({
           background: "hsl(var(--voice-bg))"
         }
       },
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React10.createElement(
         "form",
         {
           onSubmit: (e2) => {
@@ -14969,7 +15763,7 @@ var ChatPopup = ({
           },
           style: { display: "flex", alignItems: "center", gap: 8, margin: 0 }
         },
-        /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React10.createElement(
           "input",
           {
             type: "text",
@@ -14996,7 +15790,47 @@ var ChatPopup = ({
             }
           }
         ),
-        isConnected && onEndCall && /* @__PURE__ */ React6.createElement(
+        muteState?.canMute && onToggleMute && /* @__PURE__ */ React10.createElement(
+          "button",
+          {
+            onClick: onToggleMute,
+            style: {
+              padding: "10px 12px",
+              borderRadius: 8,
+              border: "1px solid hsl(var(--voice-accent))",
+              background: "hsl(var(--voice-accent))",
+              fontSize: 12,
+              fontWeight: 700,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+              transition: "all 0.3s ease"
+            },
+            "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))"
+              }
+            }
+          )
+        ),
+        isConnected && onEndCall && /* @__PURE__ */ React10.createElement(
           "button",
           {
             type: "submit",
@@ -15015,7 +15849,7 @@ var ChatPopup = ({
               cursor: "pointer"
             }
           },
-          /* @__PURE__ */ React6.createElement(phone_off_default, { style: { width: 16, height: 16 } })
+          /* @__PURE__ */ React10.createElement(phone_off_default, { style: { width: 16, height: 16 } })
         )
       )
     )
@@ -15023,7 +15857,7 @@ var ChatPopup = ({
 };
 
 // src/components/border-glow.tsx
-import React7 from "react";
+import React11 from "react";
 var BorderGlow = ({ isActive }) => {
   if (!isActive) return null;
   const styles = {
@@ -15150,7 +15984,7 @@ var BorderGlow = ({ isActive }) => {
       opacity: 0.6
     }
   };
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("style", null, `
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("style", null, `
           @keyframes borderPulse {
             0%, 100% {
               opacity: 1;
@@ -15159,12 +15993,12 @@ var BorderGlow = ({ isActive }) => {
               opacity: 0.5;
             }
           }
-        `), /* @__PURE__ */ React7.createElement("div", { style: styles.container }, /* @__PURE__ */ React7.createElement("div", { style: styles.rightBorder1 }), /* @__PURE__ */ React7.createElement("div", { style: styles.rightBorder2 }), /* @__PURE__ */ React7.createElement("div", { style: styles.rightBorder3 }), /* @__PURE__ */ React7.createElement("div", { style: styles.leftBorder1 }), /* @__PURE__ */ React7.createElement("div", { style: styles.leftBorder2 }), /* @__PURE__ */ React7.createElement("div", { style: styles.leftBorder3 }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerTopLeft }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerTopRight }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerBottomRight }), /* @__PURE__ */ React7.createElement("div", { style: styles.cornerBottomLeft })));
+        `), /* @__PURE__ */ React11.createElement("div", { style: styles.container }, /* @__PURE__ */ React11.createElement("div", { style: styles.rightBorder1 }), /* @__PURE__ */ React11.createElement("div", { style: styles.rightBorder2 }), /* @__PURE__ */ React11.createElement("div", { style: styles.rightBorder3 }), /* @__PURE__ */ React11.createElement("div", { style: styles.leftBorder1 }), /* @__PURE__ */ React11.createElement("div", { style: styles.leftBorder2 }), /* @__PURE__ */ React11.createElement("div", { style: styles.leftBorder3 }), /* @__PURE__ */ React11.createElement("div", { style: styles.cornerTopLeft }), /* @__PURE__ */ React11.createElement("div", { style: styles.cornerTopRight }), /* @__PURE__ */ React11.createElement("div", { style: styles.cornerBottomRight }), /* @__PURE__ */ React11.createElement("div", { style: styles.cornerBottomLeft })));
 };
 var border_glow_default = BorderGlow;
 
 // src/components/voice-intensity-visualizer.tsx
-import React8, { useEffect as useEffect9, useState as useState9 } from "react";
+import React12, { useEffect as useEffect10, useState as useState10 } from "react";
 
 // node_modules/@livekit/components-react/dist/hooks-C2Bp5v2q.mjs
 import * as r from "react";
@@ -15179,7 +16013,7 @@ var Me = { exports: {} };
 var Or = Me.exports;
 var kt;
 function kr() {
-  return kt || (kt = 1, function(e2) {
+  return kt || (kt = 1, (function(e2) {
     (function(t, n) {
       e2.exports ? e2.exports = n() : t.log = n();
     })(Or, function() {
@@ -15323,7 +16157,7 @@ function kr() {
         return o;
       }, s.default = s, s;
     });
-  }(Me)), Me.exports;
+  })(Me)), Me.exports;
 }
 var _r = kr();
 var Lr = /* @__PURE__ */ Ar(_r);
@@ -15546,7 +16380,7 @@ function Ue(e2, t) {
     0 <= n && e2.splice(n, 1);
   }
 }
-var Oe = function() {
+var Oe = (function() {
   function e2(t) {
     this.initialTeardown = t, this.closed = false, this._parentage = null, this._finalizers = null;
   }
@@ -15630,11 +16464,11 @@ var Oe = function() {
   }, e2.prototype.remove = function(t) {
     var n = this._finalizers;
     n && Ue(n, t), t instanceof e2 && t._removeParent(this);
-  }, e2.EMPTY = function() {
+  }, e2.EMPTY = (function() {
     var t = new e2();
     return t.closed = true, t;
-  }(), e2;
-}();
+  })(), e2;
+})();
 var an = Oe.EMPTY;
 function cn(e2) {
   return e2 instanceof Oe || e2 && "closed" in e2 && P(e2.remove) && P(e2.add) && P(e2.unsubscribe);
@@ -15666,7 +16500,7 @@ function je() {
 function Re(e2) {
   e2();
 }
-var gt = function(e2) {
+var gt = (function(e2) {
   te(t, e2);
   function t(n) {
     var r2 = e2.call(this) || this;
@@ -15697,8 +16531,8 @@ var gt = function(e2) {
       this.unsubscribe();
     }
   }, t;
-}(Oe);
-var Nr = function() {
+})(Oe);
+var Nr = (function() {
   function e2(t) {
     this.partialObserver = t;
   }
@@ -15729,8 +16563,8 @@ var Nr = function() {
         Le(n);
       }
   }, e2;
-}();
-var Ce = function(e2) {
+})();
+var Ce = (function(e2) {
   te(t, e2);
   function t(n, r2, i2) {
     var o = e2.call(this) || this, s;
@@ -15741,7 +16575,7 @@ var Ce = function(e2) {
     } : s = n, o.destination = new Nr(s), o;
   }
   return t;
-}(gt);
+})(gt);
 function Le(e2) {
   un(e2);
 }
@@ -15754,9 +16588,9 @@ var Ur = {
   error: Fr,
   complete: je
 };
-var bt = function() {
+var bt = (function() {
   return typeof Symbol == "function" && Symbol.observable || "@@observable";
-}();
+})();
 function Ge(e2) {
   return e2;
 }
@@ -15767,7 +16601,7 @@ function jr(e2) {
     }, n);
   };
 }
-var k = function() {
+var k = (function() {
   function e2(t) {
     t && (this._subscribe = t);
   }
@@ -15826,7 +16660,7 @@ var k = function() {
   }, e2.create = function(t) {
     return new e2(t);
   }, e2;
-}();
+})();
 function Lt(e2) {
   var t;
   return (t = e2 ?? Dr.Promise) !== null && t !== void 0 ? t : Promise;
@@ -15856,7 +16690,7 @@ function j(e2) {
 function F(e2, t, n, r2, i2) {
   return new Hr(e2, t, n, r2, i2);
 }
-var Hr = function(e2) {
+var Hr = (function(e2) {
   te(t, e2);
   function t(n, r2, i2, o, s, a) {
     var c = e2.call(this, n) || this;
@@ -15891,13 +16725,13 @@ var Hr = function(e2) {
       e2.prototype.unsubscribe.call(this), !r2 && ((n = this.onFinalize) === null || n === void 0 || n.call(this));
     }
   }, t;
-}(gt);
+})(gt);
 var zr = mt(function(e2) {
   return function() {
     e2(this), this.name = "ObjectUnsubscribedError", this.message = "object unsubscribed";
   };
 });
-var ee = function(e2) {
+var ee = (function(e2) {
   te(t, e2);
   function t() {
     var n = e2.call(this) || this;
@@ -15976,8 +16810,8 @@ var ee = function(e2) {
   }, t.create = function(n, r2) {
     return new It(n, r2);
   }, t;
-}(k);
-var It = function(e2) {
+})(k);
+var It = (function(e2) {
   te(t, e2);
   function t(n, r2) {
     var i2 = e2.call(this) || this;
@@ -15996,8 +16830,8 @@ var It = function(e2) {
     var r2, i2;
     return (i2 = (r2 = this.source) === null || r2 === void 0 ? void 0 : r2.subscribe(n)) !== null && i2 !== void 0 ? i2 : an;
   }, t;
-}(ee);
-var ln = function(e2) {
+})(ee);
+var ln = (function(e2) {
   te(t, e2);
   function t(n) {
     var r2 = e2.call(this) || this;
@@ -16020,13 +16854,13 @@ var ln = function(e2) {
   }, t.prototype.next = function(n) {
     e2.prototype.next.call(this, this._value = n);
   }, t;
-}(ee);
+})(ee);
 var Yr = {
   now: function() {
     return Date.now();
   }
 };
-var qr = function(e2) {
+var qr = (function(e2) {
   te(t, e2);
   function t(n, r2) {
     return e2.call(this) || this;
@@ -16034,7 +16868,7 @@ var qr = function(e2) {
   return t.prototype.schedule = function(n, r2) {
     return this;
   }, t;
-}(Oe);
+})(Oe);
 var Mt = {
   setInterval: function(e2, t) {
     for (var n = [], r2 = 2; r2 < arguments.length; r2++)
@@ -16046,7 +16880,7 @@ var Mt = {
   },
   delegate: void 0
 };
-var Kr = function(e2) {
+var Kr = (function(e2) {
   te(t, e2);
   function t(n, r2) {
     var i2 = e2.call(this, n, r2) || this;
@@ -16088,16 +16922,16 @@ var Kr = function(e2) {
       this.work = this.state = this.scheduler = null, this.pending = false, Ue(o, this), r2 != null && (this.id = this.recycleAsyncId(i2, r2, null)), this.delay = null, e2.prototype.unsubscribe.call(this);
     }
   }, t;
-}(qr);
-var Rt = function() {
+})(qr);
+var Rt = (function() {
   function e2(t, n) {
     n === void 0 && (n = e2.now), this.schedulerActionCtor = t, this.now = n;
   }
   return e2.prototype.schedule = function(t, n, r2) {
     return n === void 0 && (n = 0), new this.schedulerActionCtor(this, t).schedule(r2, n);
   }, e2.now = Yr.now, e2;
-}();
-var Gr = function(e2) {
+})();
+var Gr = (function(e2) {
   te(t, e2);
   function t(n, r2) {
     r2 === void 0 && (r2 = Rt.now);
@@ -16122,7 +16956,7 @@ var Gr = function(e2) {
       throw i2;
     }
   }, t;
-}(Rt);
+})(Rt);
 var Qr = new Gr(Kr);
 function Jr(e2) {
   return e2 && P(e2.schedule);
@@ -16980,8 +17814,8 @@ var Xt = /* @__PURE__ */ e.forwardRef(
 
 // src/components/voice-intensity-visualizer.tsx
 var VoiceIntensityWithRoom = (props) => {
-  const [room, setRoom] = useState9(null);
-  useEffect9(() => {
+  const [room, setRoom] = useState10(null);
+  useEffect10(() => {
     if (props.isActive) {
       const currentRoom = getRoom();
       if (currentRoom) {
@@ -16994,7 +17828,7 @@ var VoiceIntensityWithRoom = (props) => {
   if (!room) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(Wn.Provider, { value: room }, /* @__PURE__ */ React8.createElement(VoiceIntensityBars, { ...props }));
+  return /* @__PURE__ */ React12.createElement(Wn.Provider, { value: room }, /* @__PURE__ */ React12.createElement(VoiceIntensityBars, { ...props }));
 };
 var VoiceIntensityBars = ({
   isActive,
@@ -17037,7 +17871,7 @@ var VoiceIntensityBars = ({
   if (!trackRef) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "div",
     {
       className: `voice-intensity-visualizer ${className}`,
@@ -17054,7 +17888,7 @@ var VoiceIntensityBars = ({
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React12.createElement(
       Xt,
       {
         barCount,
@@ -17068,16 +17902,24 @@ var VoiceIntensityBars = ({
           gap: "0.25rem"
         }
       },
-      /* @__PURE__ */ React8.createElement("span", { className: "cuekit-voice-intensity-bar" })
+      /* @__PURE__ */ React12.createElement("span", { className: "cuekit-voice-intensity-bar" })
     )
   );
 };
 var VoiceIntensityVisualizer = VoiceIntensityWithRoom;
 
-// src/components/svgs/mic.tsx
-import React9 from "react";
-var MicIcon = ({ width = 24, height = 24, className, ...props }) => {
-  return /* @__PURE__ */ React9.createElement(
+// src/components/language-selector.tsx
+import React14, { useState as useState11, useRef as useRef9, useEffect as useEffect11 } from "react";
+
+// src/components/svgs/chevron-down.tsx
+import React13 from "react";
+function ChevronDownIcon({
+  width = 24,
+  height = 24,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React13.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -17086,41 +17928,117 @@ var MicIcon = ({ width = 24, height = 24, className, ...props }) => {
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
       className,
       ...props
     },
-    /* @__PURE__ */ React9.createElement("path", { d: "M12 19v3" }),
-    /* @__PURE__ */ React9.createElement("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-    /* @__PURE__ */ React9.createElement("rect", { x: "9", y: "2", width: "6", height: "13", rx: "3" })
+    /* @__PURE__ */ React13.createElement("path", { d: "m6 9 6 6 6-6" })
   );
-};
-var mic_default = MicIcon;
+}
 
-// src/components/svgs/loader.tsx
-import React10 from "react";
-var LoaderIcon = ({ width = 24, height = 24, className, ...props }) => {
-  return /* @__PURE__ */ React10.createElement(
-    "svg",
+// src/components/language-selector.tsx
+var FLAG_EMOJIS = {
+  "en-US": "\u{1F1FA}\u{1F1F8}",
+  "ar-SA": "\u{1F1F8}\u{1F1E6}",
+  "es-ES": "\u{1F1EA}\u{1F1F8}",
+  "fr-FR": "\u{1F1EB}\u{1F1F7}",
+  "de-DE": "\u{1F1E9}\u{1F1EA}",
+  "it-IT": "\u{1F1EE}\u{1F1F9}",
+  "pt-BR": "\u{1F1E7}\u{1F1F7}",
+  "ja-JP": "\u{1F1EF}\u{1F1F5}",
+  "ko-KR": "\u{1F1F0}\u{1F1F7}",
+  "zh-CN": "\u{1F1E8}\u{1F1F3}",
+  "hi-IN": "\u{1F1EE}\u{1F1F3}"
+};
+var LanguageSelector = ({
+  selectedLanguage,
+  onLanguageChange,
+  availableLanguages,
+  disabled = false,
+  className = "",
+  tooltip,
+  screenPosition = "bottom-center"
+}) => {
+  const [isOpen, setIsOpen] = useState11(false);
+  const [showTooltip, setShowTooltip] = useState11(false);
+  const [dropdownUp, setDropdownUp] = useState11(false);
+  const dropdownRef = useRef9(null);
+  useEffect11(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const handleLanguageSelect = (language) => {
+    if (disabled) return;
+    onLanguageChange(language);
+    setIsOpen(false);
+  };
+  const handleButtonClick = () => {
+    if (disabled) return;
+    const isBottomPosition = screenPosition.startsWith("bottom");
+    setDropdownUp(isBottomPosition);
+    setIsOpen(!isOpen);
+  };
+  const getFlagEmoji = (code4) => {
+    return FLAG_EMOJIS[code4] || "\u{1F310}";
+  };
+  return /* @__PURE__ */ React14.createElement(
+    "div",
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className,
-      ...props
+      className: `language-selector-container ${className}`,
+      ref: dropdownRef,
+      onMouseEnter: () => {
+        if (disabled) {
+          setShowTooltip(true);
+        }
+      },
+      onMouseLeave: () => {
+        setShowTooltip(false);
+      }
     },
-    /* @__PURE__ */ React10.createElement("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    /* @__PURE__ */ React14.createElement(
+      "button",
+      {
+        className: `language-selector-button ${isOpen ? "open" : ""} ${disabled ? "disabled" : ""}`,
+        onClick: handleButtonClick,
+        disabled,
+        "aria-label": disabled ? tooltip || "Language cannot be changed during conversation" : "Select language",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox"
+      },
+      /* @__PURE__ */ React14.createElement("div", { className: "language-selector-content" }, /* @__PURE__ */ React14.createElement("span", { className: "language-flag" }, getFlagEmoji(selectedLanguage.code)), /* @__PURE__ */ React14.createElement("span", { className: "language-code" }, selectedLanguage.code), /* @__PURE__ */ React14.createElement(
+        ChevronDownIcon,
+        {
+          className: `language-chevron ${isOpen ? dropdownUp ? "rotated-up" : "rotated" : ""}`,
+          width: 14,
+          height: 14
+        }
+      ))
+    ),
+    disabled && /* @__PURE__ */ React14.createElement("div", { className: `language-tooltip ${showTooltip ? "show" : ""}` }, /* @__PURE__ */ React14.createElement("div", { className: "language-tooltip-content" }, tooltip || "Close the conversation to change the language"), /* @__PURE__ */ React14.createElement("div", { className: "language-tooltip-arrow" })),
+    isOpen && /* @__PURE__ */ React14.createElement("div", { className: `language-dropdown ${dropdownUp ? "dropdown-up" : ""}` }, /* @__PURE__ */ React14.createElement("div", { className: "language-dropdown-content" }, availableLanguages.map((language) => /* @__PURE__ */ React14.createElement(
+      "button",
+      {
+        key: language.code,
+        className: `language-option ${selectedLanguage.code === language.code ? "selected" : ""}`,
+        onClick: () => handleLanguageSelect(language),
+        role: "option",
+        "aria-selected": selectedLanguage.code === language.code
+      },
+      /* @__PURE__ */ React14.createElement("span", { className: "language-flag" }, getFlagEmoji(language.code)),
+      /* @__PURE__ */ React14.createElement("div", { className: "language-info" }, /* @__PURE__ */ React14.createElement("span", { className: "language-name" }, language.name)),
+      selectedLanguage.code === language.code && /* @__PURE__ */ React14.createElement("div", { className: "language-check" }, "\u2713")
+    ))))
   );
 };
-var loader_default = LoaderIcon;
 
 // src/components/mic-button.tsx
 var chatState = {
@@ -17128,7 +18046,7 @@ var chatState = {
   isMinimized: false
 };
 var VoiceIntensityWrapper = ({ active, buttonSize }) => {
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React15.createElement(
     VoiceIntensityVisualizer,
     {
       isActive: active,
@@ -17138,6 +18056,10 @@ var VoiceIntensityWrapper = ({ active, buttonSize }) => {
     }
   );
 };
+var DEFAULT_LANGUAGES = [
+  { code: "en-US", name: "English (US)", flag: "\u{1F1FA}\u{1F1F8}" },
+  { code: "ar-SA", name: "\u0627\u0644\u0639\u0631\u0628\u064A\u0629", flag: "\u{1F1F8}\u{1F1E6}" }
+];
 var MicButton = ({
   buttonSize = 52,
   screenPosition = "bottom-center",
@@ -17149,22 +18071,29 @@ var MicButton = ({
   buttonStyle,
   bottomSpace = 20,
   defaultTheme = "system",
-  showBorderGlow = false
+  showBorderGlow = false,
+  language,
+  defaultLanguage,
+  onLanguageChange
 }) => {
-  const { apiKey, appId } = useQubeContext();
-  const [showBodyGlow, setShowBodyGlow] = useState10(false);
-  const [currentTheme, setCurrentTheme] = useState10("dark");
-  const [isChatOpen, setIsChatOpen] = useState10(chatState.isOpen);
-  const [isChatMinimized, setIsChatMinimized] = useState10(chatState.isMinimized);
-  useEffect10(() => {
+  const { apiKey, appId } = useAnsyrContext();
+  const [showBodyGlow, setShowBodyGlow] = useState12(false);
+  const [currentTheme, setCurrentTheme] = useState12("dark");
+  const [showLanguageSelector, setShowLanguageSelector] = useState12(false);
+  const [selectedLanguage, setSelectedLanguage] = useState12(
+    language || defaultLanguage || DEFAULT_LANGUAGES[0]
+  );
+  const [isChatOpen, setIsChatOpen] = useState12(chatState.isOpen);
+  const [isChatMinimized, setIsChatMinimized] = useState12(chatState.isMinimized);
+  useEffect12(() => {
     chatState.isOpen = isChatOpen;
     chatState.isMinimized = isChatMinimized;
   }, [isChatOpen, isChatMinimized]);
-  const audioContainerRef = useRef7(null);
-  const silenceTimerRef = useRef7(null);
-  const aiSpeakingRef = useRef7(false);
-  const aiSpeechTimeoutRef = useRef7(null);
-  const activeAITracksRef = useRef7(/* @__PURE__ */ new Set());
+  const audioContainerRef = useRef10(null);
+  const silenceTimerRef = useRef10(null);
+  const aiSpeakingRef = useRef10(false);
+  const aiSpeechTimeoutRef = useRef10(null);
+  const activeAITracksRef = useRef10(/* @__PURE__ */ new Set());
   const {
     isConnected,
     isConnecting,
@@ -17172,12 +18101,16 @@ var MicButton = ({
     connect: voiceConnect,
     disconnect: voiceDisconnect,
     sendUserCommand: sendUserCommand2,
+    sendChatMessage,
     messages: messageManagerMessages,
     micState,
     setMicState,
     status,
     setStatus,
-    participants
+    participants,
+    muteState,
+    toggleMute,
+    setMute
   } = useCuekit({
     // Don't override navigation command - let the provider handle it
     onConnectionStateChange: (state) => {
@@ -17190,7 +18123,7 @@ var MicButton = ({
     onAISpeechEnd: (trackId) => handleAISpeech(false, trackId),
     appId
   });
-  useEffect10(() => {
+  useEffect12(() => {
     const checkTheme = () => {
       if (typeof document !== "undefined") {
         let newTheme;
@@ -17213,31 +18146,31 @@ var MicButton = ({
       return () => observer.disconnect();
     }
   }, [defaultTheme]);
-  const openChat = useCallback5(() => {
+  const openChat = useCallback6(() => {
     setIsChatOpen(true);
     setIsChatMinimized(false);
   }, []);
-  const minimizeChat = useCallback5(() => {
+  const minimizeChat = useCallback6(() => {
     setIsChatMinimized(true);
     if (showBorderGlow) {
       setShowBodyGlow(false);
     }
   }, [showBorderGlow]);
-  const restoreChat = useCallback5(() => {
+  const restoreChat = useCallback6(() => {
     setIsChatMinimized(false);
     setIsChatOpen(true);
     if (showBorderGlow && (micState === "listening" || micState === "thinking" || micState === "replying")) {
       setShowBodyGlow(true);
     }
   }, [showBorderGlow, micState]);
-  const closeChat = useCallback5(() => {
+  const closeChat = useCallback6(() => {
     setIsChatOpen(false);
     setIsChatMinimized(false);
     if (showBorderGlow) {
       setShowBodyGlow(false);
     }
   }, [showBorderGlow]);
-  const handleAISpeech = useCallback5(
+  const handleAISpeech = useCallback6(
     (isSpeaking, trackId) => {
       if (isSpeaking && trackId) {
         activeAITracksRef.current.add(trackId);
@@ -17258,7 +18191,7 @@ var MicButton = ({
     },
     [status, micState, isConnected]
   );
-  useEffect10(() => {
+  useEffect12(() => {
     if (audioContainerRef.current) {
       setAudioContainer(audioContainerRef);
     }
@@ -17285,29 +18218,51 @@ var MicButton = ({
     }
     return isConnected2 ? "Ready" : "Connecting...";
   };
-  useEffect10(() => {
+  useEffect12(() => {
     if (isConnected) {
     } else {
     }
   }, [isConnected]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (isConnected && !isChatOpen) {
       openChat();
     }
   }, [isConnected, isChatOpen, openChat]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (messageManagerMessages.length > 0 && !isChatOpen) {
       openChat();
     }
   }, [messageManagerMessages.length, isChatOpen, openChat]);
-  const handleMicClick = useCallback5(() => {
+  const handleLanguageChange = useCallback6(
+    (newLanguage) => {
+      setSelectedLanguage(newLanguage);
+      onLanguageChange?.(newLanguage);
+    },
+    [onLanguageChange]
+  );
+  const handleLanguageConfirm = useCallback6(() => {
+    setShowLanguageSelector(false);
+    voiceConnect(`user_${Date.now()}`, apiKey, appId, selectedLanguage).then(() => {
+      if (showBorderGlow) setShowBodyGlow(true);
+      openChat();
+      setTimeout(() => {
+        openChat();
+      }, 500);
+    }).catch((error) => {
+    });
+  }, [voiceConnect, apiKey, appId, selectedLanguage, showBorderGlow, openChat]);
+  const handleMicClick = useCallback6(() => {
     const shouldStop = micState === "listening" && isConnected;
     if (shouldStop) {
       voiceDisconnect().then(() => {
       }).catch((error) => {
       });
     } else {
-      voiceConnect(`user_${Date.now()}`, apiKey, appId).then(() => {
+      if (!language && !defaultLanguage && !selectedLanguage) {
+        setShowLanguageSelector(true);
+        return;
+      }
+      voiceConnect(`user_${Date.now()}`, apiKey, appId, selectedLanguage).then(() => {
         if (showBorderGlow) setShowBodyGlow(true);
         openChat();
         setTimeout(() => {
@@ -17323,8 +18278,12 @@ var MicButton = ({
     voiceConnect,
     apiKey,
     appId,
+    language,
+    selectedLanguage,
     openChat,
-    showBorderGlow
+    showBorderGlow,
+    sendChatMessage,
+    isChatOpen
   ]);
   const handleSendText = async (textToSend) => {
     setMicState("thinking");
@@ -17334,13 +18293,14 @@ var MicButton = ({
     }
     if (isConnected) {
       try {
-        await sendUserCommand2(textToSend);
+        await sendChatMessage(textToSend);
         setMicState("replying");
         setTimeout(() => {
           setMicState("listening");
           if (showBorderGlow) setShowBodyGlow(true);
         }, 1e3);
       } catch (error) {
+        console.error("Failed to send chat message:", error);
       } finally {
         setMicState("listening");
         if (showBorderGlow) setShowBodyGlow(true);
@@ -17367,8 +18327,11 @@ var MicButton = ({
         filter: "drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1))",
         ...imageStyle
       };
-      const animatedImageStyle = micState === "thinking" ? { ...baseImageStyle, animation: "spin 1s linear infinite" } : micState === "replying" ? { ...baseImageStyle, animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" } : baseImageStyle;
-      return /* @__PURE__ */ React11.createElement("img", { src: imageSource, alt: "Voice Assistant", style: animatedImageStyle });
+      if (micState === "idle") {
+        return /* @__PURE__ */ React15.createElement("img", { src: imageSource, alt: "Voice Assistant", style: baseImageStyle });
+      } else {
+        return /* @__PURE__ */ React15.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
+      }
     }
     const iconStyle = {
       width: `100%`,
@@ -17376,15 +18339,10 @@ var MicButton = ({
       color: "white",
       filter: "drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1))"
     };
-    switch (micState) {
-      case "thinking":
-        return /* @__PURE__ */ React11.createElement(loader_default, { style: { ...iconStyle, animation: "spin 1s linear infinite" } });
-      case "replying":
-        return /* @__PURE__ */ React11.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
-      case "listening":
-        return /* @__PURE__ */ React11.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
-      default:
-        return /* @__PURE__ */ React11.createElement(mic_default, { style: iconStyle });
+    if (micState === "idle") {
+      return /* @__PURE__ */ React15.createElement(mic_default, { style: iconStyle });
+    } else {
+      return /* @__PURE__ */ React15.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
     }
   };
   const getPositionStyle = () => {
@@ -17446,16 +18404,15 @@ var MicButton = ({
     const baseStyle = { ...buttonStyles.button };
     switch (micState) {
       case "listening":
-        baseStyle.transform = "scale(1.1)";
+        baseStyle.transform = "scale(1.05)";
         baseStyle.boxShadow = "0 25px 50px -12px rgba(59, 130, 246, 0.6)";
         break;
       case "thinking":
-        baseStyle.transform = "scale(1.05)";
+        baseStyle.transform = "scale(1.02)";
         baseStyle.boxShadow = "0 20px 25px -5px rgba(196, 132, 252, 0.4)";
-        baseStyle.animation = "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite";
         break;
       case "replying":
-        baseStyle.transform = "scale(1.05)";
+        baseStyle.transform = "scale(1.02)";
         baseStyle.boxShadow = "0 20px 25px -5px rgba(34, 211, 238, 0.4)";
         break;
       default:
@@ -17464,7 +18421,34 @@ var MicButton = ({
     }
     return baseStyle;
   };
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("div", { "data-cuekit-ignore": true, style: { ...buttonStyles.container, ...getPositionStyle() } }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("div", { "data-cuekit-ignore": true, 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(
+    LanguageSelector,
+    {
+      selectedLanguage,
+      onLanguageChange: handleLanguageChange,
+      availableLanguages: DEFAULT_LANGUAGES,
+      className: "voice-chat-language-selector",
+      screenPosition
+    }
+  ), /* @__PURE__ */ React15.createElement("div", { className: "voice-chat-language-actions" }, /* @__PURE__ */ React15.createElement(
+    "button",
+    {
+      className: "voice-chat-cancel-button",
+      onClick: () => setShowLanguageSelector(false)
+    },
+    "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(
+    LanguageSelector,
+    {
+      selectedLanguage,
+      onLanguageChange: handleLanguageChange,
+      availableLanguages: DEFAULT_LANGUAGES,
+      className: "voice-chat-language-preview",
+      disabled: isConnected || micState !== "idle",
+      tooltip: "Close the conversation to change the language",
+      screenPosition
+    }
+  ), /* @__PURE__ */ React15.createElement(
     "button",
     {
       "data-testid": "ignore",
@@ -17485,8 +18469,8 @@ var MicButton = ({
       },
       "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
     },
-    /* @__PURE__ */ React11.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
-  ), hasText && text7 && /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
+  )), !showLanguageSelector && hasText && text7 && /* @__PURE__ */ React15.createElement(
     "div",
     {
       style: {
@@ -17504,11 +18488,12 @@ var MicButton = ({
         alignItems: "center",
         justifyContent: "center",
         gap: "4px",
+        marginTop: "8px",
         ...textStyle
       }
     },
-    /* @__PURE__ */ React11.createElement("span", null, text7)
-  ))), /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React15.createElement("span", null, text7)
+  )), /* @__PURE__ */ React15.createElement(
     ChatPopup,
     {
       isOpen: isChatOpen,
@@ -17529,9 +18514,16 @@ var MicButton = ({
       currentTheme,
       onThemeToggle: setCurrentTheme,
       status: getUserFriendlyStatus(micState, isConnected ?? false),
-      anchor: { position: screenPosition, bottom: bottomSpace, size: buttonSize }
-    }
-  ), isChatOpen && isChatMinimized && /* @__PURE__ */ React11.createElement(
+      anchor: { position: screenPosition, bottom: bottomSpace, size: buttonSize },
+      muteState,
+      onToggleMute: toggleMute,
+      draggable: true,
+      resizable: true,
+      persistPosition: true,
+      persistSize: true,
+      storageKey: "cuekit-chat-popup"
+    }
+  ), isChatOpen && isChatMinimized && /* @__PURE__ */ React15.createElement(
     "button",
     {
       onClick: restoreChat,
@@ -17552,8 +18544,8 @@ var MicButton = ({
       className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
       "aria-label": "Open chat"
     },
-    /* @__PURE__ */ React11.createElement("span", { style: { fontSize: 12, fontWeight: 600, color: "hsl(var(--voice-text))" } }, "Open chat")
-  ), /* @__PURE__ */ React11.createElement("div", { ref: audioContainerRef, style: { display: "none" } }), showBorderGlow && showBodyGlow && /* @__PURE__ */ React11.createElement(border_glow_default, { isActive: true }));
+    /* @__PURE__ */ React15.createElement("span", { style: { fontSize: 12, fontWeight: 600, color: "hsl(var(--voice-text))" } }, "Open chat")
+  ), /* @__PURE__ */ React15.createElement("div", { ref: audioContainerRef, style: { display: "none" } }), showBorderGlow && showBodyGlow && /* @__PURE__ */ React15.createElement(border_glow_default, { isActive: true }));
 };
 
 // src/utils/instrumentation.ts
@@ -17564,11 +18556,15 @@ function generateDynamicId(routePath, elementIdentifier) {
   return hash.substring(0, 8);
 }
 export {
+  AnsyrProvider,
   border_glow_default as BorderGlow,
   ChatPopup,
-  CuekitProvider,
+  DraggableResizableContainer,
   InitCuekit,
+  LanguageSelector,
   MicButton,
+  ResizeHandle,
+  ResizeHandles,
   VoiceIntensityVisualizer,
   captureAllInteractiveElements,
   clearElementCache,
@@ -17580,8 +18576,9 @@ export {
   initWebRTC,
   initWebRTCWithDeployedBackend,
   resolveRoutePath,
+  useAnsyrContext,
   useCuekit,
-  useQubeContext,
+  useDraggableResizableContainer,
   useWebRTC,
   validateDynamicElements
 };