@azure/communication-react 1.9.0 → 1.10.0-beta.1

package/dist/dist-esm/communication-react/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../preprocess-dist/communication-react/src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,+BAA+B,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AAYzG,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AAIrN,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,aAAa,EAAE,mBAAmB,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAEjL,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACz1B,6CAA6C;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAQ7D,cAAc,iDAAiD,CAAC;AAChE,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE1E,cAAc,yCAAyC,CAAC;AACxD,cAAc,eAAe,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * `@azure/communication-react` is an npm package that exports the functionality of the Azure Communication Services - UI Library.\n *\n * This package makes it easy for you to build modern communications user experiences using Azure Communication Services. It gives you a library of production-ready UI components that you can drop into your applications:\n *   - Composites: These components are turn-key solutions that implement common communication scenarios. You can quickly add video calling or chat experiences to your applications. Composites are open-source higher order components built using UI components.\n *   - UI Components - These components are open-source building blocks that let you build custom communications experience. Components are offered for both calling and chat capabilities that can be combined to build experiences.\n *\n * These UI client libraries all use Microsoft's Fluent design language and assets. Fluent UI provides a foundational layer for the UI Library and is actively used across Microsoft products.\n *\n * In conjunction with the UI components, the UI Library exposes a stateful client library for calling and chat. This client is agnostic to any specific state management framework and can be integrated with common state managers like Redux or React Context.\n * This stateful client library can be used with the UI Components to pass props and methods for the UI Components to render data. For more information, see Stateful Client Overview.\n *\n * For more information visit: https://aka.ms/acsstorybook\n *\n * @packageDocumentation\n */\n\nexport { fromFlatCommunicationIdentifier, toFlatCommunicationIdentifier } from '../../acs-ui-common/src';\nexport type { AreEqual, CommonProperties, MessageStatus, Common, AreTypeEqual, AreParamEqual } from '../../acs-ui-common/src';\n\n// Not to export chat/calling specific hook from binding package\nexport type { CallClientProviderProps, CallAgentProviderProps, CallProviderProps, GetCallingSelector, CallingHandlers, CallingBaseSelectorProps, CommonCallingHandlers } from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(video-background-effects) */\nexport type { VideoBackgroundEffectsDependency, CallingHandlersOptions } from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(close-captions) */\nexport type { CaptionsOptions } from '../../calling-component-bindings/src';\nexport type { ChatClientProviderProps, ChatThreadClientProviderProps, GetChatSelector, ChatHandlers, ChatBaseSelectorProps } from '../../chat-component-bindings/src';\nexport { CallClientProvider, CallAgentProvider, CallProvider, useCallClient, useCallAgent, useCall, useDeviceManager, getCallingSelector, createDefaultCallingHandlers } from '../../calling-component-bindings/src';\nexport type { ScreenShareButtonSelector, CameraButtonSelector, VideoGallerySelector, DevicesButtonSelector, EmptySelector, ErrorBarSelector as CallErrorBarSelector, ParticipantListSelector, MicrophoneButtonSelector, ParticipantsButtonSelector, CreateDefaultCallingHandlers } from '../../calling-component-bindings/src';\n/* @conditional-compile-remove(raise-hand) */\nexport type { RaiseHandButtonSelector } from '../../calling-component-bindings/src';\nexport { ChatClientProvider, ChatThreadClientProvider, useChatClient, useChatThreadClient, getChatSelector, createDefaultChatHandlers } from '../../chat-component-bindings/src';\nexport type { MessageThreadSelector, TypingIndicatorSelector, ChatParticipantListSelector, SendBoxSelector, ErrorBarSelector as ChatErrorBarSelector } from '../../chat-component-bindings/src';\nexport { _IdentifierProvider, CameraButton, ControlBar, ControlBarButton, DevicesButton, EndCallButton, ErrorBar, GridLayout, LocalizationProvider, MessageStatusIndicator, MessageThread, MicrophoneButton, ParticipantItem, ParticipantList, ParticipantsButton, ScreenShareButton, SendBox, StreamMedia, TypingIndicator, VideoGallery, VideoTile, COMPONENT_LOCALE_EN_GB, COMPONENT_LOCALE_AR_SA, COMPONENT_LOCALE_CS_CZ, COMPONENT_LOCALE_DE_DE, COMPONENT_LOCALE_ES_ES, COMPONENT_LOCALE_FI_FI, COMPONENT_LOCALE_FR_FR, COMPONENT_LOCALE_HE_IL, COMPONENT_LOCALE_IT_IT, COMPONENT_LOCALE_JA_JP, COMPONENT_LOCALE_KO_KR, COMPONENT_LOCALE_NB_NO, COMPONENT_LOCALE_NL_NL, COMPONENT_LOCALE_PL_PL, COMPONENT_LOCALE_PT_BR, COMPONENT_LOCALE_RU_RU, COMPONENT_LOCALE_SV_SE, COMPONENT_LOCALE_TR_TR, COMPONENT_LOCALE_ZH_CN, COMPONENT_LOCALE_ZH_TW } from '../../react-components/src';\n/* @conditional-compile-remove(raise-hand) */\nexport { RaiseHandButton } from '../../react-components/src';\nexport type { _IdentifierProviderProps, _Identifiers, ActiveErrorMessage, BaseCustomStyles, CallParticipantListParticipant, CameraButtonContextualMenuStyles, CameraButtonProps, CameraButtonStrings, CameraButtonStyles, ChatMessage, CommunicationParticipant, ComponentLocale, ComponentSlotStyle, ComponentStrings, ContentSystemMessage, ControlBarButtonProps, ControlBarButtonStrings, ControlBarButtonStyles, ControlBarLayout, ControlBarProps, CreateVideoStreamViewResult, CustomAvatarOptions, CustomMessage, DevicesButtonContextualMenuStyles, DevicesButtonProps, DevicesButtonStrings, DevicesButtonStyles, EndCallButtonProps, EndCallButtonStrings, ErrorBarProps, ErrorBarStrings, ErrorType, GridLayoutProps, GridLayoutStyles, HorizontalGalleryStyles, JumpToNewMessageButtonProps, LocalizationProviderProps, LocalVideoCameraCycleButtonProps, LoadingState, Message, MessageAttachedStatus, MessageCommon, MessageContentType, MessageProps, MessageRenderer, MessageStatusIndicatorProps, MessageStatusIndicatorStrings, MessageThreadProps, MessageThreadStrings, MessageThreadStyles, MicrophoneButtonContextualMenuStyles, MicrophoneButtonProps, MicrophoneButtonStrings, MicrophoneButtonStyles, OnRenderAvatarCallback, OptionsDevice, ParticipantAddedSystemMessage, ParticipantItemProps, ParticipantItemStrings, ParticipantItemStyles, ParticipantListItemStyles, ParticipantListParticipant, ParticipantListProps, ParticipantListStyles, ParticipantMenuItemsCallback, ParticipantRemovedSystemMessage, ParticipantState, ParticipantsButtonContextualMenuStyles, ParticipantsButtonProps, ParticipantsButtonStrings, ParticipantsButtonStyles, ReadReceiptsBySenderId, ScreenShareButtonProps, ScreenShareButtonStrings, SendBoxProps, SendBoxStrings, SendBoxStylesProps, StreamMediaProps, SystemMessage, SystemMessageCommon, TopicUpdatedSystemMessage, TypingIndicatorProps, TypingIndicatorStrings, TypingIndicatorStylesProps, UpdateMessageCallback, CancelEditCallback, VideoGalleryLayout, VideoGalleryLocalParticipant, VideoGalleryParticipant, VideoGalleryProps, VideoGalleryRemoteParticipant, VideoGalleryStream, VideoGalleryStrings, VideoGalleryStyles, VideoStreamOptions, VideoTileProps, VideoTileStylesProps, ViewScalingMode } from '../../react-components/src';\n/* @conditional-compile-remove(raise-hand) */\nexport type { RaiseHandButtonProps, RaiseHandButtonStrings, RaisedHand } from '../../react-components/src';\n/* @conditional-compile-remove(pinned-participants) */\nexport type { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '../../react-components/src';\n/* @conditional-compile-remove(vertical-gallery) */\nexport type { OverflowGalleryPosition } from '../../react-components/src';\nexport * from '../../react-components/src/localization/locales';\nexport * from '../../react-components/src/theming';\nexport * from '../../calling-stateful-client/src/index-public';\nexport { createStatefulChatClient } from '../../chat-stateful-client/src';\nexport type { StatefulChatClient, StatefulChatClientArgs, StatefulChatClientOptions, ChatMessageWithStatus, ChatClientState, ChatError, ChatErrors, ChatThreadClientState, ChatThreadProperties, ChatErrorTarget } from '../../chat-stateful-client/src';\nexport * from '../../react-composites/src/index-public';\nexport * from './mergedHooks';\n/* @conditional-compile-remove(vertical-gallery) */\nexport type { VerticalGalleryStyles, VerticalGalleryStrings, VerticalGalleryControlBarStyles } from '../../react-components/src';\n/* @conditional-compile-remove(close-captions) */\nexport type { SpokenLanguageStrings, CaptionLanguageStrings } from '../../react-components/src';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../preprocess-dist/communication-react/src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,+BAA+B,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AAYzG,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AAErN,yDAAyD;AACzD,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,iCAAiC,EAAE,MAAM,sCAAsC,CAAC;AAU1H,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,aAAa,EAAE,mBAAmB,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAEjL,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACz1B,gDAAgD;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,6CAA6C;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,6CAA6C;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,0CAA0C,CAAC,6CAA6C;AACxF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,iDAAiD;AACjD,OAAO,EAAE,kCAAkC,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAoClI,cAAc,iDAAiD,CAAC;AAChE,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAG/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE1E,cAAc,yCAAyC,CAAC;AACxD,cAAc,eAAe,CAAC;AAE9B,sDAAsD;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,sDAAsD;AACtD,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAGvE,sDAAsD;AACtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * `@azure/communication-react` is an npm package that exports the functionality of the Azure Communication Services - UI Library.\n *\n * This package makes it easy for you to build modern communications user experiences using Azure Communication Services. It gives you a library of production-ready UI components that you can drop into your applications:\n *   - Composites: These components are turn-key solutions that implement common communication scenarios. You can quickly add video calling or chat experiences to your applications. Composites are open-source higher order components built using UI components.\n *   - UI Components - These components are open-source building blocks that let you build custom communications experience. Components are offered for both calling and chat capabilities that can be combined to build experiences.\n *\n * These UI client libraries all use Microsoft's Fluent design language and assets. Fluent UI provides a foundational layer for the UI Library and is actively used across Microsoft products.\n *\n * In conjunction with the UI components, the UI Library exposes a stateful client library for calling and chat. This client is agnostic to any specific state management framework and can be integrated with common state managers like Redux or React Context.\n * This stateful client library can be used with the UI Components to pass props and methods for the UI Components to render data. For more information, see Stateful Client Overview.\n *\n * For more information visit: https://aka.ms/acsstorybook\n *\n * @packageDocumentation\n */\n\nexport { fromFlatCommunicationIdentifier, toFlatCommunicationIdentifier } from '../../acs-ui-common/src';\nexport type { AreEqual, CommonProperties, MessageStatus, Common, AreTypeEqual, AreParamEqual } from '../../acs-ui-common/src';\n\n// Not to export chat/calling specific hook from binding package\nexport type { CallClientProviderProps, CallAgentProviderProps, CallProviderProps, GetCallingSelector, CallingHandlers, CallingBaseSelectorProps, CommonCallingHandlers } from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(video-background-effects) */\nexport type { VideoBackgroundEffectsDependency, CallingHandlersOptions } from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(close-captions) */\nexport type { CaptionsOptions } from '../../calling-component-bindings/src';\nexport type { ChatClientProviderProps, ChatThreadClientProviderProps, GetChatSelector, ChatHandlers, ChatBaseSelectorProps } from '../../chat-component-bindings/src';\nexport { CallClientProvider, CallAgentProvider, CallProvider, useCallClient, useCallAgent, useCall, useDeviceManager, getCallingSelector, createDefaultCallingHandlers } from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport { useTeamsCallAgent, useTeamsCall, createDefaultTeamsCallingHandlers } from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport type { TeamsCallingHandlers } from '../../calling-component-bindings/src';\nexport type { ScreenShareButtonSelector, CameraButtonSelector, VideoGallerySelector, DevicesButtonSelector, EmptySelector, ErrorBarSelector as CallErrorBarSelector, ParticipantListSelector, MicrophoneButtonSelector, ParticipantsButtonSelector, CreateDefaultCallingHandlers } from '../../calling-component-bindings/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonSelector } from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(raise-hand) */\nexport type { RaiseHandButtonSelector } from '../../calling-component-bindings/src';\nexport { ChatClientProvider, ChatThreadClientProvider, useChatClient, useChatThreadClient, getChatSelector, createDefaultChatHandlers } from '../../chat-component-bindings/src';\nexport type { MessageThreadSelector, TypingIndicatorSelector, ChatParticipantListSelector, SendBoxSelector, ErrorBarSelector as ChatErrorBarSelector } from '../../chat-component-bindings/src';\nexport { _IdentifierProvider, CameraButton, ControlBar, ControlBarButton, DevicesButton, EndCallButton, ErrorBar, GridLayout, LocalizationProvider, MessageStatusIndicator, MessageThread, MicrophoneButton, ParticipantItem, ParticipantList, ParticipantsButton, ScreenShareButton, SendBox, StreamMedia, TypingIndicator, VideoGallery, VideoTile, COMPONENT_LOCALE_EN_GB, COMPONENT_LOCALE_AR_SA, COMPONENT_LOCALE_CS_CZ, COMPONENT_LOCALE_DE_DE, COMPONENT_LOCALE_ES_ES, COMPONENT_LOCALE_FI_FI, COMPONENT_LOCALE_FR_FR, COMPONENT_LOCALE_HE_IL, COMPONENT_LOCALE_IT_IT, COMPONENT_LOCALE_JA_JP, COMPONENT_LOCALE_KO_KR, COMPONENT_LOCALE_NB_NO, COMPONENT_LOCALE_NL_NL, COMPONENT_LOCALE_PL_PL, COMPONENT_LOCALE_PT_BR, COMPONENT_LOCALE_RU_RU, COMPONENT_LOCALE_SV_SE, COMPONENT_LOCALE_TR_TR, COMPONENT_LOCALE_ZH_CN, COMPONENT_LOCALE_ZH_TW } from '../../react-components/src';\n/* @conditional-compile-remove(image-gallery) */\nexport { ImageGallery } from '../../react-components/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport { HoldButton } from '../../react-components/src';\n\n/* @conditional-compile-remove(raise-hand) */\nexport { RaiseHandButton } from '../../react-components/src';\n\n/* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\nexport { Dialpad } from '../../react-components/src';\n\n/* @conditional-compile-remove(call-readiness) */\nexport { CameraAndMicrophoneSitePermissions, MicrophoneSitePermissions, CameraSitePermissions } from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type { CameraAndMicrophoneSitePermissionsStrings, CameraAndMicrophoneSitePermissionsProps, CameraSitePermissionsStrings, CameraSitePermissionsProps, CommonSitePermissionsProps, SitePermissionsStrings, SitePermissionsStyles, MicrophoneSitePermissionsStrings, MicrophoneSitePermissionsProps } from '../../react-components/src';\n\n/* @conditional-compile-remove(total-participant-count) */\nexport type { ParticipantListStrings } from '../../react-components/src';\n\n/* @conditional-compile-remove(mention) */\nexport type { MentionOptions, MentionDisplayOptions, MentionLookupOptions, Mention, MentionPopoverStrings } from '../../react-components/src';\nexport type { _IdentifierProviderProps, _Identifiers, ActiveErrorMessage, BaseCustomStyles, CallParticipantListParticipant, CameraButtonContextualMenuStyles, CameraButtonProps, CameraButtonStrings, CameraButtonStyles, ChatMessage, CommunicationParticipant, ComponentLocale, ComponentSlotStyle, ComponentStrings, ContentSystemMessage, ControlBarButtonProps, ControlBarButtonStrings, ControlBarButtonStyles, ControlBarLayout, ControlBarProps, CreateVideoStreamViewResult, CustomAvatarOptions, CustomMessage, DevicesButtonContextualMenuStyles, DevicesButtonProps, DevicesButtonStrings, DevicesButtonStyles, EndCallButtonProps, EndCallButtonStrings, ErrorBarProps, ErrorBarStrings, ErrorType, GridLayoutProps, GridLayoutStyles, HorizontalGalleryStyles, JumpToNewMessageButtonProps, LocalizationProviderProps, LocalVideoCameraCycleButtonProps, LoadingState, Message, MessageAttachedStatus, MessageCommon, MessageContentType, MessageProps, MessageRenderer, MessageStatusIndicatorProps, MessageStatusIndicatorStrings, MessageThreadProps, MessageThreadStrings, MessageThreadStyles, MicrophoneButtonContextualMenuStyles, MicrophoneButtonProps, MicrophoneButtonStrings, MicrophoneButtonStyles, OnRenderAvatarCallback, OptionsDevice, ParticipantAddedSystemMessage, ParticipantItemProps, ParticipantItemStrings, ParticipantItemStyles, ParticipantListItemStyles, ParticipantListParticipant, ParticipantListProps, ParticipantListStyles, ParticipantMenuItemsCallback, ParticipantRemovedSystemMessage, ParticipantState, ParticipantsButtonContextualMenuStyles, ParticipantsButtonProps, ParticipantsButtonStrings, ParticipantsButtonStyles, ReadReceiptsBySenderId, ScreenShareButtonProps, ScreenShareButtonStrings, SendBoxProps, SendBoxStrings, SendBoxStylesProps, StreamMediaProps, SystemMessage, SystemMessageCommon, TopicUpdatedSystemMessage, TypingIndicatorProps, TypingIndicatorStrings, TypingIndicatorStylesProps, UpdateMessageCallback, CancelEditCallback, VideoGalleryLayout, VideoGalleryLocalParticipant, VideoGalleryParticipant, VideoGalleryProps, VideoGalleryRemoteParticipant, VideoGalleryStream, VideoGalleryStrings, VideoGalleryStyles, VideoStreamOptions, VideoTileProps, VideoTileStylesProps, ViewScalingMode } from '../../react-components/src';\n/* @conditional-compile-remove(raise-hand) */\nexport type { RaiseHandButtonProps, RaiseHandButtonStrings, RaisedHand } from '../../react-components/src';\n/* @conditional-compile-remove(image-gallery) */\nexport type { ImageGalleryProps, ImageGalleryImageProps, ImageGalleryStrings } from '../../react-components/src';\n/* @conditional-compile-remove(data-loss-prevention) */\nexport type { BlockedMessage } from '../../react-components/src';\n/* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\nexport type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */\nexport type { ActiveFileUpload, SendBoxErrorBarError, FileDownloadHandler, FileDownloadError } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { FileMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { BaseFileMetadata, FileMetadataAttachmentType, AttachmentDownloadResult, FileSharingMetadata, ImageFileMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonProps, HoldButtonStrings, VideoTileStrings } from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type { BrowserPermissionDeniedStrings, BrowserPermissionDeniedProps } from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type { BrowserPermissionDeniedIOSStrings, BrowserPermissionDeniedStyles, BrowserPermissionDeniedIOSProps } from '../../react-components/src';\n/* @conditional-compile-remove(pinned-participants) */\nexport type { VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '../../react-components/src';\n/* @conditional-compile-remove(vertical-gallery) */\nexport type { OverflowGalleryPosition } from '../../react-components/src';\n/* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */\nexport type { LocalVideoTileSize } from '../../react-components/src';\nexport * from '../../react-components/src/localization/locales';\nexport * from '../../react-components/src/theming';\nexport * from '../../calling-stateful-client/src/index-public';\n/* @conditional-compile-remove(one-to-n-calling) */\nexport type { DeclarativeCallAgent } from '../../calling-stateful-client/src';\nexport { createStatefulChatClient } from '../../chat-stateful-client/src';\nexport type { StatefulChatClient, StatefulChatClientArgs, StatefulChatClientOptions, ChatMessageWithStatus, ChatClientState, ChatError, ChatErrors, ChatThreadClientState, ChatThreadProperties, ChatErrorTarget } from '../../chat-stateful-client/src';\nexport * from '../../react-composites/src/index-public';\nexport * from './mergedHooks';\n\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedBrowser } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedBrowserStrings, UnsupportedBrowserProps } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedBrowserVersion } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedBrowserVersionStrings, UnsupportedBrowserVersionProps } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport { UnsupportedOperatingSystem } from '../../react-components/src';\n/* @conditional-compile-remove(unsupported-browser) */\nexport type { UnsupportedOperatingSystemStrings, UnsupportedOperatingSystemProps } from '../../react-components/src';\n/* @conditional-compile-remove(vertical-gallery) */\nexport type { VerticalGalleryStyles, VerticalGalleryStrings, VerticalGalleryControlBarStyles } from '../../react-components/src';\n/* @conditional-compile-remove(close-captions) */\nexport type { SpokenLanguageStrings, CaptionLanguageStrings } from '../../react-components/src';"]}

