call-control-sdk 6.3.6 → 6.4.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.
- package/README.md +86 -20
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -130,37 +130,103 @@ export default function AgentDashboard() {
|
|
|
130
130
|
}
|
|
131
131
|
```
|
|
132
132
|
|
|
133
|
-
|
|
133
|
+
#### 📞 **Get Caller Data (Alternative to onDataChange)**
|
|
134
|
+
|
|
135
|
+
The `useGetCallerData` hook is an **independent alternative** to the `CallControlPanel`'s `onDataChange` prop. It provides the same call data but can be used anywhere in your application without depending on the `CallControlPanel` component.
|
|
136
|
+
|
|
137
|
+
**Key Differences:**
|
|
138
|
+
|
|
139
|
+
- 🔄 **onDataChange**: Requires `CallControlPanel` component, callback-based
|
|
140
|
+
- 🎯 **useGetCallerData**: Independent hook, reactive, can be used anywhere
|
|
141
|
+
|
|
142
|
+
**When to use each:**
|
|
143
|
+
|
|
144
|
+
- Use `onDataChange` when you need the call control UI and want to handle data changes
|
|
145
|
+
- Use `useGetCallerData` when you only need call data without the control panel UI
|
|
146
|
+
|
|
147
|
+
The `useGetCallerData` hook provides reactive access to current call data. It automatically updates when call status changes, new calls arrive, or call information is modified.
|
|
134
148
|
|
|
135
149
|
```tsx
|
|
136
|
-
import { useGetCallerData
|
|
150
|
+
import { useGetCallerData } from "call-control-sdk";
|
|
137
151
|
|
|
138
152
|
export default function AgentDashboard() {
|
|
139
|
-
const callerData = useGetCallerData()
|
|
140
|
-
|
|
141
|
-
//
|
|
142
|
-
{
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
153
|
+
const callerData = useGetCallerData();
|
|
154
|
+
|
|
155
|
+
// Sample data structure returned:
|
|
156
|
+
// {
|
|
157
|
+
// "phone_number": "1234567890",
|
|
158
|
+
// "status": "ONCALL",
|
|
159
|
+
// "callReferenceId": "convox_call_id_123",
|
|
160
|
+
// "agent_id": "agent001",
|
|
161
|
+
// "process_id": "proc001",
|
|
162
|
+
// "process_name": "Sales Process"
|
|
163
|
+
// }
|
|
164
|
+
|
|
165
|
+
return (
|
|
166
|
+
<div>
|
|
167
|
+
<h1>Current Call Information</h1>
|
|
168
|
+
<p>Phone Number: {callerData.phone_number}</p>
|
|
169
|
+
<p>Call Status: {callerData.status}</p>
|
|
170
|
+
<p>Call Reference ID: {callerData.callReferenceId}</p>
|
|
171
|
+
<p>Agent ID: {callerData.agent_id}</p>
|
|
172
|
+
<p>Process: {callerData.process_name}</p>
|
|
173
|
+
</div>
|
|
174
|
+
);
|
|
175
|
+
}
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
**Example: Using useGetCallerData independently (without CallControlPanel)**
|
|
179
|
+
|
|
180
|
+
```tsx
|
|
181
|
+
import { useGetCallerData } from "call-control-sdk";
|
|
182
|
+
|
|
183
|
+
// This component can be used anywhere, even without CallControlPanel
|
|
184
|
+
export default function CallStatusWidget() {
|
|
185
|
+
const callerData = useGetCallerData();
|
|
186
|
+
|
|
187
|
+
return (
|
|
188
|
+
<div className="call-status-widget">
|
|
189
|
+
<h3>Current Call Status</h3>
|
|
190
|
+
{callerData.status === "ONCALL" ?
|
|
191
|
+
<div>
|
|
192
|
+
<p>📞 Active Call: {callerData.phone_number}</p>
|
|
193
|
+
<p>Agent: {callerData.agent_id}</p>
|
|
194
|
+
<p>Process: {callerData.process_name}</p>
|
|
195
|
+
</div>
|
|
196
|
+
: <p>No active call</p>}
|
|
197
|
+
</div>
|
|
198
|
+
);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
// You can use this widget anywhere in your app
|
|
202
|
+
export default function MainApp() {
|
|
152
203
|
return (
|
|
153
204
|
<div>
|
|
154
|
-
<h1>
|
|
155
|
-
|
|
156
|
-
{
|
|
157
|
-
Call ReferenceId:
|
|
158
|
-
{callerData.callReferenceId}
|
|
205
|
+
<h1>My Application</h1>
|
|
206
|
+
<CallStatusWidget /> {/* Independent component */}
|
|
207
|
+
{/* No CallControlPanel needed here */}
|
|
159
208
|
</div>
|
|
160
209
|
);
|
|
161
210
|
}
|
|
162
211
|
```
|
|
163
212
|
|
|
213
|
+
**Key Features:**
|
|
214
|
+
|
|
215
|
+
- ✅ **Reactive Updates**: Automatically re-renders when call data changes
|
|
216
|
+
- ✅ **Real-time Data**: Reflects current call state from WebSocket updates
|
|
217
|
+
- ✅ **Type Safety**: Fully typed with TypeScript interfaces
|
|
218
|
+
- ✅ **Complete Data**: Returns all available call information
|
|
219
|
+
- ✅ **Independent**: Works without `CallControlPanel` component
|
|
220
|
+
|
|
221
|
+
**Returned Data Fields:**
|
|
222
|
+
|
|
223
|
+
- `phone_number`: The phone number involved in the call
|
|
224
|
+
- `status`: Current call status (ONCALL, RINGING, WRAPUP, etc.)
|
|
225
|
+
- `callReferenceId`: Unique identifier for the call
|
|
226
|
+
- `agent_id`: ID of the agent handling the call
|
|
227
|
+
- `process_id`: Process identifier for the call
|
|
228
|
+
- `process_name`: Name of the process handling the call
|
|
229
|
+
|
|
164
230
|
### 3️⃣ **Use Call Management Hooks**
|
|
165
231
|
|
|
166
232
|
#### 🔴 **Start a Call**
|