Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
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.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not just 'telephony tasks', we also have digital tasks

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated


## Why This Widget?

**Problem:** Agents need comprehensive call control during active conversations.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The whole file is more specific for calls but this widget supports call and digital task so we can improve the prompt to be less call specific

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated


**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)}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For all the callbacks, there is task object that is returned. We need to confirm the correct params returned

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the correct arguments

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>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we are removing WC

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed


<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 |
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a common query regarding the methods listed below, all of the do not have the arguement {task} here but in the code they do, so let me know if it is done intentionally,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for catching this added the proper arguments

|------|------|---------|-------------|
| `onHoldResume` | `(isHeld: boolean) => void` | - | Callback when hold state changes |
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as per the code, the onHoldResume method has two input arguements, (isHeld : boolean , task : ITask).
here the task parameter is missing, do let me know if it is done intentionally.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the correct arguments

| `onEnd` | `() => void` | - | Callback when call ends |
| `onWrapUp` | `() => void` | - | Callback when wrapup completes |
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onWrapUp({
  task: currentTask,
  wrapUpReason: wrapUpReason,
})

here the two parameters are missing

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the correct arguments

| `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:*",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lets put actual versions

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added

"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