package/dist/dist-esm/react-components/src/components/Caption.js

@@ -14,6 +14,7 @@ export const _Caption = (props) => {
         size: PersonaSize.size32,
         text: displayName,
         showOverflowTooltip: false,
+        imageShouldStartVisible: true,
         initialsTextColor: 'white',
         styles: {
             root: {

package/dist/dist-esm/react-components/src/components/Caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,iCAAiC,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAgBlK;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EACJ,WAAW,EACX,MAAM,EACN,WAAW,EACX,cAAc,EACf,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IACF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IACjH,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAClE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { OnRenderAvatarCallback } from '../types';\nimport { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName } from './styles/Captions.style';\nimport { _CaptionsInfo } from './CaptionsBanner';\n\n/**\n * @internal\n * Props for a single line of caption.\n */\nexport interface _CaptionProps extends _CaptionsInfo {\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n  const {\n    displayName,\n    userId,\n    captionText,\n    onRenderAvatar\n  } = props;\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n  return <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack.Item className={displayNameContainerClassName}>\n          <Text className={displayNameClassName}>{displayName}</Text>\n        </Stack.Item>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {captionText}\n        </Stack.Item>\n      </Stack>\n    </Stack>;\n};"]}
+{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,iCAAiC,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAgBlK;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EACJ,WAAW,EACX,MAAM,EACN,WAAW,EACX,cAAc,EACf,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,uBAAuB,EAAE,IAAI;QAC7B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IACF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IACjH,OAAO,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAClE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,EAAE,GAAG,EAAC,MAAM,IAChD,WAAW,CACD,CACP,CACF,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { OnRenderAvatarCallback } from '../types';\nimport { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName } from './styles/Captions.style';\nimport { _CaptionsInfo } from './CaptionsBanner';\n\n/**\n * @internal\n * Props for a single line of caption.\n */\nexport interface _CaptionProps extends _CaptionsInfo {\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n  const {\n    displayName,\n    userId,\n    captionText,\n    onRenderAvatar\n  } = props;\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    imageShouldStartVisible: true,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n  return <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack.Item className={displayNameContainerClassName}>\n          <Text className={displayNameClassName}>{displayName}</Text>\n        </Stack.Item>\n        <Stack.Item className={captionClassName} dir=\"auto\">\n          {captionText}\n        </Stack.Item>\n      </Stack>\n    </Stack>;\n};"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import { MessageThreadStrings } from '../MessageThread';
 import { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';
+import { BlockedMessage } from '../../types';
 import { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';
+import { MentionOptions } from '../MentionPopover';
 declare type ChatMessageComponentProps = {
-    message: ChatMessage;
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
     userId: string;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
@@ -60,6 +62,25 @@ declare type ChatMessageComponentProps = {
      * @beta
      */
     onDisplayDateTimeString?: (messageDate: Date) => string;
+    /**
+     * Optional props needed to lookup suggestions and display mentions in the mention scenario.
+     * @beta
+     */
+    mentionOptions?: MentionOptions;
+    /**
+     * Optional function to fetch attachments.
+     * @beta
+     */
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;
+    /**
+     * Optional callback called when an inline image is clicked.
+     * @beta
+     */
+    onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;
+    /**
+     * Optional map of attachment ids to blob urls.
+     */
+    attachmentsMap?: Record<string, string>;
 };
 /**
  * @private

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.js

@@ -16,6 +16,7 @@ import { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMes
  * @private
  */
 export const ChatMessageComponent = (props) => {
+    var _a, _b;
     const [isEditing, setIsEditing] = useState(false);
     const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);
     const { onDeleteMessage, onSendMessage, message } = props;
@@ -41,10 +42,16 @@ export const ChatMessageComponent = (props) => {
             }), onCancel: messageId => {
                 props.onCancelEditMessage && props.onCancelEditMessage(messageId);
                 setIsEditing(false);
-            } });
+            }, 
+            /* @conditional-compile-remove(mention) */ mentionLookupOptions: (_a = props.mentionOptions) === null || _a === void 0 ? void 0 : _a.lookupOptions });
     }
     else {
-        return React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, strings: props.strings }));
+        return React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, 
+            /* @conditional-compile-remove(date-time-customization) */ onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, 
+            /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ onFetchAttachments: props.onFetchAttachments, 
+            /* @conditional-compile-remove(image-gallery) */ onInlineImageClicked: props.onInlineImageClicked, 
+            /* @conditional-compile-remove(image-gallery) */ attachmentsMap: props.attachmentsMap, 
+            /* @conditional-compile-remove(mention) */ mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions }));
     }
 };
 //# sourceMappingURL=ChatMessageComponent.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAGlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAGhF,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;AA+D5F;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAC1E,MAAM,EACJ,eAAe,EACf,aAAa,EACb,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,iBAAiB,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,MAAM,OAAO,GAAG,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IACnE,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,eAAe,IAAI,OAAO,CAAC,SAAS,EAAE;YACxC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QACD,4FAA4F;aACvF,IAAI,eAAe,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,IAAI,eAAe,EAAE;YAC7E,eAAe,CAAC,eAAe,CAAC,CAAC;SAClC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,eAAe,IAAI,eAAe,IAAI,eAAe,CAAC,eAAe,CAAC,CAAC;QACvE,aAAa,IAAI,aAAa,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAC/D,IAAI,SAAS,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE;QAC/C,OAAO,oBAAC,6BAA6B,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;gBAC1H,KAAK,CAAC,eAAe,IAAI,OAAO,CAAC,SAAS,IAAI,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;gBACxH,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,CAAA,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE;gBACvB,KAAK,CAAC,mBAAmB,IAAI,KAAK,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;gBAClE,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,GAAI,CAAC;KACP;SAAM;QACL,OAAO,oBAAC,mCAAmC,oBAAK,KAAK,IAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC;KAC/M;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\ntype ChatMessageComponentProps = {\n  message: ChatMessage;\n  userId: string;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onUpdateMessage?: (messageId: string, content: string, metadata?: Record<string, string>, options?: {\n    attachedFilesMetadata?: FileMetadata[];\n  }) => Promise<void>;\n  onCancelEditMessage?: (messageId: string) => void;\n  /**\n   * Callback to delete a message. Also called before resending a message that failed to send.\n   * @param messageId ID of the message to delete\n   */\n  onDeleteMessage?: (messageId: string) => Promise<void>;\n  /**\n   * Callback to send a message\n   * @param content The message content to send\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  strings: MessageThreadStrings;\n  messageStatus?: string;\n  /**\n   * Optional text to display when the message status is 'failed'.\n   */\n  failureReason?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Whether to overlap avatar and message when the view is width constrained.\n   */\n  shouldOverlapAvatarAndMessage: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const [isEditing, setIsEditing] = useState(false);\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n  const {\n    onDeleteMessage,\n    onSendMessage,\n    message\n  } = props;\n  const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n  const content = 'content' in message ? message.content : undefined;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientMessageId\n    else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n      onDeleteMessage(clientMessageId);\n    }\n  }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n    onSendMessage && onSendMessage(content !== undefined ? content : '');\n  }, [clientMessageId, content, onSendMessage, onDeleteMessage]);\n  if (isEditing && message.messageType === 'chat') {\n    return <ChatMessageComponentAsEditBox message={message} strings={props.strings} onSubmit={async (text, metadata, options) => {\n      props.onUpdateMessage && message.messageId && (await props.onUpdateMessage(message.messageId, text, metadata, options));\n      setIsEditing(false);\n    }} onCancel={messageId => {\n      props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n      setIsEditing(false);\n    }} />;\n  } else {\n    return <ChatMessageComponentAsMessageBubble {...props} onRemoveClick={onRemoveClick} onEditClick={onEditClick} onResendClick={onResendClick} onRenderAvatar={props.onRenderAvatar} strings={props.strings} />;\n  }\n};\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAGlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAKhF,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;AAwF5F;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAC1E,MAAM,EACJ,eAAe,EACf,aAAa,EACb,OAAO,EACR,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GAAG,iBAAiB,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,MAAM,OAAO,GAAG,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IACnE,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,eAAe,IAAI,OAAO,CAAC,SAAS,EAAE;YACxC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QACD,4FAA4F;aACvF,IAAI,eAAe,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,IAAI,eAAe,EAAE;YAC7E,eAAe,CAAC,eAAe,CAAC,CAAC;SAClC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,eAAe,IAAI,eAAe,IAAI,eAAe,CAAC,eAAe,CAAC,CAAC;QACvE,aAAa,IAAI,aAAa,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAC/D,IAAI,SAAS,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE;QAC/C,OAAO,oBAAC,6BAA6B,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;gBAC1H,KAAK,CAAC,eAAe,IAAI,OAAO,CAAC,SAAS,IAAI,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;gBACxH,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,CAAA,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE;gBACvB,KAAK,CAAC,mBAAmB,IAAI,KAAK,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;gBAClE,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;YACD,0CAA0C,CAAC,oBAAoB,EAAE,MAAA,KAAK,CAAC,cAAc,0CAAE,aAAa,GAAI,CAAC;KAC1G;SAAM;QACL,OAAO,oBAAC,mCAAmC,oBAAK,KAAK,IAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,CAAC,cAAc;YACjL,0DAA0D,CAAC,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO;YACzI,uEAAuE,CAAC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB;YACpH,gDAAgD,CAAC,oBAAoB,EAAE,KAAK,CAAC,oBAAoB;YACjG,gDAAgD,CAAC,cAAc,EAAE,KAAK,CAAC,cAAc;YACrF,0CAA0C,CAAC,qBAAqB,EAAE,MAAA,KAAK,CAAC,cAAc,0CAAE,cAAc,IAAI,CAAC;KAC5G;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\n/* @conditional-compile-remove(mention) */\nimport { MentionOptions } from '../MentionPopover';\ntype ChatMessageComponentProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */BlockedMessage;\n  userId: string;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onUpdateMessage?: (messageId: string, content: string, metadata?: Record<string, string>, options?: {\n    attachedFilesMetadata?: FileMetadata[];\n  }) => Promise<void>;\n  onCancelEditMessage?: (messageId: string) => void;\n  /**\n   * Callback to delete a message. Also called before resending a message that failed to send.\n   * @param messageId ID of the message to delete\n   */\n  onDeleteMessage?: (messageId: string) => Promise<void>;\n  /**\n   * Callback to send a message\n   * @param content The message content to send\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  strings: MessageThreadStrings;\n  messageStatus?: string;\n  /**\n   * Optional text to display when the message status is 'failed'.\n   */\n  failureReason?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Whether to overlap avatar and message when the view is width constrained.\n   */\n  shouldOverlapAvatarAndMessage: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\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 lookup suggestions and display mentions in the mention scenario.\n   * @beta\n   */\n  mentionOptions?: MentionOptions;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Optional function to fetch attachments.\n   * @beta\n   */\n  onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;\n  /* @conditional-compile-remove(image-gallery) */\n  /**\n   * Optional callback called when an inline image is clicked.\n   * @beta\n   */\n  onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Optional map of attachment ids to blob urls.\n   */\n  attachmentsMap?: Record<string, string>;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const [isEditing, setIsEditing] = useState(false);\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n  const {\n    onDeleteMessage,\n    onSendMessage,\n    message\n  } = props;\n  const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n  const content = 'content' in message ? message.content : undefined;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientMessageId\n    else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n      onDeleteMessage(clientMessageId);\n    }\n  }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n    onSendMessage && onSendMessage(content !== undefined ? content : '');\n  }, [clientMessageId, content, onSendMessage, onDeleteMessage]);\n  if (isEditing && message.messageType === 'chat') {\n    return <ChatMessageComponentAsEditBox message={message} strings={props.strings} onSubmit={async (text, metadata, options) => {\n      props.onUpdateMessage && message.messageId && (await props.onUpdateMessage(message.messageId, text, metadata, options));\n      setIsEditing(false);\n    }} onCancel={messageId => {\n      props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n      setIsEditing(false);\n    }}\n    /* @conditional-compile-remove(mention) */ mentionLookupOptions={props.mentionOptions?.lookupOptions} />;\n  } else {\n    return <ChatMessageComponentAsMessageBubble {...props} onRemoveClick={onRemoveClick} onEditClick={onEditClick} onResendClick={onResendClick} onRenderAvatar={props.onRenderAvatar}\n    /* @conditional-compile-remove(date-time-customization) */ onDisplayDateTimeString={props.onDisplayDateTimeString} strings={props.strings}\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ onFetchAttachments={props.onFetchAttachments}\n    /* @conditional-compile-remove(image-gallery) */ onInlineImageClicked={props.onInlineImageClicked}\n    /* @conditional-compile-remove(image-gallery) */ attachmentsMap={props.attachmentsMap}\n    /* @conditional-compile-remove(mention) */ mentionDisplayOptions={props.mentionOptions?.displayOptions} />;\n  }\n};\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.d.ts

