call-control-sdk 2.1.0 → 2.3.0

package/README.md

@@ -1,4 +1,4 @@
-# React Call Control SDK
+# Call Control SDK
 
 Achala provide call control SDK with Material-UI components, providing a draggable control panel for call management.
 
@@ -32,14 +32,23 @@ npm install react react-dom @mui/material @mui/icons-material @emotion/react @em
 ### 1. Initialize the SDK
 
 ```typescript
-import { initCallSDK } from 'call-control-sdk';
+import { initSDK } from 'call-control-sdk';
 
 // Initialize at the top level of your app
-initSDK(
-  "API_KEY",
-  "TENANT_ID",
-  "AGENT_ID",
-  "BASE_URL");
+  useEffect(() => {
+    // Initialize the SDK with a test API key
+    try {
+      initSDK({
+        apiKey: "apiKey",
+        tenantId: "tenantId",
+        agentId: "agentId",
+        baseUrl: "baseUrl",
+      });
+      console.log("SDK initialized successfully");
+    } catch (error) {
+      console.error("SDK initialization failed:", error);
+    }
+  }, []);
 ```
 
 ### 2. Use the CallControlPanel
@@ -64,12 +73,15 @@ function App() {
 
 ## API Reference
 
-### `initSDK(sdkApiKey: string, tenantId: string, agentId: string, baseUrl: string)`
+### `initSDK({apiKey: "apiKey",tenantId: "tenantId",agentId: "agentId",baseUrl: "baseUrl",})`
 
 Initializes the SDK with an API key, tenantId, agentId, baseUrl. Must be called before using any components.
 
 **Parameters:**
-- `sdkApiKey` (string): Your API key for SDK authentication
+- `apiKey` (string): Your API key for SDK authentication
+- `tenantId` (string): Your Tenant Id key for Events authentication
+- `agentId` (string): Agent Id for access call controls
+- `baseUrl` (string): Base URL for save events info 
 
 **Throws:** Error if API key is missing or invalid
 
@@ -113,26 +125,6 @@ All control states are automatically saved to localStorage:
 
 The SDK uses Material-UI components and respects your app's MUI theme. Ensure you wrap your app with a `ThemeProvider`:
 
-```typescript
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-
-const theme = createTheme({
-  palette: {
-    mode: 'light',
-    primary: { main: '#1976d2' }
-  }
-});
-
-function App() {
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      {/* Your app content */}
-    </ThemeProvider>
-  );
-}
-```
 
 ## Browser Support
 

package/dist/index.d.mts

@@ -10,13 +10,19 @@ interface CallControlPanelProps {
 }
 type CallStatus = "idle" | "ready" | "break";
 
-declare function CallControlPanel({ onDataChange }: CallControlPanelProps): react_jsx_runtime.JSX.Element;
+declare function CallControlPanel({ onDataChange }: CallControlPanelProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Initialize the Call Control SDK with an API key
  * @param sdkApiKey - The API key for SDK authentication
  * @throws {Error} When API key is missing or invalid
  */
-declare function initSDK(sdkApiKey: string, tenantId: string, agentId: string, baseUrl: string): void;
+type intiSDKParams = {
+    apiKey: string;
+    tenantId: string;
+    agentId: string;
+    baseUrl: string;
+};
+declare function initSDK({ apiKey, tenantId, agentId, baseUrl, }: intiSDKParams): void;
 
 export { CallControlPanel, type CallControlPanelProps, type CallData, type CallStatus, initSDK };

package/dist/index.d.ts

@@ -10,13 +10,19 @@ interface CallControlPanelProps {
 }
 type CallStatus = "idle" | "ready" | "break";
 
-declare function CallControlPanel({ onDataChange }: CallControlPanelProps): react_jsx_runtime.JSX.Element;
+declare function CallControlPanel({ onDataChange }: CallControlPanelProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Initialize the Call Control SDK with an API key
  * @param sdkApiKey - The API key for SDK authentication
  * @throws {Error} When API key is missing or invalid
  */
-declare function initSDK(sdkApiKey: string, tenantId: string, agentId: string, baseUrl: string): void;
+type intiSDKParams = {
+    apiKey: string;
+    tenantId: string;
+    agentId: string;
+    baseUrl: string;
+};
+declare function initSDK({ apiKey, tenantId, agentId, baseUrl, }: intiSDKParams): void;
 
 export { CallControlPanel, type CallControlPanelProps, type CallData, type CallStatus, initSDK };

package/dist/index.js

@@ -1,9 +1,25 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -43,13 +59,12 @@ var EventTrackerSDK = class {
    * @param config Configuration object
    */
   async init(config) {
-    this.config = {
+    this.config = __spreadValues({
       autoTrack: true,
       retryAttempts: 3,
       queueSize: 100,
-      flushInterval: 5e3,
-      ...config
-    };
+      flushInterval: 5e3
+    }, config);
     this.baseUrl = config.baseUrl || (typeof window !== "undefined" ? window.location.origin : "");
     this.setupNetworkDetection();
     const ticket = await this.createTicket();
@@ -226,8 +241,9 @@ var EventTrackerSDK = class {
    * Make an HTTP request with retry logic
    */
   async makeRequest(url, options) {
+    var _a;
     const fullUrl = `${this.baseUrl}${url}`;
-    const maxRetries = this.config?.retryAttempts || 3;
+    const maxRetries = ((_a = this.config) == null ? void 0 : _a.retryAttempts) || 3;
     for (let attempt = 1; attempt <= maxRetries; attempt++) {
       try {
         const response = await fetch(fullUrl, options);
@@ -246,7 +262,8 @@ var EventTrackerSDK = class {
    * Set up automatic event tracking
    */
   setupAutoTracking() {
-    if (typeof window === "undefined" || !this.config?.autoTrack) return;
+    var _a;
+    if (typeof window === "undefined" || !((_a = this.config) == null ? void 0 : _a.autoTrack)) return;
     const autoTrackConfig = this.config.autoTrack === true ? {} : this.config.autoTrack;
     if (autoTrackConfig.pageVisits !== false) {
       this.logEvent("pageVisit", {
@@ -263,11 +280,12 @@ var EventTrackerSDK = class {
     }
     if (autoTrackConfig.clicks !== false) {
       document.addEventListener("click", (event) => {
+        var _a2;
         const target = event.target;
-        if (target.tagName === "BUTTON" || target.tagName === "A" || target.onclick || target.getAttribute("role") === "button") {
+        if (target.tagName === "BUTTON" || target.tagName === "A" || target.onclick || target.getAttribute("role") === "button" || target instanceof HTMLButtonElement && target.type === "button") {
           this.logEvent("click", {
             element: target.tagName,
-            text: target.textContent?.trim().substring(0, 100),
+            text: (_a2 = target.textContent) == null ? void 0 : _a2.trim().substring(0, 100),
             // Limit text length
             href: target.getAttribute("href"),
             id: target.id,
@@ -309,12 +327,13 @@ var EventTrackerSDK = class {
         if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") {
           clearTimeout(inputTimer);
           inputTimer = setTimeout(() => {
+            var _a2;
             this.logEvent("fieldChange", {
               element: target.tagName,
               type: target.getAttribute("type"),
               name: target.getAttribute("name"),
               id: target.id,
-              valueLength: target.value?.length || 0,
+              valueLength: ((_a2 = target.value) == null ? void 0 : _a2.length) || 0,
               timestamp: (/* @__PURE__ */ new Date()).toISOString()
             }).catch(
               (error) => console.warn("Failed to track field change:", error)
@@ -360,8 +379,9 @@ var EventTrackerSDK = class {
         });
       });
       window.addEventListener("unhandledrejection", (event) => {
+        var _a2;
         this.logEvent("unhandledRejection", {
-          reason: event.reason?.toString(),
+          reason: (_a2 = event.reason) == null ? void 0 : _a2.toString(),
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         });
       });
@@ -404,10 +424,11 @@ var EventTrackerSDK = class {
    * Start periodic flush timer
    */
   startPeriodicFlush() {
+    var _a;
     if (this.flushTimer) {
       clearInterval(this.flushTimer);
     }
-    const interval = this.config?.flushInterval || 5e3;
+    const interval = ((_a = this.config) == null ? void 0 : _a.flushInterval) || 5e3;
     this.flushTimer = setInterval(() => {
       this.flush();
     }, interval);
@@ -444,7 +465,8 @@ var SDKStateManager = class {
       isMuted: false,
       status: "idle",
       callStartTime: null,
-      position: { x: 50, y: 50 },
+      controlPanelPosition: { x: 0, y: 0 },
+      iframePosition: { x: 0, y: 0 },
       callData: {
         mobileNumber: "",
         callReferenceId: "",
@@ -457,14 +479,14 @@ var SDKStateManager = class {
       const stored = localStorage.getItem(this.STORAGE_KEY);
       if (stored) {
         const parsedState = JSON.parse(stored);
-        this.state = {
-          ...this.state,
+        this.state = __spreadProps(__spreadValues({}, this.state), {
           isHolding: parsedState.isHolding || false,
           isMuted: parsedState.isMuted || false,
           status: parsedState.status || "idle",
-          position: parsedState.position || { x: 50, y: 50 },
+          controlPanelPosition: parsedState.controlPanelPosition || { x: 50, y: 50 },
+          iframePosition: parsedState.iframePosition || { x: 50, y: 50 },
           callStartTime: parsedState.callStartTime || null
-        };
+        });
       }
     } catch (error) {
       console.warn("Failed to load SDK state from localStorage:", error);
@@ -476,7 +498,8 @@ var SDKStateManager = class {
         isHolding: this.state.isHolding,
         isMuted: this.state.isMuted,
         status: this.state.status,
-        position: this.state.position,
+        controlPanelPosition: this.state.controlPanelPosition,
+        iframePosition: this.state.iframePosition,
         callStartTime: this.state.callStartTime
       };
       localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
@@ -496,7 +519,7 @@ var SDKStateManager = class {
     this.notifyListeners();
   }
   getState() {
-    return { ...this.state };
+    return __spreadValues({}, this.state);
   }
   subscribe(listener) {
     this.listeners.push(listener);
@@ -522,8 +545,13 @@ var SDKStateManager = class {
     this.saveToStorage();
     this.notifyListeners();
   }
-  setPosition(position) {
-    this.state.position = position;
+  setControlPanelPosition(position) {
+    this.state.controlPanelPosition = position;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setIframePosition(position) {
+    this.state.iframePosition = position;
     this.saveToStorage();
     this.notifyListeners();
   }
@@ -542,7 +570,7 @@ var SDKStateManager = class {
     this.notifyListeners();
   }
   updateCallData(data) {
-    this.state.callData = { ...this.state.callData, ...data };
+    this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
     this.notifyListeners();
   }
 };
@@ -586,7 +614,7 @@ function useDraggable(initialPosition, onPositionChange) {
         y: Math.max(0, Math.min(newPosition.y, viewportHeight - rect.height))
       };
       setPosition(constrainedPosition);
-      onPositionChange?.(constrainedPosition);
+      onPositionChange == null ? void 0 : onPositionChange(constrainedPosition);
     },
     [onPositionChange]
   );
@@ -669,8 +697,12 @@ function CallControlPanel({ onDataChange }) {
   const [moreOptionsAnchorEl, setMoreOptionsAnchorEl] = (0, import_react3.useState)(null);
   const [callDuration, setCallDuration] = (0, import_react3.useState)(0);
   const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } = useDraggable(
-    state.position,
-    (newPosition) => sdkStateManager.setPosition(newPosition)
+    state.controlPanelPosition,
+    (newPosition) => sdkStateManager.setControlPanelPosition(newPosition)
+  );
+  const { position: xposition, isDragging: xisDragging, dragRef: xdragRef, handleMouseDown: xhandleMouseDown, handleTouchStart: xhandleTouchStart } = useDraggable(
+    state.iframePosition,
+    (newPosition) => sdkStateManager.setIframePosition(newPosition)
   );
   (0, import_react3.useEffect)(() => {
     let interval;
@@ -746,6 +778,9 @@ function CallControlPanel({ onDataChange }) {
   const handleCloseDialer = () => {
     setDialerAnchorEl(null);
   };
+  if (!state.isInitialized) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_material.Paper,
@@ -763,7 +798,6 @@ function CallControlPanel({ onDataChange }) {
           transition: theme.transitions.create(["box-shadow", "transform"], {
             duration: theme.transitions.duration.short
           }),
-          // transform: isDragging ? "scale(1.01)" : "scale(1)",
           minWidth: 320,
           userSelect: "none"
         },
@@ -964,6 +998,63 @@ function CallControlPanel({ onDataChange }) {
         )
       }
     ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Fade, { in: true, timeout: 300, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_material.Paper,
+      {
+        ref: xdragRef,
+        elevation: xisDragging ? 2 : 1,
+        sx: {
+          position: "fixed",
+          left: xposition.x,
+          top: xposition.y,
+          p: 1,
+          height: "auto",
+          // borderRadius: 3,
+          bgcolor: "background.paper",
+          cursor: xisDragging ? "grabbing" : "grab",
+          transition: theme.transitions.create(["box-shadow", "transform"], {
+            duration: theme.transitions.duration.short
+          }),
+          // minWidth: 320,
+          userSelect: "none"
+        },
+        onMouseDown: xhandleMouseDown,
+        onTouchStart: xhandleTouchStart,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_material.Box,
+            {
+              sx: {
+                width: "100%",
+                height: "auto",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.DragIndicator, { sx: {
+                  transform: "rotate(90deg)"
+                } }),
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Close, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "iframe",
+            {
+              src: "https://h68.deepijatel.in/ConVoxCCS",
+              height: 300
+            }
+          )
+        ] })
+      }
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_material.Menu,
       {
@@ -1106,10 +1197,15 @@ function CallControlPanel({ onDataChange }) {
 }
 
 // src/index.ts
-function initSDK(sdkApiKey, tenantId, agentId, baseUrl) {
-  sdkStateManager.initialize(sdkApiKey);
+function initSDK({
+  apiKey,
+  tenantId,
+  agentId,
+  baseUrl
+}) {
+  sdkStateManager.initialize(apiKey);
   eventTracker.init({
-    apiKey: sdkApiKey,
+    apiKey,
     tenantId,
     agentId,
     baseUrl

package/dist/index.mjs

@@ -1,5 +1,22 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/lib/hooks/eventsTracker.ts
@@ -18,13 +35,12 @@ var EventTrackerSDK = class {
    * @param config Configuration object
    */
   async init(config) {
-    this.config = {
+    this.config = __spreadValues({
       autoTrack: true,
       retryAttempts: 3,
       queueSize: 100,
-      flushInterval: 5e3,
-      ...config
-    };
+      flushInterval: 5e3
+    }, config);
     this.baseUrl = config.baseUrl || (typeof window !== "undefined" ? window.location.origin : "");
     this.setupNetworkDetection();
     const ticket = await this.createTicket();
@@ -201,8 +217,9 @@ var EventTrackerSDK = class {
    * Make an HTTP request with retry logic
    */
   async makeRequest(url, options) {
+    var _a;
     const fullUrl = `${this.baseUrl}${url}`;
-    const maxRetries = this.config?.retryAttempts || 3;
+    const maxRetries = ((_a = this.config) == null ? void 0 : _a.retryAttempts) || 3;
     for (let attempt = 1; attempt <= maxRetries; attempt++) {
       try {
         const response = await fetch(fullUrl, options);
@@ -221,7 +238,8 @@ var EventTrackerSDK = class {
    * Set up automatic event tracking
    */
   setupAutoTracking() {
-    if (typeof window === "undefined" || !this.config?.autoTrack) return;
+    var _a;
+    if (typeof window === "undefined" || !((_a = this.config) == null ? void 0 : _a.autoTrack)) return;
     const autoTrackConfig = this.config.autoTrack === true ? {} : this.config.autoTrack;
     if (autoTrackConfig.pageVisits !== false) {
       this.logEvent("pageVisit", {
@@ -238,11 +256,12 @@ var EventTrackerSDK = class {
     }
     if (autoTrackConfig.clicks !== false) {
       document.addEventListener("click", (event) => {
+        var _a2;
         const target = event.target;
-        if (target.tagName === "BUTTON" || target.tagName === "A" || target.onclick || target.getAttribute("role") === "button") {
+        if (target.tagName === "BUTTON" || target.tagName === "A" || target.onclick || target.getAttribute("role") === "button" || target instanceof HTMLButtonElement && target.type === "button") {
           this.logEvent("click", {
             element: target.tagName,
-            text: target.textContent?.trim().substring(0, 100),
+            text: (_a2 = target.textContent) == null ? void 0 : _a2.trim().substring(0, 100),
             // Limit text length
             href: target.getAttribute("href"),
             id: target.id,
@@ -284,12 +303,13 @@ var EventTrackerSDK = class {
         if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT") {
           clearTimeout(inputTimer);
           inputTimer = setTimeout(() => {
+            var _a2;
             this.logEvent("fieldChange", {
               element: target.tagName,
               type: target.getAttribute("type"),
               name: target.getAttribute("name"),
               id: target.id,
-              valueLength: target.value?.length || 0,
+              valueLength: ((_a2 = target.value) == null ? void 0 : _a2.length) || 0,
               timestamp: (/* @__PURE__ */ new Date()).toISOString()
             }).catch(
               (error) => console.warn("Failed to track field change:", error)
@@ -335,8 +355,9 @@ var EventTrackerSDK = class {
         });
       });
       window.addEventListener("unhandledrejection", (event) => {
+        var _a2;
         this.logEvent("unhandledRejection", {
-          reason: event.reason?.toString(),
+          reason: (_a2 = event.reason) == null ? void 0 : _a2.toString(),
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         });
       });
@@ -379,10 +400,11 @@ var EventTrackerSDK = class {
    * Start periodic flush timer
    */
   startPeriodicFlush() {
+    var _a;
     if (this.flushTimer) {
       clearInterval(this.flushTimer);
     }
-    const interval = this.config?.flushInterval || 5e3;
+    const interval = ((_a = this.config) == null ? void 0 : _a.flushInterval) || 5e3;
     this.flushTimer = setInterval(() => {
       this.flush();
     }, interval);
@@ -419,7 +441,8 @@ var SDKStateManager = class {
       isMuted: false,
       status: "idle",
       callStartTime: null,
-      position: { x: 50, y: 50 },
+      controlPanelPosition: { x: 0, y: 0 },
+      iframePosition: { x: 0, y: 0 },
       callData: {
         mobileNumber: "",
         callReferenceId: "",
@@ -432,14 +455,14 @@ var SDKStateManager = class {
       const stored = localStorage.getItem(this.STORAGE_KEY);
       if (stored) {
         const parsedState = JSON.parse(stored);
-        this.state = {
-          ...this.state,
+        this.state = __spreadProps(__spreadValues({}, this.state), {
           isHolding: parsedState.isHolding || false,
           isMuted: parsedState.isMuted || false,
           status: parsedState.status || "idle",
-          position: parsedState.position || { x: 50, y: 50 },
+          controlPanelPosition: parsedState.controlPanelPosition || { x: 50, y: 50 },
+          iframePosition: parsedState.iframePosition || { x: 50, y: 50 },
           callStartTime: parsedState.callStartTime || null
-        };
+        });
       }
     } catch (error) {
       console.warn("Failed to load SDK state from localStorage:", error);
@@ -451,7 +474,8 @@ var SDKStateManager = class {
         isHolding: this.state.isHolding,
         isMuted: this.state.isMuted,
         status: this.state.status,
-        position: this.state.position,
+        controlPanelPosition: this.state.controlPanelPosition,
+        iframePosition: this.state.iframePosition,
         callStartTime: this.state.callStartTime
       };
       localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
@@ -471,7 +495,7 @@ var SDKStateManager = class {
     this.notifyListeners();
   }
   getState() {
-    return { ...this.state };
+    return __spreadValues({}, this.state);
   }
   subscribe(listener) {
     this.listeners.push(listener);
@@ -497,8 +521,13 @@ var SDKStateManager = class {
     this.saveToStorage();
     this.notifyListeners();
   }
-  setPosition(position) {
-    this.state.position = position;
+  setControlPanelPosition(position) {
+    this.state.controlPanelPosition = position;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setIframePosition(position) {
+    this.state.iframePosition = position;
     this.saveToStorage();
     this.notifyListeners();
   }
@@ -517,7 +546,7 @@ var SDKStateManager = class {
     this.notifyListeners();
   }
   updateCallData(data) {
-    this.state.callData = { ...this.state.callData, ...data };
+    this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
     this.notifyListeners();
   }
 };
@@ -556,7 +585,8 @@ import {
   DragIndicator,
   WifiCalling3,
   Layers,
-  Phone
+  Phone,
+  Close
 } from "@mui/icons-material";
 
 // src/lib/hooks/useSDKState.ts
@@ -596,7 +626,7 @@ function useDraggable(initialPosition, onPositionChange) {
         y: Math.max(0, Math.min(newPosition.y, viewportHeight - rect.height))
       };
       setPosition(constrainedPosition);
-      onPositionChange?.(constrainedPosition);
+      onPositionChange == null ? void 0 : onPositionChange(constrainedPosition);
     },
     [onPositionChange]
   );
@@ -679,8 +709,12 @@ function CallControlPanel({ onDataChange }) {
   const [moreOptionsAnchorEl, setMoreOptionsAnchorEl] = useState3(null);
   const [callDuration, setCallDuration] = useState3(0);
   const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } = useDraggable(
-    state.position,
-    (newPosition) => sdkStateManager.setPosition(newPosition)
+    state.controlPanelPosition,
+    (newPosition) => sdkStateManager.setControlPanelPosition(newPosition)
+  );
+  const { position: xposition, isDragging: xisDragging, dragRef: xdragRef, handleMouseDown: xhandleMouseDown, handleTouchStart: xhandleTouchStart } = useDraggable(
+    state.iframePosition,
+    (newPosition) => sdkStateManager.setIframePosition(newPosition)
   );
   useEffect2(() => {
     let interval;
@@ -756,6 +790,9 @@ function CallControlPanel({ onDataChange }) {
   const handleCloseDialer = () => {
     setDialerAnchorEl(null);
   };
+  if (!state.isInitialized) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Fade, { in: true, timeout: 300, children: /* @__PURE__ */ jsx(
       Paper,
@@ -773,7 +810,6 @@ function CallControlPanel({ onDataChange }) {
           transition: theme.transitions.create(["box-shadow", "transform"], {
             duration: theme.transitions.duration.short
           }),
-          // transform: isDragging ? "scale(1.01)" : "scale(1)",
           minWidth: 320,
           userSelect: "none"
         },
@@ -974,6 +1010,63 @@ function CallControlPanel({ onDataChange }) {
         )
       }
     ) }),
+    /* @__PURE__ */ jsx(Fade, { in: true, timeout: 300, children: /* @__PURE__ */ jsx(
+      Paper,
+      {
+        ref: xdragRef,
+        elevation: xisDragging ? 2 : 1,
+        sx: {
+          position: "fixed",
+          left: xposition.x,
+          top: xposition.y,
+          p: 1,
+          height: "auto",
+          // borderRadius: 3,
+          bgcolor: "background.paper",
+          cursor: xisDragging ? "grabbing" : "grab",
+          transition: theme.transitions.create(["box-shadow", "transform"], {
+            duration: theme.transitions.duration.short
+          }),
+          // minWidth: 320,
+          userSelect: "none"
+        },
+        onMouseDown: xhandleMouseDown,
+        onTouchStart: xhandleTouchStart,
+        children: /* @__PURE__ */ jsxs(Box, { sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column"
+        }, children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                width: "100%",
+                height: "auto",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsx(DragIndicator, { sx: {
+                  transform: "rotate(90deg)"
+                } }),
+                " ",
+                /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(Close, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              src: "https://h68.deepijatel.in/ConVoxCCS",
+              height: 300
+            }
+          )
+        ] })
+      }
+    ) }),
     /* @__PURE__ */ jsx(
       Menu,
       {
@@ -1116,10 +1209,15 @@ function CallControlPanel({ onDataChange }) {
 }
 
 // src/index.ts
-function initSDK(sdkApiKey, tenantId, agentId, baseUrl) {
-  sdkStateManager.initialize(sdkApiKey);
+function initSDK({
+  apiKey,
+  tenantId,
+  agentId,
+  baseUrl
+}) {
+  sdkStateManager.initialize(apiKey);
   eventTracker.init({
-    apiKey: sdkApiKey,
+    apiKey,
     tenantId,
     agentId,
     baseUrl

package/package.json

@@ -1,29 +1,43 @@
 {
   "name": "call-control-sdk",
-  "description": "Call Control SDK",
-  "version": "2.1.0",
+  "description": "Call Control SDK - draggable call controls",
+  "version": "2.3.0",
   "author": "Achala",
   "license": "MIT",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist"
   ],
   "scripts": {
-    "dev": "vite",
-    "start": "vite",
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --tsconfig tsconfig.build.json",
     "lint": "eslint .",
     "format": "prettier --write .",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.1",
-    "@mui/material": "^7.3.1",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "@emotion/react": ">=11.0.0",
+    "@emotion/styled": ">=11.0.0",
+    "@mui/icons-material": ">=5.0.0",
+    "@mui/material": ">=5.0.0",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "tsup": "^8.5.0",
+    "vite": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "eslint": "^8.0.0",
+    "prettier": "^3.0.0"
   }
 }