@cuekit-ai/react 1.5.0 → 1.6.0

package/dist/index.js

@@ -23630,11 +23630,12 @@ function setWebRTCCallbacks(newCallbacks) {
 function getCurrentCallbacks() {
   return callbacks;
 }
-async function authenticate(userIdentity, apiKey, appId) {
+async function authenticate(userIdentity, apiKey, appId, language) {
   try {
     const authPayload = {
       user_identity: userIdentity,
-      app_id: appId || _appId
+      app_id: appId || _appId,
+      ...language && { language: language.code }
     };
     const response = await fetch(`${serverUrl}/auth/login`, {
       method: "POST",
@@ -23920,17 +23921,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(
@@ -25014,11 +25015,15 @@ var require_md5 = __commonJS({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AnsyrProvider: () => AnsyrProvider,
   BorderGlow: () => border_glow_default,
   ChatPopup: () => ChatPopup,
-  CuekitProvider: () => CuekitProvider,
+  DraggableResizableContainer: () => DraggableResizableContainer,
   InitCuekit: () => InitCuekit,
+  LanguageSelector: () => LanguageSelector,
   MicButton: () => MicButton,
+  ResizeHandle: () => ResizeHandle,
+  ResizeHandles: () => ResizeHandles,
   VoiceIntensityVisualizer: () => VoiceIntensityVisualizer,
   captureAllInteractiveElements: () => captureAllInteractiveElements,
   clearElementCache: () => clearElementCache,
@@ -25030,14 +25035,15 @@ __export(index_exports, {
   initWebRTC: () => initWebRTC,
   initWebRTCWithDeployedBackend: () => initWebRTCWithDeployedBackend,
   resolveRoutePath: () => resolveRoutePath,
+  useAnsyrContext: () => useAnsyrContext,
   useCuekit: () => useCuekit,
-  useQubeContext: () => useQubeContext,
+  useDraggableResizableContainer: () => useDraggableResizableContainer,
   useWebRTC: () => useWebRTC,
   validateDynamicElements: () => validateDynamicElements
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/providers/cuekit-provider.tsx
+// src/providers/ansyr-provider.tsx
 var import_react = __toESM(require("react"));
 
 // src/core/init.ts
@@ -25056,7 +25062,7 @@ function InitCuekit(config) {
   setWebRTCConfig(webRTCConfig);
 }
 
-// src/providers/cuekit-provider.tsx
+// src/providers/ansyr-provider.tsx
 init_navigation();
 init_intent_store();
 
@@ -25101,9 +25107,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: "",
@@ -25111,38 +25117,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 = (0, import_react.createContext)({
+var AnsyrContext = (0, import_react.createContext)({
   apiKey: "",
-  appId: ""
+  appId: "",
+  title: "ansyr.ai",
+  showLogo: true,
+  showAIIcon: true,
+  showUserIcon: true
 });
-var useQubeContext = () => (0, import_react.useContext)(QubeContext);
+var useAnsyrContext = () => (0, import_react.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: navigationHandler2,
   onConnectionStateChange,
-  onParticipantUpdate
+  onParticipantUpdate,
+  title = "ansyr.ai",
+  showLogo = true,
+  showAIIcon = true,
+  showUserIcon = true
 }) => {
   const [internalDeviceId, setInternalDeviceId] = (0, import_react.useState)(deviceId);
   (0, import_react.useEffect)(() => {
@@ -25190,8 +25204,8 @@ var CuekitProvider = ({
   }, [onConnectionStateChange, onParticipantUpdate, navigationHandler2]);
   (0, import_react.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
@@ -25241,11 +25255,15 @@ var CuekitProvider = ({
     };
   }, [apiKey, appId, internalDeviceId]);
   return /* @__PURE__ */ import_react.default.createElement(
-    QubeContext.Provider,
+    AnsyrContext.Provider,
     {
       value: {
         apiKey,
-        appId
+        appId,
+        title,
+        showLogo,
+        showAIIcon,
+        showUserIcon
       }
     },
     children
@@ -25253,7 +25271,7 @@ var CuekitProvider = ({
 };
 
 // src/components/mic-button.tsx
-var import_react15 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // src/hooks/use-cuekit.ts
 var import_react3 = require("react");
@@ -25303,22 +25321,25 @@ var useWebRTC = (options) => {
     options?.onAISpeechStart,
     options?.onAISpeechEnd
   ]);
-  const connect = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.useCallback)(async () => {
     await disconnectFromRoom();
     setIsConnected(false);
@@ -25538,8 +25559,8 @@ var useCuekit = (options) => {
     onNavigationCommand: handleNavigationCommand
   });
   const connect = (0, import_react3.useCallback)(
-    async (identity, apiKey, appId) => {
-      await webrtc.connect(identity, apiKey, appId);
+    async (identity, apiKey, appId, language) => {
+      await webrtc.connect(identity, apiKey, appId, language);
     },
     [webrtc]
   );
@@ -25646,7 +25667,7 @@ var useCuekit = (options) => {
 };
 
 // src/components/chat-popup.tsx
-var import_react11 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // node_modules/devlop/lib/default.js
 function ok() {
@@ -38443,6 +38464,606 @@ var MicIcon = ({ width = 24, height = 24, className, ...props }) => {
 };
 var mic_default = MicIcon;
 
+// src/components/draggable-resizable-container.tsx
+var import_react13 = __toESM(require("react"));
+
+// src/utils/draggable-resizable.ts
+var import_react11 = require("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] = (0, import_react11.useState)(initialPosition);
+  const [size, setSizeState] = (0, import_react11.useState)(initialSize);
+  const [dragState, setDragState] = (0, import_react11.useState)({
+    isDragging: false,
+    startPosition: { x: 0, y: 0 },
+    startMousePosition: { x: 0, y: 0 }
+  });
+  const [resizeState, setResizeState] = (0, import_react11.useState)({
+    isResizing: false,
+    direction: "se",
+    startSize: { width: 0, height: 0 },
+    startPosition: { x: 0, y: 0 },
+    startMousePosition: { x: 0, y: 0 }
+  });
+  const containerRef = (0, import_react11.useRef)(null);
+  const constrainPosition = (0, import_react11.useCallback)((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 = (0, import_react11.useCallback)(
+    (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 = (0, import_react11.useCallback)(
+    (newPosition) => {
+      const constrainedPosition = constrainPosition(newPosition, size);
+      setPositionState(constrainedPosition);
+      onPositionChange?.(constrainedPosition);
+    },
+    [size, constrainPosition, onPositionChange]
+  );
+  const setSize = (0, import_react11.useCallback)(
+    (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 = (0, import_react11.useCallback)(() => {
+    setPositionState(initialPosition);
+    setSizeState(initialSize);
+    onPositionChange?.(initialPosition);
+    onSizeChange?.(initialSize);
+  }, [initialPosition, initialSize, onPositionChange, onSizeChange]);
+  const handleDragStart = (0, import_react11.useCallback)(
+    (e3) => {
+      if (disabled) return;
+      if (dragHandle) {
+        const target = e3.target;
+        if (!target.closest(dragHandle)) return;
+      }
+      e3.preventDefault();
+      e3.stopPropagation();
+      setDragState({
+        isDragging: true,
+        startPosition: { ...position3 },
+        startMousePosition: { x: e3.clientX, y: e3.clientY }
+      });
+    },
+    [disabled, dragHandle, position3]
+  );
+  const handleResizeStart = (0, import_react11.useCallback)(
+    (direction) => (e3) => {
+      if (disabled) return;
+      e3.preventDefault();
+      e3.stopPropagation();
+      setResizeState({
+        isResizing: true,
+        direction,
+        startSize: { ...size },
+        startPosition: { ...position3 },
+        startMousePosition: { x: e3.clientX, y: e3.clientY }
+      });
+    },
+    [disabled, size, position3]
+  );
+  (0, import_react11.useEffect)(() => {
+    const handleMouseMove = (e3) => {
+      if (dragState.isDragging) {
+        const deltaX = e3.clientX - dragState.startMousePosition.x;
+        const deltaY = e3.clientY - dragState.startMousePosition.y;
+        const newPosition = {
+          x: dragState.startPosition.x + deltaX,
+          y: dragState.startPosition.y + deltaY
+        };
+        setPosition(newPosition);
+      } else if (resizeState.isResizing) {
+        const deltaX = e3.clientX - resizeState.startMousePosition.x;
+        const deltaY = e3.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
+var import_react12 = __toESM(require("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 = (e3) => {
+    if (!disabled) {
+      onMouseDown(e3);
+    }
+  };
+  return /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement(import_react12.default.Fragment, null, showHandles.map((direction) => /* @__PURE__ */ import_react12.default.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 = (0, import_react13.useRef)(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;
+  (0, import_react13.useEffect)(() => {
+    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 = (e3) => {
+    dragHandlers.onMouseDown(e3);
+    onDragStart?.();
+  };
+  const handleResizeStart = (direction) => (e3) => {
+    resizeHandlers[direction].onMouseDown(e3);
+    onResizeStart?.();
+  };
+  (0, import_react13.useEffect)(() => {
+    if (!isDragging) {
+      onDragEnd?.();
+    }
+  }, [isDragging, onDragEnd]);
+  (0, import_react13.useEffect)(() => {
+    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__ */ import_react13.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: containerClassName,
+      style: containerStyle,
+      "data-cuekit-ignore": true
+    },
+    /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement(
+      "div",
+      {
+        className: "draggable-content",
+        style: {
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column"
+        }
+      },
+      children
+    ),
+    showResizeHandles && /* @__PURE__ */ import_react13.default.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,
@@ -38461,15 +39082,26 @@ var ChatPopup = ({
   status,
   anchor,
   muteState,
-  onToggleMute
+  onToggleMute,
+  // Draggable/Resizable props
+  draggable = true,
+  resizable = true,
+  initialPosition,
+  initialSize,
+  onPositionChange,
+  onSizeChange,
+  persistPosition = true,
+  persistSize = true,
+  storageKey = "chat-popup"
 }) => {
-  const [inputText, setInputText] = (0, import_react11.useState)("");
-  const [isSending, setIsSending] = (0, import_react11.useState)(false);
-  const messagesEndRef = (0, import_react11.useRef)(null);
+  const { title, showLogo, showAIIcon, showUserIcon } = useAnsyrContext();
+  const [inputText, setInputText] = (0, import_react14.useState)("");
+  const [isSending, setIsSending] = (0, import_react14.useState)(false);
+  const messagesEndRef = (0, import_react14.useRef)(null);
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     console.log("\u{1F4EC} ChatPopup received messages:", JSON.stringify(messages, null, 2));
     scrollToBottom();
   }, [messages]);
@@ -38491,7 +39123,6 @@ var ChatPopup = ({
       handleSend();
     }
   };
-  if (!isOpen || isMinimized) return null;
   const getStatusText = () => {
     if (status) return status;
     if (micState === "listening") return "Listening...";
@@ -38499,48 +39130,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__ */ import_react11.default.createElement(
-    "div",
+  const getInitialSize = () => {
+    if (initialSize) return initialSize;
+    return {
+      width: 420,
+      height: window.innerHeight * 0.55
+    };
+  };
+  if (!isOpen || isMinimized) return null;
+  return /* @__PURE__ */ import_react14.default.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)",
@@ -38548,13 +39188,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__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react14.default.createElement(
       "div",
       {
         style: {
@@ -38565,14 +39203,14 @@ var ChatPopup = ({
           justifyContent: "space-between"
         }
       },
-      /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } }, /* @__PURE__ */ import_react11.default.createElement(
+      /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } }, showLogo && /* @__PURE__ */ import_react14.default.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__ */ import_react11.default.createElement(
+      ), /* @__PURE__ */ import_react14.default.createElement(
         "div",
         {
           style: {
@@ -38583,10 +39221,11 @@ var ChatPopup = ({
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ import_react11.default.createElement(
+        /* @__PURE__ */ import_react14.default.createElement(
           "span",
           {
             style: {
+              paddingLeft: showLogo ? 0 : 12,
               fontSize: 18,
               fontWeight: 700,
               lineHeight: "1.2",
@@ -38598,9 +39237,9 @@ var ChatPopup = ({
               WebkitTextFillColor: "transparent"
             }
           },
-          "ansyr.ai"
+          title
         ),
-        /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 } }, /* @__PURE__ */ import_react11.default.createElement(
+        /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 } }, /* @__PURE__ */ import_react14.default.createElement(
           "div",
           {
             style: {
@@ -38616,7 +39255,7 @@ var ChatPopup = ({
               fontWeight: "500"
             }
           },
-          /* @__PURE__ */ import_react11.default.createElement(
+          /* @__PURE__ */ import_react14.default.createElement(
             "span",
             {
               style: {
@@ -38627,8 +39266,8 @@ var ChatPopup = ({
           )
         ))
       )),
-      /* @__PURE__ */ import_react11.default.createElement("div", { style: { minWidth: 100, textAlign: "center" } }),
-      /* @__PURE__ */ import_react11.default.createElement(
+      /* @__PURE__ */ import_react14.default.createElement("div", { style: { minWidth: 100, textAlign: "center" } }),
+      /* @__PURE__ */ import_react14.default.createElement(
         "div",
         {
           style: {
@@ -38640,7 +39279,7 @@ var ChatPopup = ({
             top: 16
           }
         },
-        onThemeToggle && /* @__PURE__ */ import_react11.default.createElement(
+        onThemeToggle && /* @__PURE__ */ import_react14.default.createElement(
           "button",
           {
             onClick: () => {
@@ -38670,7 +39309,7 @@ var ChatPopup = ({
             "aria-label": "Toggle theme",
             title: `Switch to ${currentTheme === "dark" ? "light" : "dark"} mode`
           },
-          currentTheme === "dark" ? /* @__PURE__ */ import_react11.default.createElement(
+          currentTheme === "dark" ? /* @__PURE__ */ import_react14.default.createElement(
             sun_default,
             {
               style: {
@@ -38680,7 +39319,7 @@ var ChatPopup = ({
                 animation: "themeToggleEnter 0.3s ease-in-out"
               }
             }
-          ) : /* @__PURE__ */ import_react11.default.createElement(
+          ) : /* @__PURE__ */ import_react14.default.createElement(
             moon_default,
             {
               style: {
@@ -38692,7 +39331,7 @@ var ChatPopup = ({
             }
           )
         ),
-        /* @__PURE__ */ import_react11.default.createElement(
+        /* @__PURE__ */ import_react14.default.createElement(
           "button",
           {
             onClick: onMinimize,
@@ -38719,11 +39358,11 @@ var ChatPopup = ({
             "aria-label": "Minimize",
             title: "Minimize chat"
           },
-          /* @__PURE__ */ import_react11.default.createElement(close_default, { style: { width: 16, height: 16, color: "hsl(var(--voice-text-muted))" } })
+          /* @__PURE__ */ import_react14.default.createElement(close_default, { style: { width: 16, height: 16, color: "hsl(var(--voice-text-muted))" } })
         )
       )
     ),
-    /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react14.default.createElement(
       "div",
       {
         style: {
@@ -38736,7 +39375,7 @@ var ChatPopup = ({
           color: "hsl(var(--voice-text))"
         }
       },
-      messages.length === 0 ? /* @__PURE__ */ import_react11.default.createElement(
+      messages.length === 0 ? /* @__PURE__ */ import_react14.default.createElement(
         "div",
         {
           style: {
@@ -38746,7 +39385,7 @@ var ChatPopup = ({
           }
         },
         "Start a conversation with CueKit AI"
-      ) : messages.map((message, index2) => /* @__PURE__ */ import_react11.default.createElement(
+      ) : messages.map((message, index2) => /* @__PURE__ */ import_react14.default.createElement(
         "div",
         {
           key: index2,
@@ -38760,7 +39399,7 @@ var ChatPopup = ({
             justifyContent: message.sender === "user" ? "flex-end" : "flex-start"
           }
         },
-        message.sender === "assistant" && /* @__PURE__ */ import_react11.default.createElement(
+        message.sender === "assistant" && showAIIcon && /* @__PURE__ */ import_react14.default.createElement(
           "div",
           {
             style: {
@@ -38775,7 +39414,7 @@ var ChatPopup = ({
               overflow: "hidden"
             }
           },
-          /* @__PURE__ */ import_react11.default.createElement(
+          /* @__PURE__ */ import_react14.default.createElement(
             "img",
             {
               src: "https://dashboard.cuekit.ai/_next/image?url=%2Fimages%2Fcuekit-logo-2.png&w=256&q=100",
@@ -38789,7 +39428,7 @@ var ChatPopup = ({
             }
           )
         ),
-        /* @__PURE__ */ import_react11.default.createElement(
+        /* @__PURE__ */ import_react14.default.createElement(
           "div",
           {
             style: {
@@ -38800,7 +39439,7 @@ var ChatPopup = ({
               flex: 1
             }
           },
-          /* @__PURE__ */ import_react11.default.createElement(
+          /* @__PURE__ */ import_react14.default.createElement(
             "div",
             {
               style: {
@@ -38818,12 +39457,12 @@ var ChatPopup = ({
                 marginLeft: message.sender === "user" ? "auto" : 0
               }
             },
-            /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement(
+            /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement(
               Markdown,
               {
                 remarkPlugins: [remarkGfm],
                 components: {
-                  p: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  p: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "p",
                     {
                       style: {
@@ -38834,7 +39473,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h1: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  h1: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "h1",
                     {
                       style: {
@@ -38846,7 +39485,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h2: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  h2: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "h2",
                     {
                       style: {
@@ -38858,7 +39497,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h3: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  h3: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "h3",
                     {
                       style: {
@@ -38870,7 +39509,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  ul: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  ul: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "ul",
                     {
                       style: {
@@ -38882,7 +39521,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  ol: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  ol: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "ol",
                     {
                       style: {
@@ -38894,7 +39533,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  li: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  li: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "li",
                     {
                       style: {
@@ -38905,7 +39544,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  strong: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  strong: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "strong",
                     {
                       style: {
@@ -38916,7 +39555,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  em: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  em: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "em",
                     {
                       style: {
@@ -38927,7 +39566,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  code: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  code: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "code",
                     {
                       style: {
@@ -38940,7 +39579,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  pre: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  pre: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "pre",
                     {
                       style: {
@@ -38955,7 +39594,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  blockquote: ({ children }) => /* @__PURE__ */ import_react11.default.createElement(
+                  blockquote: ({ children }) => /* @__PURE__ */ import_react14.default.createElement(
                     "blockquote",
                     {
                       style: {
@@ -38974,7 +39613,7 @@ var ChatPopup = ({
               message.text
             ))
           ),
-          message.sender === "user" && /* @__PURE__ */ import_react11.default.createElement(
+          message.sender === "user" && showUserIcon && /* @__PURE__ */ import_react14.default.createElement(
             "div",
             {
               style: {
@@ -38995,9 +39634,9 @@ var ChatPopup = ({
           )
         )
       )),
-      /* @__PURE__ */ import_react11.default.createElement("div", { ref: messagesEndRef })
+      /* @__PURE__ */ import_react14.default.createElement("div", { ref: messagesEndRef })
     ),
-    /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react14.default.createElement(
       "div",
       {
         style: {
@@ -39006,7 +39645,7 @@ var ChatPopup = ({
           background: "hsl(var(--voice-bg))"
         }
       },
-      /* @__PURE__ */ import_react11.default.createElement(
+      /* @__PURE__ */ import_react14.default.createElement(
         "form",
         {
           onSubmit: (e3) => {
@@ -39015,7 +39654,7 @@ var ChatPopup = ({
           },
           style: { display: "flex", alignItems: "center", gap: 8, margin: 0 }
         },
-        /* @__PURE__ */ import_react11.default.createElement(
+        /* @__PURE__ */ import_react14.default.createElement(
           "input",
           {
             type: "text",
@@ -39042,7 +39681,7 @@ var ChatPopup = ({
             }
           }
         ),
-        muteState?.canMute && onToggleMute && /* @__PURE__ */ import_react11.default.createElement(
+        muteState?.canMute && onToggleMute && /* @__PURE__ */ import_react14.default.createElement(
           "button",
           {
             onClick: onToggleMute,
@@ -39062,8 +39701,8 @@ var ChatPopup = ({
             "aria-label": muteState.isMuted ? "Unmute microphone" : "Mute microphone",
             title: muteState.isMuted ? "Unmute microphone" : "Mute microphone"
           },
-          muteState.isMuted ? /* @__PURE__ */ import_react11.default.createElement(
-            mic_default,
+          muteState.isMuted ? /* @__PURE__ */ import_react14.default.createElement(
+            mic_off_default,
             {
               style: {
                 width: 16,
@@ -39071,8 +39710,8 @@ var ChatPopup = ({
                 color: "hsl(var(--voice-user-text))"
               }
             }
-          ) : /* @__PURE__ */ import_react11.default.createElement(
-            mic_off_default,
+          ) : /* @__PURE__ */ import_react14.default.createElement(
+            mic_default,
             {
               style: {
                 width: 16,
@@ -39082,7 +39721,7 @@ var ChatPopup = ({
             }
           )
         ),
-        isConnected2 && onEndCall && /* @__PURE__ */ import_react11.default.createElement(
+        isConnected2 && onEndCall && /* @__PURE__ */ import_react14.default.createElement(
           "button",
           {
             type: "submit",
@@ -39101,7 +39740,7 @@ var ChatPopup = ({
               cursor: "pointer"
             }
           },
-          /* @__PURE__ */ import_react11.default.createElement(phone_off_default, { style: { width: 16, height: 16 } })
+          /* @__PURE__ */ import_react14.default.createElement(phone_off_default, { style: { width: 16, height: 16 } })
         )
       )
     )
@@ -39109,7 +39748,7 @@ var ChatPopup = ({
 };
 
 // src/components/border-glow.tsx
-var import_react12 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var BorderGlow = ({ isActive }) => {
   if (!isActive) return null;
   const styles = {
@@ -39236,7 +39875,7 @@ var BorderGlow = ({ isActive }) => {
       opacity: 0.6
     }
   };
-  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement("style", null, `
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement("style", null, `
           @keyframes borderPulse {
             0%, 100% {
               opacity: 1;
@@ -39245,12 +39884,12 @@ var BorderGlow = ({ isActive }) => {
               opacity: 0.5;
             }
           }
-        `), /* @__PURE__ */ import_react12.default.createElement("div", { style: styles.container }, /* @__PURE__ */ import_react12.default.createElement("div", { style: styles.rightBorder1 }), /* @__PURE__ */ import_react12.default.createElement("div", { style: styles.rightBorder2 }), /* @__PURE__ */ import_react12.default.createElement("div", { style: styles.rightBorder3 }), /* @__PURE__ */ import_react12.default.createElement("div", { style: styles.leftBorder1 }), /* @__PURE__ */ import_react12.default.createElement("div", { style: styles.leftBorder2 }), /* @__PURE__ */ import_react12.default.createElement("div", { style: styles.leftBorder3 }), /* @__PURE__ */ import_react12.default.createElement("div", { style: styles.cornerTopLeft }), /* @__PURE__ */ import_react12.default.createElement("div", { style: styles.cornerTopRight }), /* @__PURE__ */ import_react12.default.createElement("div", { style: styles.cornerBottomRight }), /* @__PURE__ */ import_react12.default.createElement("div", { style: styles.cornerBottomLeft })));
+        `), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.container }, /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.rightBorder1 }), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.rightBorder2 }), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.rightBorder3 }), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.leftBorder1 }), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.leftBorder2 }), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.leftBorder3 }), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.cornerTopLeft }), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.cornerTopRight }), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.cornerBottomRight }), /* @__PURE__ */ import_react15.default.createElement("div", { style: styles.cornerBottomLeft })));
 };
 var border_glow_default = BorderGlow;
 
 // src/components/voice-intensity-visualizer.tsx
-var import_react14 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // node_modules/@livekit/components-react/dist/hooks-C2Bp5v2q.mjs
 var r2 = __toESM(require("react"), 1);
@@ -40896,7 +41535,7 @@ function Yt(e3, t = {}) {
 
 // node_modules/@livekit/components-react/dist/components-Bz2b1Fa9.mjs
 var e2 = __toESM(require("react"), 1);
-var import_react13 = require("react");
+var import_react16 = require("react");
 init_livekit_client_esm();
 var Y;
 var ue;
@@ -40991,8 +41630,8 @@ var Dt = (t) => {
 };
 var fe2 = (t) => [[Math.floor(t / 2)], [-1]];
 var Ut2 = (t, n, a) => {
-  const [r3, c] = (0, import_react13.useState)(0), [s, o2] = (0, import_react13.useState)([[]]);
-  (0, import_react13.useEffect)(() => {
+  const [r3, c] = (0, import_react16.useState)(0), [s, o2] = (0, import_react16.useState)([[]]);
+  (0, import_react16.useEffect)(() => {
     if (t === "thinking")
       o2(fe2(n));
     else if (t === "connecting" || t === "initializing") {
@@ -41001,8 +41640,8 @@ var Ut2 = (t, n, a) => {
     } else o2(t === "listening" ? fe2(n) : t === void 0 || t === "speaking" ? [new Array(n).fill(0).map((i2, u) => u)] : [[]]);
     c(0);
   }, [t, n]);
-  const l = (0, import_react13.useRef)(null);
-  return (0, import_react13.useEffect)(() => {
+  const l = (0, import_react16.useRef)(null);
+  return (0, import_react16.useEffect)(() => {
     let i2 = performance.now();
     const u = (d) => {
       d - i2 >= a && (c((f) => f + 1), i2 = d), l.current = requestAnimationFrame(u);
@@ -41072,8 +41711,8 @@ var Xt = /* @__PURE__ */ e2.forwardRef(
 init_livekit_client_esm();
 init_webrtc_service();
 var VoiceIntensityWithRoom = (props) => {
-  const [room2, setRoom] = (0, import_react14.useState)(null);
-  (0, import_react14.useEffect)(() => {
+  const [room2, setRoom] = (0, import_react17.useState)(null);
+  (0, import_react17.useEffect)(() => {
     if (props.isActive) {
       const currentRoom = getRoom();
       if (currentRoom) {
@@ -41086,7 +41725,7 @@ var VoiceIntensityWithRoom = (props) => {
   if (!room2) {
     return null;
   }
-  return /* @__PURE__ */ import_react14.default.createElement(Wn.Provider, { value: room2 }, /* @__PURE__ */ import_react14.default.createElement(VoiceIntensityBars, { ...props }));
+  return /* @__PURE__ */ import_react17.default.createElement(Wn.Provider, { value: room2 }, /* @__PURE__ */ import_react17.default.createElement(VoiceIntensityBars, { ...props }));
 };
 var VoiceIntensityBars = ({
   isActive,
@@ -41129,7 +41768,7 @@ var VoiceIntensityBars = ({
   if (!trackRef) {
     return null;
   }
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react17.default.createElement(
     "div",
     {
       className: `voice-intensity-visualizer ${className}`,
@@ -41146,7 +41785,7 @@ var VoiceIntensityBars = ({
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ import_react14.default.createElement(
+    /* @__PURE__ */ import_react17.default.createElement(
       Xt,
       {
         barCount,
@@ -41160,7 +41799,7 @@ var VoiceIntensityBars = ({
           gap: "0.25rem"
         }
       },
-      /* @__PURE__ */ import_react14.default.createElement("span", { className: "cuekit-voice-intensity-bar" })
+      /* @__PURE__ */ import_react17.default.createElement("span", { className: "cuekit-voice-intensity-bar" })
     )
   );
 };
@@ -41168,12 +41807,146 @@ var VoiceIntensityVisualizer = VoiceIntensityWithRoom;
 
 // src/components/mic-button.tsx
 init_webrtc_service();
+
+// src/components/language-selector.tsx
+var import_react19 = __toESM(require("react"));
+
+// src/components/svgs/chevron-down.tsx
+var import_react18 = __toESM(require("react"));
+function ChevronDownIcon({
+  width = 24,
+  height = 24,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ import_react18.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ import_react18.default.createElement("path", { d: "m6 9 6 6 6-6" })
+  );
+}
+
+// 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] = (0, import_react19.useState)(false);
+  const [showTooltip, setShowTooltip] = (0, import_react19.useState)(false);
+  const [dropdownUp, setDropdownUp] = (0, import_react19.useState)(false);
+  const dropdownRef = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
+    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__ */ import_react19.default.createElement(
+    "div",
+    {
+      className: `language-selector-container ${className}`,
+      ref: dropdownRef,
+      onMouseEnter: () => {
+        if (disabled) {
+          setShowTooltip(true);
+        }
+      },
+      onMouseLeave: () => {
+        setShowTooltip(false);
+      }
+    },
+    /* @__PURE__ */ import_react19.default.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__ */ import_react19.default.createElement("div", { className: "language-selector-content" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "language-flag" }, getFlagEmoji(selectedLanguage.code)), /* @__PURE__ */ import_react19.default.createElement("span", { className: "language-code" }, selectedLanguage.code), /* @__PURE__ */ import_react19.default.createElement(
+        ChevronDownIcon,
+        {
+          className: `language-chevron ${isOpen ? dropdownUp ? "rotated-up" : "rotated" : ""}`,
+          width: 14,
+          height: 14
+        }
+      ))
+    ),
+    disabled && /* @__PURE__ */ import_react19.default.createElement("div", { className: `language-tooltip ${showTooltip ? "show" : ""}` }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "language-tooltip-content" }, tooltip || "Close the conversation to change the language"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "language-tooltip-arrow" })),
+    isOpen && /* @__PURE__ */ import_react19.default.createElement("div", { className: `language-dropdown ${dropdownUp ? "dropdown-up" : ""}` }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "language-dropdown-content" }, availableLanguages.map((language) => /* @__PURE__ */ import_react19.default.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__ */ import_react19.default.createElement("span", { className: "language-flag" }, getFlagEmoji(language.code)),
+      /* @__PURE__ */ import_react19.default.createElement("div", { className: "language-info" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "language-name" }, language.name)),
+      selectedLanguage.code === language.code && /* @__PURE__ */ import_react19.default.createElement("div", { className: "language-check" }, "\u2713")
+    ))))
+  );
+};
+
+// src/components/mic-button.tsx
 var chatState = {
   isOpen: false,
   isMinimized: false
 };
 var VoiceIntensityWrapper = ({ active, buttonSize }) => {
-  return /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(
     VoiceIntensityVisualizer,
     {
       isActive: active,
@@ -41183,6 +41956,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",
@@ -41194,22 +41971,29 @@ var MicButton = ({
   buttonStyle,
   bottomSpace = 20,
   defaultTheme = "system",
-  showBorderGlow = false
+  showBorderGlow = false,
+  language,
+  defaultLanguage,
+  onLanguageChange
 }) => {
-  const { apiKey, appId } = useQubeContext();
-  const [showBodyGlow, setShowBodyGlow] = (0, import_react15.useState)(false);
-  const [currentTheme, setCurrentTheme] = (0, import_react15.useState)("dark");
-  const [isChatOpen, setIsChatOpen] = (0, import_react15.useState)(chatState.isOpen);
-  const [isChatMinimized, setIsChatMinimized] = (0, import_react15.useState)(chatState.isMinimized);
-  (0, import_react15.useEffect)(() => {
+  const { apiKey, appId } = useAnsyrContext();
+  const [showBodyGlow, setShowBodyGlow] = (0, import_react20.useState)(false);
+  const [currentTheme, setCurrentTheme] = (0, import_react20.useState)("dark");
+  const [showLanguageSelector, setShowLanguageSelector] = (0, import_react20.useState)(false);
+  const [selectedLanguage, setSelectedLanguage] = (0, import_react20.useState)(
+    language || defaultLanguage || DEFAULT_LANGUAGES[0]
+  );
+  const [isChatOpen, setIsChatOpen] = (0, import_react20.useState)(chatState.isOpen);
+  const [isChatMinimized, setIsChatMinimized] = (0, import_react20.useState)(chatState.isMinimized);
+  (0, import_react20.useEffect)(() => {
     chatState.isOpen = isChatOpen;
     chatState.isMinimized = isChatMinimized;
   }, [isChatOpen, isChatMinimized]);
-  const audioContainerRef2 = (0, import_react15.useRef)(null);
-  const silenceTimerRef = (0, import_react15.useRef)(null);
-  const aiSpeakingRef = (0, import_react15.useRef)(false);
-  const aiSpeechTimeoutRef = (0, import_react15.useRef)(null);
-  const activeAITracksRef = (0, import_react15.useRef)(/* @__PURE__ */ new Set());
+  const audioContainerRef2 = (0, import_react20.useRef)(null);
+  const silenceTimerRef = (0, import_react20.useRef)(null);
+  const aiSpeakingRef = (0, import_react20.useRef)(false);
+  const aiSpeechTimeoutRef = (0, import_react20.useRef)(null);
+  const activeAITracksRef = (0, import_react20.useRef)(/* @__PURE__ */ new Set());
   const {
     isConnected: isConnected2,
     isConnecting,
@@ -41239,7 +42023,7 @@ var MicButton = ({
     onAISpeechEnd: (trackId) => handleAISpeech(false, trackId),
     appId
   });
-  (0, import_react15.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const checkTheme = () => {
       if (typeof document !== "undefined") {
         let newTheme;
@@ -41262,31 +42046,31 @@ var MicButton = ({
       return () => observer.disconnect();
     }
   }, [defaultTheme]);
-  const openChat = (0, import_react15.useCallback)(() => {
+  const openChat = (0, import_react20.useCallback)(() => {
     setIsChatOpen(true);
     setIsChatMinimized(false);
   }, []);
-  const minimizeChat = (0, import_react15.useCallback)(() => {
+  const minimizeChat = (0, import_react20.useCallback)(() => {
     setIsChatMinimized(true);
     if (showBorderGlow) {
       setShowBodyGlow(false);
     }
   }, [showBorderGlow]);
-  const restoreChat = (0, import_react15.useCallback)(() => {
+  const restoreChat = (0, import_react20.useCallback)(() => {
     setIsChatMinimized(false);
     setIsChatOpen(true);
     if (showBorderGlow && (micState === "listening" || micState === "thinking" || micState === "replying")) {
       setShowBodyGlow(true);
     }
   }, [showBorderGlow, micState]);
-  const closeChat = (0, import_react15.useCallback)(() => {
+  const closeChat = (0, import_react20.useCallback)(() => {
     setIsChatOpen(false);
     setIsChatMinimized(false);
     if (showBorderGlow) {
       setShowBodyGlow(false);
     }
   }, [showBorderGlow]);
-  const handleAISpeech = (0, import_react15.useCallback)(
+  const handleAISpeech = (0, import_react20.useCallback)(
     (isSpeaking, trackId) => {
       if (isSpeaking && trackId) {
         activeAITracksRef.current.add(trackId);
@@ -41307,7 +42091,7 @@ var MicButton = ({
     },
     [status, micState, isConnected2]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (audioContainerRef2.current) {
       setAudioContainer(audioContainerRef2);
     }
@@ -41334,29 +42118,51 @@ var MicButton = ({
     }
     return isConnected3 ? "Ready" : "Connecting...";
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (isConnected2) {
     } else {
     }
   }, [isConnected2]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (isConnected2 && !isChatOpen) {
       openChat();
     }
   }, [isConnected2, isChatOpen, openChat]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (messageManagerMessages.length > 0 && !isChatOpen) {
       openChat();
     }
   }, [messageManagerMessages.length, isChatOpen, openChat]);
-  const handleMicClick = (0, import_react15.useCallback)(() => {
+  const handleLanguageChange = (0, import_react20.useCallback)(
+    (newLanguage) => {
+      setSelectedLanguage(newLanguage);
+      onLanguageChange?.(newLanguage);
+    },
+    [onLanguageChange]
+  );
+  const handleLanguageConfirm = (0, import_react20.useCallback)(() => {
+    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 = (0, import_react20.useCallback)(() => {
     const shouldStop = micState === "listening" && isConnected2;
     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(() => {
@@ -41372,6 +42178,8 @@ var MicButton = ({
     voiceConnect,
     apiKey,
     appId,
+    language,
+    selectedLanguage,
     openChat,
     showBorderGlow,
     sendChatMessage,
@@ -41420,9 +42228,9 @@ var MicButton = ({
         ...imageStyle
       };
       if (micState === "idle") {
-        return /* @__PURE__ */ import_react15.default.createElement("img", { src: imageSource, alt: "Voice Assistant", style: baseImageStyle });
+        return /* @__PURE__ */ import_react20.default.createElement("img", { src: imageSource, alt: "Voice Assistant", style: baseImageStyle });
       } else {
-        return /* @__PURE__ */ import_react15.default.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
+        return /* @__PURE__ */ import_react20.default.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
       }
     }
     const iconStyle = {
@@ -41432,9 +42240,9 @@ 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))"
     };
     if (micState === "idle") {
-      return /* @__PURE__ */ import_react15.default.createElement(mic_default, { style: iconStyle });
+      return /* @__PURE__ */ import_react20.default.createElement(mic_default, { style: iconStyle });
     } else {
-      return /* @__PURE__ */ import_react15.default.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
+      return /* @__PURE__ */ import_react20.default.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
     }
   };
   const getPositionStyle = () => {
@@ -41496,15 +42304,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)";
         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:
@@ -41513,7 +42321,34 @@ var MicButton = ({
     }
     return baseStyle;
   };
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement("div", { "data-cuekit-ignore": true, style: { ...buttonStyles.container, ...getPositionStyle() } }, /* @__PURE__ */ import_react15.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("div", { "data-cuekit-ignore": true, style: { ...buttonStyles.container, ...getPositionStyle() } }, showLanguageSelector ? /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-selection" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-header" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-icon" }, /* @__PURE__ */ import_react20.default.createElement(mic_default, { width: 20, height: 20 })), /* @__PURE__ */ import_react20.default.createElement("span", { className: "voice-chat-language-title" }, "Select Language")), /* @__PURE__ */ import_react20.default.createElement(
+    LanguageSelector,
+    {
+      selectedLanguage,
+      onLanguageChange: handleLanguageChange,
+      availableLanguages: DEFAULT_LANGUAGES,
+      className: "voice-chat-language-selector",
+      screenPosition
+    }
+  ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-language-actions" }, /* @__PURE__ */ import_react20.default.createElement(
+    "button",
+    {
+      className: "voice-chat-cancel-button",
+      onClick: () => setShowLanguageSelector(false)
+    },
+    "Cancel"
+  ), /* @__PURE__ */ import_react20.default.createElement("button", { className: "voice-chat-confirm-button", onClick: handleLanguageConfirm }, "Start Voice Chat"))) : /* @__PURE__ */ import_react20.default.createElement("div", { className: "voice-chat-main-button" }, /* @__PURE__ */ import_react20.default.createElement(
+    LanguageSelector,
+    {
+      selectedLanguage,
+      onLanguageChange: handleLanguageChange,
+      availableLanguages: DEFAULT_LANGUAGES,
+      className: "voice-chat-language-preview",
+      disabled: isConnected2 || micState !== "idle",
+      tooltip: "Close the conversation to change the language",
+      screenPosition
+    }
+  ), /* @__PURE__ */ import_react20.default.createElement(
     "button",
     {
       "data-testid": "ignore",
@@ -41534,8 +42369,8 @@ var MicButton = ({
       },
       "aria-label": micState === "thinking" ? "Processing..." : micState === "replying" ? "AI is responding..." : isListening ? "Stop listening" : "Start listening"
     },
-    /* @__PURE__ */ import_react15.default.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
-  ), hasText && text7 && /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement("div", { style: buttonStyles.iconContainer }, getIcon())
+  )), !showLanguageSelector && hasText && text7 && /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
       style: {
@@ -41553,11 +42388,12 @@ var MicButton = ({
         alignItems: "center",
         justifyContent: "center",
         gap: "4px",
+        marginTop: "8px",
         ...textStyle
       }
     },
-    /* @__PURE__ */ import_react15.default.createElement("span", null, text7)
-  ))), /* @__PURE__ */ import_react15.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement("span", null, text7)
+  )), /* @__PURE__ */ import_react20.default.createElement(
     ChatPopup,
     {
       isOpen: isChatOpen,
@@ -41580,9 +42416,14 @@ var MicButton = ({
       status: getUserFriendlyStatus(micState, isConnected2 ?? false),
       anchor: { position: screenPosition, bottom: bottomSpace, size: buttonSize },
       muteState,
-      onToggleMute: toggleMute
-    }
-  ), isChatOpen && isChatMinimized && /* @__PURE__ */ import_react15.default.createElement(
+      onToggleMute: toggleMute,
+      draggable: true,
+      resizable: true,
+      persistPosition: true,
+      persistSize: true,
+      storageKey: "cuekit-chat-popup"
+    }
+  ), isChatOpen && isChatMinimized && /* @__PURE__ */ import_react20.default.createElement(
     "button",
     {
       onClick: restoreChat,
@@ -41603,8 +42444,8 @@ var MicButton = ({
       className: `cuekit-voice-popup ${currentTheme === "dark" ? "cuekit-dark" : ""}`,
       "aria-label": "Open chat"
     },
-    /* @__PURE__ */ import_react15.default.createElement("span", { style: { fontSize: 12, fontWeight: 600, color: "hsl(var(--voice-text))" } }, "Open chat")
-  ), /* @__PURE__ */ import_react15.default.createElement("div", { ref: audioContainerRef2, style: { display: "none" } }), showBorderGlow && showBodyGlow && /* @__PURE__ */ import_react15.default.createElement(border_glow_default, { isActive: true }));
+    /* @__PURE__ */ import_react20.default.createElement("span", { style: { fontSize: 12, fontWeight: 600, color: "hsl(var(--voice-text))" } }, "Open chat")
+  ), /* @__PURE__ */ import_react20.default.createElement("div", { ref: audioContainerRef2, style: { display: "none" } }), showBorderGlow && showBodyGlow && /* @__PURE__ */ import_react20.default.createElement(border_glow_default, { isActive: true }));
 };
 
 // src/index.ts