call-control-sdk 1.0.0 → 2.0.0

package/dist/index.d.mts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CallData {
+    mobileNumber: string;
+    callReferenceId: string;
+    agentLoginId: string;
+}
+interface CallControlPanelProps {
+    onDataChange?: (data: CallData) => void;
+}
+
+declare function CallControlPanel({ onDataChange }: CallControlPanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * 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 initCallSDK(sdkApiKey: string): void;
+/**
+ * Update call data (used by host application)
+ * @param data - Partial call data to update
+ */
+declare function updateCallData(data: {
+    mobileNumber?: string;
+    callReferenceId?: string;
+    agentLoginId?: string;
+}): void;
+
+export { CallControlPanel, initCallSDK, updateCallData };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CallData {
+    mobileNumber: string;
+    callReferenceId: string;
+    agentLoginId: string;
+}
+interface CallControlPanelProps {
+    onDataChange?: (data: CallData) => void;
+}
+
+declare function CallControlPanel({ onDataChange }: CallControlPanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * 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 initCallSDK(sdkApiKey: string): void;
+/**
+ * Update call data (used by host application)
+ * @param data - Partial call data to update
+ */
+declare function updateCallData(data: {
+    mobileNumber?: string;
+    callReferenceId?: string;
+    agentLoginId?: string;
+}): void;
+
+export { CallControlPanel, initCallSDK, updateCallData };

package/dist/index.js

@@ -0,0 +1,630 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CallControlPanel: () => CallControlPanel,
+  initCallSDK: () => initCallSDK,
+  updateCallData: () => updateCallData
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/lib/sdk-state.ts
+var SDKStateManager = class {
+  constructor() {
+    __publicField(this, "state");
+    __publicField(this, "listeners", []);
+    __publicField(this, "STORAGE_KEY", "call-control-sdk-state");
+    this.state = this.getInitialState();
+    this.loadFromStorage();
+  }
+  getInitialState() {
+    return {
+      apiKey: null,
+      isInitialized: false,
+      isHolding: false,
+      isMuted: false,
+      status: "idle",
+      callStartTime: null,
+      position: { x: 50, y: 50 },
+      callData: {
+        mobileNumber: "",
+        callReferenceId: "",
+        agentLoginId: ""
+      }
+    };
+  }
+  loadFromStorage() {
+    try {
+      const stored = localStorage.getItem(this.STORAGE_KEY);
+      if (stored) {
+        const parsedState = JSON.parse(stored);
+        this.state = {
+          ...this.state,
+          isHolding: parsedState.isHolding || false,
+          isMuted: parsedState.isMuted || false,
+          status: parsedState.status || "idle",
+          position: parsedState.position || { x: 50, y: 50 },
+          callStartTime: parsedState.callStartTime || null
+        };
+      }
+    } catch (error) {
+      console.warn("Failed to load SDK state from localStorage:", error);
+    }
+  }
+  saveToStorage() {
+    try {
+      const persistentState = {
+        isHolding: this.state.isHolding,
+        isMuted: this.state.isMuted,
+        status: this.state.status,
+        position: this.state.position,
+        callStartTime: this.state.callStartTime
+      };
+      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
+    } catch (error) {
+      console.warn("Failed to save SDK state to localStorage:", error);
+    }
+  }
+  notifyListeners() {
+    this.listeners.forEach((listener) => listener());
+  }
+  initialize(apiKey) {
+    if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
+      throw new Error("API key not available");
+    }
+    this.state.apiKey = apiKey;
+    this.state.isInitialized = true;
+    this.notifyListeners();
+  }
+  getState() {
+    return { ...this.state };
+  }
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      const index = this.listeners.indexOf(listener);
+      if (index > -1) {
+        this.listeners.splice(index, 1);
+      }
+    };
+  }
+  setHolding(isHolding) {
+    this.state.isHolding = isHolding;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setMuted(isMuted) {
+    this.state.isMuted = isMuted;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setStatus(status) {
+    this.state.status = status;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  setPosition(position) {
+    this.state.position = position;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  startCall() {
+    this.state.callStartTime = Date.now();
+    this.state.status = "ready";
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  endCall() {
+    this.state.callStartTime = null;
+    this.state.status = "idle";
+    this.state.isHolding = false;
+    this.state.isMuted = false;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+  updateCallData(data) {
+    this.state.callData = { ...this.state.callData, ...data };
+    this.notifyListeners();
+  }
+};
+var sdkStateManager = new SDKStateManager();
+
+// src/lib/components/CallControlPanel.tsx
+var import_react3 = require("react");
+var import_material = require("@mui/material");
+var import_icons_material = require("@mui/icons-material");
+
+// src/lib/hooks/useSDKState.ts
+var import_react = require("react");
+function useSDKState() {
+  const [state, setState] = (0, import_react.useState)(sdkStateManager.getState());
+  (0, import_react.useEffect)(() => {
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      setState(sdkStateManager.getState());
+    });
+    return unsubscribe;
+  }, []);
+  return state;
+}
+
+// src/lib/hooks/useDraggable.ts
+var import_react2 = require("react");
+function useDraggable(initialPosition, onPositionChange) {
+  const [position, setPosition] = (0, import_react2.useState)(initialPosition);
+  const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
+  const dragRef = (0, import_react2.useRef)(null);
+  const dragStart = (0, import_react2.useRef)({ x: 0, y: 0 });
+  const elementStart = (0, import_react2.useRef)({ x: 0, y: 0 });
+  const updatePosition = (0, import_react2.useCallback)(
+    (newPosition) => {
+      const element = dragRef.current;
+      if (!element) return;
+      const rect = element.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const constrainedPosition = {
+        x: Math.max(0, Math.min(newPosition.x, viewportWidth - rect.width)),
+        y: Math.max(0, Math.min(newPosition.y, viewportHeight - rect.height))
+      };
+      setPosition(constrainedPosition);
+      onPositionChange?.(constrainedPosition);
+    },
+    [onPositionChange]
+  );
+  const handleStart = (0, import_react2.useCallback)(
+    (clientX, clientY) => {
+      setIsDragging(true);
+      dragStart.current = { x: clientX, y: clientY };
+      elementStart.current = position;
+      const handleMove = (moveClientX, moveClientY) => {
+        const deltaX = moveClientX - dragStart.current.x;
+        const deltaY = moveClientY - dragStart.current.y;
+        const newPosition = {
+          x: elementStart.current.x + deltaX,
+          y: elementStart.current.y + deltaY
+        };
+        updatePosition(newPosition);
+      };
+      const handleMouseMove = (e) => {
+        e.preventDefault();
+        handleMove(e.clientX, e.clientY);
+      };
+      const handleTouchMove = (e) => {
+        e.preventDefault();
+        const touch = e.touches[0];
+        if (touch) {
+          handleMove(touch.clientX, touch.clientY);
+        }
+      };
+      const handleEnd = () => {
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleEnd);
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleEnd);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleEnd);
+      document.addEventListener("touchmove", handleTouchMove, {
+        passive: false
+      });
+      document.addEventListener("touchend", handleEnd);
+    },
+    [position, updatePosition]
+  );
+  const handleMouseDown = (0, import_react2.useCallback)(
+    (e) => {
+      e.preventDefault();
+      handleStart(e.clientX, e.clientY);
+    },
+    [handleStart]
+  );
+  const handleTouchStart = (0, import_react2.useCallback)(
+    (e) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      if (touch) {
+        handleStart(touch.clientX, touch.clientY);
+      }
+    },
+    [handleStart]
+  );
+  return {
+    position,
+    isDragging,
+    dragRef,
+    handleMouseDown,
+    handleTouchStart
+  };
+}
+
+// src/lib/components/CallControlPanel.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function CallControlPanel({ onDataChange }) {
+  const theme = (0, import_material.useTheme)();
+  const state = useSDKState();
+  const [anchorEl, setAnchorEl] = (0, import_react3.useState)(null);
+  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)
+  );
+  (0, import_react3.useEffect)(() => {
+    let interval;
+    if (state.callStartTime) {
+      interval = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - state.callStartTime) / 1e3);
+        setCallDuration(elapsed);
+      }, 1e3);
+    } else {
+      setCallDuration(0);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [state.callStartTime]);
+  (0, import_react3.useEffect)(() => {
+    if (onDataChange) {
+      onDataChange(state.callData);
+    }
+  }, [state.callData, onDataChange]);
+  const formatDuration = (0, import_react3.useCallback)((seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }, []);
+  const getStatusColor = (0, import_react3.useCallback)((status) => {
+    switch (status) {
+      case "ready":
+        return "success";
+      case "break":
+        return "warning";
+      case "idle":
+        return "default";
+      default:
+        return "default";
+    }
+  }, []);
+  const handleHoldToggle = () => {
+    sdkStateManager.setHolding(!state.isHolding);
+  };
+  const handleMuteToggle = () => {
+    sdkStateManager.setMuted(!state.isMuted);
+  };
+  const handleStatusChange = (newStatus) => {
+    sdkStateManager.setStatus(newStatus);
+    setAnchorEl(null);
+  };
+  const handleEndCall = () => {
+    sdkStateManager.endCall();
+  };
+  const handleStartCall = () => {
+    sdkStateManager.startCall();
+  };
+  const handleMoreClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleMoreOptions = (event) => {
+    setMoreOptionsAnchorEl(event.currentTarget);
+  };
+  const handleMoreClose = () => {
+    setAnchorEl(null);
+  };
+  const handleMoreOptionsClose = () => {
+    setMoreOptionsAnchorEl(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,
+      {
+        ref: dragRef,
+        elevation: isDragging ? 2 : 1,
+        sx: {
+          position: "fixed",
+          left: position.x,
+          top: position.y,
+          p: 1,
+          borderRadius: 3,
+          bgcolor: "background.paper",
+          cursor: isDragging ? "grabbing" : "grab",
+          transition: theme.transitions.create(["box-shadow", "transform"], {
+            duration: theme.transitions.duration.short
+          }),
+          transform: isDragging ? "scale(1.01)" : "scale(1)",
+          minWidth: 320,
+          userSelect: "none"
+        },
+        onMouseDown: handleMouseDown,
+        onTouchStart: handleTouchStart,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_material.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_material.Typography,
+                      {
+                        variant: "h6",
+                        sx: {
+                          color: state.callStartTime ? "success.main" : "text.secondary",
+                          marginRight: "8px",
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_icons_material.DragIndicator,
+                            {
+                              sx: {
+                                marginRight: "10px"
+                              }
+                            }
+                          ),
+                          " ",
+                          formatDuration(callDuration)
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Status", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      import_material.Button,
+                      {
+                        sx: {
+                          backgroundColor: getStatusColor(state.status),
+                          fontWeight: "bold",
+                          borderRadius: "16px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          marginRight: "8px"
+                        },
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleMoreClick(e);
+                        },
+                        variant: "outlined",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_material.Typography,
+                            {
+                              width: 50,
+                              variant: "body2",
+                              sx: {
+                                fontWeight: "bold"
+                              },
+                              children: state.status.toUpperCase()
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.KeyboardArrowDown, {})
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    gap: 1,
+                    justifyContent: "center",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "Redial", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_material.IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                        },
+                        color: "default",
+                        sx: {
+                          bgcolor: "action.hover",
+                          "&:hover": {
+                            bgcolor: "warning"
+                          }
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Cached, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_material.IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleHoldToggle();
+                        },
+                        color: state.isHolding ? "warning" : "default",
+                        sx: {
+                          bgcolor: state.isHolding ? "warning.info" : "action.hover"
+                        },
+                        children: state.isHolding ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.PlayCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.PauseCircle, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_material.IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleMuteToggle();
+                        },
+                        color: state.isMuted ? "error" : "default",
+                        sx: {
+                          bgcolor: state.isMuted ? "error.info" : "action.hover"
+                        },
+                        children: state.isMuted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Mic, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: "More Options", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_material.IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleMoreOptions(e);
+                        },
+                        sx: {
+                          bgcolor: "action.hover",
+                          "&:hover": { bgcolor: "action.selected" }
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.MoreVert, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tooltip, { title: state.callStartTime ? "End Call" : "Start Call", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_material.IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          (state.callStartTime ? handleEndCall : handleStartCall)();
+                        },
+                        color: "error",
+                        sx: {
+                          bgcolor: state.callStartTime ? "error.main" : "success.light",
+                          color: "white",
+                          "&:hover": {
+                            bgcolor: state.callStartTime ? "error.light" : "success.dark"
+                          }
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.CallEnd, {})
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_material.Menu,
+      {
+        anchorEl,
+        open: Boolean(anchorEl),
+        onClose: handleMoreClose,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_material.MenuItem,
+            {
+              onClick: () => handleStatusChange("ready"),
+              sx: {
+                backgroundColor: state.status === "ready" ? "#0038f01c" : "initial"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Phone, { color: "success" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Ready" })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_material.MenuItem,
+            {
+              onClick: () => handleStatusChange("break"),
+              sx: {
+                backgroundColor: state.status === "break" ? "#0038f01c" : "initial"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.FreeBreakfast, { color: "error" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Break" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_material.MenuItem,
+            {
+              onClick: () => handleStatusChange("idle"),
+              sx: {
+                backgroundColor: state.status === "idle" ? "#0038f01c" : "initial"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.AirlineSeatIndividualSuite, { color: "warning" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Idle" })
+              ] })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_material.Menu,
+      {
+        anchorEl: moreOptionsAnchorEl,
+        open: Boolean(moreOptionsAnchorEl),
+        onClose: handleMoreOptionsClose,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.TransferWithinAStation, { color: "secondary" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Call Transfer" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Groups, { color: "secondary" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Conference Call" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.SpatialAudioOff, { color: "secondary" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { children: "Queue Waiting" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/index.ts
+function initCallSDK(sdkApiKey) {
+  sdkStateManager.initialize(sdkApiKey);
+}
+function updateCallData(data) {
+  sdkStateManager.updateCallData(data);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CallControlPanel,
+  initCallSDK,
+  updateCallData
+});