call-control-sdk 1.0.0

package/README.md

@@ -0,0 +1,156 @@
+# React Call Control SDK
+
+A React-based call control SDK with Material-UI components, providing a draggable control panel for call management.
+
+## Features
+
+- 🎯 **Complete Call Control**: Hold, Mute, Status management, and End Call functionality
+- 🖱️ **Draggable Interface**: Movable control panel that persists position
+- 💾 **State Persistence**: All control states saved in localStorage
+- ⏱️ **Live Call Timer**: Real-time call duration tracking
+- 🎨 **Material-UI Design**: Beautiful, responsive design with MUI components
+- 📱 **Touch Support**: Works on both desktop and mobile devices
+- 🔧 **TypeScript Support**: Full type safety and IntelliSense
+- 🎪 **Singleton Pattern**: Shared state management across components
+
+## Installation
+
+```bash
+npm install react-call-control-sdk
+```
+
+## Peer Dependencies
+
+Make sure you have these installed in your host application:
+
+```bash
+npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled
+```
+
+## Quick Start
+
+### 1. Initialize the SDK
+
+```typescript
+import { initCallSDK } from 'react-call-control-sdk';
+
+// Initialize at the top level of your app
+initCallSDK('YOUR_API_KEY');
+```
+
+### 2. Use the CallControlPanel
+
+```typescript
+import React from 'react';
+import { CallControlPanel } from 'react-call-control-sdk';
+
+function App() {
+  const handleDataChange = ({ mobileNumber, callReferenceId, agentLoginId }) => {
+    console.log('Call data updated:', { mobileNumber, callReferenceId, agentLoginId });
+  };
+
+  return (
+    <div>
+      <h1>My Application</h1>
+      <CallControlPanel onDataChange={handleDataChange} />
+    </div>
+  );
+}
+```
+
+### 3. Update Call Data (Optional)
+
+```typescript
+import { updateCallData } from 'react-call-control-sdk';
+
+// Update call information
+updateCallData({
+  mobileNumber: '+1-555-123-4567',
+  callReferenceId: 'CALL-2024-001',
+  agentLoginId: 'AGENT-123'
+});
+```
+
+## API Reference
+
+### `initCallSDK(sdkApiKey: string)`
+
+Initializes the SDK with an API key. Must be called before using any components.
+
+**Parameters:**
+- `sdkApiKey` (string): Your API key for SDK authentication
+
+**Throws:** Error if API key is missing or invalid
+
+### `CallControlPanel`
+
+The main draggable control panel component.
+
+**Props:**
+- `onDataChange?` (function): Callback fired when call data changes
+  - Parameters: `{ mobileNumber: string, callReferenceId: string, agentLoginId: string }`
+
+### `updateCallData(data: Partial<CallData>)`
+
+Updates the call data that will be passed to the `onDataChange` callback.
+
+**Parameters:**
+- `data.mobileNumber?` (string): Mobile phone number
+- `data.callReferenceId?` (string): Call reference ID
+- `data.agentLoginId?` (string): Agent login ID
+
+## Control Features
+
+### Status Management
+- **Idle**: Default state, no active call
+- **Ready**: Agent is ready to take calls
+- **Break**: Agent is on break
+
+### Call Controls
+- **Hold/Resume**: Toggle call hold state
+- **Mute/Unmute**: Toggle microphone
+- **End Call**: Terminate active call
+- **More Menu**: Access status change options
+
+### Persistent State
+All control states are automatically saved to localStorage:
+- Hold/mute states
+- Agent status
+- Panel position
+- Call timer state
+
+## Styling & Theming
+
+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
+
+- Chrome 60+
+- Firefox 60+
+- Safari 12+
+- Edge 79+
+
+## License
+
+MIT © [Your Name]

package/eslint.config.js

