Repository: webex/widgets
Pull request #452: fix(task-list): resolved-ui-gaps-in-task-list-component
Author: login: akulakum
Labels: name: released on @ccwidgets
name: validated
description: Indicates that the PR is ready for actions
Created: 2025-05-12T09:00:46Z | Merged: 2025-05-19T12:29:18Z

<!--
Hey there,\
Thank you for taking the time to improve our code! 🙂\
Please let us know why this change is necessary and what testing you have performed. \
This ensures our reviewers understand the impact of your change. \

**IMPORTANT**
FAILING TO FILL OUT THIS TEMPLATE WILL RESULT IN REJECTION OF YOUR PULL REQUEST
This is for compliance purposes with FedRAMP program.
-->

# COMPLETES # https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6290

## This pull request addresses

- Media-type-based icon and label updates for the Task List component.

- Updated Incoming Task UI to dynamically reflect media type (Voice, Chat, Email).

- Media-type-based icon and label updates for the Call Control CAD section.


## by making the following changes

Replaced hardcoded icon and label logic with dynamic updates based on media type across components.

<!-- You may include screenshots -->
Vidcat Link: https://app.vidcast.io/share/c3867c4b-0184-45c3-ac9a-bc9337b61a73

<img width="734" alt="Screenshot 2025-05-15 at 6 40 23 PM" src="https://github.com/user-attachments/assets/4d34a8c8-44de-49c4-8fbb-56e86a79240e" />

<img width="734" alt="Screenshot 2025-05-15 at 6 40 34 PM" src="https://github.com/user-attachments/assets/5cfb4c0c-b345-40be-b1e2-2dacff388ce7" />

<img width="609" alt="Screenshot 2025-05-09 at 9 12 01 PM" src="https://github.com/user-attachments/assets/7c982d7f-0d93-40e5-aba3-0b763a74b70c" />
<img width="609" alt="Screenshot 2025-05-09 at 9 11 57 PM" src="https://github.com/user-attachments/assets/ca3d36c4-09fb-410a-96f9-02817b9ed3a0" />
<img width="609" alt="Screenshot 2025-05-09 at 9 11 50 PM" src="https://github.com/user-attachments/assets/b987f228-1927-427e-84fe-7fa6220d6c65" />


### Change Type

<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)
- [ ] Documentation update
- [ ] Tooling change
- [ ] Internal code refactor

## The following scenarios were tested

- [ ] The testing is done with the amplify link
< ENUMERATE TESTS PERFORMED, WHETHER MANUAL OR AUTOMATED >

## The GAI Coding Policy And Copyright Annotation Best Practices ##
 
<!-- **MANDATORY** If Yes, Mention the GAI Coding Policy Copyright Annotation Best Practices followed separated by a comma below the yes checkbox -->
 
- [ ] GAI was not used (or, no additional notation is required)
- [ ] Code was generated entirely by GAI
- [ ] GAI was used to create a draft that was subsequently customized or modified
- [ ] Coder created a draft manually that was non-substantively modified by GAI (e.g., refactoring was performed by GAI on manually written code)
- [ ] Tool used for AI assistance (GitHub Copilot / Other - specify)
  - [ ] Github Copilot
  - [ ] Other - Please Specify
- [ ] This PR is related to
  - [ ] Feature
  - [ ] Defect fix
  - [ ] Tech Debt
  - [ ] Automation

### Checklist before merging

- [ ] I have not skipped any automated checks
- [ ] All existing and new tests passed
- [ ] I have updated the testing document

---


Diff:
diff --git a/packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx b/packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx
index 263ce1dc0..aac52e24a 100644
--- a/packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx
+++ b/packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx
@@ -6,6 +6,8 @@ import {PopoverNext, SelectNext, TooltipNext, Text, ButtonCircle, ButtonPill} fr
 import {Item} from '@react-stately/collections';
 import {Icon} from '@momentum-design/components/dist/react';
 import ConsultTransferPopoverComponent from './CallControlCustom/consult-transfer-popover';
+import type {MEDIA_CHANNEL as MediaChannelType} from '../task.types';
+import {getMediaTypeInfo} from '../../../utils';
 
 function CallControlComponent(props: CallControlComponentProps) {
   const [selectedWrapupReason, setSelectedWrapupReason] = useState<string | null>(null);
@@ -103,6 +105,11 @@ function CallControlComponent(props: CallControlComponentProps) {
     }
   };
 
+  const currentMediaType = getMediaTypeInfo(
+    currentTask.data.interaction.mediaType as MediaChannelType,
+    currentTask.data.interaction.mediaChannel as MediaChannelType
+  );
+
   const buttons = [
     {
       id: 'hold',
@@ -125,7 +132,7 @@ function CallControlComponent(props: CallControlComponentProps) {
     {
       id: 'transfer',
       icon: 'next-bold',
-      tooltip: 'Transfer call',
+      tooltip: `Transfer ${currentMediaType.labelName}`,
       className: 'call-control-button',
       disabled: false,
       menuType: 'Transfer',
@@ -144,7 +151,7 @@ function CallControlComponent(props: CallControlComponentProps) {
       id: 'end',
       icon: 'cancel-regular',
       onClick: endCall,
-      tooltip: 'End call',
+      tooltip: `End ${currentMediaType.labelName}`,
       className: 'call-control-button-cancel',
       disabled: isHeld,
       isVisible: controlVisibility.end,
diff --git a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss
index f90a163b7..966cad3f5 100644
--- a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss
+++ b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss
@@ -92,17 +92,28 @@
 }
 
 .call-icon-background {
-  width: 2.2rem;
-  height: 2.2rem;
+  width: 2rem;
+  height: 2rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--mds-color-theme-background-secondary-normal);
+  background-color: var(--mds-color-theme-avatar-glass-normal);
   border-radius: 50%;
-  margin-top: -0.25rem;
   flex-shrink: 0;
 
-  .call-icon {
-    color: var(--mds-color-theme-common-touchbar-background-green-normal);
+  .media-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .media-icon.telephony {
+    color: var(--mds-color-theme-indicator-stable);
+  }
+
+  .media-icon.email {
+    color: var(--mds-color-theme-common-touchbar-background-violet-normal);
+  }
+
+  .media-icon.chat {
+    color: var(--mds-color-theme-indicator-secure);
   }
 }
\ No newline at end of file
diff --git a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx
index 69c021630..33fa2d448 100644
--- a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx
+++ b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx
@@ -2,10 +2,12 @@ import React from 'react';
 import CallControlComponent from '../CallControl/call-control';
 import {CallControlComponentProps} from '../task.types';
 import {Text} from '@momentum-ui/react-collaboration';
-import {Icon} from '@momentum-design/components/dist/react';
+import {Brandvisual, Icon} from '@momentum-design/components/dist/react';
 import './call-control-cad.styles.scss';
 import TaskTimer from '../TaskTimer/index';
 import CallControlConsultComponent from '../CallControl/CallControlCustom/call-control-consult';
+import type {MEDIA_CHANNEL as MediaChannelType} from '../task.types';
+import {getMediaTypeInfo} from '../../../utils';
 
 const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) => {
   const {
@@ -37,6 +39,11 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
     return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
   };
 
+  const currentMediaType = getMediaTypeInfo(
+    currentTask.data.interaction.mediaType as MediaChannelType,
+    currentTask.data.interaction.mediaChannel as MediaChannelType
+  );
+
   if (!currentTask) return null;
 
   return (
@@ -45,7 +52,11 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
         {/* Caller Information */}
         <div className="caller-info">
           <div className="call-icon-background">
-            <Icon name="handset-filled" size={1} className="call-icon" />
+            {currentMediaType.isBrandVisual ? (
+              <Brandvisual name={currentMediaType.iconName} className={`media-icon ${currentMediaType.className}`} />
+            ) : (
+              <Icon name={currentMediaType.iconName} size={1} className={`media-icon ${currentMediaType.className}`} />
+            )}
           </div>
 
           <div className="customer-info">
@@ -54,7 +65,7 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
             </Text>
             <div className="call-details">
               <Text className="call-timer" type="body-secondary" tagName={'small'}>
-                Call - <TaskTimer startTimeStamp={startTimestamp} />
+                {currentMediaType.labelName} - <TaskTimer startTimeStamp={startTimestamp} />
               </Text>
               <div className="call-status">
                 {!controlVisibility.wrapup && isHeld && (
diff --git a/packages/contact-center/cc-components/src/components/task/IncomingTask/incoming-task.tsx b/packages/contact-center/cc-components/src/components/task/IncomingTask/incoming-task.tsx
index 106bb3519..fe0b7eafd 100644
--- a/packages/contact-center/cc-components/src/components/task/IncomingTask/incoming-task.tsx
+++ b/packages/contact-center/cc-components/src/components/task/IncomingTask/incoming-task.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {IncomingTaskComponentProps} from '../task.types';
+import {IncomingTaskComponentProps, MEDIA_CHANNEL} from '../task.types';
 import Task from '../Task';
 
 const IncomingTaskComponent: React.FunctionComponent<IncomingTaskComponentProps> = (props) => {
@@ -13,8 +13,14 @@ const IncomingTaskComponent: React.FunctionComponent<IncomingTaskComponentProps>
   const virtualTeamName = callAssociationDetails?.virtualTeamName;
   const ronaTimeout = callAssociationDetails?.ronaTimeout ? Number(callAssociationDetails?.ronaTimeout) : null;
   const startTimeStamp = incomingTask?.data?.interaction?.createdTimestamp;
-  const isTelephony = incomingTask.data.interaction.mediaType === 'telephony';
-  const acceptText = !incomingTask.data.wrapUpRequired ? (isTelephony && !isBrowser ? 'Ringing' : 'Accept') : undefined;
+  const mediaType = incomingTask.data.interaction.mediaType;
+  const mediaChannel = incomingTask.data.interaction.mediaChannel;
+  const isTelephony = mediaType === MEDIA_CHANNEL.TELEPHONY;
+  const acceptText = !incomingTask.data.wrapUpRequired
+    ? isTelephony && !isBrowser
+      ? 'Ringing...'
+      : 'Accept'
+    : undefined;
   const declineText = !incomingTask.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;
 
   return (
@@ -32,6 +38,8 @@ const IncomingTaskComponent: React.FunctionComponent<IncomingTaskComponentProps>
       disableAccept={isTelephony && !isBrowser}
       declineText={declineText}
       styles="task-list-hover"
+      mediaType={mediaType}
+      mediaChannel={mediaChannel}
     />
   );
 };
diff --git a/packages/contact-center/cc-components/src/components/task/Task/index.tsx b/packages/contact-center/cc-components/src/components/task/Task/index.tsx
index b6b3ee360..f958e0c2f 100644
--- a/packages/contact-center/cc-components/src/components/task/Task/index.tsx
+++ b/packages/contact-center/cc-components/src/components/task/Task/index.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import {ButtonPill, ListItemBase, ListItemBaseSection, Text} from '@momentum-ui/react-collaboration';
-import {Avatar} from '@momentum-design/components/dist/react';
+import {Avatar, Brandvisual} from '@momentum-design/components/dist/react';
 import {PressEvent} from '@react-types/shared';
 import TaskTimer from '../TaskTimer';
+import {getMediaTypeInfo} from '../../../utils';
+import type {MEDIA_CHANNEL as MediaChannelType} from '../task.types';
 import './styles.scss';
 
 interface TaskProps {
@@ -21,6 +23,8 @@ interface TaskProps {
   declineText?: string;
   disableAccept?: boolean;
   styles?: string;
+  mediaType?: MediaChannelType;
+  mediaChannel?: MediaChannelType;
 }
 
 const Task: React.FC<TaskProps> = ({
@@ -39,11 +43,13 @@ const Task: React.FC<TaskProps> = ({
   acceptText,
   disableAccept = false,
   declineText,
+  mediaType,
+  mediaChannel,
 }) => {
   const capitalizeFirstWord = (str: string) => {
     return str.replace(/^\s*(\w)/, (match, firstLetter) => firstLetter.toUpperCase());
   };
-
+  const currentMediaType = getMediaTypeInfo(mediaType, mediaChannel);
   return (
     <ListItemBase
       className={`task-list-item ${selected ? 'task-list-item--selected' : ''} ${styles}`}
@@ -51,7 +57,13 @@ const Task: React.FC<TaskProps> = ({
       id={interactionId}
     >
       <ListItemBaseSection position="start">
-        <Avatar icon-name="handset-filled" />
+        {currentMediaType.isBrandVisual ? (
+          <div className="brand-visual-background">
+            <Brandvisual name={currentMediaType.iconName} className={currentMediaType.className} />
+          </div>
+        ) : (
+          <Avatar icon-name={currentMediaType.iconName} className={currentMediaType.className} />
+        )}
       </ListItemBaseSection>
 
       <ListItemBaseSection position="fill">
diff --git a/packages/contact-center/cc-components/src/components/task/Task/styles.scss b/packages/contact-center/cc-components/src/components/task/Task/styles.scss
index 1498169ff..30fa6dde4 100644
--- a/packages/contact-center/cc-components/src/components/task/Task/styles.scss
+++ b/packages/contact-center/cc-components/src/components/task/Task/styles.scss
@@ -18,8 +18,37 @@
 
   mdc-avatar {
     --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-normal);
-    --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-stable);
+
+    &.telephony {
+      --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-stable);
+    }
+    
+    &.email {
+      --mdc-avatar-default-foreground-color: var(--mds-color-theme-common-touchbar-background-violet-normal);
+    }
+    
+    &.chat {
+      --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-secure);
+    }
   }
+
+  .brand-visual-background {
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--mds-color-theme-avatar-glass-normal);
+    border-radius: 50%;
+    flex-shrink: 0;
+
+    mdc-brandvisual {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+  }
+
 }
 
 .task-text {
@@ -30,7 +59,10 @@
   background: var(--mds-color-theme-background-primary-active);
 
   mdc-avatar {
-    --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-active, rgba(255, 255, 255, 0.8));
+    --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-active, #FFFFFFCC);
+  }
+  .brand-visual-background { 
+    background-color: var(--mds-color-theme-avatar-glass-active, #FFFFFFCC);
   }
 }
 
diff --git a/packages/contact-center/cc-components/src/components/task/TaskList/task-list.tsx b/packages/contact-center/cc-components/src/components/task/TaskList/task-list.tsx
index ad2c0adee..384040ece 100644
--- a/packages/contact-center/cc-components/src/components/task/TaskList/task-list.tsx
+++ b/packages/contact-center/cc-components/src/components/task/TaskList/task-list.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {TaskListComponentProps} from '../task.types';
+import {TaskListComponentProps, MEDIA_CHANNEL} from '../task.types';
 import Task from '../Task';
 import './styles.scss';
 
@@ -19,9 +19,15 @@ const TaskListComponent: React.FunctionComponent<TaskListComponentProps> = (prop
         const taskState = task.data.interaction.state;
         const startTimeStamp = task.data.interaction.createdTimestamp;
         const isIncomingTask = taskState === 'new' || taskState === 'consult';
-        const isTelephony = task.data.interaction.mediaType === 'telephony';
+        const mediaType = task.data.interaction.mediaType;
+        const mediaChannel = task.data.interaction.mediaChannel;
+        const isTelephony = mediaType === MEDIA_CHANNEL.TELEPHONY;
         const acceptText =
-          isIncomingTask && !task.data.wrapUpRequired ? (isTelephony && !isBrowser ? 'Ringing' : 'Accept') : undefined;
+          isIncomingTask && !task.data.wrapUpRequired
+            ? isTelephony && !isBrowser
+              ? 'Ringing...'
+              : 'Accept'
+            : undefined;
         const declineText =
           isIncomingTask && !task.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;
         return (
@@ -48,6 +54,8 @@ const TaskListComponent: React.FunctionComponent<TaskListComponentProps> = (prop
             acceptText={acceptText}
             disableAccept={isIncomingTask && isTelephony && !isBrowser}
             declineText={declineText}
+            mediaType={mediaType}
+            mediaChannel={mediaChannel}
           />
         );
       })}
diff --git a/packages/contact-center/cc-components/src/components/task/task.types.ts b/packages/contact-center/cc-components/src/components/task/task.types.ts
index a5d4af603..4067f80d2 100644
--- a/packages/contact-center/cc-components/src/components/task/task.types.ts
+++ b/packages/contact-center/cc-components/src/components/task/task.types.ts
@@ -8,6 +8,8 @@ import {
   ContactServiceQueue,
 } from '@webex/cc-store';
 
+type Enum<T extends Record<string, unknown>> = T[keyof T];
+
 /**
  * Interface representing the TaskProps of a user.
  */
@@ -460,3 +462,23 @@ export interface CallControlConsultComponentsProps {
 export type CallControlMenuType = 'Consult' | 'Transfer';
 
 export {DestinationType};
+
+export const MEDIA_CHANNEL = {
+  EMAIL: 'email',
+  CHAT: 'chat',
+  TELEPHONY: 'telephony',
+  SOCIAL: 'social',
+  SMS: 'sms',
+  FACEBOOK: 'facebook',
+  WHATSAPP: 'whatsapp',
+  APPLE: 'applemessages',
+} as const;
+
+export type MEDIA_CHANNEL = Enum<typeof MEDIA_CHANNEL>;
+
+export type MediaInfo = {
+  iconName: string;
+  className: string;
+  labelName: string;
+  isBrandVisual: boolean;
+};
diff --git a/packages/contact-center/cc-components/src/utils/index.ts b/packages/contact-center/cc-components/src/utils/index.ts
index dedc08d95..f430ec5cb 100644
--- a/packages/contact-center/cc-components/src/utils/index.ts
+++ b/packages/contact-center/cc-components/src/utils/index.ts
@@ -1,3 +1,6 @@
+import {MediaInfo, MEDIA_CHANNEL} from '../components/task/task.types';
+import type {MEDIA_CHANNEL as MediaChannelType} from '../components/task/task.types';
+
 export const formatTime = (time: number): string => {
   const hours = Math.floor(time / 3600);
   const minutes = Math.floor((time % 3600) / 60);
@@ -12,3 +15,82 @@ export const formatTime = (time: number): string => {
   // Less than 1 hour: display mm:ss with two-digit padding for minutes
   return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 };
+
+/**
+ * Returns media information (icon, class, label, and brand visual flag)
+ * based on the provided mediaType and mediaChannel.
+ *
+ * - If the mediaType is SOCIAL, it checks mediaChannel-specific mappings
+ *   like Facebook, WhatsApp, and Apple Chat.
+ * - For other mediaTypes (e.g., TELEPHONY, EMAIL, CHAT), it uses a direct map.
+ * - If no match is found, a default media info is returned for TELEPHONY or SOCIAL.
+ *
+ * This utility consolidates icon metadata and display label logic for consistent rendering.
+ *
+ * @param mediaType - The primary media type (e.g., TELEPHONY, EMAIL, SOCIAL)
+ * @param mediaChannel - The secondary channel for SOCIAL types (e.g., FACEBOOK, WHATSAPP)
+ * @returns MediaInfo object with iconName, className, labelName, and isBrandVisual flag
+ */
+export const getMediaTypeInfo = (mediaType: MediaChannelType, mediaChannel: MediaChannelType): MediaInfo => {
+  const socialMap: Partial<Record<MediaChannelType, MediaInfo>> = {
+    [MEDIA_CHANNEL.FACEBOOK]: {
+      iconName: 'social-facebook-color',
+      className: MEDIA_CHANNEL.FACEBOOK,
+      labelName: 'FB messenger',
+      isBrandVisual: true,
+    },
+    [MEDIA_CHANNEL.WHATSAPP]: {
+      iconName: 'social-whatsapp-color',
+      className: MEDIA_CHANNEL.WHATSAPP,
+      labelName: 'Whatsapp',
+      isBrandVisual: true,
+    },
+    [MEDIA_CHANNEL.APPLE]: {
+      iconName: 'apple-business-chat-color',
+      className: MEDIA_CHANNEL.APPLE,
+      labelName: 'Apple Chat',
+      isBrandVisual: true,
+    },
+  };
+
+  const typeMap: Partial<Record<MediaChannelType, MediaInfo>> = {
+    [MEDIA_CHANNEL.TELEPHONY]: {
+      iconName: 'handset-filled',
+      className: MEDIA_CHANNEL.TELEPHONY,
+      labelName: 'Call',
+      isBrandVisual: false,
+    },
+    [MEDIA_CHANNEL.EMAIL]: {
+      iconName: 'email-filled',
+      className: MEDIA_CHANNEL.EMAIL,
+      labelName: 'Email',
+      isBrandVisual: false,
+    },
+    [MEDIA_CHANNEL.CHAT]: {
+      iconName: 'chat-filled',
+      className: MEDIA_CHANNEL.CHAT,
+      labelName: 'Chat',
+      isBrandVisual: false,
+    },
+  };
+
+  if (mediaType === MEDIA_CHANNEL.SOCIAL) {
+    return (
+      socialMap[mediaChannel] ?? {
+        iconName: 'chat-filled',
+        className: MEDIA_CHANNEL.SOCIAL,
+        labelName: 'Chat',
+        isBrandVisual: false,
+      }
+    );
+  }
+
+  return (
+    typeMap[mediaType] ?? {
+      iconName: 'handset-filled',
+      className: MEDIA_CHANNEL.TELEPHONY,
+      labelName: 'Call',
+      isBrandVisual: false,
+    }
+  );
+};
diff --git a/packages/contact-center/store/src/storeEventsWrapper.ts b/packages/contact-center/store/src/storeEventsWrapper.ts
index 63aca054d..2111b5702 100644
--- a/packages/contact-center/store/src/storeEventsWrapper.ts
+++ b/packages/contact-center/store/src/storeEventsWrapper.ts
@@ -603,10 +603,12 @@ class StoreWrapper implements IStoreWrapper {
     this.handleTaskRemove(task.data.interactionId);
   };
 
-  getBuddyAgents = async (): Promise<Array<BuddyDetails>> => {
+  getBuddyAgents = async (
+    mediaType: string = this.currentTask.data.interaction.mediaType
+  ): Promise<Array<BuddyDetails>> => {
     try {
       const response = await this.store.cc.getBuddyAgents({
-        mediaType: 'telephony',
+        mediaType: mediaType ?? 'telephony',
         state: 'Available',
       });
       return response.data.agentList;
@@ -615,10 +617,13 @@ class StoreWrapper implements IStoreWrapper {
     }
   };
 
-  getQueues = async (): Promise<Array<ContactServiceQueue>> => {
+  getQueues = async (
+    mediaType: string = this.currentTask.data.interaction.mediaType ?? 'TELEPHONY'
+  ): Promise<Array<ContactServiceQueue>> => {
     try {
+      const upperMediaType = mediaType.toUpperCase();
       let queueList = await this.store.cc.getQueues();
-      queueList = queueList.filter((queue) => queue.channelType === 'TELEPHONY');
+      queueList = queueList.filter((queue) => queue.channelType === upperMediaType);
       return queueList;
     } catch (error) {
       console.error('Error fetching queues:', error);
diff --git a/packages/contact-center/store/tests/storeEventsWrapper.ts b/packages/contact-center/store/tests/storeEventsWrapper.ts
index f24e573be..32e0e4f0e 100644
--- a/packages/contact-center/store/tests/storeEventsWrapper.ts
+++ b/packages/contact-center/store/tests/storeEventsWrapper.ts
@@ -692,13 +692,13 @@ describe('storeEventsWrapper', () => {
     it('should return buddy agents list', async () => {
       const buddyAgents = [{name: 'agent1'}, {name: 'agent2'}];
       storeWrapper['store'].cc.getBuddyAgents = jest.fn().mockResolvedValue({data: {agentList: buddyAgents}});
-      const result = await storeWrapper.getBuddyAgents();
+      const result = await storeWrapper.getBuddyAgents('telephony');
       expect(result).toEqual(buddyAgents);
     });
 
     it('should handle error in getBuddyAgents and throw error', async () => {
       storeWrapper['store'].cc.getBuddyAgents = jest.fn().mockRejectedValue(new Error('error'));
-      await expect(storeWrapper.getBuddyAgents()).rejects.toThrow('error');
+      await expect(storeWrapper.getBuddyAgents('telephony')).rejects.toThrow('error');
     });
 
     it('should return contact service queues list', async () => {
@@ -709,7 +709,7 @@ describe('storeEventsWrapper', () => {
       ];
       storeWrapper['store'].cc.getQueues = jest.fn().mockResolvedValue(queueList);
 
-      const result = await storeWrapper.getQueues();
+      const result = await storeWrapper.getQueues('telephony');
 
       expect(result).toEqual([
         {id: 'queue1', name: 'Queue 1', channelType: 'TELEPHONY'},
@@ -721,7 +721,7 @@ describe('storeEventsWrapper', () => {
     it('should handle error in getQueues and throw error', async () => {
       storeWrapper['store'].cc.getQueues = jest.fn().mockRejectedValue(new Error('queue error'));
 
-      await expect(storeWrapper.getQueues()).rejects.toThrow('queue error');
+      await expect(storeWrapper.getQueues('telephony')).rejects.toThrow('queue error');
     });
 
     it('should handle consultQueueCancelled event', () => {


Reviews:
user: login: cmullenx
body: This doesnt address FB messenger, apple messenger and whatsapp

Is it not possible to get subject of the email, or show the last message as shown in the Figma? Also, you can replace list item components from MRV2 (and any other components that are now available) with the list item in the new momentum 
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-12T11:18:36Z
user: login: adhmenon
body: Changes LGTM.
Let's also update on the status of using the new momentum components. If we're not able to get them working or have build issues,  let's highlight that.
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-15T15:30:43Z
user: login: Kesari3008
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-15T15:45:43Z
user: login: akulakum
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T01:39:09Z
user: login: akulakum
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T01:42:05Z
user: login: akulakum
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T01:42:53Z
user: login: akulakum
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T01:46:44Z
user: login: akulakum
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T01:47:19Z
user: login: akulakum
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T01:47:59Z
user: login: Shreyas281299
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-19T04:36:12Z
user: login: akulakum
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-19T05:15:19Z
user: login: akulakum
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-19T05:46:14Z
user: login: Kesari3008
body: What about UT? Do we not need to write UT for all of these changes
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-19T12:12:26Z

Review comments:
diff_hunk: @@ -103,6 +104,10 @@ function CallControlComponent(props: CallControlComponentProps) {
     }
   };
 
+  const mediaType = currentTask.data.interaction.mediaType || MediaType.TELEPHONY;
path: packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx
user: login: Kesari3008
body: Why do we need the or for setting mediaType default to Telephony. Just currentTask.data.interaction.mediaType value should be enough. Can there be a case where mediaType is not present in interaction object?
created_at: 2025-05-15T15:18:25Z
author_association: CONTRIBUTOR
diff_hunk: @@ -103,6 +104,10 @@ function CallControlComponent(props: CallControlComponentProps) {
     }
   };
 
+  const mediaType = currentTask.data.interaction.mediaType || MediaType.TELEPHONY;
+  const mediaChannel = currentTask.data.interaction.mediaChannel || '';
path: packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx
user: login: Kesari3008
body: Same question here if mediaChannel won't be present, the constant will just be undefined, why do we need empty string
created_at: 2025-05-15T15:18:58Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,7 +50,11 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
         {/* Caller Information */}
         <div className="caller-info">
           <div className="call-icon-background">
-            <Icon name="handset-filled" size={1} className="call-icon" />
+            {mediaIconInfo.isBrandVisual ? (
path: packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx
user: login: adhmenon
body: Question - I see we are only using brand visual for only some media types.. it's okay by me but just want to know if that's the correct way to use it?
created_at: 2025-05-15T15:29:57Z
author_association: CONTRIBUTOR
diff_hunk: @@ -32,6 +61,9 @@
   mdc-avatar {
     --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-active, rgba(255, 255, 255, 0.8));
   }
+  .brand-visual-background { 
+    background-color: var(--mds-color-theme-avatar-glass-active, rgba(255, 255, 255, 0.8));
path: packages/contact-center/cc-components/src/components/task/Task/styles.scss
user: login: Kesari3008
body: Can using rgba not be avoided here ?
created_at: 2025-05-15T15:32:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -617,8 +619,9 @@ class StoreWrapper implements IStoreWrapper {
 
   getQueues = async (): Promise<Array<ContactServiceQueue>> => {
     try {
+      const mediaType: string = this.currentTask?.data?.interaction?.mediaType?.toUpperCase() || 'TELEPHONY';
path: packages/contact-center/store/src/storeEventsWrapper.ts
user: login: Kesari3008
body: Why is every value here optional but that's not the case in getBuddyAgents
created_at: 2025-05-15T15:37:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -460,3 +460,20 @@ export interface CallControlConsultComponentsProps {
 export type CallControlMenuType = 'Consult' | 'Transfer';
 
 export {DestinationType};
+
+export enum MediaType {
path: packages/contact-center/cc-components/src/components/task/task.types.ts
user: login: Kesari3008
body: There is new approach of creating enum, are we not using that in widgets ? Something to check
created_at: 2025-05-15T15:38:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -12,3 +14,104 @@ export const formatTime = (time: number): string => {
   // Less than 1 hour: display mm:ss with two-digit padding for minutes
   return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 };
+
+/**
+ * Returns the icon name and corresponding CSS class for the specified media type and optional media channel.
+ * Supports standard media types such as Telephony, Email, and Chat, and provides specific icons for Social media sub-channels
+ * including SMS, Facebook Messenger, WhatsApp, and Apple Messages.
+ *
+ * @param mediaType - The media type as a string (e.g., 'telephony', 'email', 'chat', 'social').
+ * @param mediaChannel - (Optional) The specific channel for Social media types (e.g., 'sms', 'facebook', 'whatsapp', 'apple').
+ * @returns An object containing the `iconName` and `className` corresponding to the media type and channel.
+ */
+export const getMediaIconInfo = (mediaType: string, mediaChannel?: string): MediaInfo => {
path: packages/contact-center/cc-components/src/utils/index.ts
user: login: Kesari3008
body: Instead of writing 2 different method with similar swithccase why can;t we combine them andn single method can return an object with the final media label and medaIconinfo object
created_at: 2025-05-15T15:42:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -12,3 +14,104 @@ export const formatTime = (time: number): string => {
   // Less than 1 hour: display mm:ss with two-digit padding for minutes
   return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 };
+
+/**
+ * Returns the icon name and corresponding CSS class for the specified media type and optional media channel.
+ * Supports standard media types such as Telephony, Email, and Chat, and provides specific icons for Social media sub-channels
+ * including SMS, Facebook Messenger, WhatsApp, and Apple Messages.
+ *
+ * @param mediaType - The media type as a string (e.g., 'telephony', 'email', 'chat', 'social').
+ * @param mediaChannel - (Optional) The specific channel for Social media types (e.g., 'sms', 'facebook', 'whatsapp', 'apple').
+ * @returns An object containing the `iconName` and `className` corresponding to the media type and channel.
+ */
+export const getMediaIconInfo = (mediaType: string, mediaChannel?: string): MediaInfo => {
path: packages/contact-center/cc-components/src/utils/index.ts
user: login: Kesari3008
body: Also I believe we can optimize using nested if and switch statements. we can discuss the approach on Monday
created_at: 2025-05-15T15:44:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -12,3 +14,104 @@ export const formatTime = (time: number): string => {
   // Less than 1 hour: display mm:ss with two-digit padding for minutes
   return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 };
+
+/**
+ * Returns the icon name and corresponding CSS class for the specified media type and optional media channel.
+ * Supports standard media types such as Telephony, Email, and Chat, and provides specific icons for Social media sub-channels
+ * including SMS, Facebook Messenger, WhatsApp, and Apple Messages.
+ *
+ * @param mediaType - The media type as a string (e.g., 'telephony', 'email', 'chat', 'social').
+ * @param mediaChannel - (Optional) The specific channel for Social media types (e.g., 'sms', 'facebook', 'whatsapp', 'apple').
+ * @returns An object containing the `iconName` and `className` corresponding to the media type and channel.
+ */
+export const getMediaIconInfo = (mediaType: string, mediaChannel?: string): MediaInfo => {
+  if (mediaType === MediaType.SOCIAL) {
+    switch (mediaChannel) {
+      case MediaType.FACEBOOK:
+        return {
+          iconName: 'social-facebook-color',
+          className: MediaType.FACEBOOK,
+          isBrandVisual: true,
+        };
+      case MediaType.WHATSAPP:
+        return {
+          iconName: 'social-whatsapp-color',
+          className: MediaType.WHATSAPP,
+          isBrandVisual: true,
+        };
+      case MediaType.APPLE:
+        return {
+          iconName: 'apple-business-chat-color',
+          className: MediaType.APPLE,
+          isBrandVisual: true,
+        };
+      default:
+        return {
+          iconName: 'chat-filled',
+          className: MediaType.SOCIAL,
+          isBrandVisual: false,
+        };
+    }
+  }
+
+  switch (mediaType) {
+    case MediaType.TELEPHONY:
+      return {
+        iconName: 'handset-filled',
+        className: MediaType.TELEPHONY,
+        isBrandVisual: false,
+      };
+    case MediaType.EMAIL:
+      return {
+        iconName: 'email-filled',
+        className: MediaType.EMAIL,
+        isBrandVisual: false,
+      };
+    case MediaType.CHAT:
+      return {
+        iconName: 'chat-filled',
+        className: MediaType.CHAT,
+        isBrandVisual: false,
+      };
+    default:
+      return {
+        iconName: 'handset-filled',
+        className: MediaType.TELEPHONY,
+        isBrandVisual: false,
+      };
+  }
+};
+
+/**
+ * Returns the display label string corresponding to the specified media type and optional media channel.
+ * Specifically handles Social media types with channel-specific labels such as SMS, Facebook Messenger, WhatsApp, and Apple Messages.
+ *
+ * @param mediaType - The media type as a string (e.g., 'telephony', 'chat', 'email', 'social').
+ * @param mediaChannel - (Optional) The specific channel for Social media types (e.g., 'sms', 'facebook', 'whatsapp', 'apple').
+ * @returns A string label representing the media type and channel, or 'Unknown' if not recognized.
+ */
+export const getMediaLabel = (mediaType: string, mediaChannel?: string): string => {
+  if (mediaType === MediaType.SOCIAL) {
+    switch (mediaChannel) {
+      case MediaType.FACEBOOK:
+        return 'FB messenger';
+      case MediaType.WHATSAPP:
+        return 'Whatsapp';
+      case MediaType.APPLE:
+        return 'Apple Chat';
+      default:
+        return 'Social';
+    }
+  }
+
+  switch (mediaType) {
+    case MediaType.TELEPHONY:
+      return 'Call';
+    case MediaType.CHAT:
+      return 'Chat';
+    case MediaType.EMAIL:
+      return 'Email';
+    default:
+      return 'Unknown';
path: packages/contact-center/cc-components/src/utils/index.ts
user: login: Kesari3008
body: I
created_at: 2025-05-15T15:45:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -45,7 +50,11 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
         {/* Caller Information */}
         <div className="caller-info">
           <div className="call-icon-background">
-            <Icon name="handset-filled" size={1} className="call-icon" />
+            {mediaIconInfo.isBrandVisual ? (
path: packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx
user: login: akulakum
body: Thanks for asking! Social channel icons like Facebook and WhatsApp were deprecated in Momentum and replaced with brand visuals. So, we use a mix of icons and brand visuals based on the media type.
created_at: 2025-05-16T01:39:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -103,6 +104,10 @@ function CallControlComponent(props: CallControlComponentProps) {
     }
   };
 
+  const mediaType = currentTask.data.interaction.mediaType || MediaType.TELEPHONY;
path: packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx
user: login: akulakum
body: Removed the default value.  Thanks!
created_at: 2025-05-16T01:42:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -103,6 +104,10 @@ function CallControlComponent(props: CallControlComponentProps) {
     }
   };
 
+  const mediaType = currentTask.data.interaction.mediaType || MediaType.TELEPHONY;
+  const mediaChannel = currentTask.data.interaction.mediaChannel || '';
path: packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx
user: login: akulakum
body: Removed the empty string. 
created_at: 2025-05-16T01:42:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -460,3 +460,20 @@ export interface CallControlConsultComponentsProps {
 export type CallControlMenuType = 'Consult' | 'Transfer';
 
 export {DestinationType};
+
+export enum MediaType {
path: packages/contact-center/cc-components/src/components/task/task.types.ts
user: login: akulakum
body: Noted the new enum approach—checked and confirmed it’s not yet used in widgets. Taken care of.
created_at: 2025-05-16T01:46:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -12,3 +14,104 @@ export const formatTime = (time: number): string => {
   // Less than 1 hour: display mm:ss with two-digit padding for minutes
   return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 };
+
+/**
+ * Returns the icon name and corresponding CSS class for the specified media type and optional media channel.
+ * Supports standard media types such as Telephony, Email, and Chat, and provides specific icons for Social media sub-channels
+ * including SMS, Facebook Messenger, WhatsApp, and Apple Messages.
+ *
+ * @param mediaType - The media type as a string (e.g., 'telephony', 'email', 'chat', 'social').
+ * @param mediaChannel - (Optional) The specific channel for Social media types (e.g., 'sms', 'facebook', 'whatsapp', 'apple').
+ * @returns An object containing the `iconName` and `className` corresponding to the media type and channel.
+ */
+export const getMediaIconInfo = (mediaType: string, mediaChannel?: string): MediaInfo => {
path: packages/contact-center/cc-components/src/utils/index.ts
user: login: akulakum
body: Combined the two methods into one that returns both media label and icon info as a single object. Taken care of.
created_at: 2025-05-16T01:47:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -12,3 +14,104 @@ export const formatTime = (time: number): string => {
   // Less than 1 hour: display mm:ss with two-digit padding for minutes
   return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 };
+
+/**
+ * Returns the icon name and corresponding CSS class for the specified media type and optional media channel.
+ * Supports standard media types such as Telephony, Email, and Chat, and provides specific icons for Social media sub-channels
+ * including SMS, Facebook Messenger, WhatsApp, and Apple Messages.
+ *
+ * @param mediaType - The media type as a string (e.g., 'telephony', 'email', 'chat', 'social').
+ * @param mediaChannel - (Optional) The specific channel for Social media types (e.g., 'sms', 'facebook', 'whatsapp', 'apple').
+ * @returns An object containing the `iconName` and `className` corresponding to the media type and channel.
+ */
+export const getMediaIconInfo = (mediaType: string, mediaChannel?: string): MediaInfo => {
path: packages/contact-center/cc-components/src/utils/index.ts
user: login: akulakum
body: Agreed, optimized the logic by restructuring nested if and switch statements for better clarity and efficiency.
created_at: 2025-05-16T01:47:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -32,6 +61,9 @@
   mdc-avatar {
     --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-active, rgba(255, 255, 255, 0.8));
   }
+  .brand-visual-background { 
+    background-color: var(--mds-color-theme-avatar-glass-active, rgba(255, 255, 255, 0.8));
path: packages/contact-center/cc-components/src/components/task/Task/styles.scss
user: login: Shreyas281299
body: We can directly use the HEX value. We have been using HEX in the widgets as a fallback.
created_at: 2025-05-19T04:36:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -32,6 +61,9 @@
   mdc-avatar {
     --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-active, rgba(255, 255, 255, 0.8));
   }
+  .brand-visual-background { 
+    background-color: var(--mds-color-theme-avatar-glass-active, rgba(255, 255, 255, 0.8));
path: packages/contact-center/cc-components/src/components/task/Task/styles.scss
user: login: akulakum
body: Updated the color from rgba to HEX
created_at: 2025-05-19T05:15:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -617,8 +619,9 @@ class StoreWrapper implements IStoreWrapper {
 
   getQueues = async (): Promise<Array<ContactServiceQueue>> => {
     try {
+      const mediaType: string = this.currentTask?.data?.interaction?.mediaType?.toUpperCase() || 'TELEPHONY';
path: packages/contact-center/store/src/storeEventsWrapper.ts
user: login: akulakum
body: Removed optional chaining.  Thanks!
created_at: 2025-05-19T05:46:14Z
author_association: CONTRIBUTOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-05-12T09:00:51Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: skip review by coderabbit.ai -->

> [!IMPORTANT]
> ## Review skipped
> 
> Auto reviews are disabled on base/target branches other than the default branch.
> 
> 
> 
> Please check the settings in the CodeRabbit UI or the `.coderabbit.yaml` file in this repository. To trigger a single review, invoke the `@coderabbitai review` command.
> 
> You can disable this status message by setting the `reviews.review_status` to `false` in the CodeRabbit configuration file.

<!-- end of auto-generated comment: skip review by coderabbit.ai -->
<!-- tips_start -->

---

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.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=webex/widgets&utm_content=452):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) 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)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: mkesavan13
created_at: 2025-05-13T08:33:52Z
body: @cmullenx 

> This doesnt address FB messenger, apple messenger and whatsapp

The SDK doesn't support the social channels today and is not tested. We will pick this later

> Is it not possible to get subject of the email, or show the last message as shown in the Figma?

No. This is a webex connect private API and we cannot bring that data into the widget

> Also, you can replace list item components from MRV2 (and any other components that are now available) with the list item in the new momentum

@akulakum - Please check and address this one
author_association: CONTRIBUTOR
user: login: mkesavan13
created_at: 2025-05-13T08:35:12Z
body: @akulakum - Please add the validated label so that the CI runs
author_association: CONTRIBUTOR
user: login: akulakum
created_at: 2025-05-14T09:08:44Z
body: > @cmullenx
> 
> > This doesnt address FB messenger, apple messenger and whatsapp
> 
> The SDK doesn't support the social channels today and is not tested. We will pick this later
> 
> > Is it not possible to get subject of the email, or show the last message as shown in the Figma?
> 
> No. This is a webex connect private API and we cannot bring that data into the widget
> 
> > Also, you can replace list item components from MRV2 (and any other components that are now available) with the list item in the new momentum
> 
> @akulakum - Please check and address this one

Thanks for the feedback, @mkesavan13 and  @cmullenx.  

We had a 1:1 discussion regarding the Momentum changes. As per our conversation, I will address the new Momentum updates (like replacing list item components from MRV2) in a separate PR.
author_association: CONTRIBUTOR
user: login: aws-amplify-us-east-2[bot]
created_at: 2025-05-14T16:24:32Z
body: This pull request is automatically being deployed by Amplify Hosting ([learn more](https://aws.amazon.com/amplify/hosting/)).<br/><br/>Access this pull request here: https://pr-452.d1b38q61t1z947.amplifyapp.com
author_association: NONE
user: login: akulakum
created_at: 2025-05-15T13:35:56Z
body: Implemented social channel branding icons including Facebook Messenger, Apple Messages, and WhatsApp
author_association: CONTRIBUTOR
user: login: akulakum
created_at: 2025-05-19T12:27:57Z
body: 
> What about UT? Do we not need to write UT for all of these changes

We have a separate ticket created for unit test coverage.
Jira Link;  https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6282
author_association: CONTRIBUTOR
user: login: sreenara
created_at: 2025-05-19T12:35:55Z
body: :tada: This PR is included in version 1.28.0-ccwidgets.56 :tada:

The release is available on [GitHub release](https://github.com/webex/widgets/releases/tag/v1.28.0-ccwidgets.56)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: CONTRIBUTOR