@cuekit-ai/react 1.5.0 → 1.6.0

package/dist/index.mjs

@@ -37,7 +37,7 @@ import {
   setWebRTCCallbacks,
   setWebRTCConfig,
   validateDynamicElements
-} from "./chunk-MHLYAXXW.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(
@@ -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-AUWJ6AHB.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 useEffect9, 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);
@@ -1653,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]
   );
@@ -1761,7 +1776,7 @@ var useCuekit = (options) => {
 };
 
 // src/components/chat-popup.tsx
-import React8, { useState as useState5, useEffect as useEffect4, 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() {
@@ -14558,6 +14573,606 @@ var MicIcon = ({ width = 24, height = 24, className, ...props }) => {
 };
 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,
@@ -14576,15 +15191,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] = 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" });
   };
-  useEffect4(() => {
+  useEffect6(() => {
     console.log("\u{1F4EC} ChatPopup received messages:", JSON.stringify(messages, null, 2));
     scrollToBottom();
   }, [messages]);
@@ -14606,7 +15232,6 @@ var ChatPopup = ({
       handleSend();
     }
   };
-  if (!isOpen || isMinimized) return null;
   const getStatusText = () => {
     if (status) return status;
     if (micState === "listening") return "Listening...";
@@ -14614,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__ */ React8.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)",
@@ -14663,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__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         style: {
@@ -14680,14 +15312,14 @@ var ChatPopup = ({
           justifyContent: "space-between"
         }
       },
-      /* @__PURE__ */ React8.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } }, /* @__PURE__ */ React8.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__ */ React8.createElement(
+      ), /* @__PURE__ */ React10.createElement(
         "div",
         {
           style: {
@@ -14698,10 +15330,11 @@ var ChatPopup = ({
             justifyContent: "center"
           }
         },
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React10.createElement(
           "span",
           {
             style: {
+              paddingLeft: showLogo ? 0 : 12,
               fontSize: 18,
               fontWeight: 700,
               lineHeight: "1.2",
@@ -14713,9 +15346,9 @@ var ChatPopup = ({
               WebkitTextFillColor: "transparent"
             }
           },
-          "ansyr.ai"
+          title
         ),
-        /* @__PURE__ */ React8.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 } }, /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React10.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 4 } }, /* @__PURE__ */ React10.createElement(
           "div",
           {
             style: {
@@ -14731,7 +15364,7 @@ var ChatPopup = ({
               fontWeight: "500"
             }
           },
-          /* @__PURE__ */ React8.createElement(
+          /* @__PURE__ */ React10.createElement(
             "span",
             {
               style: {
@@ -14742,8 +15375,8 @@ var ChatPopup = ({
           )
         ))
       )),
-      /* @__PURE__ */ React8.createElement("div", { style: { minWidth: 100, textAlign: "center" } }),
-      /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ React10.createElement("div", { style: { minWidth: 100, textAlign: "center" } }),
+      /* @__PURE__ */ React10.createElement(
         "div",
         {
           style: {
@@ -14755,7 +15388,7 @@ var ChatPopup = ({
             top: 16
           }
         },
-        onThemeToggle && /* @__PURE__ */ React8.createElement(
+        onThemeToggle && /* @__PURE__ */ React10.createElement(
           "button",
           {
             onClick: () => {
@@ -14785,7 +15418,7 @@ var ChatPopup = ({
             "aria-label": "Toggle theme",
             title: `Switch to ${currentTheme === "dark" ? "light" : "dark"} mode`
           },
-          currentTheme === "dark" ? /* @__PURE__ */ React8.createElement(
+          currentTheme === "dark" ? /* @__PURE__ */ React10.createElement(
             sun_default,
             {
               style: {
@@ -14795,7 +15428,7 @@ var ChatPopup = ({
                 animation: "themeToggleEnter 0.3s ease-in-out"
               }
             }
-          ) : /* @__PURE__ */ React8.createElement(
+          ) : /* @__PURE__ */ React10.createElement(
             moon_default,
             {
               style: {
@@ -14807,7 +15440,7 @@ var ChatPopup = ({
             }
           )
         ),
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React10.createElement(
           "button",
           {
             onClick: onMinimize,
@@ -14834,11 +15467,11 @@ var ChatPopup = ({
             "aria-label": "Minimize",
             title: "Minimize chat"
           },
-          /* @__PURE__ */ React8.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__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         style: {
@@ -14851,7 +15484,7 @@ var ChatPopup = ({
           color: "hsl(var(--voice-text))"
         }
       },
-      messages.length === 0 ? /* @__PURE__ */ React8.createElement(
+      messages.length === 0 ? /* @__PURE__ */ React10.createElement(
         "div",
         {
           style: {
@@ -14861,7 +15494,7 @@ var ChatPopup = ({
           }
         },
         "Start a conversation with CueKit AI"
-      ) : messages.map((message, index2) => /* @__PURE__ */ React8.createElement(
+      ) : messages.map((message, index2) => /* @__PURE__ */ React10.createElement(
         "div",
         {
           key: index2,
@@ -14875,7 +15508,7 @@ var ChatPopup = ({
             justifyContent: message.sender === "user" ? "flex-end" : "flex-start"
           }
         },
-        message.sender === "assistant" && /* @__PURE__ */ React8.createElement(
+        message.sender === "assistant" && showAIIcon && /* @__PURE__ */ React10.createElement(
           "div",
           {
             style: {
@@ -14890,7 +15523,7 @@ var ChatPopup = ({
               overflow: "hidden"
             }
           },
-          /* @__PURE__ */ React8.createElement(
+          /* @__PURE__ */ React10.createElement(
             "img",
             {
               src: "https://dashboard.cuekit.ai/_next/image?url=%2Fimages%2Fcuekit-logo-2.png&w=256&q=100",
@@ -14904,7 +15537,7 @@ var ChatPopup = ({
             }
           )
         ),
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React10.createElement(
           "div",
           {
             style: {
@@ -14915,7 +15548,7 @@ var ChatPopup = ({
               flex: 1
             }
           },
-          /* @__PURE__ */ React8.createElement(
+          /* @__PURE__ */ React10.createElement(
             "div",
             {
               style: {
@@ -14933,12 +15566,12 @@ var ChatPopup = ({
                 marginLeft: message.sender === "user" ? "auto" : 0
               }
             },
-            /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(
+            /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement(
               Markdown,
               {
                 remarkPlugins: [remarkGfm],
                 components: {
-                  p: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  p: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "p",
                     {
                       style: {
@@ -14949,7 +15582,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h1: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  h1: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "h1",
                     {
                       style: {
@@ -14961,7 +15594,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h2: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  h2: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "h2",
                     {
                       style: {
@@ -14973,7 +15606,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  h3: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  h3: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "h3",
                     {
                       style: {
@@ -14985,7 +15618,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  ul: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  ul: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "ul",
                     {
                       style: {
@@ -14997,7 +15630,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  ol: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  ol: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "ol",
                     {
                       style: {
@@ -15009,7 +15642,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  li: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  li: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "li",
                     {
                       style: {
@@ -15020,7 +15653,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  strong: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  strong: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "strong",
                     {
                       style: {
@@ -15031,7 +15664,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  em: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  em: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "em",
                     {
                       style: {
@@ -15042,7 +15675,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  code: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  code: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "code",
                     {
                       style: {
@@ -15055,7 +15688,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  pre: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  pre: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "pre",
                     {
                       style: {
@@ -15070,7 +15703,7 @@ var ChatPopup = ({
                     },
                     children
                   ),
-                  blockquote: ({ children }) => /* @__PURE__ */ React8.createElement(
+                  blockquote: ({ children }) => /* @__PURE__ */ React10.createElement(
                     "blockquote",
                     {
                       style: {
@@ -15089,7 +15722,7 @@ var ChatPopup = ({
               message.text
             ))
           ),
-          message.sender === "user" && /* @__PURE__ */ React8.createElement(
+          message.sender === "user" && showUserIcon && /* @__PURE__ */ React10.createElement(
             "div",
             {
               style: {
@@ -15110,9 +15743,9 @@ var ChatPopup = ({
           )
         )
       )),
-      /* @__PURE__ */ React8.createElement("div", { ref: messagesEndRef })
+      /* @__PURE__ */ React10.createElement("div", { ref: messagesEndRef })
     ),
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         style: {
@@ -15121,7 +15754,7 @@ var ChatPopup = ({
           background: "hsl(var(--voice-bg))"
         }
       },
-      /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ React10.createElement(
         "form",
         {
           onSubmit: (e2) => {
@@ -15130,7 +15763,7 @@ var ChatPopup = ({
           },
           style: { display: "flex", alignItems: "center", gap: 8, margin: 0 }
         },
-        /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React10.createElement(
           "input",
           {
             type: "text",
@@ -15157,7 +15790,7 @@ var ChatPopup = ({
             }
           }
         ),
-        muteState?.canMute && onToggleMute && /* @__PURE__ */ React8.createElement(
+        muteState?.canMute && onToggleMute && /* @__PURE__ */ React10.createElement(
           "button",
           {
             onClick: onToggleMute,
@@ -15177,8 +15810,8 @@ var ChatPopup = ({
             "aria-label": muteState.isMuted ? "Unmute microphone" : "Mute microphone",
             title: muteState.isMuted ? "Unmute microphone" : "Mute microphone"
           },
-          muteState.isMuted ? /* @__PURE__ */ React8.createElement(
-            mic_default,
+          muteState.isMuted ? /* @__PURE__ */ React10.createElement(
+            mic_off_default,
             {
               style: {
                 width: 16,
@@ -15186,8 +15819,8 @@ var ChatPopup = ({
                 color: "hsl(var(--voice-user-text))"
               }
             }
-          ) : /* @__PURE__ */ React8.createElement(
-            mic_off_default,
+          ) : /* @__PURE__ */ React10.createElement(
+            mic_default,
             {
               style: {
                 width: 16,
@@ -15197,7 +15830,7 @@ var ChatPopup = ({
             }
           )
         ),
-        isConnected && onEndCall && /* @__PURE__ */ React8.createElement(
+        isConnected && onEndCall && /* @__PURE__ */ React10.createElement(
           "button",
           {
             type: "submit",
@@ -15216,7 +15849,7 @@ var ChatPopup = ({
               cursor: "pointer"
             }
           },
-          /* @__PURE__ */ React8.createElement(phone_off_default, { style: { width: 16, height: 16 } })
+          /* @__PURE__ */ React10.createElement(phone_off_default, { style: { width: 16, height: 16 } })
         )
       )
     )
@@ -15224,7 +15857,7 @@ var ChatPopup = ({
 };
 
 // src/components/border-glow.tsx
-import React9 from "react";
+import React11 from "react";
 var BorderGlow = ({ isActive }) => {
   if (!isActive) return null;
   const styles = {
@@ -15351,7 +15984,7 @@ var BorderGlow = ({ isActive }) => {
       opacity: 0.6
     }
   };
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("style", null, `
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("style", null, `
           @keyframes borderPulse {
             0%, 100% {
               opacity: 1;
@@ -15360,12 +15993,12 @@ var BorderGlow = ({ isActive }) => {
               opacity: 0.5;
             }
           }
-        `), /* @__PURE__ */ React9.createElement("div", { style: styles.container }, /* @__PURE__ */ React9.createElement("div", { style: styles.rightBorder1 }), /* @__PURE__ */ React9.createElement("div", { style: styles.rightBorder2 }), /* @__PURE__ */ React9.createElement("div", { style: styles.rightBorder3 }), /* @__PURE__ */ React9.createElement("div", { style: styles.leftBorder1 }), /* @__PURE__ */ React9.createElement("div", { style: styles.leftBorder2 }), /* @__PURE__ */ React9.createElement("div", { style: styles.leftBorder3 }), /* @__PURE__ */ React9.createElement("div", { style: styles.cornerTopLeft }), /* @__PURE__ */ React9.createElement("div", { style: styles.cornerTopRight }), /* @__PURE__ */ React9.createElement("div", { style: styles.cornerBottomRight }), /* @__PURE__ */ React9.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 React10, { useEffect as useEffect8, 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";
@@ -17181,8 +17814,8 @@ var Xt = /* @__PURE__ */ e.forwardRef(
 
 // src/components/voice-intensity-visualizer.tsx
 var VoiceIntensityWithRoom = (props) => {
-  const [room, setRoom] = useState9(null);
-  useEffect8(() => {
+  const [room, setRoom] = useState10(null);
+  useEffect10(() => {
     if (props.isActive) {
       const currentRoom = getRoom();
       if (currentRoom) {
@@ -17195,7 +17828,7 @@ var VoiceIntensityWithRoom = (props) => {
   if (!room) {
     return null;
   }
-  return /* @__PURE__ */ React10.createElement(Wn.Provider, { value: room }, /* @__PURE__ */ React10.createElement(VoiceIntensityBars, { ...props }));
+  return /* @__PURE__ */ React12.createElement(Wn.Provider, { value: room }, /* @__PURE__ */ React12.createElement(VoiceIntensityBars, { ...props }));
 };
 var VoiceIntensityBars = ({
   isActive,
@@ -17238,7 +17871,7 @@ var VoiceIntensityBars = ({
   if (!trackRef) {
     return null;
   }
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "div",
     {
       className: `voice-intensity-visualizer ${className}`,
@@ -17255,7 +17888,7 @@ var VoiceIntensityBars = ({
         pointerEvents: "none"
       }
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React12.createElement(
       Xt,
       {
         barCount,
@@ -17269,19 +17902,151 @@ var VoiceIntensityBars = ({
           gap: "0.25rem"
         }
       },
-      /* @__PURE__ */ React10.createElement("span", { className: "cuekit-voice-intensity-bar" })
+      /* @__PURE__ */ React12.createElement("span", { className: "cuekit-voice-intensity-bar" })
     )
   );
 };
 var VoiceIntensityVisualizer = VoiceIntensityWithRoom;
 
+// 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",
+      width,
+      height,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ React13.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] = 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",
+    {
+      className: `language-selector-container ${className}`,
+      ref: dropdownRef,
+      onMouseEnter: () => {
+        if (disabled) {
+          setShowTooltip(true);
+        }
+      },
+      onMouseLeave: () => {
+        setShowTooltip(false);
+      }
+    },
+    /* @__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")
+    ))))
+  );
+};
+
 // src/components/mic-button.tsx
 var chatState = {
   isOpen: false,
   isMinimized: false
 };
 var VoiceIntensityWrapper = ({ active, buttonSize }) => {
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React15.createElement(
     VoiceIntensityVisualizer,
     {
       isActive: active,
@@ -17291,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",
@@ -17302,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);
-  useEffect9(() => {
+  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,
@@ -17347,7 +18123,7 @@ var MicButton = ({
     onAISpeechEnd: (trackId) => handleAISpeech(false, trackId),
     appId
   });
-  useEffect9(() => {
+  useEffect12(() => {
     const checkTheme = () => {
       if (typeof document !== "undefined") {
         let newTheme;
@@ -17370,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);
@@ -17415,7 +18191,7 @@ var MicButton = ({
     },
     [status, micState, isConnected]
   );
-  useEffect9(() => {
+  useEffect12(() => {
     if (audioContainerRef.current) {
       setAudioContainer(audioContainerRef);
     }
@@ -17442,29 +18218,51 @@ var MicButton = ({
     }
     return isConnected2 ? "Ready" : "Connecting...";
   };
-  useEffect9(() => {
+  useEffect12(() => {
     if (isConnected) {
     } else {
     }
   }, [isConnected]);
-  useEffect9(() => {
+  useEffect12(() => {
     if (isConnected && !isChatOpen) {
       openChat();
     }
   }, [isConnected, isChatOpen, openChat]);
-  useEffect9(() => {
+  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(() => {
@@ -17480,6 +18278,8 @@ var MicButton = ({
     voiceConnect,
     apiKey,
     appId,
+    language,
+    selectedLanguage,
     openChat,
     showBorderGlow,
     sendChatMessage,
@@ -17528,9 +18328,9 @@ var MicButton = ({
         ...imageStyle
       };
       if (micState === "idle") {
-        return /* @__PURE__ */ React11.createElement("img", { src: imageSource, alt: "Voice Assistant", style: baseImageStyle });
+        return /* @__PURE__ */ React15.createElement("img", { src: imageSource, alt: "Voice Assistant", style: baseImageStyle });
       } else {
-        return /* @__PURE__ */ React11.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
+        return /* @__PURE__ */ React15.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
       }
     }
     const iconStyle = {
@@ -17540,9 +18340,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__ */ React11.createElement(mic_default, { style: iconStyle });
+      return /* @__PURE__ */ React15.createElement(mic_default, { style: iconStyle });
     } else {
-      return /* @__PURE__ */ React11.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
+      return /* @__PURE__ */ React15.createElement(VoiceIntensityWrapper, { active: true, buttonSize });
     }
   };
   const getPositionStyle = () => {
@@ -17604,15 +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)";
         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:
@@ -17621,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",
@@ -17642,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: {
@@ -17661,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,
@@ -17688,9 +18516,14 @@ var MicButton = ({
       status: getUserFriendlyStatus(micState, isConnected ?? false),
       anchor: { position: screenPosition, bottom: bottomSpace, size: buttonSize },
       muteState,
-      onToggleMute: toggleMute
-    }
-  ), isChatOpen && isChatMinimized && /* @__PURE__ */ React11.createElement(
+      onToggleMute: toggleMute,
+      draggable: true,
+      resizable: true,
+      persistPosition: true,
+      persistSize: true,
+      storageKey: "cuekit-chat-popup"
+    }
+  ), isChatOpen && isChatMinimized && /* @__PURE__ */ React15.createElement(
     "button",
     {
       onClick: restoreChat,
@@ -17711,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
@@ -17723,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,
@@ -17739,8 +18576,9 @@ export {
   initWebRTC,
   initWebRTCWithDeployedBackend,
   resolveRoutePath,
+  useAnsyrContext,
   useCuekit,
-  useQubeContext,
+  useDraggableResizableContainer,
   useWebRTC,
   validateDynamicElements
 };