@@ -0,0 +1,23 @@
+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,
+    },
+  },
+])

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Call Control SDK</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "call-control-sdk",
+  "description": "Call Control SDK",
+  "version": "1.0.0",
+  "type": "module",
+  "author": "Achala",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "tsc --project tsconfig.lib.json && vite build --mode lib",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "dependencies": {
+    "@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/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.tsx

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { Box } from "@mui/material";
+import { CallControlPanel, initCallSDK, updateCallData } from "./lib";
+
+function App() {
+  useEffect(() => {
+    // Initialize the SDK with a test API key
+    try {
+      initCallSDK("test-api-key-12345");
+      console.log("SDK initialized successfully");
+
+      // Simulate some call data
+      updateCallData({
+        mobileNumber: "+1-234-567-8900",
+        callReferenceId: "CALL-REF-001",
+        agentLoginId: "AGENT-123",
+      });
+    } catch (error) {
+      console.error("SDK initialization failed:", error);
+    }
+  }, []);
+
+  const handleDataChange = (data: {
+    mobileNumber: string;
+    callReferenceId: string;
+    agentLoginId: string;
+  }) => {
+    console.log("Call data changed:", data);
+  };
+
+  return (
+    <Box>
+      <h1
+        style={{
+          color: "#1976d2",
+          marginBottom: "20px",
+        }}
+      >
+        Call Control SDK Demo
+      </h1>
+
+      <CallControlPanel onDataChange={handleDataChange} />
+    </Box>
+  );
+}
+
+export default App;

package/src/index.css

@@ -0,0 +1,23 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  width: 100%;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #f3f3f3;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+body {
+  margin: 0;
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+}
+

package/src/lib/components/CallControlPanel.tsx

