-
Notifications
You must be signed in to change notification settings - Fork 65
docs(task): add AI documentation for CallControl, IncomingTask, OutdialCall, TaskList widgets #577
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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. | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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)} | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. we are removing WC
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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,
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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).
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. here the two parameters are missing
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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:*", | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Lets put actual versions
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | ||
|
|
||
There was a problem hiding this comment.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated