call-control-sdk 1.0.0 → 2.0.0

package/dist/index.mjs

@@ -0,0 +1,634 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// 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
+import { useEffect as useEffect2, useState as useState3, useCallback as useCallback2 } from "react";
+import {
+  Paper,
+  IconButton,
+  Typography,
+  Menu,
+  MenuItem,
+  Box,
+  Tooltip,
+  Fade,
+  useTheme,
+  Button
+} from "@mui/material";
+import {
+  PauseCircle,
+  PlayCircle,
+  Mic,
+  MicOff,
+  MoreVert,
+  CallEnd,
+  KeyboardArrowDown,
+  Cached,
+  FreeBreakfast,
+  AirlineSeatIndividualSuite,
+  TransferWithinAStation,
+  Groups,
+  Phone,
+  DragIndicator,
+  SpatialAudioOff
+} from "@mui/icons-material";
+
+// src/lib/hooks/useSDKState.ts
+import { useState, useEffect } from "react";
+function useSDKState() {
+  const [state, setState] = useState(sdkStateManager.getState());
+  useEffect(() => {
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      setState(sdkStateManager.getState());
+    });
+    return unsubscribe;
+  }, []);
+  return state;
+}
+
+// src/lib/hooks/useDraggable.ts
+import {
+  useState as useState2,
+  useRef,
+  useCallback
+} from "react";
+function useDraggable(initialPosition, onPositionChange) {
+  const [position, setPosition] = useState2(initialPosition);
+  const [isDragging, setIsDragging] = useState2(false);
+  const dragRef = useRef(null);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const elementStart = useRef({ x: 0, y: 0 });
+  const updatePosition = 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 = 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 = useCallback(
+    (e) => {
+      e.preventDefault();
+      handleStart(e.clientX, e.clientY);
+    },
+    [handleStart]
+  );
+  const handleTouchStart = 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
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function CallControlPanel({ onDataChange }) {
+  const theme = useTheme();
+  const state = useSDKState();
+  const [anchorEl, setAnchorEl] = useState3(null);
+  const [moreOptionsAnchorEl, setMoreOptionsAnchorEl] = useState3(null);
+  const [callDuration, setCallDuration] = useState3(0);
+  const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } = useDraggable(
+    state.position,
+    (newPosition) => sdkStateManager.setPosition(newPosition)
+  );
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    if (onDataChange) {
+      onDataChange(state.callData);
+    }
+  }, [state.callData, onDataChange]);
+  const formatDuration = useCallback2((seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  }, []);
+  const getStatusColor = useCallback2((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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Fade, { in: true, timeout: 300, children: /* @__PURE__ */ jsx(
+      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__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        variant: "h6",
+                        sx: {
+                          color: state.callStartTime ? "success.main" : "text.secondary",
+                          marginRight: "8px",
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            DragIndicator,
+                            {
+                              sx: {
+                                marginRight: "10px"
+                              }
+                            }
+                          ),
+                          " ",
+                          formatDuration(callDuration)
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Tooltip, { title: "Status", children: /* @__PURE__ */ jsxs(
+                      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__ */ jsx(
+                            Typography,
+                            {
+                              width: 50,
+                              variant: "body2",
+                              sx: {
+                                fontWeight: "bold"
+                              },
+                              children: state.status.toUpperCase()
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(KeyboardArrowDown, {})
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    gap: 1,
+                    justifyContent: "center",
+                    alignItems: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Tooltip, { title: "Redial", children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                        },
+                        color: "default",
+                        sx: {
+                          bgcolor: "action.hover",
+                          "&:hover": {
+                            bgcolor: "warning"
+                          }
+                        },
+                        children: /* @__PURE__ */ jsx(Cached, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleHoldToggle();
+                        },
+                        color: state.isHolding ? "warning" : "default",
+                        sx: {
+                          bgcolor: state.isHolding ? "warning.info" : "action.hover"
+                        },
+                        children: state.isHolding ? /* @__PURE__ */ jsx(PlayCircle, {}) : /* @__PURE__ */ jsx(PauseCircle, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleMuteToggle();
+                        },
+                        color: state.isMuted ? "error" : "default",
+                        sx: {
+                          bgcolor: state.isMuted ? "error.info" : "action.hover"
+                        },
+                        children: state.isMuted ? /* @__PURE__ */ jsx(MicOff, {}) : /* @__PURE__ */ jsx(Mic, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Tooltip, { title: "More Options", children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleMoreOptions(e);
+                        },
+                        sx: {
+                          bgcolor: "action.hover",
+                          "&:hover": { bgcolor: "action.selected" }
+                        },
+                        children: /* @__PURE__ */ jsx(MoreVert, {})
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Tooltip, { title: state.callStartTime ? "End Call" : "Start Call", children: /* @__PURE__ */ jsx(
+                      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__ */ jsx(CallEnd, {})
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        anchorEl,
+        open: Boolean(anchorEl),
+        onClose: handleMoreClose,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              onClick: () => handleStatusChange("ready"),
+              sx: {
+                backgroundColor: state.status === "ready" ? "#0038f01c" : "initial"
+              },
+              children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Phone, { color: "success" }),
+                    /* @__PURE__ */ jsx(Typography, { children: "Ready" })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              onClick: () => handleStatusChange("break"),
+              sx: {
+                backgroundColor: state.status === "break" ? "#0038f01c" : "initial"
+              },
+              children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsx(FreeBreakfast, { color: "error" }),
+                /* @__PURE__ */ jsx(Typography, { children: "Break" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              onClick: () => handleStatusChange("idle"),
+              sx: {
+                backgroundColor: state.status === "idle" ? "#0038f01c" : "initial"
+              },
+              children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsx(AirlineSeatIndividualSuite, { color: "warning" }),
+                /* @__PURE__ */ jsx(Typography, { children: "Idle" })
+              ] })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        anchorEl: moreOptionsAnchorEl,
+        open: Boolean(moreOptionsAnchorEl),
+        onClose: handleMoreOptionsClose,
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(TransferWithinAStation, { color: "secondary" }),
+            /* @__PURE__ */ jsx(Typography, { children: "Call Transfer" })
+          ] }) }),
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(Groups, { color: "secondary" }),
+            /* @__PURE__ */ jsx(Typography, { children: "Conference Call" })
+          ] }) }),
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => setMoreOptionsAnchorEl(null), children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(SpatialAudioOff, { color: "secondary" }),
+            /* @__PURE__ */ jsx(Typography, { children: "Queue Waiting" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/index.ts
+function initCallSDK(sdkApiKey) {
+  sdkStateManager.initialize(sdkApiKey);
+}
+function updateCallData(data) {
+  sdkStateManager.updateCallData(data);
+}
+export {
+  CallControlPanel,
+  initCallSDK,
+  updateCallData
+};

package/package.json

@@ -1,40 +1,29 @@
 {
   "name": "call-control-sdk",
   "description": "Call Control SDK",
-  "version": "1.0.0",
-  "type": "module",
+  "version": "2.0.0",
   "author": "Achala",
   "license": "MIT",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "vite",
     "start": "vite",
-    "build": "tsc -b && vite build",
-    "build:lib": "tsc --project tsconfig.lib.json && vite build --mode lib",
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
     "lint": "eslint .",
     "format": "prettier --write .",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build:lib"
+    "prepublishOnly": "npm run build"
   },
-  "dependencies": {
+  "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"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.33.0",
-    "@types/node": "^24.2.1",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react-swc": "^4.0.0",
-    "eslint": "^9.33.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2"
   }
 }

package/eslint.config.js

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])