call-control-sdk 4.0.0 → 4.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 (4) hide show
  1. package/README.md +2 -2
  2. package/dist/index.js +280 -134
  3. package/dist/index.mjs +300 -150
  4. package/package.json +9 -8
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Call Control SDK
2
2
 
3
- Achala provide call control SDK with component, providing control panel for call management.
3
+ Call control SDK component, providing control panel for call management.
4
4
 
5
5
  ## Features
6
6
 
@@ -130,4 +130,4 @@ All control states are automatically persistent:
130
130
 
131
131
  ## License
132
132
 
133
- MIT © 2025 Achala It Solutions Pvt. Ltd.
133
+ MIT © 2025
package/dist/index.js CHANGED
@@ -73,18 +73,66 @@ var SDKStateManager = class {
73
73
  getInitialState() {
74
74
  return {
75
75
  apiKey: null,
76
+ agentId: "",
76
77
  isInitialized: false,
77
78
  isHolding: false,
78
79
  isMuted: false,
79
80
  status: "idle",
80
81
  callStartTime: null,
81
- controlPanelPosition: { x: 0, y: 0 },
82
- iframePosition: { x: 0, y: 0 },
82
+ controlPanelPosition: { x: 10, y: 10 },
83
+ iframePosition: { x: 10, y: 80 },
83
84
  callData: {
84
85
  mobileNumber: "",
85
86
  callReferenceId: "",
86
87
  agentLoginId: ""
87
- }
88
+ },
89
+ conferenceLine: [
90
+ {
91
+ line: 1,
92
+ status: "IDLE",
93
+ type: "",
94
+ phone: "",
95
+ isMute: false,
96
+ isHold: false,
97
+ isCallStart: false
98
+ },
99
+ {
100
+ line: 2,
101
+ status: "IDLE",
102
+ type: "",
103
+ phone: "",
104
+ isMute: false,
105
+ isHold: false,
106
+ isCallStart: false
107
+ },
108
+ {
109
+ line: 3,
110
+ status: "IDLE",
111
+ type: "",
112
+ phone: "",
113
+ isMute: false,
114
+ isHold: false,
115
+ isCallStart: false
116
+ },
117
+ {
118
+ line: 4,
119
+ status: "IDLE",
120
+ type: "",
121
+ phone: "",
122
+ isMute: false,
123
+ isHold: false,
124
+ isCallStart: false
125
+ },
126
+ {
127
+ line: 5,
128
+ status: "IDLE",
129
+ type: "",
130
+ phone: "",
131
+ isMute: false,
132
+ isHold: false,
133
+ isCallStart: false
134
+ }
135
+ ]
88
136
  };
89
137
  }