@@ -2,6 +2,7 @@
 import { MessageThreadStrings } from '../MessageThread';
 import { ChatMessage } from '../../types';
 import { FileMetadata } from '../FileDownloadCards';
+import { MentionLookupOptions } from '../MentionPopover';
 /** @private */
 export declare type ChatMessageComponentAsEditBoxProps = {
     onCancel?: (messageId: string) => void;
@@ -10,6 +11,7 @@ export declare type ChatMessageComponentAsEditBoxProps = {
     }) => void;
     message: ChatMessage;
     strings: MessageThreadStrings;
+    mentionLookupOptions?: MentionLookupOptions;
 };
 /**
  * @private

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.js

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { concatStyleSets, Icon, mergeStyles } from '@fluentui/react';
+import { concatStyleSets, Icon, mergeStyles, Stack } from '@fluentui/react';
 import { ChatMyMessage } from '@fluentui-contrib/react-chat';
 import { mergeClasses } from '@fluentui/react-components';
 import { _formatString } from "../../../../acs-ui-common/src";
@@ -10,7 +10,7 @@ import { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from
 import { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';
 import { useChatMyMessageStyles } from '../styles/MessageThread.styles';
 import { _FileUploadCards } from '../FileUploadCards';
-import { chatMessageFailedTagStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';
+import { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';
 const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
 const onRenderCancelIcon = (color) => {
     const className = mergeStyles(inputBoxIcon, {
@@ -29,6 +29,8 @@ const onRenderSubmitIcon = (color) => {
  */
 export const ChatMessageComponentAsEditBox = (props) => {
     const { onCancel, onSubmit, strings, message } = props;
+    /* @conditional-compile-remove(mention) */
+    const { mentionLookupOptions } = props;
     const [textValue, setTextValue] = useState(message.content || '');
     const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));
     const editTextFieldRef = React.useRef(null);
