npm - call-control-sdk - Versions diffs - 1.0.0 → 2.1.0 - Mend

call-control-sdk 1.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/README.md +12 -22
package/dist/index.d.mts +22 -0
package/dist/index.d.ts +22 -0
package/dist/index.js +1122 -0
package/dist/index.mjs +1131 -0
package/package.json +10 -21
package/eslint.config.js +0 -23
package/index.html +0 -13
package/public/vite.svg +0 -1
package/src/App.tsx +0 -47
package/src/index.css +0 -23
package/src/lib/components/CallControlPanel.tsx +0 -422
package/src/lib/hooks/useDraggable.ts +0 -128
package/src/lib/hooks/useSDKState.ts +0 -17
package/src/lib/index.ts +0 -25
package/src/lib/sdk-state.ts +0 -140
package/src/lib/types.ts +0 -22
package/src/main.tsx +0 -10
package/src/vite-env.d.ts +0 -1
package/tsconfig.app.json +0 -27
package/tsconfig.json +0 -7
package/tsconfig.lib.json +0 -23
package/tsconfig.node.json +0 -25
package/vite.config.ts +0 -47

package/package.json CHANGED Viewed

@@ -1,40 +1,29 @@
 {
   "name": "call-control-sdk",
   "description": "Call Control SDK",
-  "version": "1.0.0",
-  "type": "module",
+  "version": "2.1.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 DELETED Viewed

@@ -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,
-    },
-  },
-])

package/index.html DELETED Viewed

@@ -1,13 +0,0 @@
-<!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/public/vite.svg DELETED Viewed

@@ -1 +0,0 @@

- <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 DELETED Viewed

@@ -1,47 +0,0 @@
-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 DELETED Viewed

@@ -1,23 +0,0 @@
-: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 DELETED Viewed

@@ -1,422 +0,0 @@
-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>
-    </>
-  );
-}