90
138
  loadFromStorage() {
@@ -93,15 +141,24 @@ var SDKStateManager = class {
93
141
  if (stored) {
94
142
  const parsedState = JSON.parse(stored);
95
143
  this.state = __spreadProps(__spreadValues({}, this.state), {
144
+ apiKey: parsedState.apiKey || "",
145
+ agentId: parsedState.agentId || "",
146
+ isInitialized: parsedState.isInitialized || false,
96
147
  isHolding: parsedState.isHolding || false,
97
148
  isMuted: parsedState.isMuted || false,
98
149
  status: parsedState.status || "idle",
150
+ callStartTime: parsedState.callStartTime || null,
99
151
  controlPanelPosition: parsedState.controlPanelPosition || {
100
- x: 50,
101
- y: 50
152
+ x: 10,
153
+ y: 10
102
154
  },
103
- iframePosition: parsedState.iframePosition || { x: 50, y: 50 },
104
- callStartTime: parsedState.callStartTime || null
155
+ iframePosition: parsedState.iframePosition || { x: 10, y: 80 },
156
+ callData: parsedState.callData || {
157
+ mobileNumber: "",
158
+ callReferenceId: "",
159
+ agentLoginId: ""
160
+ },
161
+ conferenceLine: parsedState.conferenceLine || []
105
162
  });
106
163
  }
107
164
  } catch (error) {
@@ -111,12 +168,17 @@ var SDKStateManager = class {
111
168
  saveToStorage() {
112
169
  try {
113
170
  const persistentState = {
171
+ apiKey: this.state.apiKey,
172
+ agentId: this.state.agentId,
173
+ isInitialized: this.state.isInitialized,
114
174
  isHolding: this.state.isHolding,
115
175
  isMuted: this.state.isMuted,
116
176
  status: this.state.status,
177
+ callStartTime: this.state.callStartTime,
117
178
  controlPanelPosition: this.state.controlPanelPosition,
118
179
  iframePosition: this.state.iframePosition,
119
- callStartTime: this.state.callStartTime
180
+ callData: this.state.callData,
181
+ conferenceLine: this.state.conferenceLine
120
182
  };
121
183
  localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
122
184
  } catch (error) {
@@ -126,12 +188,14 @@ var SDKStateManager = class {
126
188
  notifyListeners() {
127
189
  this.listeners.forEach((listener) => listener());
128
190
  }
129
- initialize(apiKey) {
191
+ initialize(apiKey, agentId) {
130
192
  if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
131
193
  throw new Error("API key not available");
132
194
  }
133
195
  this.state.apiKey = apiKey;
196
+ this.state.agentId = agentId;
134
197
  this.state.isInitialized = true;
198
+ this.saveToStorage();
135
199
  this.notifyListeners();
136
200
  }
137
201
  getState() {
@@ -189,6 +253,20 @@ var SDKStateManager = class {
189
253
  this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
190
254
  this.notifyListeners();
191
255
  }
256
+ setConferenceLine(line) {
257
+ var _a;
258
+ const conferenceLineData = (_a = this.state.conferenceLine) == null ? void 0 : _a.map(
259
+ (each) => {
260
+ if (each.line === line.line) {
261
+ return line;
262
+ }
263
+ return each;
264
+ }
265
+ );
266
+ this.state.conferenceLine = conferenceLineData;
267
+ this.saveToStorage();
268
+ this.notifyListeners();
269
+ }
192
270
  };
193
271
  var sdkStateManager = new SDKStateManager();
194
272
 
@@ -301,7 +379,7 @@ var import_react4 = require("react");
301
379
  var import_axios = __toESM(require("axios"));
302
380
 
303
381
  // call-control-sdk/lib/services/endPoint.ts
304
- var BASE_URL = "http://192.168.100.143:3010";
382
+ var BASE_URL = "http://192.168.100.143:8095";
305
383
  var VERSION = {
306
384
  v1: "/api/v1"
307
385
  };
@@ -502,17 +580,20 @@ var import_material2 = require("@mui/material");
502
580
  var import_react5 = require("react");
503
581
  var import_jsx_runtime2 = require("react/jsx-runtime");
504
582
  function ConferenceDialog({
505
- agentName = "agent_ravi",
506
- lines = [],
507
583
  onConference,
508
584
  onExit,
509
585
  onEndAllCalls,
510
586
  open,
511
587
  setOpen
512
588
  }) {
589
+ var _a, _b;
590
+ const state = useSDKState();
513
591
  const handleClose = () => {
514
592
  setOpen(false);
515
593
  };
594
+ const onConferenceLineUpdate = (line, data) => {
595
+ sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
596
+ };
516
597
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
517
598
  import_material2.Dialog,
518
599
  {
@@ -533,8 +614,8 @@ function ConferenceDialog({
533
614
  },
534
615
  children: [
535
616
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Typography, { variant: "body1", children: [
536
- agentName,
537
- " Conference"
617
+ (_a = state == null ? void 0 : state.agentId) != null ? _a : "",
618
+ " conference"
538
619
  ] }),
539
620
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.IconButton, { onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Close, {}) })
540
621
  ]
@@ -602,115 +683,186 @@ function ConferenceDialog({
602
683
  margin: "0px 10px",
603
684
  borderRadius: "20px"
604
685
  },
605
- children: lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
606
- import_material2.Box,
607
- {
608
- sx: {
609
- p: 1,
610
- display: "flex",
611
- alignItems: "center",
612
- justifyContent: "space-between",
613
- gap: 1
686
+ children: (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.map((each, index) => {
687
+ var _a2, _b2;
688
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
689
+ import_material2.Box,
690
+ {
691
+ sx: {
692
+ p: 1,
693
+ display: "flex",
694
+ alignItems: "center",
695
+ justifyContent: "space-between",
696
+ gap: 1
697
+ },
698
+ children: [
699
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
700
+ import_material2.Box,
701
+ {
702
+ sx: {
703
+ color: "white",
704
+ bgcolor: "warning.main",
705
+ fontWeight: "bold",
706
+ fontSize: 14,
707
+ minWidth: 70,
708
+ textAlign: "center",
709
+ border: "2px solid primary.main",
710
+ borderRadius: "10px 50px 50px 10px"
711
+ },
712
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { children: (_a2 = each == null ? void 0 : each.line) != null ? _a2 : "" })
713
+ }
714
+ ),
715
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
716
+ import_material2.Typography,
717
+ {
718
+ variant: "body2",
719
+ sx: {
720
+ px: 1,
721
+ border: "2px solid gray",
722
+ borderRadius: "10px",
723
+ textAlign: "center",
724
+ width: "80px",
725
+ maxWidth: "100px"
726
+ },
727
+ children: (_b2 = each == null ? void 0 : each.status) != null ? _b2 : ""
728
+ }
729
+ ),
730
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
731
+ import_material2.Button,
732
+ {
733
+ sx: {
734
+ textTransform: "capitalize"
735
+ },
736
+ size: "small",
737
+ onClick: () => {
738
+ onConferenceLineUpdate(each, { type: "internal" });
739
+ },
740
+ children: [
741
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Radio, { checked: (each == null ? void 0 : each.type) === "internal" }),
742
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "body2", children: "Internal" })
743
+ ]
744
+ }
745
+ ),
746
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
747
+ import_material2.Button,
748
+ {
749
+ sx: {
750
+ textTransform: "capitalize"
751
+ },
752
+ size: "small",
753
+ onClick: () => {
754
+ onConferenceLineUpdate(each, { type: "external" });
755
+ },
756
+ children: [
757
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Radio, { checked: each.type === "external" }),
758
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "body2", children: "External" })
759
+ ]
760
+ }
761
+ ),
762
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
763
+ import_material2.TextField,
764
+ {
765
+ size: "small",
766
+ placeholder: "Phone Number",
767
+ value: (each == null ? void 0 : each.phone) || "",
768
+ onChange: (e) => {
769
+ onConferenceLineUpdate(each, { phone: e.target.value });
770
+ }
771
+ }
772
+ ),
773
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: "Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
774
+ import_material2.IconButton,
775
+ {
776
+ color: "success",
777
+ sx: {
778
+ bgcolor: "action.hover",
779
+ "&:hover": { bgcolor: "action.selected" }
780
+ },
781
+ onClick: () => {
782
+ onConferenceLineUpdate(each, {
783
+ isCallStart: true,
784
+ status: "ON CALL"
785
+ });
786
+ },
787
+ disabled: each == null ? void 0 : each.isCallStart,
788
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
789
+ }
790
+ ) }),
791
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: "Merge Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
792
+ import_material2.IconButton,
793
+ {
794
+ color: "info",
795
+ sx: {
796
+ bgcolor: "action.hover",
797
+ "&:hover": { bgcolor: "action.selected" }
798
+ },
799
+ disabled: !(each == null ? void 0 : each.isCallStart),
800
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallSplit, {})
801
+ }
802
+ ) }),
803
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: each.isHold ? "Hold" : "Un Hold", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
804
+ import_material2.IconButton,
805
+ {
806
+ color: each.isHold ? "warning" : "info",
807
+ sx: {
808
+ bgcolor: "action.hover",
809
+ "&:hover": { bgcolor: "action.selected" }
810
+ },
811
+ onClick: () => {
812
+ if (each.isHold) {
813
+ onConferenceLineUpdate(each, { isHold: false });
814
+ } else {
815
+ onConferenceLineUpdate(each, { isHold: true });
816
+ }
817
+ },
818
+ disabled: !(each == null ? void 0 : each.isCallStart),
819
+ children: each.isHold ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PlayCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PauseCircle, {})
820
+ }
821
+ ) }),
822
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: each.isMute ? "Mute" : "Un Mute", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
823
+ import_material2.IconButton,
824
+ {
825
+ color: each.isMute ? "error" : "info",
826
+ sx: {
827
+ bgcolor: "action.hover",
828
+ "&:hover": { bgcolor: "action.selected" }
829
+ },
830
+ onClick: () => {
831
+ if (each.isMute) {
832
+ onConferenceLineUpdate(each, { isMute: false });
833
+ } else {
834
+ onConferenceLineUpdate(each, { isMute: true });
835
+ }
836
+ },
837
+ disabled: !(each == null ? void 0 : each.isCallStart),
838
+ children: each.isMute ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.MicOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Mic, {})
839
+ }
840
+ ) }),
841
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Tooltip, { title: "End Call", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
842
+ import_material2.IconButton,
843
+ {
844
+ color: "error",
845
+ sx: {
846
+ bgcolor: "action.hover",
847
+ "&:hover": { bgcolor: "action.selected" }
848
+ },
849
+ onClick: () => {
850
+ onConferenceLineUpdate(each, {
851
+ isCallStart: false,
852
+ isMute: false,
853
+ isHold: false,
854
+ status: "IDLE"
855
+ });
856
+ },
857
+ disabled: !(each == null ? void 0 : each.isCallStart),
858
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallEnd, {})
859
+ }
860
+ ) })
861
+ ]
614
862
  },