@@ -70,7 +72,7 @@ export const ChatMessageComponentAsEditBox = (props) => {
     }, [attachedFilesMetadata]);
     const getContent = () => {
         return React.createElement(React.Fragment, null,
-            React.createElement(InputBoxComponent, { inlineChildren: false, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: ev => {
+            React.createElement(InputBoxComponent, { id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: ev => {
                     if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
                         ev.stopPropagation();
                     }
@@ -78,19 +80,24 @@ export const ChatMessageComponentAsEditBox = (props) => {
                     submitEnabled && onSubmit(textValue, message.metadata, {
                         attachedFilesMetadata
                     });
-                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles },
-                React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                        onCancel && onCancel(message.messageId);
-                    }, id: 'dismissIconWrapper' }),
-                React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: e => {
-                        submitEnabled && onSubmit(textValue, message.metadata, {
-                            attachedFilesMetadata
-                        });
-                        e.stopPropagation();
-                    }, id: 'submitIconWrapper' })),
-            message.failureReason && React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), {
-                    padding: '0.5rem'
-                }) }, message.failureReason),
+                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
+                /* @conditional-compile-remove(mention) */ mentionLookupOptions: mentionLookupOptions }),
+            React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: {
+                    childrenGap: '0.25rem'
+                } },
+                message.failureReason && React.createElement(Stack.Item, { grow: true, align: "stretch", className: chatMessageFailedTagStackItemStyle },
+                    React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle) }, message.failureReason)),
+                React.createElement(Stack.Item, { align: "end" },
+                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                            onCancel && onCancel(message.messageId);
+                        }, id: 'dismissIconWrapper' })),
+                React.createElement(Stack.Item, { align: "end" },
+                    React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: e => {
+                            submitEnabled && onSubmit(textValue, message.metadata, {
+                                attachedFilesMetadata
+                            });
+                            e.stopPropagation();
+                        }, id: 'submitIconWrapper' }))),
             onRenderFileUploads());
     };
     const bodyClassName = mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);
