@azure/communication-react 1.13.0-alpha-202402220012 → 1.13.0-alpha-202402240011

package/dist/dist-cjs/communication-react/index.js

@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.13.0-alpha-202402220012';
+var telemetryVersion = '1.13.0-alpha-202402240011';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -938,7 +938,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
     });
     /* @conditional-compile-remove(reaction) */
-    const onReactionClicked = (reaction) => __awaiter$P(void 0, void 0, void 0, function* () {
+    const onReactionClick = (reaction) => __awaiter$P(void 0, void 0, void 0, function* () {
         var _c;
         if (reaction === 'like' ||
             reaction === 'applause' ||
@@ -1214,7 +1214,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         /* @conditional-compile-remove(raise-hand) */
         onToggleRaiseHand,
         /* @conditional-compile-remove(reaction) */
-        onReactionClicked,
+        onReactionClick: onReactionClick,
         /* @conditional-compile-remove(PSTN-calls) */
         onAddParticipant: notImplemented,
         onRemoveParticipant: notImplemented,
@@ -1391,7 +1391,7 @@ const _captionSettingsSelector = reselect__namespace.createSelector([
 ], (supportedCaptionLanguages, currentCaptionLanguage, supportedSpokenLanguages, currentSpokenLanguage, isCaptionsFeatureActive) => {
     return {
         supportedCaptionLanguages: supportedCaptionLanguages !== null && supportedCaptionLanguages !== void 0 ? supportedCaptionLanguages : [],
-        currentCaptionLanguage: currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : '',
+        currentCaptionLanguage: currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : 'en',
         supportedSpokenLanguages: supportedSpokenLanguages !== null && supportedSpokenLanguages !== void 0 ? supportedSpokenLanguages : ['en-us'],
         currentSpokenLanguage: currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : 'en-us',
         isCaptionsFeatureActive: isCaptionsFeatureActive !== null && isCaptionsFeatureActive !== void 0 ? isCaptionsFeatureActive : false
@@ -2227,7 +2227,7 @@ let CallContext$2 = class CallContext {
             clearTimeout(this._timeOutId[participantKey]);
             const participant = call.remoteParticipants[participantKey];
             const newReactionState = reactionMessage
-                ? { reactionMessage: reactionMessage, receivedAt: new Date() }
+                ? { reactionMessage: reactionMessage, receivedOn: new Date() }
                 : undefined;
             if (participantKey === toFlatCommunicationIdentifier(this._state.userId)) {
                 call.localParticipantReaction = newReactionState;
@@ -5383,7 +5383,7 @@ const typingIndicatorStringStyle = react.mergeStyles({
     wordBreak: 'break-word'
 });
 
-var participantItem$k={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateRinging:"Calling...",participantStateHold:"On hold"};var ParticipantList$l={overflowParticipantCount:"+{overflowCount} more"};var typingIndicator$k={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$k={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var mentionPopover$k={mentionPopoverHeader:"Suggestions"};var imageOverlay$k={downloadButtonLabel:"Download",dismissButtonAriaLabel:"Close"};var messageStatusIndicator$k={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$k={label:"Leave",tooltipContent:"Leave call"};var cameraButton$k={onLabel:"Camera",offLabel:"Camera",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off",onSplitButtonPrimaryActionCamera:"Turn off camera",offSplitButtonPrimaryActionCamera:"Turn on camera",cameraPrimaryActionSplitButtonTitle:"Use camera",videoEffectsMenuItemTitle:"Effects"};var microphoneButton$k={onLabel:"Mic",offLabel:"Mic",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off",offSplitButtonMicrophonePrimaryAction:"Unmute microphone",onSplitButtonMicrophonePrimaryAction:"Mute microphone",microphonePrimaryActionSplitButtonTitle:"Use microphone"};var devicesButton$k={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$k={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied"};var screenShareButton$k={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var raiseHandButton$k={offLabel:"Raise",onLabel:"Lower",tooltipDisabledContent:"Raise Hand action is disabled",tooltipOnContent:"Lower Hand",tooltipOffContent:"Raise Hand"};var reactionButton$k={label:"React",tooltipDisabledContent:"Reaction action is disabled",tooltipContent:"Send a reaction",likeReactionTooltipContent:"Like",heartReactionTooltipContent:"Love",laughReactionTooltipContent:"Laugh",applauseReactionTooltipContent:"Applause",surprisedReactionTooltipContent:"Surprised"};var messageThread$k={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Done",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file",blockedWarningText:"This message was deleted due to organizational policy.",blockedWarningLinkText:"Details",fileCardGroupMessage:"The message has {fileCount} attachment",messageDeletedAnnouncementAriaLabel:"The message is deleted"};var errorBar$k={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"There was an issue starting screen share.",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneAccessDeniedSafari:"Unable to access microphone. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAccessDeniedSafari:"Unable to access camera. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link.",cameraFrozenForRemoteParticipants:"Users in the call are having issues seeing your video. Please check your devices and network.",unableToStartVideoEffect:"Unable to apply video effect.",startSpotlightWhileMaxParticipantsAreSpotlighted:"Cannot start spotlight on participant(s) because the maximum number of participants are already spotlighted."};var videoGallery$k={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant",fitRemoteParticipantToFrame:"Fit to frame",fillRemoteParticipantFrame:"Fill frame",pinParticipantForMe:"Pin for me",pinParticipantForMeLimitReached:"Pin (limit reached)",unpinParticipantForMe:"Unpin",pinParticipantMenuItemAriaLabel:"Pin {participantName}",unpinParticipantMenuItemAriaLabel:"Unpin {participantName}",pinnedParticipantAnnouncementAriaLabel:"Pinned {participantName}",unpinnedParticipantAnnouncementAriaLabel:"Unpinned {participantName}",startSpotlightVideoTileMenuLabel:"Spotlight for everyone",addSpotlightVideoTileMenuLabel:"Add spotlight",spotlightLimitReachedMenuTitle:"Spotlight limit reached",stopSpotlightVideoTileMenuLabel:"Stop spotlighting",stopSpotlightOnSelfVideoTileMenuLabel:"Exit spotlight"};var dialpad$k={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$k={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$k={participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneSitePermissionsRequest$k={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Allow camera and microphone access"};var CameraSitePermissionsRequest$k={primaryText:"Allow {appName} to use your camera",secondaryText:"This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Allow camera access"};var MicrophoneSitePermissionsRequest$k={primaryText:"Allow {appName} to use your microphone",secondaryText:"This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Allow microphone access"};var CameraAndMicrophoneSitePermissionsCheck$k={primaryText:"Checking for camera and microphone access",secondaryText:"Allow access if prompted. This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Checking for camera and microphone access. Allow access if prompted."};var CameraSitePermissionsCheck$k={primaryText:"Checking for camera access",secondaryText:"Allow access if prompted. This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Checking for camera access. Allow access if prompted."};var MicrophoneSitePermissionsCheck$k={primaryText:"Checking for microphone access",secondaryText:"Allow access if prompted. This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Checking for microphone access. Allow access if prompted."};var CameraAndMicrophoneSitePermissionsDenied$k={primaryText:"Unable to access camera and microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraAndMicrophoneSitePermissionsDeniedSafari$k={primaryText:"Unable to access camera and microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraSitePermissionsDenied$k={primaryText:"Unable to access camera",secondaryText:"Click the lock icon in the address bar to grant camera permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneSitePermissionsDenied$k={primaryText:"Unable to access microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var CameraSitePermissionsDeniedSafari$k={primaryText:"Unable to access camera",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneSitePermissionsDeniedSafari$k={primaryText:"Unable to access microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var UnsupportedBrowser$l={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLinkText:"See compatibility requirements"};var UnsupportedBrowserVersion$l={primaryText:"Browser update needed",secondaryText:"To ensure the best call possible, please update your browser and then try joining the call again.",moreHelpLinkText:"See compatibility requirements",continueAnywayButtonText:"Start call without updating"};var UnsupportedOperatingSystem$l={primaryText:"Operating system not supported",secondaryText:"Please join this call using a device with a compatible operating system.",moreHelpLinkText:"See compatibility requirements"};var BrowserPermissionDenied$k={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$k={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var verticalGallery$k={leftNavButtonAriaLabel:"previous page",rightNavButtonAriaLabel:"next page"};var AttendeeRole$k="Attendee";var en_US$1 = {participantItem:participantItem$k,ParticipantList:ParticipantList$l,typingIndicator:typingIndicator$k,sendBox:sendBox$k,mentionPopover:mentionPopover$k,imageOverlay:imageOverlay$k,messageStatusIndicator:messageStatusIndicator$k,endCallButton:endCallButton$k,cameraButton:cameraButton$k,microphoneButton:microphoneButton$k,devicesButton:devicesButton$k,participantsButton:participantsButton$k,screenShareButton:screenShareButton$k,raiseHandButton:raiseHandButton$k,reactionButton:reactionButton$k,messageThread:messageThread$k,errorBar:errorBar$k,videoGallery:videoGallery$k,dialpad:dialpad$k,holdButton:holdButton$k,videoTile:videoTile$k,CameraAndMicrophoneSitePermissionsRequest:CameraAndMicrophoneSitePermissionsRequest$k,CameraSitePermissionsRequest:CameraSitePermissionsRequest$k,MicrophoneSitePermissionsRequest:MicrophoneSitePermissionsRequest$k,CameraAndMicrophoneSitePermissionsCheck:CameraAndMicrophoneSitePermissionsCheck$k,CameraSitePermissionsCheck:CameraSitePermissionsCheck$k,MicrophoneSitePermissionsCheck:MicrophoneSitePermissionsCheck$k,CameraAndMicrophoneSitePermissionsDenied:CameraAndMicrophoneSitePermissionsDenied$k,CameraAndMicrophoneSitePermissionsDeniedSafari:CameraAndMicrophoneSitePermissionsDeniedSafari$k,CameraSitePermissionsDenied:CameraSitePermissionsDenied$k,MicrophoneSitePermissionsDenied:MicrophoneSitePermissionsDenied$k,CameraSitePermissionsDeniedSafari:CameraSitePermissionsDeniedSafari$k,MicrophoneSitePermissionsDeniedSafari:MicrophoneSitePermissionsDeniedSafari$k,UnsupportedBrowser:UnsupportedBrowser$l,UnsupportedBrowserVersion:UnsupportedBrowserVersion$l,UnsupportedOperatingSystem:UnsupportedOperatingSystem$l,BrowserPermissionDenied:BrowserPermissionDenied$k,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$k,verticalGallery:verticalGallery$k,AttendeeRole:AttendeeRole$k};
+var participantItem$k={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateRinging:"Calling...",participantStateHold:"On hold",attendeeRole:"Attendee"};var ParticipantList$l={overflowParticipantCount:"+{overflowCount} more"};var typingIndicator$k={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$k={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var richTextSendBox={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed",boldTooltip:"Bold",italicTooltip:"Italic",underlineTooltip:"Underline",bulletListTooltip:"Bulleted list",numberListTooltip:"Numbered list",increaseIndentTooltip:"Increase indent",decreaseIndentTooltip:"Decrease indent"};var mentionPopover$k={mentionPopoverHeader:"Suggestions"};var imageOverlay$k={downloadButtonLabel:"Download",dismissButtonAriaLabel:"Close"};var messageStatusIndicator$k={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$k={label:"Leave",tooltipContent:"Leave call"};var cameraButton$k={onLabel:"Camera",offLabel:"Camera",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off",onSplitButtonPrimaryActionCamera:"Turn off camera",offSplitButtonPrimaryActionCamera:"Turn on camera",cameraPrimaryActionSplitButtonTitle:"Use camera",videoEffectsMenuItemTitle:"Effects"};var microphoneButton$k={onLabel:"Mic",offLabel:"Mic",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off",offSplitButtonMicrophonePrimaryAction:"Unmute microphone",onSplitButtonMicrophonePrimaryAction:"Mute microphone",microphonePrimaryActionSplitButtonTitle:"Use microphone"};var devicesButton$k={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$k={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied"};var screenShareButton$k={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var raiseHandButton$k={offLabel:"Raise",onLabel:"Lower",tooltipDisabledContent:"Raise Hand action is disabled",tooltipOnContent:"Lower Hand",tooltipOffContent:"Raise Hand"};var reactionButton$k={label:"React",tooltipDisabledContent:"Reaction action is disabled",tooltipContent:"Send a reaction",likeReactionTooltipContent:"Like",heartReactionTooltipContent:"Love",laughReactionTooltipContent:"Laugh",applauseReactionTooltipContent:"Applause",surprisedReactionTooltipContent:"Surprised"};var messageThread$k={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Done",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file",blockedWarningText:"This message was deleted due to organizational policy.",blockedWarningLinkText:"Details",fileCardGroupMessage:"The message has {fileCount} attachment",messageDeletedAnnouncementAriaLabel:"The message is deleted"};var errorBar$k={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"There was an issue starting screen share.",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneAccessDeniedSafari:"Unable to access microphone. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAccessDeniedSafari:"Unable to access camera. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link.",cameraFrozenForRemoteParticipants:"Users in the call are having issues seeing your video. Please check your devices and network.",unableToStartVideoEffect:"Unable to apply video effect.",startSpotlightWhileMaxParticipantsAreSpotlighted:"Cannot start spotlight on participant(s) because the maximum number of participants are already spotlighted."};var videoGallery$k={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant",fitRemoteParticipantToFrame:"Fit to frame",fillRemoteParticipantFrame:"Fill frame",pinParticipantForMe:"Pin for me",pinParticipantForMeLimitReached:"Pin (limit reached)",unpinParticipantForMe:"Unpin",pinParticipantMenuItemAriaLabel:"Pin {participantName}",unpinParticipantMenuItemAriaLabel:"Unpin {participantName}",pinnedParticipantAnnouncementAriaLabel:"Pinned {participantName}",unpinnedParticipantAnnouncementAriaLabel:"Unpinned {participantName}",startSpotlightVideoTileMenuLabel:"Spotlight for everyone",addSpotlightVideoTileMenuLabel:"Add spotlight",spotlightLimitReachedMenuTitle:"Spotlight limit reached",stopSpotlightVideoTileMenuLabel:"Stop spotlighting",stopSpotlightOnSelfVideoTileMenuLabel:"Exit spotlight",attendeeRole:"Attendee"};var dialpad$k={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$k={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$k={participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneSitePermissionsRequest$k={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Allow camera and microphone access"};var CameraSitePermissionsRequest$k={primaryText:"Allow {appName} to use your camera",secondaryText:"This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Allow camera access"};var MicrophoneSitePermissionsRequest$k={primaryText:"Allow {appName} to use your microphone",secondaryText:"This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Allow microphone access"};var CameraAndMicrophoneSitePermissionsCheck$k={primaryText:"Checking for camera and microphone access",secondaryText:"Allow access if prompted. This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Checking for camera and microphone access. Allow access if prompted."};var CameraSitePermissionsCheck$k={primaryText:"Checking for camera access",secondaryText:"Allow access if prompted. This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Checking for camera access. Allow access if prompted."};var MicrophoneSitePermissionsCheck$k={primaryText:"Checking for microphone access",secondaryText:"Allow access if prompted. This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Checking for microphone access. Allow access if prompted."};var CameraAndMicrophoneSitePermissionsDenied$k={primaryText:"Unable to access camera and microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraAndMicrophoneSitePermissionsDeniedSafari$k={primaryText:"Unable to access camera and microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraSitePermissionsDenied$k={primaryText:"Unable to access camera",secondaryText:"Click the lock icon in the address bar to grant camera permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneSitePermissionsDenied$k={primaryText:"Unable to access microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var CameraSitePermissionsDeniedSafari$k={primaryText:"Unable to access camera",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneSitePermissionsDeniedSafari$k={primaryText:"Unable to access microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var UnsupportedBrowser$l={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLinkText:"See compatibility requirements"};var UnsupportedBrowserVersion$l={primaryText:"Browser update needed",secondaryText:"To ensure the best call possible, please update your browser and then try joining the call again.",moreHelpLinkText:"See compatibility requirements",continueAnywayButtonText:"Start call without updating"};var UnsupportedOperatingSystem$l={primaryText:"Operating system not supported",secondaryText:"Please join this call using a device with a compatible operating system.",moreHelpLinkText:"See compatibility requirements"};var BrowserPermissionDenied$k={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$k={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var verticalGallery$k={leftNavButtonAriaLabel:"previous page",rightNavButtonAriaLabel:"next page"};var en_US$1 = {participantItem:participantItem$k,ParticipantList:ParticipantList$l,typingIndicator:typingIndicator$k,sendBox:sendBox$k,richTextSendBox:richTextSendBox,mentionPopover:mentionPopover$k,imageOverlay:imageOverlay$k,messageStatusIndicator:messageStatusIndicator$k,endCallButton:endCallButton$k,cameraButton:cameraButton$k,microphoneButton:microphoneButton$k,devicesButton:devicesButton$k,participantsButton:participantsButton$k,screenShareButton:screenShareButton$k,raiseHandButton:raiseHandButton$k,reactionButton:reactionButton$k,messageThread:messageThread$k,errorBar:errorBar$k,videoGallery:videoGallery$k,dialpad:dialpad$k,holdButton:holdButton$k,videoTile:videoTile$k,CameraAndMicrophoneSitePermissionsRequest:CameraAndMicrophoneSitePermissionsRequest$k,CameraSitePermissionsRequest:CameraSitePermissionsRequest$k,MicrophoneSitePermissionsRequest:MicrophoneSitePermissionsRequest$k,CameraAndMicrophoneSitePermissionsCheck:CameraAndMicrophoneSitePermissionsCheck$k,CameraSitePermissionsCheck:CameraSitePermissionsCheck$k,MicrophoneSitePermissionsCheck:MicrophoneSitePermissionsCheck$k,CameraAndMicrophoneSitePermissionsDenied:CameraAndMicrophoneSitePermissionsDenied$k,CameraAndMicrophoneSitePermissionsDeniedSafari:CameraAndMicrophoneSitePermissionsDeniedSafari$k,CameraSitePermissionsDenied:CameraSitePermissionsDenied$k,MicrophoneSitePermissionsDenied:MicrophoneSitePermissionsDenied$k,CameraSitePermissionsDeniedSafari:CameraSitePermissionsDeniedSafari$k,MicrophoneSitePermissionsDeniedSafari:MicrophoneSitePermissionsDeniedSafari$k,UnsupportedBrowser:UnsupportedBrowser$l,UnsupportedBrowserVersion:UnsupportedBrowserVersion$l,UnsupportedOperatingSystem:UnsupportedOperatingSystem$l,BrowserPermissionDenied:BrowserPermissionDenied$k,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$k,verticalGallery:verticalGallery$k};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -5840,6 +5840,14 @@ e.nativeEvent.isComposing ||
  * @private
  */
 const nullToUndefined = (value) => (value === null ? undefined : value);
+/**
+ * Helper function to get the keys of an object
+ *
+ * @private
+ */
+function getKeys(obj) {
+    return Object.keys(obj);
+}
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -6560,7 +6568,23 @@ const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(spotlight) */
     StopSpotlightContextualMenuItem: React.createElement(reactIcons.VideoPersonStarOff20Filled, null),
     /* @conditional-compile-remove(spotlight) */
-    VideoSpotlighted: React.createElement(reactIcons.VideoPersonStar20Filled, { style: { height: '16px', width: '16px' } })
+    VideoSpotlighted: React.createElement(reactIcons.VideoPersonStar20Filled, { style: { height: '16px', width: '16px' } }),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RTEBoldButtonIcon: React.createElement(reactIcons.TextBold20Regular, null),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RTEItalicButtonIcon: React.createElement(reactIcons.TextItalic20Regular, null),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RTEUnderlineButtonIcon: React.createElement(reactIcons.TextUnderlineCharacterU20Regular, null),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RTEBulletListButtonIcon: React.createElement(reactIcons.TextBulletList20Regular, null),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RTEtNumberListButtonIcon: React.createElement(reactIcons.TextNumberListLtr20Regular, null),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RTEIndentDecreaseButtonIcon: React.createElement(reactIcons.TextIndentDecrease20Regular, null),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RTEIndentIncreaseButtonIcon: React.createElement(reactIcons.TextIndentIncrease20Regular, null),
+    /* @conditional-compile-remove(rich-text-editor) */
+    RTEDividerIcon: React.createElement(reactIcons.DividerTall24Regular, null)
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -9074,6 +9098,202 @@ const richTextEditorStyle = react.mergeStyles({
     minHeight: '2.25rem',
     maxHeight: '8.25rem'
 });
+/**
+ * @private
+ */
+const ribbonButtonStyle = (theme) => {
+    return {
+        icon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        menuIcon: { color: theme.palette.neutralPrimary, height: 'auto' },
+        root: { minWidth: 'auto', backgroundColor: 'transparent' },
+        rootChecked: {
+            backgroundColor: 'transparent',
+            selectors: {
+                // Icon's color doesn't work here because of the specificity
+                '.ms-Button-icon': {
+                    color: theme.palette.themePrimary
+                },
+                '.ms-Button-menuIcon': {
+                    color: theme.palette.themePrimary
+                }
+            }
+        },
+        rootHovered: {
+            backgroundColor: 'transparent',
+            selectors: {
+                // Icon's color doesn't work here because of the specificity
+                '.ms-Button-icon': {
+                    color: theme.palette.themePrimary
+                },
+                '.ms-Button-menuIcon': {
+                    color: theme.palette.themePrimary
+                }
+            }
+        },
+        rootCheckedHovered: {
+            backgroundColor: 'transparent',
+            selectors: {
+                // Icon's color doesn't work here because of the specificity
+                '.ms-Button-icon': {
+                    color: theme.palette.themePrimary
+                },
+                '.ms-Button-menuIcon': {
+                    color: theme.palette.themePrimary
+                }
+            }
+        },
+        rootCheckedPressed: {
+            backgroundColor: 'transparent',
+            selectors: {
+                // Icon's color doesn't work here because of the specificity
+                '.ms-Button-icon': {
+                    color: theme.palette.themePrimary
+                },
+                '.ms-Button-menuIcon': {
+                    color: theme.palette.themePrimary
+                }
+            }
+        },
+        rootPressed: {
+            backgroundColor: 'transparent',
+            selectors: {
+                // Icon's color doesn't work here because of the specificity
+                '.ms-Button-icon': {
+                    color: theme.palette.themePrimary
+                },
+                '.ms-Button-menuIcon': {
+                    color: theme.palette.themePrimary
+                }
+            }
+        },
+        rootExpanded: {
+            backgroundColor: 'transparent',
+            selectors: {
+                // Icon's color doesn't work here because of the specificity
+                '.ms-Button-icon': {
+                    color: theme.palette.themePrimary
+                },
+                '.ms-Button-menuIcon': {
+                    color: theme.palette.themePrimary
+                }
+            }
+        },
+        rootExpandedHovered: {
+            backgroundColor: 'transparent',
+            selectors: {
+                //icon color is not working here because of the specificity
+                '.ms-Button-icon': {
+                    color: theme.palette.themePrimary
+                },
+                '.ms-Button-menuIcon': {
+                    color: theme.palette.themePrimary
+                }
+            }
+        }
+    };
+};
+/**
+ * @private
+ */
+const ribbonDividerStyle = (theme) => {
+    return {
+        icon: { color: theme.palette.neutralQuaternaryAlt, margin: '0 -0.5rem', height: 'auto' },
+        root: { margin: '0', padding: '0', minWidth: 'auto' }
+    };
+};
+/**
+ * @private
+ */
+const ribbonStyle = () => {
+    return {
+        // Override for the default white color of the Ribbon component
+        root: { backgroundColor: 'transparent' }
+    };
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+const dividerRibbonButton = (theme) => {
+    return {
+        key: 'Divider',
+        iconName: 'RTEDividerIcon',
+        unlocalizedText: '',
+        onClick: () => { },
+        isDisabled: () => true,
+        commandBarProperties: {
+            buttonStyles: ribbonDividerStyle(theme)
+        }
+    };
+};
+const boldButton = (theme) => {
+    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.Bold, theme, 'RTEBoldButtonIcon');
+};
+const italicButton = (theme) => {
+    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.Italic, theme, 'RTEItalicButtonIcon');
+};
+const underlineButton = (theme) => {
+    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.Underline, theme, 'RTEUnderlineButtonIcon');
+};
+const bulletListButton = (theme) => {
+    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.BulletedList, theme, 'RTEBulletListButtonIcon');
+};
+const numberListButton = (theme) => {
+    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.NumberedList, theme, 'RTEtNumberListButtonIcon');
+};
+const indentIncreaseButton = (theme) => {
+    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.IncreaseIndent, theme, 'RTEIndentIncreaseButtonIcon');
+};
+const indentDecreaseButton = (theme) => {
+    return createKnownRibbonButton(roosterjsReact.KnownRibbonButtonKey.DecreaseIndent, theme, 'RTEIndentDecreaseButtonIcon');
+};
+const createKnownRibbonButton = (key, theme, icon) => {
+    var _a;
+    const buttons = roosterjsReact.getButtons([key]);
+    if (buttons.length > 0) {
+        const button = buttons[0];
+        // AllButtonStringKeys is a union of all the string keys of all the buttons
+        const result = buttons[0];
+        button.iconName = icon;
+        button.commandBarProperties = Object.assign(Object.assign({}, button.commandBarProperties), { buttonStyles: Object.assign(Object.assign({}, (_a = button.commandBarProperties) === null || _a === void 0 ? void 0 : _a.buttonStyles), ribbonButtonStyle(theme)) });
+        return result;
+    }
+    return undefined;
+};
+/**
+ * @private
+ */
+const ribbonButtons = (theme) => {
+    const buttons = [];
+    [
+        boldButton(theme),
+        italicButton(theme),
+        underlineButton(theme),
+        dividerRibbonButton(theme),
+        bulletListButton(theme),
+        numberListButton(theme),
+        indentIncreaseButton(theme),
+        indentDecreaseButton(theme)
+    ].forEach((item) => {
+        if (item !== undefined) {
+            buttons.push(item);
+        }
+    });
+    return buttons;
+};
+/**
+ * @private
+ */
+const ribbonButtonsStrings = (strings) => {
+    return {
+        buttonNameBold: strings.boldTooltip,
+        buttonNameItalic: strings.italicTooltip,
+        buttonNameUnderline: strings.underlineTooltip,
+        buttonNameBulletedList: strings.bulletListTooltip,
+        buttonNameNumberedList: strings.numberListTooltip,
+        buttonNameIncreaseIndent: strings.increaseIndentTooltip,
+        buttonNameDecreaseIndent: strings.decreaseIndentTooltip
+    };
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -9083,8 +9303,10 @@ const richTextEditorStyle = react.mergeStyles({
  * @beta
  */
 React.forwardRef((props, ref) => {
-    const { content, onChange, placeholderText } = props;
+    const { content, onChange, placeholderText, strings } = props;
     const editor = React.useRef(null);
+    const [divComponent, setDivComponent] = React.useState(null);
+    const theme = react.useTheme();
     React.useImperativeHandle(ref, () => {
         return {
             focus() {
@@ -9100,23 +9322,50 @@ React.forwardRef((props, ref) => {
             (_b = editor.current) === null || _b === void 0 ? void 0 : _b.setContent(content || '');
         }
     }, [content]);
-    const editorCreator = React.useMemo(() => {
-        return (div) => {
-            const contentEdit = new roosterjsEditorPlugins.ContentEdit();
-            const placeholderPlugin = new roosterjsEditorPlugins.Watermark(placeholderText || '');
-            const updateContentPlugin = roosterjsReact.createUpdateContentPlugin(roosterjsReact.UpdateMode.OnContentChangedEvent | roosterjsReact.UpdateMode.OnUserInput, (content) => {
-                onChange && onChange(content);
-            });
-            const options = {
-                plugins: [placeholderPlugin, contentEdit, updateContentPlugin],
-                imageSelectionBorderColor: 'blue'
-            };
-            editor.current = new roosterjsEditorCore.Editor(div, options);
-            return editor.current;
-        };
-    }, [onChange, placeholderText]);
+    React.useEffect(() => {
+        if (divComponent !== null && theme.palette.neutralPrimary !== undefined) {
+            // Adjust color prop for the div component when theme is updated
+            // because doNotAdjustEditorColor is set for Rooster
+            divComponent.style.color = theme.palette.neutralPrimary;
+        }
+    }, [divComponent, theme]);
+    const ribbonPlugin = React.useMemo(() => {
+        return roosterjsReact.createRibbonPlugin();
+    }, []);
+    const editorCreator = React.useCallback((div, options) => {
+        editor.current = new roosterjsEditorCore.Editor(div, options);
+        setDivComponent(div);
+        // Remove the background color of the editor
+        div.style.backgroundColor = 'transparent';
+        return editor.current;
+    }, []);
+    const plugins = React.useMemo(() => {
+        const contentEdit = new roosterjsEditorPlugins.ContentEdit();
+        const placeholderPlugin = new roosterjsEditorPlugins.Watermark(placeholderText || '');
+        const updateContentPlugin = roosterjsReact.createUpdateContentPlugin(roosterjsReact.UpdateMode.OnContentChangedEvent | roosterjsReact.UpdateMode.OnUserInput, (content) => {
+            onChange && onChange(content);
+        });
+        return [contentEdit, placeholderPlugin, updateContentPlugin, ribbonPlugin];
+    }, [onChange, placeholderText, ribbonPlugin]);
+    const ribbon = React.useMemo(() => {
+        const buttons = ribbonButtons(theme);
+        return (
+        //TODO: Add localization for watermark plugin https://github.com/microsoft/roosterjs/issues/2430
+        React.createElement(roosterjsReact.Ribbon, { styles: ribbonStyle(), buttons: buttons, plugin: ribbonPlugin, overflowButtonProps: {
+                styles: ribbonButtonStyle(theme),
+                menuProps: {
+                    items: [], // CommandBar will determine items rendered in overflow
+                    isBeakVisible: false
+                }
+            }, strings: ribbonButtonsStrings(strings) }));
+    }, [strings, ribbonPlugin, theme]);
     return (React.createElement("div", null,
-        React.createElement(roosterjsReact.Rooster, { className: richTextEditorStyle, editorCreator: editorCreator })));
+        ribbon,
+        React.createElement(roosterjsReact.Rooster, { inDarkMode: isDarkThemed(theme), plugins: plugins, className: richTextEditorStyle, editorCreator: editorCreator, 
+            // TODO: confirm the color during inline images implementation
+            imageSelectionBorderColor: 'blue', 
+            // doNotAdjustEditorColor is used to fix the default background color for Rooster component
+            doNotAdjustEditorColor: true })));
 });
 
 // Copyright (c) Microsoft Corporation.
@@ -9185,6 +9434,23 @@ const AnnouncerMessage = (props) => {
 /** @private */
 const LiveMessage = (props) => (React.createElement(AnnouncerContext.Consumer, null, (contextProps) => React.createElement(AnnouncerMessage, Object.assign({}, contextProps, props))));
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * Component to display message status icon
+ *
+ * @internal
+ */
+const MessageStatusIcon = (props) => {
+    const { shouldAnnounce, iconName, iconClassName, ariaLabel } = props;
+    return (React.createElement(React.Fragment, null,
+        ariaLabel && React.createElement(LiveMessage, { message: ariaLabel, ariaLive: "polite" }),
+        React.createElement("div", { 
+            // make icon accessible
+            tabIndex: 0 },
+            React.createElement(react.Icon, { role: 'status', "aria-live": shouldAnnounce ? 'polite' : 'off', "data-ui-id": 'chat-composite-message-status-icon', "aria-label": ariaLabel, iconName: iconName, className: iconClassName }))));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -9192,10 +9458,10 @@ const LiveMessage = (props) => (React.createElement(AnnouncerContext.Consumer, n
  *
  * Adds an icon and tooltip corresponding to the message status.
  *
- * @public
+ * @internal
  */
-const MessageStatusIndicator = (props) => {
-    const { status, styles, remoteParticipantsCount, onToggleToolTip, readCount } = props;
+const MessageStatusIndicatorInternal = (props) => {
+    const { status, styles, remoteParticipantsCount, onToggleToolTip, readCount, shouldAnnounce } = props;
     const localeStrings = useLocale$1().strings.messageStatusIndicator;
     const [isTooltipToggled, setIsTooltipToggled] = React.useState(false);
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
@@ -9210,18 +9476,14 @@ const MessageStatusIndicator = (props) => {
     switch (status) {
         case 'failed':
             return (React.createElement(react.TooltipHost, { content: strings.failedToSendTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles$1 },
-                strings.failedToSendAriaLabel && (
-                // live message is used here and in the following tooltips so that aria labels are announced on mobile
-                React.createElement(LiveMessage, { message: strings.failedToSendAriaLabel, ariaLive: "polite" })),
-                React.createElement(react.Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.failedToSendAriaLabel, iconName: "MessageFailed", className: react.mergeStyles(MessageStatusIndicatorErrorIconStyle, { color: theme.palette.redDark }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageFailed", iconClassName: react.mergeStyles(MessageStatusIndicatorErrorIconStyle, { color: theme.palette.redDark }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.failedToSendAriaLabel })));
         case 'sending':
             return (React.createElement(react.TooltipHost, { content: strings.sendingTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles$1 },
-                strings.sendingAriaLabel && React.createElement(LiveMessage, { message: strings.sendingAriaLabel, ariaLive: "polite" }),
-                React.createElement(react.Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.sendingAriaLabel, iconName: "MessageSending", className: react.mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageSending", iconClassName: react.mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.sendingAriaLabel })));
         case 'seen':
             return (React.createElement(react.TooltipHost, { calloutProps: Object.assign({}, calloutProps), "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles$1, content: 
                 // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'
-                // when readcount is 0, we have a bug, show 'seen' to cover up as a fall back
+                // when readCount is 0, we have a bug, show 'seen' to cover up as a fall back
                 // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back
                 readCount === 0 ||
                     (remoteParticipantsCount && remoteParticipantsCount <= 1) ||
@@ -9238,12 +9500,10 @@ const MessageStatusIndicator = (props) => {
                         setIsTooltipToggled(!isTooltipToggled);
                     }
                 } },
-                strings.seenAriaLabel && React.createElement(LiveMessage, { message: strings.seenAriaLabel, ariaLive: "polite" }),
-                React.createElement(react.Icon, { "data-ui-id": "chat-composite-message-status-icon", role: "status", "aria-label": strings.seenAriaLabel, iconName: "MessageSeen", className: react.mergeStyles({ color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageSeen", iconClassName: react.mergeStyles({ color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.seenAriaLabel })));
         case 'delivered':
             return (React.createElement(react.TooltipHost, { calloutProps: Object.assign({}, calloutProps), content: strings.deliveredTooltipText, "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles$1 },
-                strings.deliveredAriaLabel && React.createElement(LiveMessage, { message: strings.deliveredAriaLabel, ariaLive: "polite" }),
-                React.createElement(react.Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.deliveredAriaLabel, iconName: "MessageDelivered", className: react.mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                React.createElement(MemoMessageStatusIcon, { shouldAnnounce: shouldAnnounce, iconName: "MessageDelivered", iconClassName: react.mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root), ariaLabel: strings.deliveredAriaLabel })));
         default:
             return React.createElement(React.Fragment, null);
     }
@@ -9252,6 +9512,23 @@ const MessageStatusIndicator = (props) => {
 // To prevent sizing issues or tooltip positioning issues, we override to inline-block.
 // For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
 const hostStyles$1 = { root: { display: 'inline-block' } };
+const MemoMessageStatusIcon = React.memo((obj) => {
+    return React.createElement(MessageStatusIcon, Object.assign({}, obj));
+});
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * Component to display the status of a sent message.
+ *
+ * Adds an icon and tooltip corresponding to the message status.
+ *
+ * @public
+ */
+const MessageStatusIndicator = (props) => {
+    const internalProps = Object.assign(Object.assign({}, props), { shouldAnnounce: true });
+    return React.createElement(MessageStatusIndicatorInternal, Object.assign({}, internalProps));
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -11526,6 +11803,15 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
     }
     return undefined;
 };
+const getLastChatMessageForCurrentUser = (messages) => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+        const message = messages[i];
+        if (message.messageType === 'chat' && message.mine) {
+            return message;
+        }
+    }
+    return undefined;
+};
 /**
  * `MessageThread` allows you to easily create a component for rendering chat messages, handling scrolling behavior of new/old messages and customizing icons & controls inside the chat thread.
  * @param props - of type MessageThreadProps
@@ -11593,6 +11879,7 @@ const MessageThreadWrapper = (props) => {
             // reset deleted message label in case if there was a value already (messages are deleted 1 after another)
             setDeletedMessageAriaLabel(undefined);
             setLatestDeletedMessageId(messageId);
+            lastChatMessageStatus.current = 'deleted';
             // we should set up latestDeletedMessageId before the onDeleteMessage call
             // as otherwise in very rare cases the messages array can be updated before latestDeletedMessageId
             yield onDeleteMessage(messageId);
@@ -11787,6 +12074,23 @@ const MessageThreadWrapper = (props) => {
         // Only scroll to bottom if isAtBottomOfScrollRef is true
         isAtBottomOfScrollRef.current && scrollToBottom();
     }, [clientHeight, forceUpdate, scrollToBottom, chatMessagesInitialized]);
+    React.useEffect(() => {
+        var _a;
+        const newStatus = (_a = getLastChatMessageForCurrentUser(newMessages)) === null || _a === void 0 ? void 0 : _a.status;
+        if (newStatus !== undefined) {
+            if (lastChatMessageStatus.current === 'deleted' && newStatus === 'sending') {
+                // enforce message life cycle
+                // message status should always be [ sending -> delivered -> seen (optional) -> deleted ] or [sending -> failed -> deleted]
+                // not any other way around
+                // therefore, if current message status is deleted, we should only update it if newStatus is sending
+                lastChatMessageStatus.current = newStatus;
+            }
+            else if (lastChatMessageStatus.current !== 'deleted') {
+                lastChatMessageStatus.current = newStatus;
+            }
+        }
+        // The hook should depend on newMessages not on messages as otherwise it will skip the sending status for a first message
+    }, [newMessages]);
     /**
      * This needs to run to update latestPreviousChatMessage & latestCurrentChatMessage.
      * These two states are used to manipulate scrollbar
@@ -11815,6 +12119,7 @@ const MessageThreadWrapper = (props) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [messages]);
+    const lastChatMessageStatus = React.useRef(undefined);
     const participantCountRef = React.useRef(participantCount);
     const readReceiptsBySenderIdRef = React.useRef(readReceiptsBySenderId);
     participantCountRef.current = participantCount;
@@ -11825,6 +12130,10 @@ const MessageThreadWrapper = (props) => {
         }
     }, []);
     const defaultStatusRenderer = React.useCallback((message, participantCount, readCount, status) => {
+        // we should only announce label if the message status isn't deleted
+        // because after message is deleted, we now need to render statusIndicator for previous messages
+        // and their status has been announced already and we should not announce them again
+        const shouldAnnounce = lastChatMessageStatus.current !== 'deleted';
         const onToggleToolTip = (isToggled) => {
             if (isToggled && readReceiptsBySenderIdRef.current) {
                 setReadCountForHoveredIndicator(getParticipantsWhoHaveReadMessage(message, readReceiptsBySenderIdRef.current).length);
@@ -11833,9 +12142,9 @@ const MessageThreadWrapper = (props) => {
                 setReadCountForHoveredIndicator(undefined);
             }
         };
-        return (React.createElement(MessageStatusIndicator, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, 
+        return (React.createElement(MessageStatusIndicatorInternal, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, 
             // -1 because participant count does not include myself
-            remoteParticipantsCount: participantCount ? participantCount - 1 : 0 }));
+            remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldAnnounce: shouldAnnounce }));
     }, []);
     const theme = useTheme();
     const messagesToDisplay = React.useMemo(() => {
@@ -11863,7 +12172,7 @@ const MessageThreadWrapper = (props) => {
         existsNewChatMessage && !disableJumpToNewMessageButton && (React.createElement("div", { className: react.mergeStyles(newMessageButtonContainerStyle, styles === null || styles === void 0 ? void 0 : styles.newMessageButtonContainer) }, onRenderJumpToNewMessageButton ? (onRenderJumpToNewMessageButton({ text: strings.newMessagesIndicator, onClick: scrollToBottom })) : (React.createElement(DefaultJumpToNewMessageButton, { text: strings.newMessagesIndicator, onClick: scrollToBottom })))),
         React.createElement(LiveAnnouncer, null,
             React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
-                React.createElement(Announcer$1, { announcementString: deletedMessageAriaLabel, ariaLive: 'assertive' }),
+                latestDeletedMessageId && (React.createElement(Announcer$1, { key: latestDeletedMessageId, announcementString: deletedMessageAriaLabel, ariaLive: 'assertive' })),
                 React.createElement(reactChat.Chat
                 // styles?.chatContainer used in className and style prop as style prop can't handle CSS selectors
                 , { 
@@ -12396,7 +12705,7 @@ const iconStyles$2 = react.mergeStyles({
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, styles, onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme, attendeeRoleString) => {
+const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, styles, onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, theme) => {
     const callingParticipant = participant;
     let presence = undefined;
     if (callingParticipant) {
@@ -12406,8 +12715,8 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     let displayName = participant.displayName;
     /* @conditional-compile-remove(hide-attendee-name) */
     const formatDisplayName = () => {
-        if (displayName && attendeeRoleString) {
-            return _formatString(displayName, { AttendeeRole: attendeeRoleString });
+        if (displayName && strings.attendeeRole) {
+            return _formatString(displayName, { AttendeeRole: strings.attendeeRole });
         }
         return displayName;
     };
@@ -12506,8 +12815,6 @@ const ParticipantList$k = (props) => {
     const participantItemStrings = useLocale$1().strings.participantItem;
     /* @conditional-compile-remove(total-participant-count) */
     const participantListStrings = useLocale$1().strings.ParticipantList;
-    /* @conditional-compile-remove(hide-attendee-name) */
-    const attendeeRoleString = useLocale$1().strings.AttendeeRole;
     const displayedParticipants = React.useMemo(() => {
         return onRenderParticipant ? participants : getParticipantsForDefaultRender(participants, excludeMe, myUserId);
     }, [participants, excludeMe, myUserId, onRenderParticipant]);
@@ -12548,9 +12855,7 @@ const ParticipantList$k = (props) => {
             ? onRenderParticipant(participant)
             : onRenderParticipantDefault(participant, participantItemStrings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy, 
             /* @conditional-compile-remove(raise-hand) */
-            theme, 
-            /* @conditional-compile-remove(hide-attendee-name) */
-            attendeeRoleString)),
+            theme)),
         /* @conditional-compile-remove(total-participant-count) */ overflowParticipantCountString &&
             totalParticipantCount &&
             totalParticipantCount > displayedParticipants.length && (React.createElement(react.Text, { style: { fontWeight: 400, margin: '0.5rem' } }, _formatString(overflowParticipantCountString, {
@@ -13705,7 +14010,7 @@ const VideoTile = (props) => {
     /* @conditional-compile-remove(reaction) */
     const currentUnixTimeStamp = Math.floor(currentTimestamp.getTime() / 1000);
     /* @conditional-compile-remove(reaction) */
-    const receivedUnixTimestamp = reaction ? Math.floor(reaction.receivedAt.getTime() / 1000) : undefined;
+    const receivedUnixTimestamp = reaction ? Math.floor(reaction.receivedOn.getTime() / 1000) : undefined;
     /* @conditional-compile-remove(reaction) */
     const canRenderReaction = (receivedUnixTimestamp ? currentUnixTimeStamp - receivedUnixTimestamp < 3000 : false) &&
         backgroundImageUrl !== undefined;
@@ -13807,7 +14112,7 @@ const bracketedParticipantString = (participantString, withBrackets) => {
  * @internal
  */
 const _RemoteVideoTile = React.memo((props) => {
-    var _a;
+    var _a, _b;
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
     isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, 
     /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds, 
@@ -13879,9 +14184,9 @@ const _RemoteVideoTile = React.memo((props) => {
             setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps$1(contextualMenuProps, () => setDrawerMenuItemProps([])));
         }
     }, [setDrawerMenuItemProps, contextualMenuProps]);
-    let displayName = remoteParticipant.displayName || (strings === null || strings === void 0 ? void 0 : strings.displayNamePlaceholder);
+    let displayName = remoteParticipant.displayName || strings.displayNamePlaceholder;
     /* @conditional-compile-remove(hide-attendee-name) */
-    const attendeeRoleString = useLocale$1().strings.AttendeeRole;
+    const attendeeRoleString = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.attendeeRole;
     /* @conditional-compile-remove(hide-attendee-name) */
     const formatDisplayName = () => {
         if (displayName && attendeeRoleString) {
@@ -13892,7 +14197,7 @@ const _RemoteVideoTile = React.memo((props) => {
     /* @conditional-compile-remove(hide-attendee-name) */
     displayName = formatDisplayName();
     return (React.createElement(react.Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
-        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_a = remoteParticipant.displayName) !== null && _a !== void 0 ? _a : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, 
+        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = remoteParticipant.displayName) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, 
             /* @conditional-compile-remove(raise-hand) */
             raisedHand: remoteParticipant.raisedHand, 
             /* @conditional-compile-remove(reaction) */
@@ -17975,7 +18280,7 @@ const ReactionButton = (props) => {
         const resourceUrl = emojiResource.get(emoji);
         return (React.createElement(react.TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
             React.createElement(react.IconButton, { key: index, onClick: () => {
-                    props.onReactionClicked(emoji);
+                    props.onReactionClick(emoji);
                     setIsHoveredMap((prevMap) => {
                         return new Map(prevMap).set(emoji, false);
                     });
@@ -18920,20 +19225,26 @@ const _TagsSurvey = (props) => {
     const [selectedTextResponse, setSelectedTextResponse] = React.useState({});
     const [checkedTextFields, setCheckedTextFields] = React.useState([]);
     const tags = React.useMemo(() => {
-        const tags = [];
-        Object.keys(callIssuesToTag).forEach((issueCategory) => {
-            Object.keys(callIssuesToTag[issueCategory]).map((issue) => {
-                const issueCapitalized = (issue === null || issue === void 0 ? void 0 : issue.charAt(0).toUpperCase()) + (issue === null || issue === void 0 ? void 0 : issue.slice(1));
+        const tags = {
+            overallRating: [],
+            audioRating: [],
+            videoRating: [],
+            screenshareRating: []
+        };
+        getKeys(callIssuesToTag).forEach((issueCategory) => {
+            getKeys(callIssuesToTag[issueCategory]).map((issue) => {
+                const issueCapitalized = ((issue === null || issue === void 0 ? void 0 : issue.charAt(0).toUpperCase()) + (issue === null || issue === void 0 ? void 0 : issue.slice(1)));
+                const issueMessages = callIssuesToTag[issueCategory];
                 if (tags[issueCategory]) {
                     tags[issueCategory].push({
-                        message: callIssuesToTag[issueCategory][issue],
+                        message: issueMessages[issue],
                         issue: issueCapitalized
                     });
                 }
                 else {
                     tags[issueCategory] = [
                         {
-                            message: callIssuesToTag[issueCategory][issue],
+                            message: issueMessages[issue],
                             issue: issueCapitalized
                         }
                     ];
@@ -18946,11 +19257,13 @@ const _TagsSurvey = (props) => {
         if (checked) {
             if (issue) {
                 setSelectedTags((prevState) => {
-                    if (prevState[issueCategory]) {
-                        prevState[issueCategory].issues.push(issue);
+                    var _a;
+                    const existingIssues = (_a = prevState === null || prevState === void 0 ? void 0 : prevState[issueCategory]) === null || _a === void 0 ? void 0 : _a.issues;
+                    if (existingIssues) {
+                        prevState[issueCategory].issues = [...existingIssues, issue];
                     }
                     else {
-                        prevState[issueCategory] = { score: 1, issues: [issue] };
+                        prevState[issueCategory] = { issues: [issue] };
                     }
                     return prevState;
                 });
@@ -18966,7 +19279,8 @@ const _TagsSurvey = (props) => {
         else {
             if (issue) {
                 setSelectedTags((prevState) => {
-                    if (prevState[issueCategory]) {
+                    var _a;
+                    if ((_a = prevState[issueCategory]) === null || _a === void 0 ? void 0 : _a.issues) {
                         prevState[issueCategory].issues = prevState[issueCategory].issues.filter(function (value) {
                             return value !== issue;
                         });
@@ -19010,7 +19324,7 @@ const _TagsSurvey = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(react.Stack, { verticalAlign: "center" },
             React.createElement(react.Text, { className: questionTextStyle$1(theme) }, strings === null || strings === void 0 ? void 0 : strings.tagsSurveyQuestion)),
-        React.createElement(react.Pivot, null, Object.keys(tags).map((key, i) => {
+        React.createElement(react.Pivot, null, getKeys(tags).map((key, i) => {
             return (React.createElement(react.PivotItem, { key: `key-${i}`, headerText: categoryHeadings[key], headerButtonProps: {
                     'data-order': i,
                     'data-title': key
@@ -19765,22 +20079,18 @@ const _CaptionsSettingsModal = (props) => {
     const theme = react.useTheme();
     const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = React.useState(false);
     const [selectedSpokenLanguage, setSelectedSpokenLanguage] = React.useState({
-        key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,
-        text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage
+        key: currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : defaultSpokenLanguage,
+        text: currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : defaultSpokenLanguage
     });
     const [selectedCaptionLanguage, setSelectedCaptionLanguage] = React.useState({
-        key: currentCaptionLanguage !== ''
-            ? currentCaptionLanguage
-            : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],
-        text: currentCaptionLanguage !== ''
-            ? currentCaptionLanguage
-            : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]
+        key: currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],
+        text: currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]
     });
     React.useEffect(() => {
         // set spoken language when start captions with a spoken language specified.
         // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
         if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {
-            onSetSpokenLanguage(selectedSpokenLanguage.key.toString());
+            onSetSpokenLanguage(selectedSpokenLanguage.key);
             // we only need to call set spoken language once when first starting captions
             setHasSetSpokenLanguage(true);
         }
@@ -19791,8 +20101,8 @@ const _CaptionsSettingsModal = (props) => {
         }
     }, [onDismissCaptionsSettings]);
     const onConfirm = React.useCallback(() => __awaiter$v(void 0, void 0, void 0, function* () {
-        const spokenLanguageCode = selectedSpokenLanguage.key.toString();
-        const captionLanguageCode = selectedCaptionLanguage.key.toString();
+        const spokenLanguageCode = selectedSpokenLanguage.key;
+        const captionLanguageCode = selectedCaptionLanguage.key;
         if (isCaptionsFeatureActive) {
             onSetSpokenLanguage(spokenLanguageCode);
             onSetCaptionLanguage(captionLanguageCode);
@@ -19848,15 +20158,13 @@ const _CaptionsSettingsModal = (props) => {
         preventDismissOnEvent: _preventDismissOnEvent
     }), []);
     const CaptionsSettingsComponent = React.useCallback(() => {
-        const placeholderSpokenLanguage = currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage;
-        const placeholderCaptionLanguage = currentCaptionLanguage !== ''
-            ? currentCaptionLanguage
-            : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];
+        const placeholderSpokenLanguage = currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : defaultSpokenLanguage;
+        const placeholderCaptionLanguage = currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];
         return (React.createElement(react.Stack, null,
-            React.createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, selectedKey: selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined, onChange: onSpokenLanguageChange, calloutProps: calloutProps, placeholder: placeholderSpokenLanguage, options: sortedSpokenLanguageDropdownOptions, styles: dropdownStyles }),
+            React.createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, selectedKey: selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined, onChange: (ev, option) => onSpokenLanguageChange(ev, option), calloutProps: calloutProps, placeholder: placeholderSpokenLanguage, options: sortedSpokenLanguageDropdownOptions, styles: dropdownStyles }),
             React.createElement(react.Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText),
             changeCaptionLanguage && (React.createElement(React.Fragment, null,
-                React.createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, selectedKey: selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined, onChange: onCaptionLanguageChange, calloutProps: calloutProps, placeholder: placeholderCaptionLanguage, options: sortedCaptionLanguageDropdownOptions, styles: dropdownStyles }),
+                React.createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, selectedKey: selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined, onChange: (ev, option) => onCaptionLanguageChange(ev, option), calloutProps: calloutProps, placeholder: placeholderCaptionLanguage, options: sortedCaptionLanguageDropdownOptions, styles: dropdownStyles }),
                 React.createElement(react.Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText)))));
     }, [
         calloutProps,
@@ -19894,7 +20202,10 @@ const _CaptionsSettingsModal = (props) => {
  */
 const createComponentStrings = (localizedStrings) => {
     const strings = Object.assign({}, en_US$1);
-    Object.keys(localizedStrings).forEach((key) => {
+    getKeys(localizedStrings).forEach((key) => {
+        // mark the value as unknown because the type changes based on the key.
+        // this is unsafe at runtime as we could assign the wrong type based on the key here.
+        // but typescript isn't smart enough to know that the key used across each access will result in the same type
         strings[key] = Object.assign(Object.assign({}, strings[key]), localizedStrings[key]);
     });
     return strings;
@@ -20160,7 +20471,7 @@ const memoizedConvertToVideoTileReaction = memoizeOne((reactionState) => {
     return reactionState && reactionState.reactionMessage
         ? {
             reactionType: reactionState.reactionMessage.reactionType,
-            receivedAt: reactionState.receivedAt
+            receivedOn: reactionState.receivedOn
         }
         : undefined;
 });
@@ -20186,7 +20497,8 @@ const _dominantSpeakersWithFlatId = (dominantSpeakers) => {
     return (_a = dominantSpeakers === null || dominantSpeakers === void 0 ? void 0 : dominantSpeakers.speakersList) === null || _a === void 0 ? void 0 : _a.map(toFlatCommunicationIdentifier);
 };
 /** @internal */
-const _videoGalleryRemoteParticipantsMemo = (remoteParticipants, isHideAttendeeNamesEnabled, localUserRole) => {
+const _videoGalleryRemoteParticipantsMemo = (remoteParticipants, isHideAttendeeNamesEnabled, 
+/* @conditional-compile-remove(hide-attendee-name) */ localUserRole) => {
     if (!remoteParticipants) {
         return [];
     }
@@ -20222,7 +20534,7 @@ const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpe
 raisedHand, // temp unknown type to build stable
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
-/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(spotlight) */
 spotlight // temp unknown type to build stable
 ) => {
     return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName, 
@@ -20230,7 +20542,7 @@ spotlight // temp unknown type to build stable
     raisedHand, 
     /* @conditional-compile-remove(reaction) */
     reaction, 
-    /* @conditional-compile-remove(reaction) */
+    /* @conditional-compile-remove(spotlight) */
     spotlight);
 });
 /** @private */
@@ -20239,7 +20551,7 @@ const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted
 raisedHand, // temp unknown type to build stable
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
-/* @conditional-compile-remove(reaction) */
+/* @conditional-compile-remove(spotlight) */
 spotlight // temp unknown type to build stable
 ) => {
     const rawVideoStreamsArray = Object.values(videoStreams);
@@ -21981,7 +22293,7 @@ class ResourceDownloadQueue {
                     message.resourceCache = {};
                 }
                 for (const attachment of attachments) {
-                    if (attachment.previewUrl) {
+                    if (attachment.previewUrl && attachment.attachmentType === 'image') {
                         const blobUrl = yield operation(attachment.previewUrl, this._credential);
                         message.resourceCache[attachment.previewUrl] = blobUrl;
                     }
@@ -24851,7 +25163,7 @@ const ChatScreen = (props) => {
                     if (e.key === 'Enter') {
                         onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId);
                     }
-                } }, defaultOnRender(inlineImage)));
+                }, style: { cursor: 'pointer' } }, defaultOnRender(inlineImage)));
         }
     };
     /* @conditional-compile-remove(image-overlay) */
@@ -25326,7 +25638,7 @@ const getEndedCallPageProps = (locale, endedCall) => {
  */
 const getCallCompositePage = (call, previousCall, transferCall, unsupportedBrowserInfo) => {
     /* @conditional-compile-remove(unsupported-browser) */
-    if (isUnsupportedEnvironment(unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
+    if (isUnsupportedEnvironment(unsupportedBrowserInfo === null || unsupportedBrowserInfo === void 0 ? void 0 : unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo === null || unsupportedBrowserInfo === void 0 ? void 0 : unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
         return 'unsupportedEnvironment';
     }
     /* @conditional-compile-remove(call-transfer) */
@@ -25624,8 +25936,8 @@ const createCompositeHandlers = memoizeOne((adapter) => {
                 : yield adapter.raiseHand();
         }),
         /* @conditional-compile-remove(reaction) */
-        onReactionClicked: (reaction) => __awaiter$j(void 0, void 0, void 0, function* () {
-            yield adapter.onReactionClicked(reaction);
+        onReactionClick: (reaction) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.onReactionClick(reaction);
         }),
         onSelectCamera: (deviceInfo, options) => __awaiter$j(void 0, void 0, void 0, function* () {
             yield adapter.setCamera(deviceInfo, options);
@@ -27926,7 +28238,7 @@ const inferCallWithChatControlOptions = (callWithChatControls) => {
 };
 /** @private */
 const MoreDrawer = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     /* @conditional-compile-remove(close-captions) */
     const theme = react.useTheme();
     /* @conditional-compile-remove(rooms) */
@@ -28158,11 +28470,9 @@ const MoreDrawer = (props) => {
     /* @conditional-compile-remove(close-captions) */
     const [isCaptionLanguageDrawerOpen, setIsCaptionLanguageDrawerOpen] = React.useState(false);
     /* @conditional-compile-remove(close-captions) */
-    const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState(captionSettingsProp.currentSpokenLanguage !== '' ? captionSettingsProp.currentSpokenLanguage : 'en-us');
+    const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState((_f = captionSettingsProp.currentSpokenLanguage) !== null && _f !== void 0 ? _f : 'en-us');
     /* @conditional-compile-remove(close-captions) */
-    const [currentCaptionLanguage, setCurrentCaptionLanguage] = React.useState(captionSettingsProp.currentCaptionLanguage !== ''
-        ? captionSettingsProp.currentCaptionLanguage
-        : _spokenLanguageToCaptionLanguage[currentSpokenLanguage]);
+    const [currentCaptionLanguage, setCurrentCaptionLanguage] = React.useState((_g = captionSettingsProp.currentCaptionLanguage) !== null && _g !== void 0 ? _g : _spokenLanguageToCaptionLanguage[currentSpokenLanguage]);
     /* @conditional-compile-remove(close-captions) */
     const onToggleChange = React.useCallback(() => __awaiter$g(void 0, void 0, void 0, function* () {
         if (!captionSettingsProp.isCaptionsFeatureActive) {
@@ -29505,10 +29815,10 @@ const LocalAndRemotePIP = (props) => {
     }), [ariaLabel]);
     // If there are no remote participants, show the local participant as the primary tile
     const primaryTileProps = React.useMemo(() => ({
-        children: remoteVideoTileProps ? (React.createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps))) : (React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps))),
+        children: remoteVideoTileProps ? (React.createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps, { strings: locale.component.strings.videoGallery }))) : (React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps))),
         // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
         orientation: 'portrait'
-    }), [localVideoTileProps, remoteVideoTileProps]);
+    }), [localVideoTileProps, remoteVideoTileProps, locale.component.strings.videoGallery]);
     // If we are showing the local participant as the primary tile, show nothing for the secondary tile
     const secondaryTileProps = React.useMemo(() => remoteVideoTileProps
         ? {
@@ -29691,6 +30001,7 @@ const ModalLocalAndRemotePIP = (props) => {
     const adapter = useAdapter();
     /* @conditional-compile-remove(rooms) */
     const role = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
+    const locale = useLocale();
     const pictureInPictureProps = useSelector$1(localAndRemotePIPSelector);
     const [touchStartTouches, setTouchStartTouches] = React.useState(null);
     const onTouchEnd = React.useCallback((event) => {
@@ -29719,7 +30030,7 @@ const ModalLocalAndRemotePIP = (props) => {
         /* @conditional-compile-remove(rooms) */
         if (role === 'Consumer' && ((_a = pictureInPictureProps.dominantRemoteParticipant) === null || _a === void 0 ? void 0 : _a.userId)) {
             return (React.createElement(react.Stack, { tabIndex: 0, "aria-label": (_c = (_b = props.strings) === null || _b === void 0 ? void 0 : _b.dismissModalAriaLabel) !== null && _c !== void 0 ? _c : '', onKeyDown: onKeyDown },
-                React.createElement(_RemoteVideoTile, Object.assign({}, pictureInPictureProps.dominantRemoteParticipant, { remoteParticipant: pictureInPictureProps.dominantRemoteParticipant }))));
+                React.createElement(_RemoteVideoTile, Object.assign({ strings: locale.component.strings.videoGallery }, pictureInPictureProps.dominantRemoteParticipant, { remoteParticipant: pictureInPictureProps.dominantRemoteParticipant }))));
         }
         return (React.createElement(react.Stack, { tabIndex: 0, "aria-label": (_e = (_d = props.strings) === null || _d === void 0 ? void 0 : _d.dismissModalAriaLabel) !== null && _e !== void 0 ? _e : '', onKeyDown: onKeyDown },
             React.createElement(LocalAndRemotePIP, Object.assign({}, pictureInPictureProps, pictureInPictureHandlers))));
@@ -29728,7 +30039,8 @@ const ModalLocalAndRemotePIP = (props) => {
         onKeyDown,
         pictureInPictureProps,
         props,
-        pictureInPictureHandlers
+        pictureInPictureHandlers,
+        locale.component.strings.videoGallery
     ]);
     /* @conditional-compile-remove(rooms) */
     if (role === 'Consumer' && !pictureInPictureProps.dominantRemoteParticipant) {
@@ -33830,7 +34142,7 @@ class AzureCommunicationCallAdapter {
         /* @conditional-compile-remove(raise-hand) */
         this.raiseHand.bind(this);
         /* @conditional-compile-remove(reaction) */
-        this.onReactionClicked.bind(this);
+        this.onReactionClick.bind(this);
         this.lowerHand.bind(this);
         this.removeParticipant.bind(this);
         this.createStreamView.bind(this);
@@ -34024,6 +34336,10 @@ class AzureCommunicationCallAdapter {
     }
     leaveCall(forEveryone) {
         return __awaiter$5(this, void 0, void 0, function* () {
+            if (this.getState().page === 'transferring') {
+                const transferCall = this.callAgent.calls.filter((call) => { var _a; return call.id === ((_a = this.getState().acceptedTransferCallState) === null || _a === void 0 ? void 0 : _a.id); })[0];
+                transferCall === null || transferCall === void 0 ? void 0 : transferCall.hangUp();
+            }
             yield this.handlers.onHangUp(forEveryone);
             this.unsubscribeCallEvents();
             this.handlers = createHandlers(this.callClient, this.callAgent, this.deviceManager, this.call, 
@@ -34152,10 +34468,10 @@ class AzureCommunicationCallAdapter {
         });
     }
     /* @conditional-compile-remove(reaction) */
-    onReactionClicked(reaction) {
+    onReactionClick(reaction) {
         return __awaiter$5(this, void 0, void 0, function* () {
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
-                yield this.handlers.onReactionClicked(reaction);
+                yield this.handlers.onReactionClick(reaction);
             }));
         });
     }
@@ -34998,7 +35314,7 @@ class CallWithChatBackedCallAdapter {
         /* @conditional-compile-remove(raise-hand) */
         this.lowerHand = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.lowerHand(); });
         /* @conditional-compile-remove(reaction) */
-        this.onReactionClicked = (reaction) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.onReactionClicked(reaction); });
+        this.onReactionClick = (reaction) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.onReactionClick(reaction); });
         this.removeParticipant = (userId) => __awaiter$4(this, void 0, void 0, function* () {
             let participant = userId;
             /* @conditional-compile-remove(PSTN-calls) */
@@ -35864,7 +36180,7 @@ class AzureCommunicationCallWithChatAdapter {
         /* @conditional-compile-remove(raise-hand) */
         this.lowerHand.bind(this);
         /* @conditional-compile-remove(reaction) */
-        this.onReactionClicked.bind(this);
+        this.onReactionClick.bind(this);
         this.removeParticipant.bind(this);
         this.createStreamView.bind(this);
         this.disposeStreamView.bind(this);
@@ -36072,9 +36388,9 @@ class AzureCommunicationCallWithChatAdapter {
         });
     }
     /* @conditional-compile-remove(reaction) */
-    onReactionClicked(reaction) {
+    onReactionClick(reaction) {
         return __awaiter$2(this, void 0, void 0, function* () {
-            yield this.callAdapter.onReactionClicked(reaction);
+            yield this.callAdapter.onReactionClick(reaction);
         });
     }
     /** Create a stream view for a remote participants video feed. */