Skip to content

Commit 7be06c9

Browse files
ciscoRankushRankush KumarShreyas281299
authored
docs(task): add AI documentation for CallControl, IncomingTask, OutdialCall, TaskList widgets (#577)
Co-authored-by: Rankush Kumar <rankkuma+cisco@cisco.com> Co-authored-by: Shreyas Sharma <shreyassharma9912@gmail.com>
1 parent ee012e0 commit 7be06c9

8 files changed

Lines changed: 1792 additions & 0 deletions

File tree

‎packages/contact-center/task/ai-docs/widgets/CallControl/AGENTS.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
# CallControl Widget
2+
3+
## AI Agent Routing (Do Not Start Here)
4+
5+
If you are an AI assistant or tool reading this file **as your first entry point**, do **not** start your reasoning or code generation workflow from here.
6+
7+
- **Primary entrypoint:** Always begin with the **nearest parent** contact-center AI docs `AGENTS.md` (for example, the root `ai-docs/AGENTS.md` at the repository root).
8+
- **Process:**
9+
- Load and follow the instructions and templates in that parent `AGENTS.md`.
10+
- Only after a parent `AGENTS.md` explicitly routes you to this file should you treat this document as package-specific guidance.
11+
- **Never** skip the parent `AGENTS.md` even if the user prompt directly mentions this specific package or file.
12+
13+
Once you have gone through the parent `AGENTS.md` and been routed here, you can use the rest of this file as the authoritative reference for the `CallControl` widget.
14+
15+
## Overview
16+
17+
Provides unified **interaction control** functionality (hold, mute, transfer, consult, conference, end, wrapup) for active tasks across **voice calls and digital channels**. Includes both standard and CAD (Customer Attached Data) variants.
18+
19+
## Why This Widget?
20+
21+
**Problem:** Agents need comprehensive control during active customer interactions (voice and digital).
22+
23+
**Solution:** Unified interface for all task/call operations with two variants:
24+
25+
- **CallControl:** Standard interaction controls (optimized for both telephony and digital tasks)
26+
- **CallControlCAD:** Interaction controls + CAD panel for customer data
27+
28+
## What It Does
29+
30+
- Hold/Resume active **voice** task (telephony only)
31+
- Mute/Unmute microphone (telephony only)
32+
- Transfer task/call (to agent/queue/number; telephony only)
33+
- Consult with agent before transfer (telephony only)
34+
- Conference multiple parties (telephony only)
35+
- Recording controls (pause/resume; telephony only)
36+
- End task (call or digital interaction)
37+
- Wrapup with codes for completed tasks
38+
- Auto-wrapup timer for tasks that end
39+
- CAD panel (CallControlCAD variant only)
40+
41+
## Usage
42+
43+
### React
44+
45+
```tsx
46+
import {CallControl, CallControlCAD} from '@webex/cc-widgets';
47+
48+
function App() {
49+
return (
50+
<>
51+
{/* Standard interaction controls (voice + digital) */}
52+
<CallControl
53+
onHoldResume={({isHeld, task}) => console.log('Hold:', {isHeld, task})}
54+
onEnd={({task}) => console.log('Call ended', {task})}
55+
onWrapUp={({task, wrapUpReason}) => console.log('Wrapup complete', {task, wrapUpReason})}
56+
onRecordingToggle={({isRecording, task}) => console.log('Recording:', {isRecording, task})}
57+
onToggleMute={({isMuted, task}) => console.log('Muted:', {isMuted, task})}
58+
conferenceEnabled={true}
59+
consultTransferOptions={{showAgents: true, showQueues: true}}
60+
/>
61+
62+
{/* With CAD panel for richer customer context */}
63+
<CallControlCAD
64+
onHoldResume={({isHeld, task}) => console.log('Hold:', {isHeld, task})}
65+
onEnd={({task}) => console.log('Call ended', {task})}
66+
onWrapUp={({task, wrapUpReason}) => console.log('Wrapup complete', {task, wrapUpReason})}
67+
onRecordingToggle={({isRecording, task}) => console.log('Recording:', {isRecording, task})}
68+
onToggleMute={({isMuted, task}) => console.log('Muted:', {isMuted, task})}
69+
callControlClassName="custom-class"
70+
/>
71+
</>
72+
);
73+
}
74+
```
75+
76+
## Props API
77+
78+
| Prop | Type | Default | Description |
79+
| ----------------------------- | --------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
80+
| `onHoldResume` | `({ isHeld, task }: { isHeld: boolean; task: ITask }) => void` | - | Callback when hold state changes |
81+
| `onEnd` | `({ task }: { task: ITask }) => void` | - | Callback when call ends |
82+
| `onWrapUp` | `({ task, wrapUpReason }: { task: ITask; wrapUpReason: string }) => void` | - | Callback when wrapup completes (includes wrapup reason and task) |
83+
| `onRecordingToggle` | `({ isRecording, task }: { isRecording: boolean; task: ITask }) => void` | - | Callback when recording toggled |
84+
| `onToggleMute` | `({ isMuted, task }: { isMuted: boolean; task: ITask }) => void` | - | Callback when mute toggled |
85+
| `conferenceEnabled` | `boolean` | `true` | Enable conference functionality |
86+
| `consultTransferOptions` | `{ showAgents?: boolean, showQueues?: boolean, showAddressBook?: boolean }` | - | Configure transfer options |
87+
| `callControlClassName` | `string` | - | Custom CSS class (CAD variant) |
88+
| `callControlConsultClassName` | `string` | - | Custom CSS class for consult (CAD variant) |
89+
90+
## Examples
91+
92+
### With Transfer Options
93+
94+
```tsx
95+
<CallControl
96+
consultTransferOptions={{
97+
showAgents: true, // Show buddy agents
98+
showQueues: true, // Show queues
99+
showAddressBook: false, // Hide address book
100+
}}
101+
/>
102+
```
103+
104+
### With Conference Disabled
105+
106+
```tsx
107+
<CallControl
108+
conferenceEnabled={false}
109+
onEnd={({task}) => {
110+
console.log('Call ended without conference option', {task});
111+
}}
112+
/>
113+
```
114+
115+
### CAD Variant with Custom Styling
116+
117+
```tsx
118+
<CallControlCAD
119+
callControlClassName="my-call-controls"
120+
callControlConsultClassName="my-consult-panel"
121+
onWrapUp={({task, wrapUpReason}) => {
122+
console.log('Wrapup complete, CAD data saved', {task, wrapUpReason});
123+
}}
124+
/>
125+
```
126+
127+
## Differences: CallControl vs CallControlCAD
128+
129+
| Feature | CallControl | CallControlCAD |
130+
| --------------------- | -------------------- | ------------------------- |
131+
| Call controls | ✅ | ✅ |
132+
| CAD panel | ❌ | ✅ |
133+
| Customer data display | ❌ | ✅ |
134+
| Layout | Compact | Extended with CAD sidebar |
135+
| Use case | Simple call handling | CRM integration scenarios |
136+
137+
**Note:** Both use the same `useCallControl` hook and share 90% of logic.
138+
139+
## Dependencies
140+
141+
```json
142+
{
143+
"@webex/cc-components": "1.28.0-next.7",
144+
"@webex/cc-store": "1.28.0-next.7",
145+
"@webex/cc-ui-logging": "1.28.0-next.7",
146+
"mobx-react-lite": "^4.1.0",
147+
"react-error-boundary": "^6.0.0"
148+
}
149+
```
150+
151+
See [package.json](../../package.json) for versions.
152+
153+
## Additional Resources
154+
155+
- [Architecture Details](architecture.md) - Component internals, data flows, diagrams

0 commit comments

Comments
 (0)