fix(call-control): implement-mute-unmute-actions#492
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughThis change set introduces mute/unmute functionality across the contact center application's call control components and supporting infrastructure. New boolean state properties and callback handlers for mute toggling are added to the store, React components, and type definitions. The UI is updated to include a mute/unmute button with dynamic icon, tooltip, and disabled state, and corresponding CSS styles for its appearance and states. The mute state is managed via MobX in the store, with new methods and event handling to reset or update mute status based on task and device context. The Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
adhmenon
added
validated
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
packages/contact-center/cc-components/src/components/task/CallControl/CallControlCustom/call-control-consult.tsx (1)
59-76: Fix the module name in error logging.The mute toggle handler is well-implemented with proper error handling and UI state management. However, there's an inconsistency in the error logging.
logger.error('Mute toggle failed:', { error, - module: 'call-control.tsx', + module: 'call-control-consult.tsx', method: 'handleMuteToggle', });The rest of the implementation correctly:
- Disables the button immediately to prevent rapid clicks
- Handles errors gracefully with logging
- Re-enables the button after 500ms regardless of success/failure
packages/contact-center/store/src/storeEventsWrapper.ts (1)
399-407: Implementation looks good for auto-unmuting WebRTC calls.The method correctly identifies WebRTC telephony tasks and ensures they start unmuted. The placement after the incoming task callback is appropriate.
Consider adding a user preference setting in the future to allow agents to choose their default mute state for new calls.
Also applies to: 529-529
packages/contact-center/task/src/helper.ts (1)
431-470: Excellent implementation of the toggleMute functionality!The method properly handles:
- Control visibility validation
- Async SDK calls with proper state management
- Error handling that maintains state consistency
- Optional callback invocation in both success and error cases
Consider making the warning message more generic:
- logger.warn('Mute only available for voice tasks', {module: 'useCallControl', method: 'toggleMute'}); + logger.warn('Mute control not available', {module: 'useCallControl', method: 'toggleMute'});packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx (1)
90-107: Good UX pattern for preventing rapid clicks.The immediate button disable and delayed re-enable prevents UI issues. However, consider providing user feedback on errors.
Consider showing a toast notification or other user feedback when the mute operation fails:
} catch (error) { logger.error('Mute toggle failed:', { error, module: 'call-control.tsx', method: 'handleMuteToggle', }); + // TODO: Show error notification to user }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
packages/contact-center/cc-components/src/components/task/CallControl/CallControlCustom/call-control-consult.tsx(3 hunks)packages/contact-center/cc-components/src/components/task/CallControl/call-control.styles.scss(1 hunks)packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx(3 hunks)packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx(2 hunks)packages/contact-center/cc-components/src/components/task/constants.ts(1 hunks)packages/contact-center/cc-components/src/components/task/task.types.ts(5 hunks)packages/contact-center/store/src/store.ts(1 hunks)packages/contact-center/store/src/store.types.ts(3 hunks)packages/contact-center/store/src/storeEventsWrapper.ts(6 hunks)packages/contact-center/task/src/CallControl/index.tsx(3 hunks)packages/contact-center/task/src/CallControlCAD/index.tsx(3 hunks)packages/contact-center/task/src/helper.ts(3 hunks)packages/contact-center/task/src/task.types.ts(2 hunks)packages/contact-center/task/tests/helper.ts(3 hunks)widgets-samples/cc/samples-cc-react-app/src/App.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (14)
📓 Common learnings
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/index.tsx:10-10
Timestamp: 2025-02-13T06:58:01.805Z
Learning: In the StationLogin component (packages/contact-center/station-login/src/station-login/index.tsx), `handleContinue` and `showMultipleLoginAlert` props have been intentionally removed from store destructuring as part of the Agent Multi-Login configurability changes.
Learnt from: mkesavan13
PR: webex/widgets#347
File: packages/contact-center/user-state/src/helper.ts:10-19
Timestamp: 2024-12-06T01:07:12.444Z
Learning: In `packages/contact-center/user-state/src/helper.ts`, within the `useUserState` hook, the timer reset in the `useEffect` hook is handled during the state change success. Therefore, modifying the dependency array is unnecessary.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:44:14.152Z
Learning: The file `packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx` is going to change completely, so writing tests for these changes are being ignored.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/src/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:45:03.435Z
Learning: In `packages/contact-center/station-login/src/station-login/station-login.presentational.tsx`, certain code sections are temporary or removable, and comments regarding these sections can be ignored in future reviews.
packages/contact-center/task/src/CallControl/index.tsx (5)
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/index.tsx:10-10
Timestamp: 2025-02-13T06:58:01.805Z
Learning: In the StationLogin component (packages/contact-center/station-login/src/station-login/index.tsx), `handleContinue` and `showMultipleLoginAlert` props have been intentionally removed from store destructuring as part of the Agent Multi-Login configurability changes.
Learnt from: mkesavan13
PR: webex/widgets#347
File: packages/contact-center/user-state/src/helper.ts:10-19
Timestamp: 2024-12-06T01:07:12.444Z
Learning: In `packages/contact-center/user-state/src/helper.ts`, within the `useUserState` hook, the timer reset in the `useEffect` hook is handled during the state change success. Therefore, modifying the dependency array is unnecessary.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/src/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:45:03.435Z
Learning: In `packages/contact-center/station-login/src/station-login/station-login.presentational.tsx`, certain code sections are temporary or removable, and comments regarding these sections can be ignored in future reviews.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:44:14.152Z
Learning: The file `packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx` is going to change completely, so writing tests for these changes are being ignored.
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/station-login.types.ts:129-132
Timestamp: 2025-02-13T06:59:01.103Z
Learning: In the station-login component's type definitions, it's acceptable for `UseStationLoginProps` to have a subset of props (`cc`, `onLogin`, `onLogout`, `logger`, `isAgentLoggedIn`) compared to `IStationLoginProps` and `StationLoginPresentationalProps`, even if properties like `handleContinue` and `showMultipleLoginAlert` exist in the latter interfaces.
packages/contact-center/store/src/store.types.ts (2)
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/index.tsx:10-10
Timestamp: 2025-02-13T06:58:01.805Z
Learning: In the StationLogin component (packages/contact-center/station-login/src/station-login/index.tsx), `handleContinue` and `showMultipleLoginAlert` props have been intentionally removed from store destructuring as part of the Agent Multi-Login configurability changes.
Learnt from: mkesavan13
PR: webex/widgets#453
File: widgets-samples/cc/samples-cc-wc-app/app.js:57-98
Timestamp: 2025-05-13T06:51:13.155Z
Learning: In the widgets-samples/cc/samples-cc-wc-app application, the Webex object is provided by an external SDK script loaded in the HTML file, and JavaScript functions in app.js may be called by HTML elements even if static analysis can't detect this relationship.
packages/contact-center/cc-components/src/components/task/CallControl/call-control.styles.scss (1)
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/src/station-login/styles.module.scss:0-0
Timestamp: 2024-11-19T13:35:53.226Z
Learning: The code in 'packages/contact-center/station-login/src/station-login/styles.module.scss' is temporary and is going to be removed.
packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx (5)
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/index.tsx:10-10
Timestamp: 2025-02-13T06:58:01.805Z
Learning: In the StationLogin component (packages/contact-center/station-login/src/station-login/index.tsx), `handleContinue` and `showMultipleLoginAlert` props have been intentionally removed from store destructuring as part of the Agent Multi-Login configurability changes.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/src/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:45:03.435Z
Learning: In `packages/contact-center/station-login/src/station-login/station-login.presentational.tsx`, certain code sections are temporary or removable, and comments regarding these sections can be ignored in future reviews.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:44:14.152Z
Learning: The file `packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx` is going to change completely, so writing tests for these changes are being ignored.
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/station-login.types.ts:129-132
Timestamp: 2025-02-13T06:59:01.103Z
Learning: In the station-login component's type definitions, it's acceptable for `UseStationLoginProps` to have a subset of props (`cc`, `onLogin`, `onLogout`, `logger`, `isAgentLoggedIn`) compared to `IStationLoginProps` and `StationLoginPresentationalProps`, even if properties like `handleContinue` and `showMultipleLoginAlert` exist in the latter interfaces.
Learnt from: mkesavan13
PR: webex/widgets#347
File: packages/contact-center/user-state/src/helper.ts:10-19
Timestamp: 2024-12-06T01:07:12.444Z
Learning: In `packages/contact-center/user-state/src/helper.ts`, within the `useUserState` hook, the timer reset in the `useEffect` hook is handled during the state change success. Therefore, modifying the dependency array is unnecessary.
packages/contact-center/task/src/CallControlCAD/index.tsx (5)
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/index.tsx:10-10
Timestamp: 2025-02-13T06:58:01.805Z
Learning: In the StationLogin component (packages/contact-center/station-login/src/station-login/index.tsx), `handleContinue` and `showMultipleLoginAlert` props have been intentionally removed from store destructuring as part of the Agent Multi-Login configurability changes.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/src/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:45:03.435Z
Learning: In `packages/contact-center/station-login/src/station-login/station-login.presentational.tsx`, certain code sections are temporary or removable, and comments regarding these sections can be ignored in future reviews.
Learnt from: mkesavan13
PR: webex/widgets#347
File: packages/contact-center/user-state/src/helper.ts:10-19
Timestamp: 2024-12-06T01:07:12.444Z
Learning: In `packages/contact-center/user-state/src/helper.ts`, within the `useUserState` hook, the timer reset in the `useEffect` hook is handled during the state change success. Therefore, modifying the dependency array is unnecessary.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:44:14.152Z
Learning: The file `packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx` is going to change completely, so writing tests for these changes are being ignored.
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/station-login.types.ts:129-132
Timestamp: 2025-02-13T06:59:01.103Z
Learning: In the station-login component's type definitions, it's acceptable for `UseStationLoginProps` to have a subset of props (`cc`, `onLogin`, `onLogout`, `logger`, `isAgentLoggedIn`) compared to `IStationLoginProps` and `StationLoginPresentationalProps`, even if properties like `handleContinue` and `showMultipleLoginAlert` exist in the latter interfaces.
packages/contact-center/task/src/helper.ts (2)
Learnt from: mkesavan13
PR: webex/widgets#347
File: packages/contact-center/user-state/src/helper.ts:10-19
Timestamp: 2024-12-06T01:07:12.444Z
Learning: In `packages/contact-center/user-state/src/helper.ts`, within the `useUserState` hook, the timer reset in the `useEffect` hook is handled during the state change success. Therefore, modifying the dependency array is unnecessary.
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/index.tsx:10-10
Timestamp: 2025-02-13T06:58:01.805Z
Learning: In the StationLogin component (packages/contact-center/station-login/src/station-login/index.tsx), `handleContinue` and `showMultipleLoginAlert` props have been intentionally removed from store destructuring as part of the Agent Multi-Login configurability changes.
packages/contact-center/cc-components/src/components/task/constants.ts (1)
Learnt from: Riteshfyi
PR: webex/widgets#485
File: playwright/Utils/wrapupUtils.ts:22-22
Timestamp: 2025-07-05T20:59:40.600Z
Learning: In the @webex/widgets repository, test IDs for wrap-up reasons are constructed using lowercase in both the UI components (call-control.tsx) and utility functions (wrapupUtils.ts). The pattern `wrapup-reason-${reason.toLowerCase()}` is used consistently, so there are no case sensitivity issues with test ID matching.
packages/contact-center/task/src/task.types.ts (3)
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/index.tsx:10-10
Timestamp: 2025-02-13T06:58:01.805Z
Learning: In the StationLogin component (packages/contact-center/station-login/src/station-login/index.tsx), `handleContinue` and `showMultipleLoginAlert` props have been intentionally removed from store destructuring as part of the Agent Multi-Login configurability changes.
Learnt from: mkesavan13
PR: webex/widgets#347
File: packages/contact-center/user-state/src/helper.ts:10-19
Timestamp: 2024-12-06T01:07:12.444Z
Learning: In `packages/contact-center/user-state/src/helper.ts`, within the `useUserState` hook, the timer reset in the `useEffect` hook is handled during the state change success. Therefore, modifying the dependency array is unnecessary.
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/station-login.types.ts:129-132
Timestamp: 2025-02-13T06:59:01.103Z
Learning: In the station-login component's type definitions, it's acceptable for `UseStationLoginProps` to have a subset of props (`cc`, `onLogin`, `onLogout`, `logger`, `isAgentLoggedIn`) compared to `IStationLoginProps` and `StationLoginPresentationalProps`, even if properties like `handleContinue` and `showMultipleLoginAlert` exist in the latter interfaces.
packages/contact-center/task/tests/helper.ts (7)
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:44:14.152Z
Learning: The file `packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx` is going to change completely, so writing tests for these changes are being ignored.
Learnt from: mkesavan13
PR: webex/widgets#347
File: packages/contact-center/user-state/src/helper.ts:10-19
Timestamp: 2024-12-06T01:07:12.444Z
Learning: In `packages/contact-center/user-state/src/helper.ts`, within the `useUserState` hook, the timer reset in the `useEffect` hook is handled during the state change success. Therefore, modifying the dependency array is unnecessary.
Learnt from: Shreyas281299
PR: webex/widgets#362
File: packages/contact-center/task/tests/CallControl/call-control.presentational.tsx:0-0
Timestamp: 2025-01-20T09:52:20.775Z
Learning: UI testing is not mandatory for React components in the webex/widgets repository.
Learnt from: Riteshfyi
PR: webex/widgets#485
File: playwright/Utils/incomingTaskUtils.ts:137-137
Timestamp: 2025-07-05T21:10:16.104Z
Learning: Social task automation is not yet implemented in the playwright/Utils/incomingTaskUtils.ts file. The code for TASK_TYPES.SOCIAL is placeholder code that will be updated when social task automation is added to the system.
Learnt from: Riteshfyi
PR: webex/widgets#485
File: playwright/incoming-task-test.spec.ts:0-0
Timestamp: 2025-07-05T21:10:46.832Z
Learning: In the webex-widgets project, test setup functions like pageSetup() in playwright test files are acceptable to keep as comprehensive sequential functions even if they are long, when they primarily consist of checks and function calls. Breaking them down into smaller functions may be unnecessary abstraction for test code.
Learnt from: Shreyas281299
PR: webex/widgets#362
File: packages/contact-center/task/tests/CallControl/index.tsx:29-46
Timestamp: 2025-01-20T09:52:57.754Z
Learning: UI testing is not mandatory for components in the @webex/widgets repository. Focus should be on functional testing rather than UI element verification.
Learnt from: mkesavan13
PR: webex/widgets#453
File: widgets-samples/cc/samples-cc-wc-app/app.js:57-98
Timestamp: 2025-05-13T06:51:13.155Z
Learning: In the widgets-samples/cc/samples-cc-wc-app application, the Webex object is provided by an external SDK script loaded in the HTML file, and JavaScript functions in app.js may be called by HTML elements even if static analysis can't detect this relationship.
packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx (4)
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/index.tsx:10-10
Timestamp: 2025-02-13T06:58:01.805Z
Learning: In the StationLogin component (packages/contact-center/station-login/src/station-login/index.tsx), `handleContinue` and `showMultipleLoginAlert` props have been intentionally removed from store destructuring as part of the Agent Multi-Login configurability changes.
Learnt from: mkesavan13
PR: webex/widgets#347
File: packages/contact-center/user-state/src/helper.ts:10-19
Timestamp: 2024-12-06T01:07:12.444Z
Learning: In `packages/contact-center/user-state/src/helper.ts`, within the `useUserState` hook, the timer reset in the `useEffect` hook is handled during the state change success. Therefore, modifying the dependency array is unnecessary.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/src/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:45:03.435Z
Learning: In `packages/contact-center/station-login/src/station-login/station-login.presentational.tsx`, certain code sections are temporary or removable, and comments regarding these sections can be ignored in future reviews.
Learnt from: Riteshfyi
PR: webex/widgets#485
File: playwright/Utils/wrapupUtils.ts:22-22
Timestamp: 2025-07-05T20:59:40.600Z
Learning: In the @webex/widgets repository, test IDs for wrap-up reasons are constructed using lowercase in both the UI components (call-control.tsx) and utility functions (wrapupUtils.ts). The pattern `wrapup-reason-${reason.toLowerCase()}` is used consistently, so there are no case sensitivity issues with test ID matching.
widgets-samples/cc/samples-cc-react-app/src/App.tsx (3)
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/index.tsx:10-10
Timestamp: 2025-02-13T06:58:01.805Z
Learning: In the StationLogin component (packages/contact-center/station-login/src/station-login/index.tsx), `handleContinue` and `showMultipleLoginAlert` props have been intentionally removed from store destructuring as part of the Agent Multi-Login configurability changes.
Learnt from: mkesavan13
PR: webex/widgets#347
File: packages/contact-center/user-state/src/helper.ts:10-19
Timestamp: 2024-12-06T01:07:12.444Z
Learning: In `packages/contact-center/user-state/src/helper.ts`, within the `useUserState` hook, the timer reset in the `useEffect` hook is handled during the state change success. Therefore, modifying the dependency array is unnecessary.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/src/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:45:03.435Z
Learning: In `packages/contact-center/station-login/src/station-login/station-login.presentational.tsx`, certain code sections are temporary or removable, and comments regarding these sections can be ignored in future reviews.
packages/contact-center/cc-components/src/components/task/CallControl/CallControlCustom/call-control-consult.tsx (4)
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/index.tsx:10-10
Timestamp: 2025-02-13T06:58:01.805Z
Learning: In the StationLogin component (packages/contact-center/station-login/src/station-login/index.tsx), `handleContinue` and `showMultipleLoginAlert` props have been intentionally removed from store destructuring as part of the Agent Multi-Login configurability changes.
Learnt from: mkesavan13
PR: webex/widgets#347
File: packages/contact-center/user-state/src/helper.ts:10-19
Timestamp: 2024-12-06T01:07:12.444Z
Learning: In `packages/contact-center/user-state/src/helper.ts`, within the `useUserState` hook, the timer reset in the `useEffect` hook is handled during the state change success. Therefore, modifying the dependency array is unnecessary.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/src/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:45:03.435Z
Learning: In `packages/contact-center/station-login/src/station-login/station-login.presentational.tsx`, certain code sections are temporary or removable, and comments regarding these sections can be ignored in future reviews.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:44:14.152Z
Learning: The file `packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx` is going to change completely, so writing tests for these changes are being ignored.
packages/contact-center/store/src/storeEventsWrapper.ts (5)
Learnt from: pagour98
PR: webex/widgets#385
File: packages/contact-center/station-login/src/station-login/index.tsx:10-10
Timestamp: 2025-02-13T06:58:01.805Z
Learning: In the StationLogin component (packages/contact-center/station-login/src/station-login/index.tsx), `handleContinue` and `showMultipleLoginAlert` props have been intentionally removed from store destructuring as part of the Agent Multi-Login configurability changes.
Learnt from: mkesavan13
PR: webex/widgets#347
File: packages/contact-center/user-state/src/helper.ts:10-19
Timestamp: 2024-12-06T01:07:12.444Z
Learning: In `packages/contact-center/user-state/src/helper.ts`, within the `useUserState` hook, the timer reset in the `useEffect` hook is handled during the state change success. Therefore, modifying the dependency array is unnecessary.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/src/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:45:03.435Z
Learning: In `packages/contact-center/station-login/src/station-login/station-login.presentational.tsx`, certain code sections are temporary or removable, and comments regarding these sections can be ignored in future reviews.
Learnt from: Kesari3008
PR: webex/widgets#239
File: packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx:0-0
Timestamp: 2024-11-19T13:44:14.152Z
Learning: The file `packages/contact-center/station-login/tests/station-login/station-login.presentational.tsx` is going to change completely, so writing tests for these changes are being ignored.
Learnt from: Riteshfyi
PR: webex/widgets#485
File: playwright/Utils/incomingTaskUtils.ts:137-137
Timestamp: 2025-07-05T21:10:16.104Z
Learning: Social task automation is not yet implemented in the playwright/Utils/incomingTaskUtils.ts file. The code for TASK_TYPES.SOCIAL is placeholder code that will be updated when social task automation is added to the system.
🧬 Code Graph Analysis (3)
packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx (1)
packages/contact-center/store/src/storeEventsWrapper.ts (1)
isMuted(152-154)
packages/contact-center/task/src/helper.ts (1)
packages/contact-center/store/src/storeEventsWrapper.ts (3)
logger(48-50)isMuted(152-154)currentTask(74-76)
packages/contact-center/cc-components/src/components/task/CallControl/CallControlCustom/call-control-consult.tsx (1)
packages/contact-center/cc-components/src/components/task/constants.ts (2)
UNMUTE_CALL(17-17)MUTE_CALL(16-16)
🔇 Additional comments (31)
packages/contact-center/store/src/store.ts (1)
54-54: LGTM! Clean addition of mute state to store.The
isMutedproperty is properly added to the observable store with a sensible default value offalse(unmuted). This follows the existing patterns in the store class.widgets-samples/cc/samples-cc-react-app/src/App.tsx (2)
186-189: LGTM! Callback handler follows established patterns.The
onToggleMutecallback correctly logs the mute state and task information, which is appropriate for a sample app demonstrating the functionality.
745-745: LGTM! Consistent prop passing to call control components.The
onToggleMuteprop is correctly passed to bothCallControlandCallControlCADcomponents, ensuring consistent mute functionality across different call control implementations.Also applies to: 762-762
packages/contact-center/task/src/CallControlCAD/index.tsx (2)
15-15: LGTM! Proper integration of mute functionality.The
onToggleMuteprop andisMutedstate are correctly added to the component, following the same pattern as other callback props and store state properties.Also applies to: 32-32
41-41: LGTM! Consistent prop passing to useCallControl hook.The mute-related props are properly passed to the
useCallControlhook, maintaining consistency with how other similar props are handled in this component.Also applies to: 46-46
packages/contact-center/cc-components/src/components/task/constants.ts (1)
16-17: LGTM! Clean addition of mute-related constants.The
MUTE_CALLandUNMUTE_CALLconstants follow the established naming convention and provide clear, user-friendly text for the mute functionality.packages/contact-center/task/src/CallControl/index.tsx (2)
10-10: LGTM! Consistent mute functionality integration.The
onToggleMuteprop andisMutedstate are correctly added to the component, maintaining consistency with the CallControlCAD component and following established patterns.Also applies to: 24-24
34-34: LGTM! Proper hook parameter integration.The mute-related props are correctly passed to the
useCallControlhook, ensuring the mute functionality is properly integrated into the call control logic.Also applies to: 39-39
packages/contact-center/task/src/task.types.ts (2)
11-20: LGTM! Type definitions correctly extended for mute functionality.The addition of
onToggleMutetoCallControlPropsand bothonToggleMuteandisMutedtouseCallControlPropsproperly supports the new mute/unmute feature. The multiline formatting also improves readability.
22-35: LGTM! Hook props type correctly includes mute state and callback.The
useCallControlPropstype properly includes both theisMutedboolean state andonToggleMutecallback, enabling the hook to manage mute functionality.packages/contact-center/store/src/store.types.ts (3)
72-72: LGTM! Store interface correctly extended with mute state.The
isMutedboolean property appropriately represents the global mute state in the store.
97-97: LGTM! Store wrapper interface correctly includes mute state setter.The
setIsMuted(value: boolean): voidmethod provides proper controlled access to update the mute state within the MobX store wrapper.
130-130: LGTM! New task event constant for consult offer.The
TASK_OFFER_CONSULTevent constant provides a proper event identifier for consult offer handling.packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx (2)
44-46: LGTM! Props correctly extended for mute functionality.The
isMutedboolean andtoggleMutecallback props are properly destructured and will enable mute control in the CAD component.
212-215: LGTM! Mute props properly passed to consult component.The mute-related props are correctly passed to
CallControlConsultComponentwith appropriate mapping:
muteUnmutefromcontrolVisibility.muteUnmutefor visibility controlisMutedfor current mute stateonToggleConsultMutemapped fromtoggleMutecallbackpackages/contact-center/cc-components/src/components/task/CallControl/call-control.styles.scss (1)
140-169: LGTM! Mute button styles properly implemented.The new CSS classes for the muted button state are well-structured and follow the existing design patterns:
- Consistent sizing and layout with other call control buttons
- Appropriate use of design tokens for colors and spacing
- Error-themed icon color for muted state visibility
- Proper disabled state handling with opacity and cursor changes
The styles correctly support the mute/unmute functionality with clear visual feedback.
packages/contact-center/cc-components/src/components/task/CallControl/CallControlCustom/call-control-consult.tsx (5)
1-1: LGTM! useState import correctly added for mute state management.The
useStateimport is properly added to support the localisMuteDisabledstate needed for the mute button functionality.
4-4: LGTM! Constants properly imported for mute button tooltips.The
MUTE_CALLandUNMUTE_CALLconstants from the relevant code snippets (packages/contact-center/cc-components/src/components/task/constants.tslines 16-17) are correctly imported for use in button tooltips.
17-20: LGTM! Props correctly extended for mute functionality.The new props
muteUnmute,isMuted, andonToggleConsultMuteare properly destructured and provide the necessary interface for mute control in the consult component.
21-21: LGTM! Local state for mute button disable logic.The
isMuteDisabledstate usinguseStateprovides proper UI feedback by temporarily disabling the mute button during toggle operations.
79-87: LGTM! Mute button configuration properly implemented.The mute button configuration is well-structured with:
- Dynamic icon based on mute state (
microphone-muted-boldvsmicrophone-bold)- Dynamic tooltip using the imported constants
- Proper CSS class based on mute state
- Correct disabled state binding
- Proper visibility control via
muteUnmuteproppackages/contact-center/store/src/storeEventsWrapper.ts (2)
152-160: LGTM! Proper implementation of mute state management.The getter and setter follow the established pattern in this file and correctly use MobX's
runInActionfor state updates.
369-369: Good catch! Fixing incorrect event constant usage.The change from
CC_EVENTS.AGENT_OFFER_CONSULTtoTASK_EVENTS.TASK_OFFER_CONSULTcorrectly aligns the event handling with the appropriate event enumeration for task-related consult offers.Also applies to: 520-520, 579-579
packages/contact-center/task/src/helper.ts (1)
619-620: Correctly exposes mute functionality from the hook.The
toggleMutefunction andisMutedstate are properly added to the hook's return value.packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx (1)
178-186: Well-configured mute button with dynamic states.The button properly handles:
- Dynamic icon switching between muted/unmuted states
- Appropriate tooltip text changes
- Visual feedback through CSS classes
- Visibility control based on feature availability
packages/contact-center/task/tests/helper.ts (1)
1-7: Excellent test coverage for the mute functionality!The test suite comprehensively covers:
- ✅ State transitions (muted ↔ unmuted)
- ✅ Error handling with state consistency
- ✅ Callback behavior (with and without)
- ✅ Edge cases (rapid calls, undefined visibility)
- ✅ Proper mock setup and assertions
Great attention to detail in testing both success and failure paths.
Also applies to: 1902-2136
packages/contact-center/cc-components/src/components/task/task.types.ts (5)
152-158: LGTM! Well-structured callback interface following established patterns.The
onToggleMutecallback follows the same pattern as existing callbacks likeonHoldResumeandonRecordingToggle, with proper JSDoc documentation, consistent parameter structure, and appropriate return type.
202-205: LGTM! Consistent method signature with other toggle methods.The
toggleMutemethod follows the same pattern astoggleHoldandtoggleRecording, maintaining consistency in the interface design.
246-249: LGTM! Boolean flag follows established naming convention.The
isMutedflag is consistent with existing boolean state properties likeisHeldandisRecording, maintaining a clear and predictable naming pattern.
420-421: LGTM! Proper extension of component props with mute functionality.The addition of
toggleMuteandisMutedto theCallControlComponentPropstype correctly extends the interface to support mute functionality in call control components.
519-521: LGTM! Comprehensive mute support for consult call components.The additions to
CallControlConsultComponentsPropsproperly include:
muteUnmute: visibility control for the mute buttonisMuted: current mute stateonToggleConsultMute: callback for mute toggling in consult scenariosThis provides complete mute functionality for consult call flows.
| @@ -1,9 +1,20 @@ | |||
| jest.mock('../src/Utils/task-util', () => { | |||
There was a problem hiding this comment.
We can remove all comments that are not required.
There was a problem hiding this comment.
Removed all unnecessary comments
# [1.28.0-ccwidgets.92](v1.28.0-ccwidgets.91...v1.28.0-ccwidgets.92) (2025-07-15) ### Bug Fixes * **call-control:** implement-mute-unmute-actions ([#492](#492)) ([ba70164](ba70164))
|
🎉 This PR is included in version 1.28.0-ccwidgets.92 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
4 participants
COMPLETES #https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6761
Vidcast link: https://app.vidcast.io/share/614a17e8-69dd-407f-affd-e101361083a3
This pull request addresses
Implemented Mute Button for WebRTC Calls (Desktop Mode Only)
by making the following changes
< DESCRIBE YOUR CHANGES >
Change Type
The following scenarios were tested
During testing, we encountered a known audio-related issue in the consult flow. Two-way audio is not functioning correctly — the agent initiating the consult can hear audio without issues, but the receiving agent does not get any audio. Apart from this, all other flows are working as expected.
The GAI Coding Policy And Copyright Annotation Best Practices
Checklist before merging