@@ -0,0 +1,422 @@
+import React, { useEffect, useState, useCallback } 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";
+import { useSDKState } from "../hooks/useSDKState";
+import { useDraggable } from "../hooks/useDraggable";
+import { sdkStateManager } from "../sdk-state";
+import type { CallControlPanelProps, CallStatus } from "../types";
+
+export function CallControlPanel({ onDataChange }: CallControlPanelProps) {
+  const theme = useTheme();
+  const state = useSDKState();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [moreOptionsAnchorEl, setMoreOptionsAnchorEl] =
+    useState<null | HTMLElement>(null);
+  const [callDuration, setCallDuration] = useState(0);
+
+  const { position, isDragging, dragRef, handleMouseDown, handleTouchStart } =
+    useDraggable(state.position, (newPosition) =>
+      sdkStateManager.setPosition(newPosition)
+    );
+
+  // Call duration timer
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+
+    if (state.callStartTime) {
+      interval = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - state.callStartTime!) / 1000);
+        setCallDuration(elapsed);
+      }, 1000);
+    } else {
+      setCallDuration(0);
+    }
+
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [state.callStartTime]);
+
+  // Notify parent of data changes
+  useEffect(() => {
+    if (onDataChange) {
+      onDataChange(state.callData);
+    }
+  }, [state.callData, onDataChange]);
+
+  const formatDuration = useCallback((seconds: number): string => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, "0")}:${secs
+      .toString()
+      .padStart(2, "0")}`;
+  }, []);
+
+  const getStatusColor = useCallback((status: CallStatus) => {
+    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: CallStatus) => {
+    sdkStateManager.setStatus(newStatus);
+    setAnchorEl(null);
+  };
+
+  const handleEndCall = () => {
+    sdkStateManager.endCall();
+  };
+
+  const handleStartCall = () => {
+    sdkStateManager.startCall();
+  };
+
+  const handleMoreClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleMoreOptions = (event: React.MouseEvent<HTMLElement>) => {
+    setMoreOptionsAnchorEl(event.currentTarget);
+  };
+  const handleMoreClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleMoreOptionsClose = () => {
+    setMoreOptionsAnchorEl(null);
+  };
+
+  // if (!state.isInitialized) {
+  //   return (
+  //     <Paper
+  //       elevation={2}
+  //       sx={{
+  //         position: "fixed",
+  //         top: "50%",
+  //         left: "50%",
+  //         transform: "translate(-50%, -50%)",
+  //         p: 2,
+  //         borderRadius: 2,
+  //         bgcolor: "error.light",
+  //         color: "error.contrastText",
+  //         zIndex: 9999,
+  //       }}
+  //     >
+  //       <Typography variant="h6" gutterBottom>
+  //         SDK Error
+  //       </Typography>
+  //       <Typography variant="body2">
+  //         Call SDK not initialized. Please call initCallSDK() first.
+  //       </Typography>
+  //     </Paper>
+  //   );
+  // }
+
+  return (
+    <>
+      <Fade in={true} timeout={300}>
+        <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}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            {/* Status and Timer Row */}
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <Typography
+                variant="h6"
+                sx={{
+                  color: state.callStartTime
+                    ? "success.main"
+                    : "text.secondary",
+                  marginRight: "8px",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <DragIndicator
+                  sx={{
+                    marginRight: "10px",
+                  }}
+                />{" "}
+                {formatDuration(callDuration)}
+              </Typography>
+
+              <Tooltip title="Status">
+                <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"
+                >
+                  <Typography
+                    width={50}
+                    variant="body2"
+                    sx={{
+                      fontWeight: "bold",
+                    }}
+                  >
+                    {state.status.toUpperCase()}
+                  </Typography>
+
+                  <KeyboardArrowDown />
+                </Button>
+              </Tooltip>
+            </Box>
+
+            {/* Control Buttons */}
+            <Box
+              sx={{
+                display: "flex",
+                gap: 1,
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <Tooltip title={"Redial"}>
+                <IconButton
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  color={"default"}
+                  sx={{
+                    bgcolor: "action.hover",
+                    "&:hover": {
+                      bgcolor: "warning",
+                    },
+                  }}
+                >
+                  <Cached />
+                </IconButton>
+              </Tooltip>
+              {/* Hold Button */}
+              <Tooltip title={state.isHolding ? "Resume" : "Hold"}>
+                <IconButton
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleHoldToggle();
+                  }}
+                  color={state.isHolding ? "warning" : "default"}
+                  sx={{
+                    bgcolor: state.isHolding ? "warning.info" : "action.hover",
+                  }}
+                >
+                  {state.isHolding ? <PlayCircle /> : <PauseCircle />}
+                </IconButton>
+              </Tooltip>
+
+              {/* Mute Button */}
+              <Tooltip title={state.isMuted ? "Unmute" : "Mute"}>
+                <IconButton
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleMuteToggle();
+                  }}
+                  color={state.isMuted ? "error" : "default"}
+                  sx={{
+                    bgcolor: state.isMuted ? "error.info" : "action.hover",
+                  }}
+                >
+                  {state.isMuted ? <MicOff /> : <Mic />}
+                </IconButton>
+              </Tooltip>
+
+              {/* More Menu Button */}
+              <Tooltip title="More Options">
+                <IconButton
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleMoreOptions(e);
+                  }}
+                  sx={{
+                    bgcolor: "action.hover",
+                    "&:hover": { bgcolor: "action.selected" },
+                  }}
+                >
+                  <MoreVert />
+                </IconButton>
+              </Tooltip>
+
+              {/* End Call Button */}
+              <Tooltip title={state.callStartTime ? "End Call" : "Start Call"}>
+                <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",
+                    },
+                  }}
+                >
+                  <CallEnd />
+                </IconButton>
+              </Tooltip>
+            </Box>
+          </Box>
+        </Paper>
+      </Fade>
+
+      {/* More Options Menu */}
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMoreClose}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <MenuItem
+          onClick={() => handleStatusChange("ready")}
+          sx={{
+            backgroundColor: state.status === "ready" ? "#0038f01c" : "initial",
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+            }}
+          >
+            <Phone color="success" />
+            <Typography>Ready</Typography>
+          </Box>
+        </MenuItem>
+        <MenuItem
+          onClick={() => handleStatusChange("break")}
+          sx={{
+            backgroundColor: state.status === "break" ? "#0038f01c" : "initial",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <FreeBreakfast color="error" />
+            <Typography>Break</Typography>
+          </Box>
+        </MenuItem>
+        <MenuItem
+          onClick={() => handleStatusChange("idle")}
+          sx={{
+            backgroundColor: state.status === "idle" ? "#0038f01c" : "initial",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <AirlineSeatIndividualSuite color="warning" />
+            <Typography>Idle</Typography>
+          </Box>
+        </MenuItem>
+      </Menu>
+
+      <Menu
+        anchorEl={moreOptionsAnchorEl}
+        open={Boolean(moreOptionsAnchorEl)}
+        onClose={handleMoreOptionsClose}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <MenuItem onClick={() => setMoreOptionsAnchorEl(null)}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <TransferWithinAStation color="secondary" />
+            <Typography>Call Transfer</Typography>
+          </Box>
+        </MenuItem>
+        <MenuItem onClick={() => setMoreOptionsAnchorEl(null)}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <Groups color="secondary" />
+            <Typography>Conference Call</Typography>
+          </Box>
+        </MenuItem>
+        <MenuItem onClick={() => setMoreOptionsAnchorEl(null)}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <SpatialAudioOff color="secondary" />
+            <Typography>Queue Waiting</Typography>
+          </Box>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+}

package/src/lib/hooks/useDraggable.ts

@@ -0,0 +1,128 @@
+import {
+  useState,
+  useRef,
+  useCallback,
+  type MouseEvent,
+  type TouchEvent,
+} from "react";
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface UseDraggableReturn {
+  position: Position;
+  isDragging: boolean;
+  dragRef: React.RefObject<HTMLDivElement | null>;
+  handleMouseDown: (e: MouseEvent<HTMLDivElement>) => void;
+  handleTouchStart: (e: TouchEvent<HTMLDivElement>) => void;
+}
+
+export function useDraggable(
+  initialPosition: Position,
+  onPositionChange?: (position: Position) => void
+): UseDraggableReturn {
+  const [position, setPosition] = useState<Position>(initialPosition);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragRef = useRef<HTMLDivElement>(null);
+  const dragStart = useRef<Position>({ x: 0, y: 0 });
+  const elementStart = useRef<Position>({ x: 0, y: 0 });
+
+  const updatePosition = useCallback(
+    (newPosition: Position) => {
+      // Constrain position to viewport bounds
+      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: number, clientY: number) => {
+      setIsDragging(true);
+      dragStart.current = { x: clientX, y: clientY };
+      elementStart.current = position;
+
+      const handleMove = (moveClientX: number, moveClientY: number) => {
+        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: globalThis.MouseEvent) => {
+        e.preventDefault();
+        handleMove(e.clientX, e.clientY);
+      };
+
+      const handleTouchMove = (e: globalThis.TouchEvent) => {
+        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: MouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      handleStart(e.clientX, e.clientY);
+    },
+    [handleStart]
+  );
+
+  const handleTouchStart = useCallback(
+    (e: TouchEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      if (touch) {
+        handleStart(touch.clientX, touch.clientY);
+      }
+    },
+    [handleStart]
+  );
+
+  return {
+    position,
+    isDragging,
+    dragRef,
+    handleMouseDown,
+    handleTouchStart,
+  };
+}

package/src/lib/hooks/useSDKState.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+import { sdkStateManager } from "../sdk-state";
+import type { SDKState } from "../types";
+
+export function useSDKState(): SDKState {
+  const [state, setState] = useState<SDKState>(sdkStateManager.getState());
+
+  useEffect(() => {
+    const unsubscribe = sdkStateManager.subscribe(() => {
+      setState(sdkStateManager.getState());
+    });
+
+    return unsubscribe;
+  }, []);
+
+  return state;
+}

package/src/lib/index.ts

@@ -0,0 +1,25 @@
+import { sdkStateManager } from './sdk-state';
+
+export { CallControlPanel } from './components/CallControlPanel';
+export type { CallControlPanelProps, CallData, CallStatus } from './types';
+
+/**
+ * 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
+ */
+export function initCallSDK(sdkApiKey: string): void {
+  sdkStateManager.initialize(sdkApiKey);
+}
+
+/**
+ * Update call data (used by host application)
+ * @param data - Partial call data to update
+ */
+export function updateCallData(data: { 
+  mobileNumber?: string; 
+  callReferenceId?: string; 
+  agentLoginId?: string; 
+}): void {
+  sdkStateManager.updateCallData(data);
+}

package/src/lib/sdk-state.ts

@@ -0,0 +1,140 @@
+import type { SDKState, CallData, CallStatus } from "./types";
+
+class SDKStateManager {
+  private state: SDKState;
+  private listeners: Array<() => void> = [];
+  private readonly STORAGE_KEY = "call-control-sdk-state";
+
+  constructor() {
+    this.state = this.getInitialState();
+    this.loadFromStorage();
+  }
+
+  private getInitialState(): SDKState {
+    return {
+      apiKey: null,
+      isInitialized: false,
+      isHolding: false,
+      isMuted: false,
+      status: "idle",
+      callStartTime: null,
+      position: { x: 50, y: 50 },
+      callData: {
+        mobileNumber: "",
+        callReferenceId: "",
+        agentLoginId: "",
+      },
+    };
+  }
+
+  private loadFromStorage(): void {
+    try {
+      const stored = localStorage.getItem(this.STORAGE_KEY);
+      if (stored) {
+        const parsedState = JSON.parse(stored);
+        // Only restore persistent data, not initialization state
+        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);
+    }
+  }
+
+  private saveToStorage(): void {
+    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);
+    }
+  }
+
+  private notifyListeners(): void {
+    this.listeners.forEach((listener) => listener());
+  }
+
+  public initialize(apiKey: string): void {
+    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();
+  }
+
+  public getState(): SDKState {
+    return { ...this.state };
+  }
+
+  public subscribe(listener: () => void): () => void {
+    this.listeners.push(listener);
+    return () => {
+      const index = this.listeners.indexOf(listener);
+      if (index > -1) {
+        this.listeners.splice(index, 1);
+      }
+    };
+  }
+
+  public setHolding(isHolding: boolean): void {
+    this.state.isHolding = isHolding;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+
+  public setMuted(isMuted: boolean): void {
+    this.state.isMuted = isMuted;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+
+  public setStatus(status: CallStatus): void {
+    this.state.status = status;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+
+  public setPosition(position: { x: number; y: number }): void {
+    this.state.position = position;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+
+  public startCall(): void {
+    this.state.callStartTime = Date.now();
+    this.state.status = "ready";
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+
+  public endCall(): void {
+    this.state.callStartTime = null;
+    this.state.status = "idle";
+    this.state.isHolding = false;
+    this.state.isMuted = false;
+    this.saveToStorage();
+    this.notifyListeners();
+  }
+
+  public updateCallData(data: Partial<CallData>): void {
+    this.state.callData = { ...this.state.callData, ...data };
+    this.notifyListeners();
+  }
+}
+
+// Singleton instance
+export const sdkStateManager = new SDKStateManager();

package/src/lib/types.ts

@@ -0,0 +1,22 @@
+export interface CallData {
+  mobileNumber: string;
+  callReferenceId: string;
+  agentLoginId: string;
+}
+
+export interface CallControlPanelProps {
+  onDataChange?: (data: CallData) => void;
+}
+
+export type CallStatus = 'idle' | 'ready' | 'break';
+
+export interface SDKState {
+  apiKey: string | null;
+  isInitialized: boolean;
+  isHolding: boolean;
+  isMuted: boolean;
+  status: CallStatus;
+  callStartTime: number | null;
+  position: { x: number; y: number };
+  callData: CallData;
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "outDir": "./dist"
+  },
+  "include": ["src/lib/**/*"],
+  "exclude": ["src/main.tsx", "src/App.tsx", "**/*.test.*"]
+}

package/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { resolve } from "path";
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  if (mode === "lib") {
+    return {
+      plugins: [react()],
+      build: {
+        lib: {
+          entry: resolve(__dirname, "src/lib/index.ts"),
+          name: "ReactCallControlSDK",
+          formats: ["es", "umd"],
+          fileName: (format) => `index.${format}.js`,
+        },
+        rollupOptions: {
+          external: [
+            "react",
+            "react-dom",
+            "react/jsx-runtime",
+            "react/jsx-dev-runtime",
+            "@mui/material",
+            "@mui/icons-material",
+            "@emotion/react",
+            "@emotion/styled",
+          ],
+          output: {
+            globals: {
+              react: "React",
+              "react-dom": "ReactDOM",
+              "react/jsx-runtime": "React",
+              "react/jsx-dev-runtime": "React",
+              "@mui/material": "MaterialUI",
+              "@mui/icons-material": "MaterialUIIcons",
+              "@emotion/react": "EmotionReact",
+              "@emotion/styled": "EmotionStyled",
+            },
+          },
+        },
+      },
+    };
+  }
+
+  return {
+    plugins: [react()],
+  };
+});