Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 154 additions & 0 deletions packages/contact-center/task/ai-docs/widgets/CallControl/AGENTS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
# CallControl Widget

## Overview

Provides call control functionality (hold, mute, transfer, consult, conference, end, wrapup) for active telephony tasks. Includes both standard and CAD (Customer Attached Data) variants.

## Why This Widget?

**Problem:** Agents need comprehensive call control during active conversations.

**Solution:** Unified interface for all call operations with two variants:
- **CallControl:** Standard call controls
- **CallControlCAD:** Call controls + CAD panel for customer data

## What It Does

- Hold/Resume active call
- Mute/Unmute microphone
- Transfer call (to agent/queue/number)
- Consult with agent before transfer
- Conference multiple parties
- Recording controls (pause/resume)
- End call
- Wrapup with codes
- Auto-wrapup timer
- CAD panel (CallControlCAD variant only)

## Usage

### React

```tsx
import { CallControl, CallControlCAD } from '@webex/cc-widgets';

function App() {
return (
<>
{/* Standard call controls */}
<CallControl
onHoldResume={(isHeld) => console.log('Hold:', isHeld)}
onEnd={() => console.log('Call ended')}
onWrapUp={() => console.log('Wrapup complete')}
onRecordingToggle={({ isRecording }) => console.log('Recording:', isRecording)}
onToggleMute={(isMuted) => console.log('Muted:', isMuted)}
conferenceEnabled={true}
consultTransferOptions={{ showAgents: true, showQueues: true }}
/>

{/* With CAD panel */}
<CallControlCAD
onHoldResume={(isHeld) => console.log('Hold:', isHeld)}
onEnd={() => console.log('Call ended')}
callControlClassName="custom-class"
/>
</>
);
}
```

### Web Component

```html
<widget-cc-call-control></widget-cc-call-control>
<widget-cc-call-control-cad></widget-cc-call-control-cad>

<script>
const callControl = document.querySelector('widget-cc-call-control');
callControl.onHoldResume = (isHeld) => console.log('Hold:', isHeld);
callControl.onEnd = () => console.log('Call ended');
callControl.conferenceEnabled = true;
</script>
```

## Props API

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `onHoldResume` | `(isHeld: boolean) => void` | - | Callback when hold state changes |
| `onEnd` | `() => void` | - | Callback when call ends |
| `onWrapUp` | `() => void` | - | Callback when wrapup completes |
| `onRecordingToggle` | `({ isRecording: boolean, task: ITask }) => void` | - | Callback when recording toggled |
| `onToggleMute` | `(isMuted: boolean) => void` | - | Callback when mute toggled |
| `conferenceEnabled` | `boolean` | `true` | Enable conference functionality |
| `consultTransferOptions` | `{ showAgents?: boolean, showQueues?: boolean, showAddressBook?: boolean }` | - | Configure transfer options |
| `callControlClassName` | `string` | - | Custom CSS class (CAD variant) |
| `callControlConsultClassName` | `string` | - | Custom CSS class for consult (CAD variant) |

## Examples

### With Transfer Options

```tsx
<CallControl
consultTransferOptions={{
showAgents: true, // Show buddy agents
showQueues: true, // Show queues
showAddressBook: false // Hide address book
}}
/>
```

### With Conference Disabled

```tsx
<CallControl
conferenceEnabled={false}
onEnd={() => {
console.log('Call ended without conference option');
}}
/>
```

### CAD Variant with Custom Styling

```tsx
<CallControlCAD
callControlClassName="my-call-controls"
callControlConsultClassName="my-consult-panel"
onWrapUp={() => {
console.log('Wrapup complete, CAD data saved');
}}
/>
```

## Differences: CallControl vs CallControlCAD

| Feature | CallControl | CallControlCAD |
|---------|-------------|----------------|
| Call controls | ✅ | ✅ |
| CAD panel | ❌ | ✅ |
| Customer data display | ❌ | ✅ |
| Layout | Compact | Extended with CAD sidebar |
| Use case | Simple call handling | CRM integration scenarios |

**Note:** Both use the same `useCallControl` hook and share 90% of logic.

## Dependencies

```json
{
"@webex/cc-components": "workspace:*",
"@webex/cc-store": "workspace:*",
"@webex/cc-ui-logging": "workspace:*",
"mobx-react-lite": "^4.1.0",
"react-error-boundary": "^6.0.0"
}
```

See [package.json](../../package.json) for versions.

## Additional Resources

- [Architecture Details](architecture.md) - Component internals, data flows, diagrams

Loading