npm - @azure/communication-react - Versions diffs - 1.17.0-alpha-202405290014 → 1.17.0-alpha-202405310013 - Mend

@azure/communication-react 1.17.0-alpha-202405290014 → 1.17.0-alpha-202405310013

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/dist/dist-esm/calling-stateful-client/src/Converter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Converter.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/Converter.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n RemoteParticipant as SdkRemoteParticipant,\n RemoteVideoStream as SdkRemoteVideoStream,\n LocalVideoStream as SdkLocalVideoStream,\n VideoStreamRendererView\n} from '@azure/communication-calling';\nimport { TeamsCaptionsInfo } from '@azure/communication-calling';\n/* @conditional-compile-remove(acs-close-captions) /\nimport { CaptionsInfo as AcsCaptionsInfo } from '@azure/communication-calling';\n/ @conditional-compile-remove(teams-identity-support) /\nimport { CallKind } from '@azure/communication-calling';\n/ @conditional-compile-remove(meeting-id) /\nimport { TeamsCallInfo } from '@azure/communication-calling';\n/ @conditional-compile-remove(calling-beta-sdk) /\nimport { CallInfo } from '@azure/communication-calling';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n CallState,\n RemoteParticipantState as DeclarativeRemoteParticipant,\n RemoteVideoStreamState as DeclarativeRemoteVideoStream,\n LocalVideoStreamState as DeclarativeLocalVideoStream,\n IncomingCallState as DeclarativeIncomingCall,\n VideoStreamRendererViewState as DeclarativeVideoStreamRendererView\n} from './CallClientState';\nimport { CaptionsInfo } from './CallClientState';\n\n/ @conditional-compile-remove(teams-identity-support) / / @conditional-compile-remove(meeting-id) /\nimport { _isACSCall } from './TypeGuards';\n/ @conditional-compile-remove(meeting-id) / / @conditional-compile-remove(acs-close-captions) /\nimport { _isTeamsCall } from './TypeGuards';\nimport { CallCommon, IncomingCallCommon } from './BetaToStableTypes';\n\nimport { Features } from '@azure/communication-calling';\n\nimport { VideoEffectName } from '@azure/communication-calling';\n\nimport { LocalVideoStreamVideoEffectsState } from './CallClientState';\nimport { RaisedHand } from '@azure/communication-calling';\nimport { RaisedHandState } from './CallClientState';\n\n/\n @private\n /\nexport function convertSdkLocalStreamToDeclarativeLocalStream(\n stream: SdkLocalVideoStream\n): DeclarativeLocalVideoStream {\n const localVideoStreamEffectsAPI = stream.feature(Features.VideoEffects);\n\n return {\n source: stream.source,\n mediaStreamType: stream.mediaStreamType,\n view: undefined,\n\n videoEffects: convertFromSDKToDeclarativeVideoStreamVideoEffects(localVideoStreamEffectsAPI.activeEffects)\n };\n}\n\n/\n @private\n /\nexport function convertSdkRemoteStreamToDeclarativeRemoteStream(\n stream: SdkRemoteVideoStream\n): DeclarativeRemoteVideoStream {\n return {\n id: stream.id,\n mediaStreamType: stream.mediaStreamType,\n isAvailable: stream.isAvailable,\n / @conditional-compile-remove(video-stream-is-receiving-flag) /\n isReceiving: stream.isReceiving,\n view: undefined,\n streamSize: stream.size\n };\n}\n\n/\n @private\n /\nexport function convertSdkParticipantToDeclarativeParticipant(\n participant: SdkRemoteParticipant\n): DeclarativeRemoteParticipant {\n const declarativeVideoStreams: { [key: number]: DeclarativeRemoteVideoStream } = {};\n for (const videoStream of participant.videoStreams) {\n declarativeVideoStreams[videoStream.id] = convertSdkRemoteStreamToDeclarativeRemoteStream(videoStream);\n }\n return {\n identifier: participant.identifier,\n displayName: participant.displayName,\n state: participant.state,\n callEndReason: participant.callEndReason,\n videoStreams: declarativeVideoStreams,\n isMuted: participant.isMuted,\n isSpeaking: participant.isSpeaking,\n raisedHand: undefined,\n / @conditional-compile-remove(hide-attendee-name) /\n role: participant.role,\n / @conditional-compile-remove(spotlight) /\n spotlight: undefined\n };\n}\n\n/\n @private\n \n Note at the time of writing only one LocalVideoStream is supported by the SDK.\n /\nexport function convertSdkCallToDeclarativeCall(call: CallCommon): CallState {\n const declarativeRemoteParticipants: { [key: string]: DeclarativeRemoteParticipant } = {};\n call.remoteParticipants.forEach((participant: SdkRemoteParticipant) => {\n declarativeRemoteParticipants[toFlatCommunicationIdentifier(participant.identifier)] =\n convertSdkParticipantToDeclarativeParticipant(participant);\n });\n / @conditional-compile-remove(hide-attendee-name) /\n let hideAttendeeNames = false;\n / @conditional-compile-remove(hide-attendee-name) /\n if (\n call.feature(Features.Capabilities).capabilities &&\n call.feature(Features.Capabilities).capabilities.viewAttendeeNames\n ) {\n const viewAttendeeNames = call.feature(Features.Capabilities).capabilities.viewAttendeeNames;\n if (!viewAttendeeNames.isPresent && viewAttendeeNames.reason === 'MeetingRestricted') {\n hideAttendeeNames = true;\n }\n }\n\n let callInfo: TeamsCallInfo \| undefined \| / @conditional-compile-remove(calling-beta-sdk) / CallInfo;\n if ('info' in call) {\n callInfo = call.info as TeamsCallInfo \| undefined \| / @conditional-compile-remove(calling-beta-sdk) / CallInfo;\n }\n\n return {\n id: call.id,\n / @conditional-compile-remove(teams-identity-support) /\n kind: _isACSCall(call) ? ('Call' as CallKind) : ('TeamsCall' as CallKind),\n callerInfo: call.callerInfo,\n state: call.state,\n callEndReason: call.callEndReason,\n diagnostics: {\n network: {\n latest: {}\n },\n media: {\n latest: {}\n }\n },\n direction: call.direction,\n isMuted: call.isMuted,\n isScreenSharingOn: call.isScreenSharingOn,\n localVideoStreams: call.localVideoStreams.map(convertSdkLocalStreamToDeclarativeLocalStream),\n remoteParticipants: declarativeRemoteParticipants,\n remoteParticipantsEnded: {},\n recording: { isRecordingActive: false },\n / @conditional-compile-remove(local-recording-notification) /\n localRecording: { isLocalRecordingActive: false },\n pptLive: { isActive: false },\n raiseHand: { raisedHands: [] },\n localParticipantReaction: undefined,\n transcription: { isTranscriptionActive: false },\n screenShareRemoteParticipant: undefined,\n startTime: new Date(),\n endTime: undefined,\n role: call.role,\n captionsFeature: {\n captions: [],\n supportedSpokenLanguages: [],\n supportedCaptionLanguages: [],\n currentCaptionLanguage: '',\n currentSpokenLanguage: '',\n isCaptionsFeatureActive: false,\n startCaptionsInProgress: false,\n / @conditional-compile-remove(acs-close-captions) /\n captionsKind: _isTeamsCall(call) ? 'TeamsCaptions' : 'Captions'\n },\n transfer: {\n acceptedTransfers: {}\n },\n optimalVideoCount: {\n maxRemoteVideoStreams: call.feature(Features.OptimalVideoCount).optimalVideoCount\n },\n / @conditional-compile-remove(hide-attendee-name) /\n hideAttendeeNames,\n / @conditional-compile-remove(meeting-id) /\n info: callInfo\n };\n}\n\n/\n @private\n /\nexport function convertSdkIncomingCallToDeclarativeIncomingCall(call: IncomingCallCommon): DeclarativeIncomingCall {\n return {\n id: call.id,\n callerInfo: call.callerInfo,\n startTime: new Date(),\n endTime: undefined\n };\n}\n\n/\n @private\n /\nexport function convertFromSDKToDeclarativeVideoStreamRendererView(\n view: VideoStreamRendererView\n): DeclarativeVideoStreamRendererView {\n return {\n scalingMode: view.scalingMode,\n isMirrored: view.isMirrored,\n target: view.target\n };\n}\n\n/\n @private\n /\nexport function convertFromTeamsSDKToCaptionInfoState(caption: TeamsCaptionsInfo): CaptionsInfo {\n return {\n ...caption\n };\n}\n\n/ @conditional-compile-remove(acs-close-captions) /\n/\n @private\n /\nexport function convertFromSDKToCaptionInfoState(caption: AcsCaptionsInfo): CaptionsInfo {\n return {\n captionText: caption.spokenText,\n ...caption\n };\n}\n\n/* @private /\nexport function convertFromSDKToDeclarativeVideoStreamVideoEffects(\n videoEffects: VideoEffectName[]\n): LocalVideoStreamVideoEffectsState {\n return {\n activeEffects: videoEffects\n };\n}\n\n/\n @private\n */\nexport function convertFromSDKToRaisedHandState(raisedHand: RaisedHand): RaisedHandState {\n return {\n raisedHandOrderPosition: raisedHand.order\n };\n}\n"]}
1	+ {"version":3,"file":"Converter.js","sourceRoot":"","sources":["../../../../../calling-stateful-client/src/Converter.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n RemoteParticipant as SdkRemoteParticipant,\n RemoteVideoStream as SdkRemoteVideoStream,\n LocalVideoStream as SdkLocalVideoStream,\n VideoStreamRendererView\n} from '@azure/communication-calling';\nimport { TeamsCaptionsInfo } from '@azure/communication-calling';\n/* @conditional-compile-remove(acs-close-captions) /\nimport { CaptionsInfo as AcsCaptionsInfo } from '@azure/communication-calling';\n/ @conditional-compile-remove(teams-identity-support) /\nimport { CallKind } from '@azure/communication-calling';\n/ @conditional-compile-remove(meeting-id) /\nimport { TeamsCallInfo } from '@azure/communication-calling';\n/ @conditional-compile-remove(calling-beta-sdk) /\nimport { CallInfo } from '@azure/communication-calling';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n CallState,\n RemoteParticipantState as DeclarativeRemoteParticipant,\n RemoteVideoStreamState as DeclarativeRemoteVideoStream,\n LocalVideoStreamState as DeclarativeLocalVideoStream,\n IncomingCallState as DeclarativeIncomingCall,\n VideoStreamRendererViewState as DeclarativeVideoStreamRendererView\n} from './CallClientState';\nimport { CaptionsInfo } from './CallClientState';\n\n/ @conditional-compile-remove(teams-identity-support) / / @conditional-compile-remove(meeting-id) /\nimport { _isACSCall } from './TypeGuards';\n/ @conditional-compile-remove(meeting-id) / / @conditional-compile-remove(acs-close-captions) /\nimport { _isTeamsCall } from './TypeGuards';\nimport { CallCommon, IncomingCallCommon } from './BetaToStableTypes';\n\nimport { Features } from '@azure/communication-calling';\n\nimport { VideoEffectName } from '@azure/communication-calling';\n\nimport { LocalVideoStreamVideoEffectsState } from './CallClientState';\nimport { RaisedHand } from '@azure/communication-calling';\nimport { RaisedHandState } from './CallClientState';\n\n/\n @private\n /\nexport function convertSdkLocalStreamToDeclarativeLocalStream(\n stream: SdkLocalVideoStream\n): DeclarativeLocalVideoStream {\n const localVideoStreamEffectsAPI = stream.feature(Features.VideoEffects);\n\n return {\n source: stream.source,\n mediaStreamType: stream.mediaStreamType,\n view: undefined,\n\n videoEffects: convertFromSDKToDeclarativeVideoStreamVideoEffects(localVideoStreamEffectsAPI.activeEffects)\n };\n}\n\n/\n @private\n /\nexport function convertSdkRemoteStreamToDeclarativeRemoteStream(\n stream: SdkRemoteVideoStream\n): DeclarativeRemoteVideoStream {\n return {\n id: stream.id,\n mediaStreamType: stream.mediaStreamType,\n isAvailable: stream.isAvailable,\n / @conditional-compile-remove(video-stream-is-receiving-flag) /\n isReceiving: stream.isReceiving,\n view: undefined,\n streamSize: stream.size\n };\n}\n\n/\n @private\n /\nexport function convertSdkParticipantToDeclarativeParticipant(\n participant: SdkRemoteParticipant\n): DeclarativeRemoteParticipant {\n const declarativeVideoStreams: { [key: number]: DeclarativeRemoteVideoStream } = {};\n for (const videoStream of participant.videoStreams) {\n declarativeVideoStreams[videoStream.id] = convertSdkRemoteStreamToDeclarativeRemoteStream(videoStream);\n }\n return {\n identifier: participant.identifier,\n displayName: participant.displayName,\n state: participant.state,\n callEndReason: participant.callEndReason,\n videoStreams: declarativeVideoStreams,\n isMuted: participant.isMuted,\n isSpeaking: participant.isSpeaking,\n raisedHand: undefined,\n / @conditional-compile-remove(hide-attendee-name) /\n role: participant.role,\n / @conditional-compile-remove(spotlight) /\n spotlight: undefined\n };\n}\n\n/\n @private\n \n Note at the time of writing only one LocalVideoStream is supported by the SDK.\n /\nexport function convertSdkCallToDeclarativeCall(call: CallCommon): CallState {\n const declarativeRemoteParticipants: { [key: string]: DeclarativeRemoteParticipant } = {};\n call.remoteParticipants.forEach((participant: SdkRemoteParticipant) => {\n declarativeRemoteParticipants[toFlatCommunicationIdentifier(participant.identifier)] =\n convertSdkParticipantToDeclarativeParticipant(participant);\n });\n / @conditional-compile-remove(hide-attendee-name) /\n let hideAttendeeNames = false;\n / @conditional-compile-remove(hide-attendee-name) /\n if (\n call.feature(Features.Capabilities).capabilities &&\n call.feature(Features.Capabilities).capabilities.viewAttendeeNames\n ) {\n const viewAttendeeNames = call.feature(Features.Capabilities).capabilities.viewAttendeeNames;\n if (!viewAttendeeNames.isPresent && viewAttendeeNames.reason === 'MeetingRestricted') {\n hideAttendeeNames = true;\n }\n }\n\n let callInfo: TeamsCallInfo \| undefined \| / @conditional-compile-remove(calling-beta-sdk) / CallInfo;\n if ('info' in call) {\n callInfo = call.info as TeamsCallInfo \| undefined \| / @conditional-compile-remove(calling-beta-sdk) / CallInfo;\n }\n\n return {\n id: call.id,\n / @conditional-compile-remove(teams-identity-support) /\n kind: _isACSCall(call) ? ('Call' as CallKind) : ('TeamsCall' as CallKind),\n callerInfo: call.callerInfo,\n state: call.state,\n callEndReason: call.callEndReason,\n diagnostics: {\n network: {\n latest: {}\n },\n media: {\n latest: {}\n }\n },\n direction: call.direction,\n isMuted: call.isMuted,\n isScreenSharingOn: call.isScreenSharingOn,\n localVideoStreams: call.localVideoStreams.map(convertSdkLocalStreamToDeclarativeLocalStream),\n remoteParticipants: declarativeRemoteParticipants,\n remoteParticipantsEnded: {},\n recording: { isRecordingActive: false },\n / @conditional-compile-remove(local-recording-notification) /\n localRecording: { isLocalRecordingActive: false },\n pptLive: { isActive: false },\n raiseHand: { raisedHands: [] },\n localParticipantReaction: undefined,\n transcription: { isTranscriptionActive: false },\n screenShareRemoteParticipant: undefined,\n startTime: new Date(),\n endTime: undefined,\n role: call.role,\n captionsFeature: {\n captions: [],\n supportedSpokenLanguages: [],\n supportedCaptionLanguages: [],\n currentCaptionLanguage: '',\n currentSpokenLanguage: '',\n isCaptionsFeatureActive: false,\n startCaptionsInProgress: false,\n / @conditional-compile-remove(acs-close-captions) /\n captionsKind: _isTeamsCall(call) ? 'TeamsCaptions' : 'Captions'\n },\n transfer: {\n acceptedTransfers: {}\n },\n optimalVideoCount: {\n maxRemoteVideoStreams: call.feature(Features.OptimalVideoCount).optimalVideoCount\n },\n / @conditional-compile-remove(hide-attendee-name) /\n hideAttendeeNames,\n / @conditional-compile-remove(meeting-id) /\n info: callInfo,\n / @conditional-compile-remove(teams-meeting-conference) /\n teamsMeetingConference: undefined\n };\n}\n\n/\n @private\n /\nexport function convertSdkIncomingCallToDeclarativeIncomingCall(call: IncomingCallCommon): DeclarativeIncomingCall {\n return {\n id: call.id,\n callerInfo: call.callerInfo,\n startTime: new Date(),\n endTime: undefined\n };\n}\n\n/\n @private\n /\nexport function convertFromSDKToDeclarativeVideoStreamRendererView(\n view: VideoStreamRendererView\n): DeclarativeVideoStreamRendererView {\n return {\n scalingMode: view.scalingMode,\n isMirrored: view.isMirrored,\n target: view.target\n };\n}\n\n/\n @private\n /\nexport function convertFromTeamsSDKToCaptionInfoState(caption: TeamsCaptionsInfo): CaptionsInfo {\n return {\n ...caption\n };\n}\n\n/ @conditional-compile-remove(acs-close-captions) /\n/\n @private\n /\nexport function convertFromSDKToCaptionInfoState(caption: AcsCaptionsInfo): CaptionsInfo {\n return {\n captionText: caption.spokenText,\n ...caption\n };\n}\n\n/* @private /\nexport function convertFromSDKToDeclarativeVideoStreamVideoEffects(\n videoEffects: VideoEffectName[]\n): LocalVideoStreamVideoEffectsState {\n return {\n activeEffects: videoEffects\n };\n}\n\n/\n @private\n */\nexport function convertFromSDKToRaisedHandState(raisedHand: RaisedHand): RaisedHandState {\n return {\n raisedHandOrderPosition: raisedHand.order\n };\n}\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageActionsFlyout.js CHANGED Viewed

@@ -32,7 +32,16 @@ export const ChatMessageActionFlyout = (props) => {
             key: person.displayName,
             text: person.displayName,
             itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },
-            onRenderIcon: () => { var _a; return onRenderAvatar ? onRenderAvatar((_a = person.id) !== null && _a !== void 0 ? _a : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions)); },
+            onRenderIcon: () => {
+                var _a;
+                if (onRenderAvatar) {
+                    const rendered = onRenderAvatar((_a = person.id) !== null && _a !== void 0 ? _a : '', personaOptions);
+                    if (rendered) {
+                        return rendered;
+                    }
+                }
+                return React.createElement(Persona, Object.assign({}, personaOptions));
+            },
             iconProps: {
                 styles: menuIconStyleSet
             }

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageActionsFlyout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageActionsFlyout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageActionsFlyout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n concatStyleSets,\n ContextualMenu,\n DirectionalHint,\n IContextualMenuItem,\n IPersona,\n Persona,\n PersonaSize,\n Target,\n useTheme\n} from '@fluentui/react';\nimport { _pxToRem, _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback } from '../../types';\nimport { MessageThreadStrings } from '../MessageThread';\nimport {\n chatMessageMenuStyle,\n menuIconStyleSet,\n menuItemIncreasedSizeStyles,\n menuSubIconStyleSet\n} from '../styles/ChatMessageComponent.styles';\n\n/** @private /\nexport interface ChatMessageActionFlyoutProps {\n target?: Target;\n hidden: boolean;\n strings: MessageThreadStrings;\n onEditClick?: () => void;\n onRemoveClick?: () => void;\n onResendClick?: () => void;\n onDismiss: () => void;\n messageReadBy?: { id: string; displayName: string }[];\n remoteParticipantsCount?: number;\n messageStatus?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n /\n Increase the height of the flyout items.\n * Recommended when interacting with the chat message using touch.\n /\n increaseFlyoutItemSize: boolean;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/\n Chat message actions flyout that contains actions such as Edit Message, or Remove Message.\n \n @private\n /\nexport const ChatMessageActionFlyout = (props: ChatMessageActionFlyoutProps): JSX.Element => {\n const theme = useTheme();\n const messageReadByCount = props.messageReadBy?.length;\n\n const sortedMessageReadyByList = [...(props.messageReadBy ?? [])].sort((a, b) =>\n a.displayName.localeCompare(b.displayName)\n );\n\n const messageReadByList: IContextualMenuItem[] \| undefined = sortedMessageReadyByList?.map((person) => {\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size24,\n text: person.displayName,\n showOverflowTooltip: false,\n styles: {\n root: {\n margin: '0.25rem'\n }\n }\n };\n const { onRenderAvatar } = props;\n return {\n 'data-ui-id': 'chat-composite-message-contextual-menu-read-name-list-item',\n key: person.displayName,\n text: person.displayName,\n itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },\n onRenderIcon: () =>\n onRenderAvatar ? onRenderAvatar(person.id ?? '', personaOptions) : <Persona {...personaOptions} />,\n iconProps: {\n styles: menuIconStyleSet\n }\n };\n });\n\n const menuItems = useMemo((): IContextualMenuItem[] => {\n const items: IContextualMenuItem[] = [\n {\n key: 'Edit',\n 'data-ui-id': 'chat-composite-message-contextual-menu-edit-action',\n text: props.strings.editMessage,\n itemProps: {\n styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n },\n iconProps: { iconName: 'MessageEdit', styles: menuIconStyleSet },\n onClick: props.onEditClick\n },\n {\n key: 'Remove',\n text: props.strings.removeMessage,\n itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },\n iconProps: {\n iconName: 'MessageRemove',\n styles: menuIconStyleSet\n },\n onClick: props.onRemoveClick\n }\n ];\n // only show read by x of x if more than 3 participants in total including myself\n // TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide\n if (\n props.remoteParticipantsCount &&\n messageReadByCount !== undefined &&\n props.remoteParticipantsCount >= 2 &&\n props.showMessageStatus &&\n props.strings.messageReadCount &&\n props.messageStatus !== 'failed'\n ) {\n items.push({\n key: 'Read Count',\n 'data-ui-id': 'chat-composite-message-contextual-menu-read-info',\n text: _formatString(props.strings.messageReadCount, {\n messageReadByCount: `${messageReadByCount}`,\n remoteParticipantsCount: `${props.remoteParticipantsCount}`\n }),\n itemProps: {\n styles: concatStyleSets(\n {\n linkContent: {\n color: messageReadByCount > 0 ? theme.palette.neutralPrimary : theme.palette.neutralTertiary\n },\n root: {\n borderTop: `1px solid ${theme.palette.neutralLighter}`\n }\n },\n props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n )\n },\n calloutProps: preventUnwantedDismissProps,\n subMenuProps: {\n items: messageReadByList ?? [],\n calloutProps: preventUnwantedDismissProps,\n styles: concatStyleSets({\n root: {\n maxWidth: _pxToRem(320),\n span: {\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n })\n },\n iconProps: {\n iconName: 'MessageSeen',\n styles: {\n root: {\n color: messageReadByCount > 0 ? theme.palette.themeDarkAlt : theme.palette.neutralTertiary\n }\n }\n },\n submenuIconProps: {\n iconName: 'HorizontalGalleryRightButton',\n styles: menuSubIconStyleSet\n },\n disabled: messageReadByCount <= 0\n });\n } else if (props.messageStatus === 'failed' && props.strings.resendMessage) {\n items.push({\n key: 'Resend',\n text: props.strings.resendMessage,\n itemProps: {\n styles: concatStyleSets(\n {\n linkContent: {\n color: theme.palette.neutralPrimary\n },\n root: {\n borderTop: `1px solid ${theme.palette.neutralLighter}`\n }\n },\n props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n )\n },\n calloutProps: preventUnwantedDismissProps,\n iconProps: {\n iconName: 'MessageResend',\n styles: {\n root: {\n color: theme.palette.themeDarkAlt\n }\n }\n },\n onClick: props.onResendClick\n });\n }\n\n return items;\n }, [\n props.strings.editMessage,\n props.strings.removeMessage,\n props.strings.messageReadCount,\n props.strings.resendMessage,\n props.messageStatus,\n props.increaseFlyoutItemSize,\n props.onEditClick,\n props.onRemoveClick,\n props.onResendClick,\n props.remoteParticipantsCount,\n props.showMessageStatus,\n messageReadByCount,\n theme.palette.neutralPrimary,\n theme.palette.neutralTertiary,\n theme.palette.neutralLighter,\n theme.palette.themeDarkAlt,\n messageReadByList\n ]);\n\n // gap space uses pixels\n return (\n <ContextualMenu\n alignTargetEdge={true}\n gapSpace={2 /px/}\n isBeakVisible={false}\n items={menuItems}\n hidden={props.hidden}\n target={props.target}\n onDismiss={props.onDismiss}\n directionalHint={DirectionalHint.topRightEdge}\n className={chatMessageMenuStyle}\n calloutProps={calloutMenuProps}\n />\n );\n};\n\n/\n Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.\n */\nconst preventUnwantedDismissProps = {\n preventDismissOnEvent: (ev: Event \| React.FocusEvent \| React.KeyboardEvent \| React.MouseEvent): boolean => {\n return ev.type === 'resize';\n }\n};\n\nconst calloutMenuProps = {\n ...preventUnwantedDismissProps,\n styles: { root: { marginRight: '3px' } }\n};\n"]}
1	+ {"version":3,"file":"ChatMessageActionsFlyout.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageActionsFlyout.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n concatStyleSets,\n ContextualMenu,\n DirectionalHint,\n IContextualMenuItem,\n IPersona,\n Persona,\n PersonaSize,\n Target,\n useTheme\n} from '@fluentui/react';\nimport { _pxToRem, _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { OnRenderAvatarCallback } from '../../types';\nimport { MessageThreadStrings } from '../MessageThread';\nimport {\n chatMessageMenuStyle,\n menuIconStyleSet,\n menuItemIncreasedSizeStyles,\n menuSubIconStyleSet\n} from '../styles/ChatMessageComponent.styles';\n\n/** @private /\nexport interface ChatMessageActionFlyoutProps {\n target?: Target;\n hidden: boolean;\n strings: MessageThreadStrings;\n onEditClick?: () => void;\n onRemoveClick?: () => void;\n onResendClick?: () => void;\n onDismiss: () => void;\n messageReadBy?: { id: string; displayName: string }[];\n remoteParticipantsCount?: number;\n messageStatus?: string;\n /\n Whether the status indicator for each message is displayed or not.\n /\n showMessageStatus?: boolean;\n /\n Increase the height of the flyout items.\n * Recommended when interacting with the chat message using touch.\n /\n increaseFlyoutItemSize: boolean;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/\n Chat message actions flyout that contains actions such as Edit Message, or Remove Message.\n \n @private\n /\nexport const ChatMessageActionFlyout = (props: ChatMessageActionFlyoutProps): JSX.Element => {\n const theme = useTheme();\n const messageReadByCount = props.messageReadBy?.length;\n\n const sortedMessageReadyByList = [...(props.messageReadBy ?? [])].sort((a, b) =>\n a.displayName.localeCompare(b.displayName)\n );\n\n const messageReadByList: IContextualMenuItem[] \| undefined = sortedMessageReadyByList?.map((person) => {\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size24,\n text: person.displayName,\n showOverflowTooltip: false,\n styles: {\n root: {\n margin: '0.25rem'\n }\n }\n };\n const { onRenderAvatar } = props;\n return {\n 'data-ui-id': 'chat-composite-message-contextual-menu-read-name-list-item',\n key: person.displayName,\n text: person.displayName,\n itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },\n onRenderIcon: () => {\n if (onRenderAvatar) {\n const rendered = onRenderAvatar(person.id ?? '', personaOptions);\n if (rendered) {\n return rendered;\n }\n }\n return <Persona {...personaOptions} />;\n },\n iconProps: {\n styles: menuIconStyleSet\n }\n };\n });\n\n const menuItems = useMemo((): IContextualMenuItem[] => {\n const items: IContextualMenuItem[] = [\n {\n key: 'Edit',\n 'data-ui-id': 'chat-composite-message-contextual-menu-edit-action',\n text: props.strings.editMessage,\n itemProps: {\n styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n },\n iconProps: { iconName: 'MessageEdit', styles: menuIconStyleSet },\n onClick: props.onEditClick\n },\n {\n key: 'Remove',\n text: props.strings.removeMessage,\n itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },\n iconProps: {\n iconName: 'MessageRemove',\n styles: menuIconStyleSet\n },\n onClick: props.onRemoveClick\n }\n ];\n // only show read by x of x if more than 3 participants in total including myself\n // TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide\n if (\n props.remoteParticipantsCount &&\n messageReadByCount !== undefined &&\n props.remoteParticipantsCount >= 2 &&\n props.showMessageStatus &&\n props.strings.messageReadCount &&\n props.messageStatus !== 'failed'\n ) {\n items.push({\n key: 'Read Count',\n 'data-ui-id': 'chat-composite-message-contextual-menu-read-info',\n text: _formatString(props.strings.messageReadCount, {\n messageReadByCount: `${messageReadByCount}`,\n remoteParticipantsCount: `${props.remoteParticipantsCount}`\n }),\n itemProps: {\n styles: concatStyleSets(\n {\n linkContent: {\n color: messageReadByCount > 0 ? theme.palette.neutralPrimary : theme.palette.neutralTertiary\n },\n root: {\n borderTop: `1px solid ${theme.palette.neutralLighter}`\n }\n },\n props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n )\n },\n calloutProps: preventUnwantedDismissProps,\n subMenuProps: {\n items: messageReadByList ?? [],\n calloutProps: preventUnwantedDismissProps,\n styles: concatStyleSets({\n root: {\n maxWidth: _pxToRem(320),\n span: {\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n })\n },\n iconProps: {\n iconName: 'MessageSeen',\n styles: {\n root: {\n color: messageReadByCount > 0 ? theme.palette.themeDarkAlt : theme.palette.neutralTertiary\n }\n }\n },\n submenuIconProps: {\n iconName: 'HorizontalGalleryRightButton',\n styles: menuSubIconStyleSet\n },\n disabled: messageReadByCount <= 0\n });\n } else if (props.messageStatus === 'failed' && props.strings.resendMessage) {\n items.push({\n key: 'Resend',\n text: props.strings.resendMessage,\n itemProps: {\n styles: concatStyleSets(\n {\n linkContent: {\n color: theme.palette.neutralPrimary\n },\n root: {\n borderTop: `1px solid ${theme.palette.neutralLighter}`\n }\n },\n props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n )\n },\n calloutProps: preventUnwantedDismissProps,\n iconProps: {\n iconName: 'MessageResend',\n styles: {\n root: {\n color: theme.palette.themeDarkAlt\n }\n }\n },\n onClick: props.onResendClick\n });\n }\n\n return items;\n }, [\n props.strings.editMessage,\n props.strings.removeMessage,\n props.strings.messageReadCount,\n props.strings.resendMessage,\n props.messageStatus,\n props.increaseFlyoutItemSize,\n props.onEditClick,\n props.onRemoveClick,\n props.onResendClick,\n props.remoteParticipantsCount,\n props.showMessageStatus,\n messageReadByCount,\n theme.palette.neutralPrimary,\n theme.palette.neutralTertiary,\n theme.palette.neutralLighter,\n theme.palette.themeDarkAlt,\n messageReadByList\n ]);\n\n // gap space uses pixels\n return (\n <ContextualMenu\n alignTargetEdge={true}\n gapSpace={2 /px/}\n isBeakVisible={false}\n items={menuItems}\n hidden={props.hidden}\n target={props.target}\n onDismiss={props.onDismiss}\n directionalHint={DirectionalHint.topRightEdge}\n className={chatMessageMenuStyle}\n calloutProps={calloutMenuProps}\n />\n );\n};\n\n/\n Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.\n */\nconst preventUnwantedDismissProps = {\n preventDismissOnEvent: (ev: Event \| React.FocusEvent \| React.KeyboardEvent \| React.MouseEvent): boolean => {\n return ev.type === 'resize';\n }\n};\n\nconst calloutMenuProps = {\n ...preventUnwantedDismissProps,\n styles: { root: { marginRight: '3px' } }\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js CHANGED Viewed

@@ -157,7 +157,13 @@ const processHtmlToReact = (props) => {
                     return ((_c = props.inlineImageOptions) === null || _c === void 0 ? void 0 : _c.onRenderInlineImage)
                         ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
                         : defaultOnRenderInlineImage(inlineImageProps);
-                    return React.createElement("img", Object.assign({ key: imgProps.id }, imgProps));
+                }
+                // Transform links to open in new tab
+                if (domNode.name === 'a' && React.isValidElement(reactNode)) {
+                    return React.cloneElement(reactNode, {
+                        target: '_blank',
+                        rel: 'noreferrer noopener'
+                    });
                 }
             }
             // Pass through the original node

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\n/ @conditional-compile-remove(mention) /\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\nimport { _AttachmentDownloadCardsStrings } from '../Attachment/AttachmentDownloadCards';\n/ @conditional-compile-remove(attachment-download) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n inlineImageOptions?: InlineImageOptions;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/\n InlineImage's state, as reflected in the UI.\n \n @public\n /\nexport interface InlineImage {\n /* ID of the message that the inline image is belonged to /\n messageId: string;\n /* Attributes of the inline image /\n imageAttributes: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/\n Options to display inline image in the inline image scenario.\n \n @public\n /\nexport interface InlineImageOptions {\n /\n Optional callback to render an inline image of in a message.\n /\n onRenderInlineImage?: (\n inlineImage: InlineImage,\n defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n ) => JSX.Element;\n}\n\n/* @private /\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n switch (props.message.contentType) {\n case 'text':\n return MessageContentAsText(props);\n case 'html':\n return MessageContentAsRichTextHTML(props);\n case 'richtext/html':\n return MessageContentAsRichTextHTML(props);\n default:\n console.warn('unknown message content type');\n return <></>;\n }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return (\n <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n {props.content}\n </div>\n );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={processHtmlToReact(props)}\n />\n );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={\n <Linkify\n componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return (\n <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>\n );\n }}\n >\n {props.message.content}\n </Linkify>\n }\n />\n );\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\n/\n @private\n /\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n const blockedMessage =\n props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink\n ? props.message.linkText ?? props.strings.blockedWarningLinkText\n : '';\n\n const liveAuthor =\n props.message.mine \|\| props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={liveBlockedWarningText}\n ariaLabel={liveBlockedWarningText}\n content={\n <Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && (\n <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>\n )}\n </Stack>\n }\n />\n );\n};\n\nconst extractContentForAllyMessage = (props: ChatMessageContentProps): string => {\n let attachments = undefined;\n / @conditional-compile-remove(attachment-download) /\n attachments = props.message.attachments;\n if (props.message.content \|\| attachments) {\n // Replace all <img> tags with 'image' for aria.\n const parsedContent = DOMPurify.sanitize(props.message.content ?? '', {\n ALLOWED_TAGS: ['img'],\n RETURN_DOM_FRAGMENT: true\n });\n\n parsedContent.childNodes.forEach((child) => {\n if (child.nodeName.toLowerCase() !== 'img') {\n return;\n }\n const imageTextNode = document.createElement('div');\n imageTextNode.innerHTML = 'image ';\n parsedContent.replaceChild(imageTextNode, child);\n });\n\n // Inject message attachment count for aria.\n // this is only applying to file attachments not for inline images.\n / @conditional-compile-remove(attachment-download) /\n if (attachments && attachments.length > 0) {\n const attachmentCardDescription = attachmentCardGroupDescription(props);\n const attachmentTextNode = document.createElement('div');\n attachmentTextNode.innerHTML = `${attachmentCardDescription}`;\n parsedContent.appendChild(attachmentTextNode);\n }\n\n // Strip all html tags from the content for aria.\n let message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });\n // decode HTML entities so that screen reader can read the content properly.\n message = decodeEntities(message);\n return message;\n }\n return '';\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n props.message.mine ? '' : liveAuthor\n } ${extractContentForAllyMessage(props)} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n const message = extractContentForAllyMessage(props);\n return props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n message: message\n })\n : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: message\n });\n};\n\n/ @conditional-compile-remove(attachment-download) /\nconst attachmentCardGroupDescription = (props: ChatMessageContentProps): string => {\n const attachments = props.message.attachments;\n return getAttachmentCountLiveMessage(attachments ?? [], props.strings.attachmentCardGroupMessage);\n};\n\n/ @conditional-compile-remove(attachment-download) /\n/\n @private\n /\nexport const getAttachmentCountLiveMessage = (\n attachments: AttachmentMetadata[],\n attachmentCardGroupMessage: string\n): string => {\n if (attachments.length === 0) {\n return '';\n }\n return _formatString(attachmentCardGroupMessage, {\n attachmentCount: `${attachments.length}`\n });\n return '';\n};\n\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n return (\n <img\n key={inlineImage.imageAttributes.id}\n tabIndex={0}\n data-ui-id={inlineImage.imageAttributes.id}\n {...inlineImage.imageAttributes}\n />\n );\n};\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const options: HTMLReactParserOptions = {\n transform(reactNode, domNode) {\n if (domNode instanceof DOMElement && domNode.attribs) {\n // Transform custom rendering of mentions\n / @conditional-compile-remove(mention) */\n if (domNode.name === 'msft-mention') {\n const { id } = domNode.attribs;\n const mention: Mention = {\n id: id,\n displayText: (domNode.children[0] as unknown as Text).nodeValue ?? ''\n };\n if (props.mentionDisplayOptions?.onRenderMention) {\n return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n return defaultOnMentionRender(mention);\n }\n\n // Transform inline images\n if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {\n domNode.attribs['aria-label'] = domNode.attribs.name;\n const imgProps = attributesToProps(domNode.attribs);\n const inlineImageProps: InlineImage = { messageId: props.message.messageId, imageAttributes: imgProps };\n\n return props.inlineImageOptions?.onRenderInlineImage\n ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)\n : defaultOnRenderInlineImage(inlineImageProps);\n\n return <img key={imgProps.id as string} {...imgProps} />;\n }\n }\n // Pass through the original node\n return reactNode as unknown as JSX.Element;\n }\n };\n return <>{parse(props.message.content ?? '', options)}</>;\n};\n\nconst decodeEntities = (encodedString: string): string => {\n // This regular expression matches HTML entities.\n const translate_re = /&(nbsp\|amp\|quot\|lt\|gt);/g;\n // This object maps HTML entities to their respective characters.\n const translate: Record<string, string> = {\n nbsp: ' ',\n amp: '&',\n quot: '\"',\n lt: '<',\n gt: '>'\n };\n\n return (\n encodedString\n // Find all matches of HTML entities defined in translate_re and\n // replace them with the corresponding character from the translate object.\n .replace(translate_re, function (match, entity) {\n return translate[entity];\n })\n // Find numeric entities (e.g., A)\n // and replace them with the equivalent character using the String.fromCharCode method,\n // which converts Unicode values into characters.\n .replace(/&#(\\d+);/gi, function (match, numStr) {\n const num = parseInt(numStr, 10);\n return String.fromCharCode(num);\n })\n );\n};\n"]}
1	+ {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\n/ @conditional-compile-remove(mention) /\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\nimport { _AttachmentDownloadCardsStrings } from '../Attachment/AttachmentDownloadCards';\n/ @conditional-compile-remove(attachment-download) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n inlineImageOptions?: InlineImageOptions;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/\n InlineImage's state, as reflected in the UI.\n \n @public\n /\nexport interface InlineImage {\n /* ID of the message that the inline image is belonged to /\n messageId: string;\n /* Attributes of the inline image /\n imageAttributes: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/\n Options to display inline image in the inline image scenario.\n \n @public\n /\nexport interface InlineImageOptions {\n /\n Optional callback to render an inline image of in a message.\n /\n onRenderInlineImage?: (\n inlineImage: InlineImage,\n defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n ) => JSX.Element;\n}\n\n/* @private /\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n switch (props.message.contentType) {\n case 'text':\n return MessageContentAsText(props);\n case 'html':\n return MessageContentAsRichTextHTML(props);\n case 'richtext/html':\n return MessageContentAsRichTextHTML(props);\n default:\n console.warn('unknown message content type');\n return <></>;\n }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return (\n <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n {props.content}\n </div>\n );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={processHtmlToReact(props)}\n />\n );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={\n <Linkify\n componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return (\n <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>\n );\n }}\n >\n {props.message.content}\n </Linkify>\n }\n />\n );\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\n/\n @private\n /\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n const blockedMessage =\n props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink\n ? props.message.linkText ?? props.strings.blockedWarningLinkText\n : '';\n\n const liveAuthor =\n props.message.mine \|\| props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={liveBlockedWarningText}\n ariaLabel={liveBlockedWarningText}\n content={\n <Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && (\n <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>\n )}\n </Stack>\n }\n />\n );\n};\n\nconst extractContentForAllyMessage = (props: ChatMessageContentProps): string => {\n let attachments = undefined;\n / @conditional-compile-remove(attachment-download) /\n attachments = props.message.attachments;\n if (props.message.content \|\| attachments) {\n // Replace all <img> tags with 'image' for aria.\n const parsedContent = DOMPurify.sanitize(props.message.content ?? '', {\n ALLOWED_TAGS: ['img'],\n RETURN_DOM_FRAGMENT: true\n });\n\n parsedContent.childNodes.forEach((child) => {\n if (child.nodeName.toLowerCase() !== 'img') {\n return;\n }\n const imageTextNode = document.createElement('div');\n imageTextNode.innerHTML = 'image ';\n parsedContent.replaceChild(imageTextNode, child);\n });\n\n // Inject message attachment count for aria.\n // this is only applying to file attachments not for inline images.\n / @conditional-compile-remove(attachment-download) /\n if (attachments && attachments.length > 0) {\n const attachmentCardDescription = attachmentCardGroupDescription(props);\n const attachmentTextNode = document.createElement('div');\n attachmentTextNode.innerHTML = `${attachmentCardDescription}`;\n parsedContent.appendChild(attachmentTextNode);\n }\n\n // Strip all html tags from the content for aria.\n let message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });\n // decode HTML entities so that screen reader can read the content properly.\n message = decodeEntities(message);\n return message;\n }\n return '';\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n props.message.mine ? '' : liveAuthor\n } ${extractContentForAllyMessage(props)} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n const message = extractContentForAllyMessage(props);\n return props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n message: message\n })\n : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: message\n });\n};\n\n/ @conditional-compile-remove(attachment-download) /\nconst attachmentCardGroupDescription = (props: ChatMessageContentProps): string => {\n const attachments = props.message.attachments;\n return getAttachmentCountLiveMessage(attachments ?? [], props.strings.attachmentCardGroupMessage);\n};\n\n/ @conditional-compile-remove(attachment-download) /\n/\n @private\n /\nexport const getAttachmentCountLiveMessage = (\n attachments: AttachmentMetadata[],\n attachmentCardGroupMessage: string\n): string => {\n if (attachments.length === 0) {\n return '';\n }\n return _formatString(attachmentCardGroupMessage, {\n attachmentCount: `${attachments.length}`\n });\n return '';\n};\n\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n return (\n <img\n key={inlineImage.imageAttributes.id}\n tabIndex={0}\n data-ui-id={inlineImage.imageAttributes.id}\n {...inlineImage.imageAttributes}\n />\n );\n};\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const options: HTMLReactParserOptions = {\n transform(reactNode, domNode) {\n if (domNode instanceof DOMElement && domNode.attribs) {\n // Transform custom rendering of mentions\n / @conditional-compile-remove(mention) */\n if (domNode.name === 'msft-mention') {\n const { id } = domNode.attribs;\n const mention: Mention = {\n id: id,\n displayText: (domNode.children[0] as unknown as Text).nodeValue ?? ''\n };\n if (props.mentionDisplayOptions?.onRenderMention) {\n return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n return defaultOnMentionRender(mention);\n }\n\n // Transform inline images\n if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {\n domNode.attribs['aria-label'] = domNode.attribs.name;\n const imgProps = attributesToProps(domNode.attribs);\n const inlineImageProps: InlineImage = { messageId: props.message.messageId, imageAttributes: imgProps };\n\n return props.inlineImageOptions?.onRenderInlineImage\n ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)\n : defaultOnRenderInlineImage(inlineImageProps);\n }\n\n // Transform links to open in new tab\n if (domNode.name === 'a' && React.isValidElement<React.AnchorHTMLAttributes<HTMLAnchorElement>>(reactNode)) {\n return React.cloneElement(reactNode, {\n target: '_blank',\n rel: 'noreferrer noopener'\n });\n }\n }\n // Pass through the original node\n return reactNode as unknown as JSX.Element;\n }\n };\n return <>{parse(props.message.content ?? '', options)}</>;\n};\n\nconst decodeEntities = (encodedString: string): string => {\n // This regular expression matches HTML entities.\n const translate_re = /&(nbsp\|amp\|quot\|lt\|gt);/g;\n // This object maps HTML entities to their respective characters.\n const translate: Record<string, string> = {\n nbsp: ' ',\n amp: '&',\n quot: '\"',\n lt: '<',\n gt: '>'\n };\n\n return (\n encodedString\n // Find all matches of HTML entities defined in translate_re and\n // replace them with the corresponding character from the translate object.\n .replace(translate_re, function (match, entity) {\n return translate[entity];\n })\n // Find numeric entities (e.g., A)\n // and replace them with the equivalent character using the String.fromCharCode method,\n // which converts Unicode values into characters.\n .replace(/&#(\\d+);/gi, function (match, numStr) {\n const num = parseInt(numStr, 10);\n return String.fromCharCode(num);\n })\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.js CHANGED Viewed

@@ -78,11 +78,7 @@ const MessageBubble = (props) => {
     const chatMessage = (React.createElement(React.Fragment, null,
         React.createElement("div", { key: props.message.messageId },
             React.createElement(FluentChatMessage, { attached: attached, key: props.message.messageId, root: {
-                    className: chatMessageStyles.root,
-                    // make body not focusable to remove repetitions from narrators.
-                    // inner components are already focusable
-                    tabIndex: -1,
-                    role: 'none'
+                    className: chatMessageStyles.root
                 }, author: React.createElement(Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
                     className: chatItemMessageContainerClassName,
                     style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEhF,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AACxG,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAY5C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AACrG,OAAO,EACL,2BAA2B,EAC3B,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,uCAAuC,CAAC;AAC/C,qGAAqG;AACrG,OAAO,EAAE,qCAAqC,EAAE,MAAM,gDAAgD,CAAC;AAwCvG,eAAe;AACf,MAAM,aAAa,GAAG,CAAC,KAA+C,EAAe,EAAE;IACrF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,qBAAqB,EACrB,OAAO;IACP,qGAAqG;IACrG,2BAA2B,EAC3B,kBAAkB,EAClB,6BAA6B;IAC7B,qGAAqG;IACrG,oBAAoB;IACpB,0CAA0C;IAC1C,qBAAqB,EACrB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IAEV,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,MAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS;YACxC,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC;YAChE,CAAC,CAAC,SAAS,CAAC;QAEd,MAAM,eAAe,GAAG,OAAO,CAAC,SAAS;YACvC,CAAC,CAAC,2BAA2B,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,uBAAuB,CAAC;YACjF,CAAC,CAAC,EAAE,CAAC;QAEP,OAAO,eAAe,IAAI,gBAAgB,CAAC;IAC7C,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,EAAE,uBAAuB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5E,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,OAAO,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAExC,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,OAAO,uBAAuB,CAC5B,OAAO,EACP,OAAO,EACP,MAAM,EACN,kBAAkB;QAClB,0CAA0C;QAC1C,qBAAqB;QACrB,qGAAqG;QACrG,2BAA2B;QAC3B,qGAAqG;QACrG,oBAAoB,CACrB,CAAC;IACJ,CAAC,EAAE;QACD,qGAAqG,CAAC,oBAAoB;QAC1H,kBAAkB;QAClB,0CAA0C,CAAC,qBAAqB;QAChE,OAAO;QACP,qGAAqG,CAAC,2BAA2B;QACjI,OAAO;QACP,MAAM;KACP,CAAC,CAAC;IAEH,MAAM,gBAAgB,GACpB,KAAK,IAAI,uDAAuD,CAAC,OAAO,CAAC,WAAW,KAAK,SAAS,CAAC;IACrG,MAAM,uBAAuB,GAAG,0BAA0B,EAAE,CAAC;IAC7D,oDAAoD;IACpD,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,qCAAqC,CAAC,OAAsB,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IACjD,MAAM,iCAAiC,GAAG,YAAY,CACpD,uBAAuB,CAAC,IAAI,EAC5B,iBAAiB,CAAC,IAAI;IACtB,8EAA8E;IAC9E,iBAAiB,CAAC,wBAAwB,EAC1C,gBAAgB;QACd,CAAC,CAAC,uBAAuB,CAAC,OAAO;QACjC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,QAAQ;YACnC,CAAC,CAAC,uBAAuB,CAAC,MAAM;YAChC,CAAC,CAAC,SAAS,EACb,6BAA6B,CAAC,CAAC,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,eAAe;IACnG,oDAAoD;IACpD,sBAAsB,CAAC,CAAC,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,EAC1E,OAAO,CAAC,QAAQ,KAAK,KAAK,IAAI,OAAO,CAAC,QAAQ,KAAK,KAAK;QACtD,CAAC,CAAC,iBAAiB,CAAC,cAAc;QAClC,CAAC,CAAC,iBAAiB,CAAC,iBAAiB;IACvC,kGAAkG;IAClG,WAAW,CAAC,qBAAqB,CAAC,CACnC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACzG,MAAM,WAAW,GAAG,CAClB;QACE,6BAAK,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS;YAC/B,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAC5B,IAAI,EAAE;oBACJ,SAAS,EAAE,iBAAiB,CAAC,IAAI;oBACjC,gEAAgE;oBAChE,yCAAyC;oBACzC,QAAQ,EAAE,CAAC,CAAC;oBACZ,IAAI,EAAE,MAAM;iBACb,EACD,MAAM,EAAE,oBAAC,IAAI,IAAC,SAAS,EAAE,sBAAsB,IAAG,OAAO,CAAC,iBAAiB,CAAQ,EACnF,IAAI,EAAE;oBACJ,SAAS,EAAE,iCAAiC;oBAC5C,KAAK,oBAAO,sBAAsB,CAAC,qBAAqB,CAAC,CAAE;iBAC5D,gBACU,wBAAwB,EACnC,SAAS,EACP,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,gBAAc,GAAG,CAAC,gBAAgB,IACpE,kBAAkB,CACd,EAET,OAAO,EAAE,iBAAiB,EAAE,IAE3B,UAAU,EAAE,CACK,CAChB,CACL,CACJ,CAAC;IACF,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,mCAAmC,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { chatMessageDateStyle, chatMessageAuthorStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { ComponentSlotStyle } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMenuAction } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n generateCustomizedTimestamp,\n generateDefaultTimestamp,\n getMessageBubbleContent,\n getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n strings: MessageThreadStrings;\n userId: string;\n /\n Whether to overlap avatar and message when the view is width constrained.\n /\n shouldOverlapAvatarAndMessage: boolean;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to define custom actions for attachments.\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to display suggestions in the mention scenario.\n * @internal\n /\n mentionDisplayOptions?: MentionDisplayOptions;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n};\n\n/* @private /\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Element => {\n const ids = useIdentifiers();\n const theme = useTheme();\n const locale = useLocale();\n\n const {\n userId,\n message,\n showDate,\n messageContainerStyle,\n strings,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n inlineImageOptions,\n shouldOverlapAvatarAndMessage,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n onDisplayDateTimeString\n } = props;\n\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn\n ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n : undefined;\n\n const customTimestamp = message.createdOn\n ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n : '';\n\n return customTimestamp \|\| defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\n\n const getMessageDetails = useCallback(() => {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }, [strings.editedTag, theme, message]);\n\n const getContent = useCallback(() => {\n return getMessageBubbleContent(\n message,\n strings,\n userId,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment\n );\n }, [\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / actionsForAttachment,\n inlineImageOptions,\n / @conditional-compile-remove(mention) / mentionDisplayOptions,\n message,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / onRenderAttachmentDownloads,\n strings,\n userId\n ]);\n\n const isBlockedMessage =\n false \|\| / @conditional-compile-remove(data-loss-prevention) / message.messageType === 'blocked';\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n / @conditional-compile-remove(attachment-upload) /\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message as ChatMessage);\n }, [message]);\n const chatMessageStyles = useChatMessageStyles();\n const chatItemMessageContainerClassName = mergeClasses(\n chatMessageCommonStyles.body,\n chatMessageStyles.body,\n // disable placeholder functionality for GA releases as it might confuse users\n chatMessageStyles.bodyWithPlaceholderImage,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap,\n / @conditional-compile-remove(attachment-upload) /\n hasMultipleAttachments ? chatMessageStyles.multipleAttachments : undefined,\n message.attached === 'top' \|\| message.attached === false\n ? chatMessageStyles.bodyWithAvatar\n : chatMessageStyles.bodyWithoutAvatar,\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n mergeStyles(messageContainerStyle)\n );\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = (\n <>\n <div key={props.message.messageId}>\n <FluentChatMessage\n attached={attached}\n key={props.message.messageId}\n root={{\n className: chatMessageStyles.root,\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n }}\n author={<Text className={chatMessageAuthorStyle}>{message.senderDisplayName}</Text>}\n body={{\n className: chatItemMessageContainerClassName,\n style: { ...createStyleFromV8Style(messageContainerStyle) }\n }}\n data-ui-id=\"chat-composite-message\"\n timestamp={\n <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n {formattedTimestamp}\n </Text>\n }\n details={getMessageDetails()}\n >\n {getContent()}\n </FluentChatMessage>\n </div>\n </>\n );\n return chatMessage;\n};\n\n/* @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}
1	+ {"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { chatMessageDateStyle, chatMessageAuthorStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { ComponentSlotStyle } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMenuAction } from '../../../types';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { _AttachmentDownloadCards } from '../../Attachment/AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n generateCustomizedTimestamp,\n generateDefaultTimestamp,\n getMessageBubbleContent,\n getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n/ @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\nimport { doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n messageContainerStyle?: ComponentSlotStyle;\n showDate?: boolean;\n strings: MessageThreadStrings;\n userId: string;\n /\n Whether to overlap avatar and message when the view is width constrained.\n /\n shouldOverlapAvatarAndMessage: boolean;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to render message attachments in the message component.\n /\n onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n /\n Optional callback to define custom actions for attachments.\n /\n actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(mention) /\n /\n Optional props needed to display suggestions in the mention scenario.\n * @internal\n /\n mentionDisplayOptions?: MentionDisplayOptions;\n /\n Optional callback called when an inline image is clicked.\n * @beta\n /\n inlineImageOptions?: InlineImageOptions;\n};\n\n/* @private /\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Element => {\n const ids = useIdentifiers();\n const theme = useTheme();\n const locale = useLocale();\n\n const {\n userId,\n message,\n showDate,\n messageContainerStyle,\n strings,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n inlineImageOptions,\n shouldOverlapAvatarAndMessage,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n onDisplayDateTimeString\n } = props;\n\n const formattedTimestamp = useMemo(() => {\n const defaultTimeStamp = message.createdOn\n ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n : undefined;\n\n const customTimestamp = message.createdOn\n ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n : '';\n\n return customTimestamp \|\| defaultTimeStamp;\n }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\n\n const getMessageDetails = useCallback(() => {\n return getMessageEditedDetails(message, theme, strings.editedTag);\n }, [strings.editedTag, theme, message]);\n\n const getContent = useCallback(() => {\n return getMessageBubbleContent(\n message,\n strings,\n userId,\n inlineImageOptions,\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment\n );\n }, [\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / actionsForAttachment,\n inlineImageOptions,\n / @conditional-compile-remove(mention) / mentionDisplayOptions,\n message,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) / onRenderAttachmentDownloads,\n strings,\n userId\n ]);\n\n const isBlockedMessage =\n false \|\| / @conditional-compile-remove(data-loss-prevention) / message.messageType === 'blocked';\n const chatMessageCommonStyles = useChatMessageCommonStyles();\n / @conditional-compile-remove(attachment-upload) /\n const hasMultipleAttachments = useMemo(() => {\n return doesMessageContainMultipleAttachments(message as ChatMessage);\n }, [message]);\n const chatMessageStyles = useChatMessageStyles();\n const chatItemMessageContainerClassName = mergeClasses(\n chatMessageCommonStyles.body,\n chatMessageStyles.body,\n // disable placeholder functionality for GA releases as it might confuse users\n chatMessageStyles.bodyWithPlaceholderImage,\n isBlockedMessage\n ? chatMessageCommonStyles.blocked\n : props.message.status === 'failed'\n ? chatMessageCommonStyles.failed\n : undefined,\n shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap,\n / @conditional-compile-remove(attachment-upload) /\n hasMultipleAttachments ? chatMessageStyles.multipleAttachments : undefined,\n message.attached === 'top' \|\| message.attached === false\n ? chatMessageStyles.bodyWithAvatar\n : chatMessageStyles.bodyWithoutAvatar,\n // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n mergeStyles(messageContainerStyle)\n );\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n const chatMessage = (\n <>\n <div key={props.message.messageId}>\n <FluentChatMessage\n attached={attached}\n key={props.message.messageId}\n root={{\n className: chatMessageStyles.root\n }}\n author={<Text className={chatMessageAuthorStyle}>{message.senderDisplayName}</Text>}\n body={{\n className: chatItemMessageContainerClassName,\n style: { ...createStyleFromV8Style(messageContainerStyle) }\n }}\n data-ui-id=\"chat-composite-message\"\n timestamp={\n <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n {formattedTimestamp}\n </Text>\n }\n details={getMessageDetails()}\n >\n {getContent()}\n </FluentChatMessage>\n </div>\n </>\n );\n return chatMessage;\n};\n\n/* @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.js CHANGED Viewed

@@ -75,36 +75,48 @@ export const FluentChatMessageComponent = (props) => {
     const messageRootProps = useMemo(() => {
         return { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };
     }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);
+    const avatar = useMemo(() => {
+        const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
+        const personaOptions = {
+            hidePersonaDetails: true,
+            size: PersonaSize.size32,
+            text: message.senderDisplayName,
+            showOverflowTooltip: false
+        };
+        let renderedAvatar;
+        if (onRenderAvatar) {
+            const avatarComponent = onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions);
+            if (!avatarComponent) {
+                return undefined;
+            }
+            else {
+                renderedAvatar = avatarComponent;
+            }
+        }
+        return (React.createElement("div", { className: mergeStyles(chatAvatarStyle) }, renderedAvatar ? renderedAvatar : React.createElement(Persona, Object.assign({}, personaOptions))));
+    }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
     const messageBodyProps = useMemo(() => {
         return {
             // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
-            className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
-            style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) : {},
-            // make body not focusable to remove repetitions from narrators.
-            // inner components are already focusable
-            tabIndex: -1,
-            role: 'none'
+            className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar
+                ? avatar
+                    ? chatMessageRenderStyles.bodyWithoutAvatar
+                    : chatMessageRenderStyles.bodyHiddenAvatar
+                : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
+            style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) : {}
         };
     }, [
-        chatMessageRenderStyles.avatarNoOverlap,
-        chatMessageRenderStyles.avatarOverlap,
         chatMessageRenderStyles.bodyCommon,
-        chatMessageRenderStyles.bodyWithAvatar,
         chatMessageRenderStyles.bodyWithoutAvatar,
-        shouldOverlapAvatarAndMessage,
+        chatMessageRenderStyles.bodyHiddenAvatar,
+        chatMessageRenderStyles.bodyWithAvatar,
+        chatMessageRenderStyles.avatarOverlap,
+        chatMessageRenderStyles.avatarNoOverlap,
         shouldShowAvatar,
+        avatar,
+        shouldOverlapAvatarAndMessage,
         styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer
     ]);
-    const avatar = useMemo(() => {
-        const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
-        const personaOptions = {
-            hidePersonaDetails: true,
-            size: PersonaSize.size32,
-            text: message.senderDisplayName,
-            showOverflowTooltip: false
-        };
-        return (React.createElement("div", { className: mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions))));
-    }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
     // Fluent UI message components are used here as for default message renderer,
     // timestamp and author name should be shown but they aren't shown for custom renderer.
     // More investigations are needed to check if this can be simplified with states.

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FluentChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport {\n gutterWithAvatar,\n gutterWithHiddenAvatar,\n useChatMessageRenderStyles\n} from '../../styles/MessageThread.styles';\nimport { IPersona, PersonaSize, mergeStyles, Persona } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport { ChatMessageComponentWrapperProps } from '../ChatMessageComponentWrapper';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { ChatMessage } from '../../../types/ChatMessage';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\n\n/\n Props for {@link FluentChatMessageComponentWrapper}\n \n @private\n /\nexport type FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n};\n\n/\n The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n \n @private\n /\nexport const FluentChatMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n const {\n message,\n styles,\n shouldOverlapAvatarAndMessage,\n onRenderMessage,\n onRenderAvatar,\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString,\n inlineImageOptions,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment,\n userId,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n / @conditional-compile-remove(mention) /\n mentionOptions\n } = props;\n const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n const onRenderAttachmentDownloadsMemo = useMemo(() => {\n return onRenderAttachmentDownloads;\n return undefined;\n }, [onRenderAttachmentDownloads]);\n\n // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n const defaultChatMessageRenderer = useCallback(\n (messageProps: MessageProps) => {\n if (\n messageProps.message.messageType === 'chat' \|\|\n / @conditional-compile-remove(data-loss-prevention) / messageProps.message.messageType === 'blocked'\n ) {\n return (\n <ChatMessageComponentAsMessageBubble\n {...messageProps}\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads={onRenderAttachmentDownloadsMemo}\n strings={messageProps.strings}\n message={messageProps.message}\n userId={userId}\n shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage}\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString={onDisplayDateTimeString}\n inlineImageOptions={inlineImageOptions}\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment={actionsForAttachment}\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions={mentionOptions?.displayOptions}\n />\n );\n }\n return <></>;\n },\n [\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloadsMemo,\n userId,\n shouldOverlapAvatarAndMessage,\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString,\n inlineImageOptions,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment,\n / @conditional-compile-remove(mention) */\n mentionOptions?.displayOptions\n ]\n );\n\n const messageRenderer = useCallback(\n (messageProps: MessageProps) => {\n return onRenderMessage === undefined\n ? defaultChatMessageRenderer({ ...messageProps })\n : onRenderMessage(messageProps, defaultChatMessageRenderer);\n },\n [defaultChatMessageRenderer, onRenderMessage]\n );\n\n const shouldShowAvatar = useMemo(() => {\n return message.attached === 'top' \|\| message.attached === false;\n }, [message.attached]);\n\n const attached = useMemo(() => {\n return getFluentUIAttachedValue(message.attached);\n }, [message.attached]);\n\n const messageRootProps = useMemo(() => {\n return { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);\n\n const messageBodyProps = useMemo(() => {\n return {\n // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(\n chatMessageRenderStyles.bodyCommon,\n !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar,\n shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap,\n mergeStyles(styles?.chatItemMessageContainer)\n ),\n style:\n styles?.chatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.chatItemMessageContainer) : {},\n // make body not focusable to remove repetitions from narrators.\n // inner components are already focusable\n tabIndex: -1,\n role: 'none'\n };\n }, [\n chatMessageRenderStyles.avatarNoOverlap,\n chatMessageRenderStyles.avatarOverlap,\n chatMessageRenderStyles.bodyCommon,\n chatMessageRenderStyles.bodyWithAvatar,\n chatMessageRenderStyles.bodyWithoutAvatar,\n shouldOverlapAvatarAndMessage,\n shouldShowAvatar,\n styles?.chatItemMessageContainer\n ]);\n\n const avatar = useMemo(() => {\n const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size32,\n text: message.senderDisplayName,\n showOverflowTooltip: false\n };\n return (\n <div className={mergeStyles(chatAvatarStyle)}>\n {onRenderAvatar ? onRenderAvatar?.(message.senderId, personaOptions) : <Persona {...personaOptions} />}\n </div>\n );\n }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);\n\n // Fluent UI message components are used here as for default message renderer,\n // timestamp and author name should be shown but they aren't shown for custom renderer.\n // More investigations are needed to check if this can be simplified with states.\n // Avatar should be shown for both custom and default renderers.\n return (\n <FluentChatMessage attached={attached} root={messageRootProps} body={messageBodyProps} avatar={avatar}>\n {messageRenderer({ ...props })}\n </FluentChatMessage>\n );\n};\n"]}
1	+ {"version":3,"file":"FluentChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport {\n gutterWithAvatar,\n gutterWithHiddenAvatar,\n useChatMessageRenderStyles\n} from '../../styles/MessageThread.styles';\nimport { IPersona, PersonaSize, mergeStyles, Persona } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport { ChatMessageComponentWrapperProps } from '../ChatMessageComponentWrapper';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { ChatMessage } from '../../../types/ChatMessage';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\n\n/\n Props for {@link FluentChatMessageComponentWrapper}\n \n @private\n /\nexport type FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n};\n\n/\n The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n \n @private\n /\nexport const FluentChatMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n const {\n message,\n styles,\n shouldOverlapAvatarAndMessage,\n onRenderMessage,\n onRenderAvatar,\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString,\n inlineImageOptions,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment,\n userId,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads,\n / @conditional-compile-remove(mention) /\n mentionOptions\n } = props;\n const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n const onRenderAttachmentDownloadsMemo = useMemo(() => {\n return onRenderAttachmentDownloads;\n return undefined;\n }, [onRenderAttachmentDownloads]);\n\n // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n const defaultChatMessageRenderer = useCallback(\n (messageProps: MessageProps) => {\n if (\n messageProps.message.messageType === 'chat' \|\|\n / @conditional-compile-remove(data-loss-prevention) / messageProps.message.messageType === 'blocked'\n ) {\n return (\n <ChatMessageComponentAsMessageBubble\n {...messageProps}\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloads={onRenderAttachmentDownloadsMemo}\n strings={messageProps.strings}\n message={messageProps.message}\n userId={userId}\n shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage}\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString={onDisplayDateTimeString}\n inlineImageOptions={inlineImageOptions}\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment={actionsForAttachment}\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions={mentionOptions?.displayOptions}\n />\n );\n }\n return <></>;\n },\n [\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n onRenderAttachmentDownloadsMemo,\n userId,\n shouldOverlapAvatarAndMessage,\n / @conditional-compile-remove(date-time-customization) /\n onDisplayDateTimeString,\n inlineImageOptions,\n / @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) /\n actionsForAttachment,\n / @conditional-compile-remove(mention) */\n mentionOptions?.displayOptions\n ]\n );\n\n const messageRenderer = useCallback(\n (messageProps: MessageProps) => {\n return onRenderMessage === undefined\n ? defaultChatMessageRenderer({ ...messageProps })\n : onRenderMessage(messageProps, defaultChatMessageRenderer);\n },\n [defaultChatMessageRenderer, onRenderMessage]\n );\n\n const shouldShowAvatar = useMemo(() => {\n return message.attached === 'top' \|\| message.attached === false;\n }, [message.attached]);\n\n const attached = useMemo(() => {\n return getFluentUIAttachedValue(message.attached);\n }, [message.attached]);\n\n const messageRootProps = useMemo(() => {\n return { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };\n }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);\n\n const avatar = useMemo(() => {\n const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;\n const personaOptions: IPersona = {\n hidePersonaDetails: true,\n size: PersonaSize.size32,\n text: message.senderDisplayName,\n showOverflowTooltip: false\n };\n let renderedAvatar;\n if (onRenderAvatar) {\n const avatarComponent = onRenderAvatar?.(message.senderId, personaOptions);\n if (!avatarComponent) {\n return undefined;\n } else {\n renderedAvatar = avatarComponent;\n }\n }\n return (\n <div className={mergeStyles(chatAvatarStyle)}>\n {renderedAvatar ? renderedAvatar : <Persona {...personaOptions} />}\n </div>\n );\n }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);\n\n const messageBodyProps = useMemo(() => {\n return {\n // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n className: mergeClasses(\n chatMessageRenderStyles.bodyCommon,\n !shouldShowAvatar\n ? avatar\n ? chatMessageRenderStyles.bodyWithoutAvatar\n : chatMessageRenderStyles.bodyHiddenAvatar\n : chatMessageRenderStyles.bodyWithAvatar,\n shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap,\n mergeStyles(styles?.chatItemMessageContainer)\n ),\n style:\n styles?.chatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.chatItemMessageContainer) : {}\n };\n }, [\n chatMessageRenderStyles.bodyCommon,\n chatMessageRenderStyles.bodyWithoutAvatar,\n chatMessageRenderStyles.bodyHiddenAvatar,\n chatMessageRenderStyles.bodyWithAvatar,\n chatMessageRenderStyles.avatarOverlap,\n chatMessageRenderStyles.avatarNoOverlap,\n shouldShowAvatar,\n avatar,\n shouldOverlapAvatarAndMessage,\n styles?.chatItemMessageContainer\n ]);\n\n // Fluent UI message components are used here as for default message renderer,\n // timestamp and author name should be shown but they aren't shown for custom renderer.\n // More investigations are needed to check if this can be simplified with states.\n // Avatar should be shown for both custom and default renderers.\n return (\n <FluentChatMessage attached={attached} root={messageRootProps} body={messageBodyProps} avatar={avatar}>\n {messageRenderer({ ...props })}\n </FluentChatMessage>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.js CHANGED Viewed

@@ -132,12 +132,8 @@ const MessageBubble = (props) => {
                         // react onFocus is called even when nested component receives focus (i.e. it bubbles)
                         // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible
                         setFocused(true);
-                    },
-                    // make body not focusable to remove repetitions from narrators.
-                    // inner components are already focusable
-                    role: 'none',
-                    tabIndex: -1
-                }, "data-ui-id": "chat-composite-message", author: React.createElement(Text, { className: chatMessageDateStyle, tabIndex: 0 }, message.senderDisplayName), timestamp: React.createElement(Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp, tabIndex: 0 }, formattedTimestamp), details: getMessageDetails(), actions: {
+                    }
+                }, "data-ui-id": "chat-composite-message", author: React.createElement(Text, { className: chatMessageDateStyle }, message.senderDisplayName), timestamp: React.createElement(Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails(), actions: {
                     children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
                     className: mergeClasses(chatMyMessageStyles.menu,
                     // Make actions menu visible when the message is focused or the flyout is shown