call-control-sdk 6.3.5 → 6.4.0

package/README.md

@@ -130,6 +130,103 @@ export default function AgentDashboard() {
 }
 ```
 
+#### 📞 **Get Caller Data (Alternative to onDataChange)**
+
+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.
+
+**Key Differences:**
+
+- 🔄 **onDataChange**: Requires `CallControlPanel` component, callback-based
+- 🎯 **useGetCallerData**: Independent hook, reactive, can be used anywhere
+
+**When to use each:**
+
+- Use `onDataChange` when you need the call control UI and want to handle data changes
+- Use `useGetCallerData` when you only need call data without the control panel UI
+
+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.
+
+```tsx
+import { useGetCallerData } from "call-control-sdk";
+
+export default function AgentDashboard() {
+	const callerData = useGetCallerData();
+
+	// Sample data structure returned:
+	// {
+	//   "phone_number": "1234567890",
+	//   "status": "ONCALL",
+	//   "callReferenceId": "convox_call_id_123",
+	//   "agent_id": "agent001",
+	//   "process_id": "proc001",
+	//   "process_name": "Sales Process"
+	// }
+
+	return (
+		<div>
+			<h1>Current Call Information</h1>
+			<p>Phone Number: {callerData.phone_number}</p>
+			<p>Call Status: {callerData.status}</p>
+			<p>Call Reference ID: {callerData.callReferenceId}</p>
+			<p>Agent ID: {callerData.agent_id}</p>
+			<p>Process: {callerData.process_name}</p>
+		</div>
+	);
+}
+```
+
+**Example: Using useGetCallerData independently (without CallControlPanel)**
+
+```tsx
+import { useGetCallerData } from "call-control-sdk";
+
+// This component can be used anywhere, even without CallControlPanel
+export default function CallStatusWidget() {
+	const callerData = useGetCallerData();
+
+	return (
+		<div className="call-status-widget">
+			<h3>Current Call Status</h3>
+			{callerData.status === "ONCALL" ?
+				<div>
+					<p>📞 Active Call: {callerData.phone_number}</p>
+					<p>Agent: {callerData.agent_id}</p>
+					<p>Process: {callerData.process_name}</p>
+				</div>
+			:	<p>No active call</p>}
+		</div>
+	);
+}
+
+// You can use this widget anywhere in your app
+export default function MainApp() {
+	return (
+		<div>
+			<h1>My Application</h1>
+			<CallStatusWidget /> {/* Independent component */}
+			{/* No CallControlPanel needed here */}
+		</div>
+	);
+}
+```
+
+**Key Features:**
+
+- ✅ **Reactive Updates**: Automatically re-renders when call data changes
+- ✅ **Real-time Data**: Reflects current call state from WebSocket updates
+- ✅ **Type Safety**: Fully typed with TypeScript interfaces
+- ✅ **Complete Data**: Returns all available call information
+- ✅ **Independent**: Works without `CallControlPanel` component
+
+**Returned Data Fields:**
+
+- `phone_number`: The phone number involved in the call
+- `status`: Current call status (ONCALL, RINGING, WRAPUP, etc.)
+- `callReferenceId`: Unique identifier for the call
+- `agent_id`: ID of the agent handling the call
+- `process_id`: Process identifier for the call
+- `process_name`: Name of the process handling the call
+
 ### 3️⃣ **Use Call Management Hooks**
 
 #### 🔴 **Start a Call**

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "call-control-sdk",
 	"description": "Call Control SDK for Web RTC",
-	"version": "6.3.5",
+	"version": "6.4.0",
 	"author": "CTI SDK Team",
 	"license": "MIT",
 	"main": "./dist/index.js",