@@ -105,6 +112,8 @@ const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim(
 const getMessageState = (messageText, attachedFilesMetadata) => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
 // @TODO: Remove when file-sharing feature becomes stable.
 const getMessageAttachedFilesMetadata = (message) => {
+    /* @conditional-compile-remove(file-sharing) */
+    return message.attachedFilesMetadata;
     return [];
 };
 //# sourceMappingURL=ChatMessageComponentAsEditBox.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, {\n    color\n  });\n  return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, {\n    color\n  });\n  return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/** @private */\nexport type ChatMessageComponentAsEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (text: string, metadata?: Record<string, string>, options?: {\n    attachedFilesMetadata?: FileMetadata[];\n  }) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n};\ntype MessageState = 'OK' | 'too short' | 'too long';\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n  const {\n    onCancel,\n    onSubmit,\n    strings,\n    message\n  } = props;\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n  const editTextFieldRef = React.useRef<ITextField>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n  const submitEnabled = messageState === 'OK';\n  const editContainerStyles = useChatMessageEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n  const setText = (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  };\n  const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {\n    limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n  }) : undefined;\n  const onRenderThemedCancelIcon = useCallback((isHover: boolean) => onRenderCancelIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n  const onRenderThemedSubmitIcon = useCallback((isHover: boolean) => onRenderSubmitIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n  const editBoxStyles = useMemo(() => {\n    return concatStyleSets(editBoxStyleSet, {\n      textField: {\n        borderColor: theme.palette.themePrimary\n      }\n    });\n  }, [theme.palette.themePrimary]);\n  const onRenderFileUploads = useCallback(() => {\n    return !!attachedFilesMetadata && attachedFilesMetadata.length > 0 && <div style={{\n      margin: '0.25rem'\n    }}>\n          <_FileUploadCards activeFileUploads={attachedFilesMetadata?.map(file => ({\n        id: file.name,\n        filename: file.name,\n        progress: 1\n      }))} onCancelFileUpload={fileId => {\n        setAttachedFilesMetadata(attachedFilesMetadata?.filter(file => file.name !== fileId));\n      }} />\n        </div>;\n  }, [attachedFilesMetadata]);\n  const getContent = (): JSX.Element => {\n    return <>\n        <InputBoxComponent inlineChildren={false} id={'editbox'} textFieldRef={editTextFieldRef} inputClassName={editBoxStyle} placeholderText={strings.editBoxPlaceholderText} textValue={textValue} onChange={setText} onKeyDown={ev => {\n        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n          ev.stopPropagation();\n        }\n      }} onEnterKeyDown={() => {\n        submitEnabled && onSubmit(textValue, message.metadata, {\n          attachedFilesMetadata\n        });\n      }} supportNewline={false} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} errorMessage={textTooLongMessage} styles={editBoxStyles}>\n          <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n          onCancel && onCancel(message.messageId);\n        }} id={'dismissIconWrapper'} />\n          <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n          submitEnabled && onSubmit(textValue, message.metadata, {\n            attachedFilesMetadata\n          });\n          e.stopPropagation();\n        }} id={'submitIconWrapper'} />\n        </InputBoxComponent>\n        {message.failureReason && <div className={mergeStyles(chatMessageFailedTagStyle(theme), {\n        padding: '0.5rem'\n      })}>\n            {message.failureReason}\n          </div>}\n        {onRenderFileUploads()}\n      </>;\n  };\n  const bodyClassName = mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);\n  return <ChatMyMessage root={{\n    className: mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)\n  }} body={{\n    className: bodyClassName\n  }}>\n      {getContent()}\n    </ChatMyMessage>;\n};\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] | undefined => {\n  return [];\n};\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle, editChatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from '../MentionPopover';\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, {\n    color\n  });\n  return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, {\n    color\n  });\n  return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/** @private */\nexport type ChatMessageComponentAsEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (text: string, metadata?: Record<string, string>, options?: {\n    attachedFilesMetadata?: FileMetadata[];\n  }) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\n};\ntype MessageState = 'OK' | 'too short' | 'too long';\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n  const {\n    onCancel,\n    onSubmit,\n    strings,\n    message\n  } = props;\n  /* @conditional-compile-remove(mention) */\n  const {\n    mentionLookupOptions\n  } = props;\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n  const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n  const editTextFieldRef = React.useRef<ITextField>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n  const submitEnabled = messageState === 'OK';\n  const editContainerStyles = useChatMessageEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n  const setText = (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): void => {\n    setTextValue(newValue ?? '');\n  };\n  const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {\n    limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n  }) : undefined;\n  const onRenderThemedCancelIcon = useCallback((isHover: boolean) => onRenderCancelIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n  const onRenderThemedSubmitIcon = useCallback((isHover: boolean) => onRenderSubmitIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);\n  const editBoxStyles = useMemo(() => {\n    return concatStyleSets(editBoxStyleSet, {\n      textField: {\n        borderColor: theme.palette.themePrimary\n      }\n    });\n  }, [theme.palette.themePrimary]);\n  const onRenderFileUploads = useCallback(() => {\n    return !!attachedFilesMetadata && attachedFilesMetadata.length > 0 && <div style={{\n      margin: '0.25rem'\n    }}>\n          <_FileUploadCards activeFileUploads={attachedFilesMetadata?.map(file => ({\n        id: file.name,\n        filename: file.name,\n        progress: 1\n      }))} onCancelFileUpload={fileId => {\n        setAttachedFilesMetadata(attachedFilesMetadata?.filter(file => file.name !== fileId));\n      }} />\n        </div>;\n  }, [attachedFilesMetadata]);\n  const getContent = (): JSX.Element => {\n    return <>\n        <InputBoxComponent id={'editbox'} textFieldRef={editTextFieldRef} inputClassName={editBoxStyle} placeholderText={strings.editBoxPlaceholderText} textValue={textValue} onChange={setText} onKeyDown={ev => {\n        if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n          ev.stopPropagation();\n        }\n      }} onEnterKeyDown={() => {\n        submitEnabled && onSubmit(textValue, message.metadata, {\n          attachedFilesMetadata\n        });\n      }} supportNewline={false} maxLength={MAXIMUM_LENGTH_OF_MESSAGE} errorMessage={textTooLongMessage} styles={editBoxStyles}\n      /* @conditional-compile-remove(mention) */ mentionLookupOptions={mentionLookupOptions}></InputBoxComponent>\n        <Stack horizontal horizontalAlign=\"end\" className={editChatMessageButtonsStackStyle} tokens={{\n        childrenGap: '0.25rem'\n      }}>\n          {message.failureReason && <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n              <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n                {message.failureReason}\n              </div>\n            </Stack.Item>}\n          <Stack.Item align=\"end\">\n            <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n            onCancel && onCancel(message.messageId);\n          }} id={'dismissIconWrapper'} />\n          </Stack.Item>\n          <Stack.Item align=\"end\">\n            <InputBoxButton className={editingButtonStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n            submitEnabled && onSubmit(textValue, message.metadata, {\n              attachedFilesMetadata\n            });\n            e.stopPropagation();\n          }} id={'submitIconWrapper'} />\n          </Stack.Item>\n        </Stack>\n        {onRenderFileUploads()}\n      </>;\n  };\n  const bodyClassName = mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);\n  return <ChatMyMessage root={{\n    className: mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)\n  }} body={{\n    className: bodyClassName\n  }}>\n      {getContent()}\n    </ChatMyMessage>;\n};\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] | undefined => {\n  /* @conditional-compile-remove(file-sharing) */\n  return message.attachedFilesMetadata;\n  return [];\n};\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.d.ts

@@ -1,12 +1,15 @@
 import { IStyle } from '@fluentui/react';
 import React from 'react';
 import { ChatMessage } from '../../types/ChatMessage';
+import { FileMetadata } from '../FileDownloadCards';
+import { BlockedMessage } from '../../types/ChatMessage';
 import { MessageThreadStrings } from '../MessageThread';
 import { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';
 import { FileDownloadHandler } from '../FileDownloadCards';
+import { MentionDisplayOptions } from '../MentionPopover';
 import { MessageStatus } from "../../../../acs-ui-common/src";
 declare type ChatMessageComponentAsMessageBubbleProps = {
-    message: ChatMessage;
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
     messageContainerStyle?: ComponentSlotStyle;
     /** Styles for message status indicator container. */
     messageStatusContainer?: (mine: boolean) => IStyle;
@@ -51,6 +54,24 @@ declare type ChatMessageComponentAsMessageBubbleProps = {
      * @beta
      */
     onDisplayDateTimeString?: (messageDate: Date) => string;
+    /**
+     * Optional props needed to display suggestions in the mention scenario.
+     * @internal
+     */
+    mentionDisplayOptions?: MentionDisplayOptions;
+    /**
+     * Optional function to fetch attachments.
+     */
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;
+    /**
+     * Optional callback called when an inline image is clicked.
+     * @beta
+     */
+    onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;
+    /**
+     * Optional map of attachment ids to blob urls.
+     */
+    attachmentsMap?: Record<string, string>;
 };
 /** @private */
 export declare const ChatMessageComponentAsMessageBubble: React.MemoExoticComponent<(props: ChatMessageComponentAsMessageBubbleProps) => JSX.Element>;

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

@@ -1,5 +1,14 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { Text, mergeStyles } from '@fluentui/react';
 import { ChatMessage as FluentChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat';
 import React, { useCallback, useRef, useState } from 'react';
@@ -9,6 +18,8 @@ import { useIdentifiers } from '../../identifiers/IdentifierProvider';
 import { useTheme } from '../../theming';
 import { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';
 import { ChatMessageContent } from './ChatMessageContent';
+/* @conditional-compile-remove(data-loss-prevention) */
+import { BlockedMessageContent } from './ChatMessageContent';
 import { chatMessageActionMenuProps } from './ChatMessageActionMenu';
 import { _FileDownloadCards } from '../FileDownloadCards';
 import { useLocale } from '../../localization';
@@ -21,6 +32,8 @@ const generateDefaultTimestamp = (createdOn, showDate, strings) => {
 };
 // onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale
 const generateCustomizedTimestamp = (props, createdOn, locale) => {
+    /* @conditional-compile-remove(date-time-customization) */
+    return props.onDisplayDateTimeString ? props.onDisplayDateTimeString(createdOn) : locale.onDisplayDateTimeString ? locale.onDisplayDateTimeString(createdOn) : '';
     return '';
 };
 /** @private */
@@ -29,7 +42,9 @@ const MessageBubble = (props) => {
     const ids = useIdentifiers();
     const theme = useTheme();
     const locale = useLocale();
-    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler, shouldOverlapAvatarAndMessage } = props;
+    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler, 
+    /* @conditional-compile-remove(image-gallery) */
+    onInlineImageClicked, shouldOverlapAvatarAndMessage } = props;
     const defaultTimeStamp = message.createdOn ? generateDefaultTimestamp(message.createdOn, showDate, strings) : undefined;
     const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';
     const formattedTimestamp = customTimestamp || defaultTimeStamp;
@@ -43,7 +58,7 @@ const MessageBubble = (props) => {
     const messageRef = useRef(null);
     const messageActionButtonRef = useRef(null);
     const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState(undefined);
-    const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine;
+    const chatActionsEnabled = !disableEditing && message.status !== 'sending' && !!message.mine && /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';
     const [messageReadBy, setMessageReadBy] = useState([]);
     const actionMenuProps = chatMessageActionMenuProps({
         ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
@@ -64,7 +79,12 @@ const MessageBubble = (props) => {
         // or not we need to set the target to undefined here to actually hide the action flyout
         setChatMessageActionFlyoutTarget(undefined);
     }, [setChatMessageActionFlyoutTarget]);
-    const defaultOnRenderFileDownloads = useCallback(() => React.createElement(_FileDownloadCards, { userId: userId, fileMetadata: message['attachedFilesMetadata'] || [], downloadHandler: fileDownloadHandler }), [userId, message, fileDownloadHandler]);
+    const defaultOnRenderFileDownloads = useCallback(() => React.createElement(_FileDownloadCards, { userId: userId, fileMetadata: message['attachedFilesMetadata'] || [], downloadHandler: fileDownloadHandler, 
+        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/ strings: {
+            downloadFile: strings.downloadFile,
+            fileCardGroupMessage: strings.fileCardGroupMessage
+        } }), [userId, message,
+        strings, fileDownloadHandler]);
     const editedOn = 'editedOn' in message ? message.editedOn : undefined;
     const getMessageDetails = useCallback(() => {
         if (messageStatus === 'failed') {
@@ -75,12 +95,29 @@ const MessageBubble = (props) => {
         }
         return undefined;
     }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
+    /* @conditional-compile-remove(image-gallery) */
+    const handleOnInlineImageClicked = useCallback((attachmentId) => __awaiter(void 0, void 0, void 0, function* () {
+        if (onInlineImageClicked === undefined) {
+            return;
+        }
+        yield onInlineImageClicked(attachmentId, message.messageId);
+    }), [message, onInlineImageClicked]);
     const getContent = useCallback(() => {
+        /* @conditional-compile-remove(data-loss-prevention) */
+        if (message.messageType === 'blocked') {
+            return React.createElement("div", { tabIndex: 0 },
+                React.createElement(BlockedMessageContent, { message: message, strings: strings }));
+        }
         return React.createElement("div", { tabIndex: 0, className: "ui-chat__message__content" },
-            React.createElement(ChatMessageContent, { message: message, strings: strings }),
+            React.createElement(ChatMessageContent, { message: message, strings: strings, 
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ onFetchAttachment: props.onFetchAttachments, 
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ attachmentsMap: props.attachmentsMap, 
+                /* @conditional-compile-remove(mention) */ mentionDisplayOptions: props.mentionDisplayOptions, 
+                /* @conditional-compile-remove(image-gallery) */ onInlineImageClicked: handleOnInlineImageClicked }),
             props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads());
-    }, [defaultOnRenderFileDownloads, message, props, strings, userId]);
-    const isBlockedMessage = false;
+    }, [defaultOnRenderFileDownloads, message, props, strings, userId,
+        handleOnInlineImageClicked]);
+    const isBlockedMessage = false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
     const chatMyMessageStyles = useChatMyMessageStyles();
     const chatMessageCommonStyles = useChatMessageCommonStyles();
     const chatMessageStyles = useChatMessageStyles();
@@ -92,11 +129,7 @@ const MessageBubble = (props) => {
         React.createElement("div", { key: props.message.messageId, ref: messageRef }, message.mine ? React.createElement(ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
                 // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
                 className: mergeClasses(chatMyMessageStyles.body, isBlockedMessage ? chatMessageCommonStyles.blocked : props.message.status === 'failed' ? chatMessageCommonStyles.failed : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, mergeStyles(messageContainerStyle)),
-                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
-                // make body not focusable to remove repetitions from narrators.
-                // inner components are already focusable
-                tabIndex: -1,
-                role: 'presentation'
+                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
             }, root: {
                 className: chatMyMessageStyles.root,
                 onBlur: e => {
@@ -117,6 +150,7 @@ const MessageBubble = (props) => {
                 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: {
+                tabIndex: 0,
                 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
@@ -135,14 +169,14 @@ const MessageBubble = (props) => {
                     props.onActionButtonClick(message, setMessageReadBy);
                 }
             } }, getContent()) : React.createElement(FluentChatMessage, { attached: attached, key: props.message.messageId, root: {
-                className: chatMessageStyles.root
-            }, author: React.createElement(Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
-                className: chatItemMessageContainerClassName,
-                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
+                className: chatMessageStyles.root,
                 // make body not focusable to remove repetitions from narrators.
                 // inner components are already focusable
                 tabIndex: -1,
                 role: 'none'
+            }, author: React.createElement(Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
+                className: chatItemMessageContainerClassName,
+                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
             }, "data-ui-id": "chat-composite-message", timestamp: React.createElement(Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp) }, getContent())),
         chatActionsEnabled && React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }));
     return chatMessage;