615
- children: [
616
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
617
- import_material2.Box,
618
- {
619
- sx: {
620
- color: "white",
621
- bgcolor: "warning.main",
622
- fontWeight: "bold",
623
- fontSize: 14,
624
- minWidth: 70,
625
- textAlign: "center",
626
- border: "2px solid primary.main",
627
- borderRadius: "10px 50px 50px 10px"
628
- },
629
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Typography, { children: [
630
- "Line ",
631
- index + 1
632
- ] })
633
- }
634
- ),
635
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
636
- import_material2.Typography,
637
- {
638
- variant: "body2",
639
- sx: {
640
- px: 1,
641
- border: "2px solid gray",
642
- borderRadius: "10px",
643
- textAlign: "center",
644
- width: "80px",
645
- maxWidth: "100px"
646
- },
647
- children: line.status
648
- }
649
- ),
650
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { display: "flex", alignItems: "center", children: [
651
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Radio, { checked: line.type === "Internal" }),
652
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "body2", children: "Internal" })
653
- ] }),
654
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.Box, { display: "flex", alignItems: "center", children: [
655
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Radio, { checked: line.type === "External" }),
656
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Typography, { variant: "body2", children: "External" })
657
- ] }),
658
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
659
- import_material2.TextField,
660
- {
661
- size: "small",
662
- placeholder: "Phone Number",
663
- value: line.phone || ""
664
- }
665
- ),
666
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
667
- import_material2.IconButton,
668
- {
669
- color: "success",
670
- sx: {
671
- bgcolor: "action.hover",
672
- "&:hover": { bgcolor: "action.selected" }
673
- },
674
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.Call, {})
675
- }
676
- ),
677
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
678
- import_material2.IconButton,
679
- {
680
- color: "info",
681
- sx: {
682
- bgcolor: "action.hover",
683
- "&:hover": { bgcolor: "action.selected" }
684
- },
685
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallSplit, {})
686
- }
687
- ),
688
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
689
- import_material2.IconButton,
690
- {
691
- color: "warning",
692
- sx: {
693
- bgcolor: "action.hover",
694
- "&:hover": { bgcolor: "action.selected" }
695
- },
696
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.PauseCircle, {})
697
- }
698
- ),
699
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
700
- import_material2.IconButton,
701
- {
702
- color: "error",
703
- sx: {
704
- bgcolor: "action.hover",
705
- "&:hover": { bgcolor: "action.selected" }
706
- },
707
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons_material.CallEnd, {})
708
- }
709
- )
710
- ]
711
- },
712
- index
713
- ))
863
+ index
864
+ );
865
+ })
714
866
  }
715
867
  ),
