call-control-sdk 1.0.0 → 2.1.0

package/src/lib/hooks/useDraggable.ts

@@ -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

@@ -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

@@ -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);
-}

package/src/lib/sdk-state.ts

@@ -1,140 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

package/tsconfig.app.json

@@ -1,27 +0,0 @@
-{
-  "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

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

package/tsconfig.lib.json

@@ -1,23 +0,0 @@
-{
-  "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

@@ -1,25 +0,0 @@
-{
-  "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

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