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

call-control-sdk 1.0.0 → 2.0.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 (23) hide show

package/dist/index.d.mts +30 -0
package/dist/index.d.ts +30 -0
package/dist/index.js +630 -0
package/dist/index.mjs +634 -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/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>
-    </>
-  );
-}

package/src/lib/hooks/useDraggable.ts DELETED Viewed

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

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

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