716
868
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -1054,6 +1206,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
1054
1206
  function CallControlPanel({ onDataChange }) {
1055
1207
  const theme = (0, import_material3.useTheme)();
1056
1208
  const state = useSDKState();
1209
+ const { showToast } = useToast();
1057
1210
  const [anchorEl, setAnchorEl] = (0, import_react6.useState)(null);
1058
1211
  const [showIframe, setShowIframe] = (0, import_react6.useState)(true);
1059
1212
  const [statusAnchorEl, setStatusAnchorEl] = (0, import_react6.useState)(
@@ -1157,9 +1310,10 @@ function CallControlPanel({ onDataChange }) {
1157
1310
  };
1158
1311
  const handleStartCall = (number) => {
1159
1312
  if (number.length !== 10) {
1313
+ showToast("Invalid phone number", "error");
1160
1314
  alert("Invalid phone number");
1161
1315
  } else if (!/^\d+$/.test(number)) {
1162
- alert("Invalid phone number");
1316
+ showToast("Invalid phone number", "error");
1163
1317
  } else {
1164
1318
  const payload = {
1165
1319
  action: "CALL",
@@ -1665,8 +1819,8 @@ function CallControlPanel({ onDataChange }) {
1665
1819
  zIndex: 99999
1666
1820
  },
1667
1821
  children: [
1668
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Lunch" }),
1669
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Tea" })
1822
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Lunch Break" }),
1823
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material3.MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Tea Break" })
1670
1824
  ]
1671
1825
  }
1672
1826
  ),
@@ -1736,14 +1890,6 @@ function CallControlPanel({ onDataChange }) {
1736
1890
  {
1737
1891
  open,
1738
1892
  setOpen,
1739
- agentName: "agent_Ravi",
1740
- lines: [
1741
- { status: "ON CALL", type: "External", phone: "7032491730" },
1742
- { status: "IDLE", type: "Internal", phone: "" },
1743
- { status: "IDLE", type: "External", phone: "" },
1744
- { status: "IDLE", type: "Internal", phone: "" },
1745
- { status: "IDLE", type: "External", phone: "" }
1746
- ],
1747
1893
  onConference: () => console.log("Conference"),
1748
1894
  onExit: () => console.log("Exit"),
1749
1895
  onEndAllCalls: () => console.log("End All Calls")
@@ -2179,7 +2325,7 @@ function initSDK({
2179
2325
  agentId,
2180
2326
  baseUrl
2181
2327
  }) {
2182
- sdkStateManager.initialize(apiKey);
2328
+ sdkStateManager.initialize(apiKey, agentId);
2183
2329
  eventTracker.init({
2184
2330
  apiKey,
2185
2331
  tenantId,
package/dist/index.mjs CHANGED
@@ -27,7 +27,7 @@ import {
27
27
  Typography as Typography2,
28
28
  Menu,
29
29
  Box as Box2,
30
- Tooltip,
30
+ Tooltip as Tooltip2,
31
31
  Fade,
32
32
  useTheme,
33
33
  Button as Button2,
@@ -38,9 +38,9 @@ import {
38
38
  } from "@mui/material";
39
39
  import {
40
40
  PauseCircle as PauseCircle2,
41
- PlayCircle,
42
- Mic,
43
- MicOff,
41
+ PlayCircle as PlayCircle2,
42
+ Mic as Mic2,
43
+ MicOff as MicOff2,
44
44
  CallEnd as CallEnd2,
45
45
  Groups,
46
46
  DragIndicator,
@@ -71,18 +71,66 @@ var SDKStateManager = class {
71
71
  getInitialState() {
72
72
  return {
73
73
  apiKey: null,
74
+ agentId: "",
74
75
  isInitialized: false,
75
76
  isHolding: false,
76
77
  isMuted: false,
77
78
  status: "idle",
78
79
  callStartTime: null,
79
- controlPanelPosition: { x: 0, y: 0 },
80
- iframePosition: { x: 0, y: 0 },
80
+ controlPanelPosition: { x: 10, y: 10 },
81
+ iframePosition: { x: 10, y: 80 },
81
82
  callData: {
82
83
  mobileNumber: "",
83
84
  callReferenceId: "",
84
85
  agentLoginId: ""
85
- }
86
+ },
87
+ conferenceLine: [
88
+ {
89
+ line: 1,
90
+ status: "IDLE",
91
+ type: "",
92
+ phone: "",
93
+ isMute: false,
94
+ isHold: false,
95
+ isCallStart: false
96
+ },
97
+ {
98
+ line: 2,
99
+ status: "IDLE",
100
+ type: "",
101
+ phone: "",
102
+ isMute: false,
103
+ isHold: false,
104
+ isCallStart: false
105
+ },
106
+ {
107
+ line: 3,
108
+ status: "IDLE",
109
+ type: "",
110
+ phone: "",
111
+ isMute: false,
112
+ isHold: false,
113
+ isCallStart: false
114
+ },
115
+ {
116
+ line: 4,
117
+ status: "IDLE",
118
+ type: "",
119
+ phone: "",
120
+ isMute: false,
121
+ isHold: false,
122
+ isCallStart: false
123
+ },
124
+ {
125
+ line: 5,
126
+ status: "IDLE",
127
+ type: "",
128
+ phone: "",
129
+ isMute: false,
130
+ isHold: false,
131
+ isCallStart: false
132
+ }
133
+ ]
86
134
  };
87
135
  }
88
136
  loadFromStorage() {
@@ -91,15 +139,24 @@ var SDKStateManager = class {
91
139
  if (stored) {
92
140
  const parsedState = JSON.parse(stored);
93
141
  this.state = __spreadProps(__spreadValues({}, this.state), {
142
+ apiKey: parsedState.apiKey || "",
143
+ agentId: parsedState.agentId || "",
144
+ isInitialized: parsedState.isInitialized || false,
94
145
  isHolding: parsedState.isHolding || false,
95
146
  isMuted: parsedState.isMuted || false,
96
147
  status: parsedState.status || "idle",
148
+ callStartTime: parsedState.callStartTime || null,
97
149
  controlPanelPosition: parsedState.controlPanelPosition || {
98
- x: 50,
99
- y: 50
150
+ x: 10,
151
+ y: 10
100
152
  },
101
- iframePosition: parsedState.iframePosition || { x: 50, y: 50 },
102
- callStartTime: parsedState.callStartTime || null
153
+ iframePosition: parsedState.iframePosition || { x: 10, y: 80 },
154
+ callData: parsedState.callData || {
155
+ mobileNumber: "",
156
+ callReferenceId: "",
157
+ agentLoginId: ""
158
+ },
159
+ conferenceLine: parsedState.conferenceLine || []
103
160
  });
104
161
  }
105
162
  } catch (error) {
@@ -109,12 +166,17 @@ var SDKStateManager = class {
109
166
  saveToStorage() {
110
167
  try {
111
168
  const persistentState = {
169
+ apiKey: this.state.apiKey,
170
+ agentId: this.state.agentId,
171
+ isInitialized: this.state.isInitialized,
112
172
  isHolding: this.state.isHolding,
113
173
  isMuted: this.state.isMuted,
114
174
  status: this.state.status,
175
+ callStartTime: this.state.callStartTime,
115
176
  controlPanelPosition: this.state.controlPanelPosition,
116
177
  iframePosition: this.state.iframePosition,
117
- callStartTime: this.state.callStartTime
178
+ callData: this.state.callData,
179
+ conferenceLine: this.state.conferenceLine
118
180
  };
119
181
  localStorage.setItem(this.STORAGE_KEY, JSON.stringify(persistentState));
120
182
  } catch (error) {
@@ -124,12 +186,14 @@ var SDKStateManager = class {
124
186
  notifyListeners() {
125
187
  this.listeners.forEach((listener) => listener());
126
188
  }
127
- initialize(apiKey) {
189
+ initialize(apiKey, agentId) {
128
190
  if (!apiKey || typeof apiKey !== "string" || apiKey.trim().length === 0) {
129
191
  throw new Error("API key not available");
130
192
  }
131
193
  this.state.apiKey = apiKey;
194
+ this.state.agentId = agentId;
132
195
  this.state.isInitialized = true;
196
+ this.saveToStorage();
133
197
  this.notifyListeners();
134
198
  }
135
199
  getState() {
@@ -187,6 +251,20 @@ var SDKStateManager = class {
187
251
  this.state.callData = __spreadValues(__spreadValues({}, this.state.callData), data);
188
252
  this.notifyListeners();
189
253
  }
254
+ setConferenceLine(line) {
255
+ var _a;
256
+ const conferenceLineData = (_a = this.state.conferenceLine) == null ? void 0 : _a.map(
257
+ (each) => {
258
+ if (each.line === line.line) {
259
+ return line;
260
+ }
261
+ return each;
262
+ }
263
+ );
264
+ this.state.conferenceLine = conferenceLineData;
265
+ this.saveToStorage();
266
+ this.notifyListeners();
267
+ }
190
268
  };
191
269
  var sdkStateManager = new SDKStateManager();
192
270
 
@@ -303,7 +381,7 @@ import { useCallback as useCallback2, useReducer } from "react";
303
381
  import axios from "axios";
304
382
 
305
383
  // call-control-sdk/lib/services/endPoint.ts
306
- var BASE_URL = "http://192.168.100.143:3010";
384
+ var BASE_URL = "http://192.168.100.143:8095";
307
385
  var VERSION = {
308
386
  v1: "/api/v1"
309
387
  };
@@ -506,8 +584,11 @@ import {
506
584
  Close,
507
585
  Group,
508
586
  Logout,
587
+ Mic,
588
+ MicOff,
509
589
  PauseCircle,
510
590
  PhoneDisabled,
591
+ PlayCircle,
511
592
  SupportAgent
512
593
  } from "@mui/icons-material";
513
594
  import {
@@ -521,22 +602,26 @@ import {
521
602
  TextField,
522
603
  Typography,
523
604
  Autocomplete,
524
- Grid
605
+ Grid,
606
+ Tooltip
525
607
  } from "@mui/material";
526
608
  import { useState as useState4 } from "react";
527
609
  import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
528
610
  function ConferenceDialog({
529
- agentName = "agent_ravi",
530
- lines = [],
531
611
  onConference,
532
612
  onExit,
533
613
  onEndAllCalls,
534
614
  open,
535
615
  setOpen
536
616
  }) {
617
+ var _a, _b;
618
+ const state = useSDKState();
537
619
  const handleClose = () => {
538
620
  setOpen(false);
539
621
  };
622
+ const onConferenceLineUpdate = (line, data) => {
623
+ sdkStateManager.setConferenceLine(__spreadValues(__spreadValues({}, line), data));
624
+ };
540
625
  return /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(
541
626
  Dialog,
542
627
  {
@@ -557,8 +642,8 @@ function ConferenceDialog({
557
642
  },
558
643
  children: [
559
644
  /* @__PURE__ */ jsxs(Typography, { variant: "body1", children: [
560
- agentName,
561
- " Conference"
645
+ (_a = state == null ? void 0 : state.agentId) != null ? _a : "",
646
+ " conference"
562
647
  ] }),
563
648
  /* @__PURE__ */ jsx2(IconButton, { onClick: handleClose, children: /* @__PURE__ */ jsx2(Close, {}) })
564
649
  ]
@@ -626,115 +711,186 @@ function ConferenceDialog({
626
711
  margin: "0px 10px",
627
712
  borderRadius: "20px"
628
713
  },
629
- children: lines.map((line, index) => /* @__PURE__ */ jsxs(
630
- Box,
631
- {
632
- sx: {
633
- p: 1,
634
- display: "flex",
635
- alignItems: "center",
636
- justifyContent: "space-between",
637
- gap: 1
714
+ children: (_b = state == null ? void 0 : state.conferenceLine) == null ? void 0 : _b.map((each, index) => {
715
+ var _a2, _b2;
716
+ return /* @__PURE__ */ jsxs(
717
+ Box,
718
+ {
719
+ sx: {
720
+ p: 1,
721
+ display: "flex",
722
+ alignItems: "center",
723
+ justifyContent: "space-between",
724
+ gap: 1
725
+ },
726
+ children: [
727
+ /* @__PURE__ */ jsx2(
728
+ Box,
729
+ {
730
+ sx: {
731
+ color: "white",
732
+ bgcolor: "warning.main",
733
+ fontWeight: "bold",
734
+ fontSize: 14,
735
+ minWidth: 70,
736
+ textAlign: "center",
737
+ border: "2px solid primary.main",
738
+ borderRadius: "10px 50px 50px 10px"
739
+ },
740
+ children: /* @__PURE__ */ jsx2(Typography, { children: (_a2 = each == null ? void 0 : each.line) != null ? _a2 : "" })
741
+ }
742
+ ),
743
+ /* @__PURE__ */ jsx2(
744
+ Typography,
745
+ {
746
+ variant: "body2",
747
+ sx: {
748
+ px: 1,
749
+ border: "2px solid gray",
750
+ borderRadius: "10px",
751
+ textAlign: "center",
752
+ width: "80px",
753
+ maxWidth: "100px"
754
+ },
755
+ children: (_b2 = each == null ? void 0 : each.status) != null ? _b2 : ""
756
+ }
757
+ ),
758
+ /* @__PURE__ */ jsxs(
759
+ Button,
760
+ {
761
+ sx: {
762
+ textTransform: "capitalize"
763
+ },
764
+ size: "small",
765
+ onClick: () => {
766
+ onConferenceLineUpdate(each, { type: "internal" });
767
+ },
768
+ children: [
769
+ /* @__PURE__ */ jsx2(Radio, { checked: (each == null ? void 0 : each.type) === "internal" }),
770
+ /* @__PURE__ */ jsx2(Typography, { variant: "body2", children: "Internal" })
771
+ ]
772
+ }
773
+ ),
774
+ /* @__PURE__ */ jsxs(
775
+ Button,
776
+ {
777
+ sx: {
778
+ textTransform: "capitalize"
779
+ },
780
+ size: "small",
781
+ onClick: () => {
782
+ onConferenceLineUpdate(each, { type: "external" });
783
+ },
784
+ children: [
785
+ /* @__PURE__ */ jsx2(Radio, { checked: each.type === "external" }),
786
+ /* @__PURE__ */ jsx2(Typography, { variant: "body2", children: "External" })
787
+ ]
788
+ }
789
+ ),
790
+ /* @__PURE__ */ jsx2(
791
+ TextField,
792
+ {
793
+ size: "small",
794
+ placeholder: "Phone Number",
795
+ value: (each == null ? void 0 : each.phone) || "",
796
+ onChange: (e) => {
797
+ onConferenceLineUpdate(each, { phone: e.target.value });
798
+ }
799
+ }
800
+ ),
801
+ /* @__PURE__ */ jsx2(Tooltip, { title: "Call", children: /* @__PURE__ */ jsx2(
802
+ IconButton,
803
+ {
804
+ color: "success",
805
+ sx: {
806
+ bgcolor: "action.hover",
807
+ "&:hover": { bgcolor: "action.selected" }
808
+ },
809
+ onClick: () => {
810
+ onConferenceLineUpdate(each, {
811
+ isCallStart: true,
812
+ status: "ON CALL"
813
+ });
814
+ },
815
+ disabled: each == null ? void 0 : each.isCallStart,
816
+ children: /* @__PURE__ */ jsx2(Call, {})
817
+ }
818
+ ) }),
819
+ /* @__PURE__ */ jsx2(Tooltip, { title: "Merge Call", children: /* @__PURE__ */ jsx2(
820
+ IconButton,
821
+ {
822
+ color: "info",
823
+ sx: {
824
+ bgcolor: "action.hover",
825
+ "&:hover": { bgcolor: "action.selected" }
826
+ },
827
+ disabled: !(each == null ? void 0 : each.isCallStart),
828
+ children: /* @__PURE__ */ jsx2(CallSplit, {})
829
+ }
830
+ ) }),
831
+ /* @__PURE__ */ jsx2(Tooltip, { title: each.isHold ? "Hold" : "Un Hold", children: /* @__PURE__ */ jsx2(
832
+ IconButton,
833
+ {
834
+ color: each.isHold ? "warning" : "info",
835
+ sx: {
836
+ bgcolor: "action.hover",
837
+ "&:hover": { bgcolor: "action.selected" }
838
+ },
839
+ onClick: () => {
840
+ if (each.isHold) {
841
+ onConferenceLineUpdate(each, { isHold: false });
842
+ } else {
843
+ onConferenceLineUpdate(each, { isHold: true });
844
+ }
845
+ },
846
+ disabled: !(each == null ? void 0 : each.isCallStart),
847
+ children: each.isHold ? /* @__PURE__ */ jsx2(PlayCircle, {}) : /* @__PURE__ */ jsx2(PauseCircle, {})
848
+ }
849
+ ) }),
850
+ /* @__PURE__ */ jsx2(Tooltip, { title: each.isMute ? "Mute" : "Un Mute", children: /* @__PURE__ */ jsx2(
851
+ IconButton,
852
+ {
853
+ color: each.isMute ? "error" : "info",
854
+ sx: {
855
+ bgcolor: "action.hover",
856
+ "&:hover": { bgcolor: "action.selected" }
857
+ },
858
+ onClick: () => {
859
+ if (each.isMute) {
860
+ onConferenceLineUpdate(each, { isMute: false });
861
+ } else {
862
+ onConferenceLineUpdate(each, { isMute: true });
863
+ }
864
+ },
865
+ disabled: !(each == null ? void 0 : each.isCallStart),
866
+ children: each.isMute ? /* @__PURE__ */ jsx2(MicOff, {}) : /* @__PURE__ */ jsx2(Mic, {})
867
+ }
868
+ ) }),
869
+ /* @__PURE__ */ jsx2(Tooltip, { title: "End Call", children: /* @__PURE__ */ jsx2(
870
+ IconButton,
871
+ {
872
+ color: "error",
873
+ sx: {
874
+ bgcolor: "action.hover",
875
+ "&:hover": { bgcolor: "action.selected" }
876
+ },
877
+ onClick: () => {
878
+ onConferenceLineUpdate(each, {
879
+ isCallStart: false,
880
+ isMute: false,
881
+ isHold: false,
882
+ status: "IDLE"
883
+ });
884
+ },
885
+ disabled: !(each == null ? void 0 : each.isCallStart),
886
+ children: /* @__PURE__ */ jsx2(CallEnd, {})
887
+ }
888
+ ) })
889
+ ]
638
890
  },
639
- children: [
640
- /* @__PURE__ */ jsx2(
641
- Box,
642
- {
643
- sx: {
644
- color: "white",
645
- bgcolor: "warning.main",
646
- fontWeight: "bold",
647
- fontSize: 14,
648
- minWidth: 70,
649
- textAlign: "center",
650
- border: "2px solid primary.main",
651
- borderRadius: "10px 50px 50px 10px"
652
- },
653
- children: /* @__PURE__ */ jsxs(Typography, { children: [
654
- "Line ",
655
- index + 1
656
- ] })
657
- }
658
- ),
659
- /* @__PURE__ */ jsx2(
660
- Typography,
661
- {
662
- variant: "body2",
663
- sx: {
664
- px: 1,
665
- border: "2px solid gray",
666
- borderRadius: "10px",
667
- textAlign: "center",
668
- width: "80px",
669
- maxWidth: "100px"
670
- },
671
- children: line.status
672
- }
673
- ),
674
- /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
675
- /* @__PURE__ */ jsx2(Radio, { checked: line.type === "Internal" }),
676
- /* @__PURE__ */ jsx2(Typography, { variant: "body2", children: "Internal" })
677
- ] }),
678
- /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
679
- /* @__PURE__ */ jsx2(Radio, { checked: line.type === "External" }),
680
- /* @__PURE__ */ jsx2(Typography, { variant: "body2", children: "External" })
681
- ] }),
682
- /* @__PURE__ */ jsx2(
683
- TextField,
684
- {
685
- size: "small",
686
- placeholder: "Phone Number",
687
- value: line.phone || ""
688
- }
689
- ),
690
- /* @__PURE__ */ jsx2(
691
- IconButton,
692
- {
693
- color: "success",
694
- sx: {
695
- bgcolor: "action.hover",
696
- "&:hover": { bgcolor: "action.selected" }
697
- },
698
- children: /* @__PURE__ */ jsx2(Call, {})
699
- }
700
- ),
701
- /* @__PURE__ */ jsx2(
702
- IconButton,
703
- {
704
- color: "info",
705
- sx: {
706
- bgcolor: "action.hover",
707
- "&:hover": { bgcolor: "action.selected" }
708
- },
709
- children: /* @__PURE__ */ jsx2(CallSplit, {})
710
- }
711
- ),
712
- /* @__PURE__ */ jsx2(
713
- IconButton,
714
- {
715
- color: "warning",
716
- sx: {
717
- bgcolor: "action.hover",
718
- "&:hover": { bgcolor: "action.selected" }
719
- },
720
- children: /* @__PURE__ */ jsx2(PauseCircle, {})
721
- }
722
- ),
723
- /* @__PURE__ */ jsx2(
724
- IconButton,
725
- {
726
- color: "error",
727
- sx: {
728
- bgcolor: "action.hover",
729
- "&:hover": { bgcolor: "action.selected" }
730
- },
731
- children: /* @__PURE__ */ jsx2(CallEnd, {})
732
- }
733
- )
734
- ]
735
- },
736
- index
737
- ))
891
+ index
892
+ );
893
+ })
738
894
  }
739
895
  ),
740
896
  /* @__PURE__ */ jsx2(Box, { textAlign: "center", m: 2, children: /* @__PURE__ */ jsxs(
@@ -1078,6 +1234,7 @@ import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-run
1078
1234
  function CallControlPanel({ onDataChange }) {
1079
1235
  const theme = useTheme();
1080
1236
  const state = useSDKState();
1237
+ const { showToast } = useToast();
1081
1238
  const [anchorEl, setAnchorEl] = useState5(null);
1082
1239
  const [showIframe, setShowIframe] = useState5(true);
1083
1240
  const [statusAnchorEl, setStatusAnchorEl] = useState5(
@@ -1181,9 +1338,10 @@ function CallControlPanel({ onDataChange }) {
1181
1338
  };
1182
1339
  const handleStartCall = (number) => {
1183
1340
  if (number.length !== 10) {
1341
+ showToast("Invalid phone number", "error");
1184
1342
  alert("Invalid phone number");
1185
1343
  } else if (!/^\d+$/.test(number)) {
1186
- alert("Invalid phone number");
1344
+ showToast("Invalid phone number", "error");
1187
1345
  } else {
1188
1346
  const payload = {
1189
1347
  action: "CALL",
@@ -1312,7 +1470,7 @@ function CallControlPanel({ onDataChange }) {
1312
1470
  sx: {
1313
1471
  marginRight: "10px"
1314
1472
  },
1315
- children: /* @__PURE__ */ jsx3(Tooltip, { title: "Dial", children: /* @__PURE__ */ jsx3(
1473
+ children: /* @__PURE__ */ jsx3(Tooltip2, { title: "Dial", children: /* @__PURE__ */ jsx3(
1316
1474
  IconButton2,
1317
1475
  {
1318
1476
  onClick: (e) => {
@@ -1408,7 +1566,7 @@ function CallControlPanel({ onDataChange }) {
1408
1566
  alignItems: "center"
1409
1567
  },
1410
1568
  children: [
1411
- state.status === "break" && /* @__PURE__ */ jsx3(Tooltip, { title: "Agent Ready", children: /* @__PURE__ */ jsx3(
1569
+ state.status === "break" && /* @__PURE__ */ jsx3(Tooltip2, { title: "Agent Ready", children: /* @__PURE__ */ jsx3(
1412
1570
  IconButton2,
1413
1571
  {
1414
1572
  onClick: (e) => {
@@ -1432,7 +1590,7 @@ function CallControlPanel({ onDataChange }) {
1432
1590
  )
1433
1591
  }
1434
1592
  ) }),
1435
- state.status === "wrap up" && /* @__PURE__ */ jsx3(Tooltip, { title: "Redial", children: /* @__PURE__ */ jsx3(
1593
+ state.status === "wrap up" && /* @__PURE__ */ jsx3(Tooltip2, { title: "Redial", children: /* @__PURE__ */ jsx3(
1436
1594
  IconButton2,
1437
1595
  {
1438
1596
  onClick: (e) => {
@@ -1448,7 +1606,7 @@ function CallControlPanel({ onDataChange }) {
1448
1606
  children: /* @__PURE__ */ jsx3(Tty, {})
1449
1607
  }
1450
1608
  ) }),
1451
- state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ jsx3(
1609
+ state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip2, { title: state.isHolding ? "Resume" : "Hold", children: /* @__PURE__ */ jsx3(
1452
1610
  IconButton2,
1453
1611
  {
1454
1612
  onClick: (e) => {
@@ -1459,10 +1617,10 @@ function CallControlPanel({ onDataChange }) {
1459
1617
  sx: {
1460
1618
  bgcolor: state.isHolding ? "warning.info" : "action.hover"
1461
1619
  },
1462
- children: state.isHolding ? /* @__PURE__ */ jsx3(PlayCircle, {}) : /* @__PURE__ */ jsx3(PauseCircle2, {})
1620
+ children: state.isHolding ? /* @__PURE__ */ jsx3(PlayCircle2, {}) : /* @__PURE__ */ jsx3(PauseCircle2, {})
1463
1621
  }
1464
1622
  ) }),
1465
- state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ jsx3(
1623
+ state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip2, { title: state.isMuted ? "Unmute" : "Mute", children: /* @__PURE__ */ jsx3(
1466
1624
  IconButton2,
1467
1625
  {
1468
1626
  onClick: (e) => {
@@ -1473,10 +1631,10 @@ function CallControlPanel({ onDataChange }) {
1473
1631
  sx: {
1474
1632
  bgcolor: state.isMuted ? "error.info" : "action.hover"
1475
1633
  },
1476
- children: state.isMuted ? /* @__PURE__ */ jsx3(MicOff, {}) : /* @__PURE__ */ jsx3(Mic, {})
1634
+ children: state.isMuted ? /* @__PURE__ */ jsx3(MicOff2, {}) : /* @__PURE__ */ jsx3(Mic2, {})
1477
1635
  }
1478
1636
  ) }),
1479
- state.status !== "on call" && /* @__PURE__ */ jsx3(Tooltip, { title: "Queue", children: /* @__PURE__ */ jsx3(
1637
+ state.status !== "on call" && /* @__PURE__ */ jsx3(Tooltip2, { title: "Queue", children: /* @__PURE__ */ jsx3(
1480
1638
  IconButton2,
1481
1639
  {
1482
1640
  onClick: (e) => {
@@ -1493,7 +1651,7 @@ function CallControlPanel({ onDataChange }) {
1493
1651
  children: /* @__PURE__ */ jsx3(Layers, {})
1494
1652
  }
1495
1653
  ) }),
1496
- state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip, { title: "Conference Call", children: /* @__PURE__ */ jsx3(
1654
+ state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip2, { title: "Conference Call", children: /* @__PURE__ */ jsx3(
1497
1655
  IconButton2,
1498
1656
  {
1499
1657
  onClick: (e) => {
@@ -1510,7 +1668,7 @@ function CallControlPanel({ onDataChange }) {
1510
1668
  children: /* @__PURE__ */ jsx3(TransferWithinAStation, {})
1511
1669
  }
1512
1670
  ) }),
1513
- state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip, { title: "Conference Call", children: /* @__PURE__ */ jsx3(
1671
+ state.status === "on call" && /* @__PURE__ */ jsx3(Tooltip2, { title: "Conference Call", children: /* @__PURE__ */ jsx3(
1514
1672
  IconButton2,
1515
1673
  {
1516
1674
  onClick: (e) => {
@@ -1528,7 +1686,7 @@ function CallControlPanel({ onDataChange }) {
1528
1686
  }
1529
1687
  ) }),
1530
1688
  state.status === "on call" && /* @__PURE__ */ jsx3(
1531
- Tooltip,
1689
+ Tooltip2,
1532
1690
  {
1533
1691
  title: state.status === "on call" ? "End Call" : "Start Call",
1534
1692
  children: /* @__PURE__ */ jsx3(
@@ -1689,8 +1847,8 @@ function CallControlPanel({ onDataChange }) {
1689
1847
  zIndex: 99999
1690
1848
  },
1691
1849
  children: [
1692
- /* @__PURE__ */ jsx3(MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Lunch" }),
1693
- /* @__PURE__ */ jsx3(MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Tea" })
1850
+ /* @__PURE__ */ jsx3(MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Lunch Break" }),
1851
+ /* @__PURE__ */ jsx3(MenuItem, { onClick: () => handleUpdateAgentStatus("break"), children: "- Tea Break" })
1694
1852
  ]
1695
1853
  }
1696
1854
  ),
@@ -1760,14 +1918,6 @@ function CallControlPanel({ onDataChange }) {
1760
1918
  {
1761
1919
  open,
1762
1920
  setOpen,
1763
- agentName: "agent_Ravi",
1764
- lines: [
1765
- { status: "ON CALL", type: "External", phone: "7032491730" },
1766
- { status: "IDLE", type: "Internal", phone: "" },
1767
- { status: "IDLE", type: "External", phone: "" },
1768
- { status: "IDLE", type: "Internal", phone: "" },
1769
- { status: "IDLE", type: "External", phone: "" }
1770
- ],
1771
1921
  onConference: () => console.log("Conference"),
1772
1922
  onExit: () => console.log("Exit"),
1773
1923
  onEndAllCalls: () => console.log("End All Calls")
@@ -2203,7 +2353,7 @@ function initSDK({
2203
2353
  agentId,
2204
2354
  baseUrl
2205
2355
  }) {
2206
- sdkStateManager.initialize(apiKey);
2356
+ sdkStateManager.initialize(apiKey, agentId);
2207
2357
  eventTracker.init({
2208
2358
  apiKey,
2209
2359
  tenantId,
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "call-control-sdk",
3
3
  "description": "Call Control SDK for WebRTC",
4
- "version": "4.0.0",
5
- "author": "Achala",
4
+ "version": "4.1.0",
5
+ "author": "achala IT",
6
6
  "license": "MIT",
7
7
  "main": "./dist/index.cjs",
8
8
  "module": "./dist/index.js",
@@ -18,17 +18,18 @@
18
18
  "dist"
19
19
  ],
20
20
  "keywords": [
21
- "webrtc",
21
+ "webRTC",
22
22
  "call-control",
23
- "sdk",
23
+ "webRTC-sdk",
24
24
  "javascript",
25
- "achala-call-control-sdk",
26
25
  "call-control-sdk",
27
- "call-control-sdk-for-webrtc",
26
+ "call-control-sdk-for-webRTC",
28
27
  "softphone",
29
28
  "softphone-sdk",
30
- "softphone-sdk-for-webrtc",
31
- "softphone-sdk-for-webrtc-for-web"
29
+ "softphone-sdk-for-webRTC",
30
+ "softphone-sdk-for-web",
31
+ "call-control-sdk-for-web",
32
+ "call-control-sdk-for-webRTC"
32
33
  ],
33
34
  "scripts": {
34
35
  "build": "tsup call-control-sdk/index.ts --format esm,cjs --dts --clean --tsconfig tsconfig.build.json",