@azure/communication-react 1.12.1-alpha-202401270011 → 1.12.1-alpha-202401300049

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.12.1-alpha-202401270011';
+module.exports = '1.12.1-alpha-202401300049';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.12.1-alpha-202401270011';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.12.1-alpha-202401300049';\n"]}

package/dist/dist-esm/communication-react/src/index.d.ts

@@ -43,11 +43,12 @@ export type { ReactionButtonStrings, Reaction, ReactionButtonProps, ReactionReso
 export type { Spotlight } from '../../react-components/src';
 export type { ImageGalleryProps, ImageGalleryImageProps, ImageGalleryStrings } from '../../react-components/src';
 export type { BlockedMessage } from '../../react-components/src';
-export type { DialpadMode, DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from '../../react-components/src';
+export type { DialpadMode, DialpadProps, DialpadStrings, DialpadStyles, DtmfTone, LongPressTrigger } from '../../react-components/src';
 export type { ActiveFileUpload, SendBoxErrorBarError, FileDownloadHandler, FileDownloadError } from '../../react-components/src';
 export type { AttachmentMetadata } from '../../react-components/src';
 export type { FileMetadata } from '../../react-components/src';
 export type { ChatAttachmentType, AttachmentDownloadResult, InlineImageMetadata } from '../../react-components/src';
+export type { InlineImageOptions, InlineImage } from '../../react-components/src';
 export type { HoldButtonProps, HoldButtonStrings, VideoTileStrings } from '../../react-components/src';
 export type { BrowserPermissionDeniedStrings, BrowserPermissionDeniedProps } from '../../react-components/src';
 export type { BrowserPermissionDeniedIOSStrings, BrowserPermissionDeniedStyles, BrowserPermissionDeniedIOSProps } from '../../react-components/src';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,+BAA+B,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AAmCzG,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,4BAA4B,EAC7B,MAAM,sCAAsC,CAAC;AAE9C,yDAAyD;AACzD,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,iCAAiC,EAClC,MAAM,sCAAsC,CAAC;AAuB9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,yBAAyB,EAC1B,MAAM,mCAAmC,CAAC;AAU3C,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,eAAe,EACf,YAAY,EACZ,SAAS,EACT,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACvB,MAAM,4BAA4B,CAAC;AACpC,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,EACL,kCAAkC,EAClC,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AA6KpC,cAAc,iDAAiD,CAAC;AAChE,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAG/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAa1E,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 {\n  AreEqual,\n  CommonProperties,\n  MessageStatus,\n  Common,\n  AreTypeEqual,\n  AreParamEqual\n} from '../../acs-ui-common/src';\n\n// Not to export chat/calling specific hook from binding package\nexport type {\n  CallClientProviderProps,\n  CallAgentProviderProps,\n  CallProviderProps,\n  GetCallingSelector,\n  CallingHandlers,\n  CallingBaseSelectorProps,\n  CommonCallingHandlers\n} 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';\n\nexport type {\n  ChatClientProviderProps,\n  ChatThreadClientProviderProps,\n  GetChatSelector,\n  ChatHandlers,\n  ChatBaseSelectorProps\n} from '../../chat-component-bindings/src';\n\nexport {\n  CallClientProvider,\n  CallAgentProvider,\n  CallProvider,\n  useCallClient,\n  useCallAgent,\n  useCall,\n  useDeviceManager,\n  getCallingSelector,\n  createDefaultCallingHandlers\n} from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport {\n  useTeamsCallAgent,\n  useTeamsCall,\n  createDefaultTeamsCallingHandlers\n} from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport type { TeamsCallingHandlers } from '../../calling-component-bindings/src';\n\nexport type {\n  ScreenShareButtonSelector,\n  CameraButtonSelector,\n  VideoGallerySelector,\n  DevicesButtonSelector,\n  EmptySelector,\n  ErrorBarSelector as CallErrorBarSelector,\n  ParticipantListSelector,\n  MicrophoneButtonSelector,\n  ParticipantsButtonSelector,\n  CreateDefaultCallingHandlers\n} 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';\n\nexport {\n  ChatClientProvider,\n  ChatThreadClientProvider,\n  useChatClient,\n  useChatThreadClient,\n  getChatSelector,\n  createDefaultChatHandlers\n} from '../../chat-component-bindings/src';\n\nexport type {\n  MessageThreadSelector,\n  TypingIndicatorSelector,\n  ChatParticipantListSelector,\n  SendBoxSelector,\n  ErrorBarSelector as ChatErrorBarSelector\n} from '../../chat-component-bindings/src';\n\nexport {\n  _IdentifierProvider,\n  CameraButton,\n  ControlBar,\n  ControlBarButton,\n  DevicesButton,\n  EndCallButton,\n  ErrorBar,\n  GridLayout,\n  LocalizationProvider,\n  MessageStatusIndicator,\n  MessageThread,\n  MicrophoneButton,\n  ParticipantItem,\n  ParticipantList,\n  ParticipantsButton,\n  ScreenShareButton,\n  SendBox,\n  StreamMedia,\n  TypingIndicator,\n  VideoGallery,\n  VideoTile,\n  COMPONENT_LOCALE_EN_GB,\n  COMPONENT_LOCALE_AR_SA,\n  COMPONENT_LOCALE_CS_CZ,\n  COMPONENT_LOCALE_DE_DE,\n  COMPONENT_LOCALE_ES_ES,\n  COMPONENT_LOCALE_FI_FI,\n  COMPONENT_LOCALE_FR_FR,\n  COMPONENT_LOCALE_HE_IL,\n  COMPONENT_LOCALE_IT_IT,\n  COMPONENT_LOCALE_JA_JP,\n  COMPONENT_LOCALE_KO_KR,\n  COMPONENT_LOCALE_NB_NO,\n  COMPONENT_LOCALE_NL_NL,\n  COMPONENT_LOCALE_PL_PL,\n  COMPONENT_LOCALE_PT_BR,\n  COMPONENT_LOCALE_RU_RU,\n  COMPONENT_LOCALE_SV_SE,\n  COMPONENT_LOCALE_TR_TR,\n  COMPONENT_LOCALE_ZH_CN,\n  COMPONENT_LOCALE_ZH_TW\n} 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 {\n  CameraAndMicrophoneSitePermissions,\n  MicrophoneSitePermissions,\n  CameraSitePermissions\n} from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type {\n  CameraAndMicrophoneSitePermissionsStrings,\n  CameraAndMicrophoneSitePermissionsProps,\n  CameraSitePermissionsStrings,\n  CameraSitePermissionsProps,\n  CommonSitePermissionsProps,\n  SitePermissionsStrings,\n  SitePermissionsStyles,\n  MicrophoneSitePermissionsStrings,\n  MicrophoneSitePermissionsProps\n} 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 {\n  MentionOptions,\n  MentionDisplayOptions,\n  MentionLookupOptions,\n  Mention,\n  MentionPopoverStrings\n} from '../../react-components/src';\n\nexport type {\n  _IdentifierProviderProps,\n  _Identifiers,\n  ActiveErrorMessage,\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  CameraButtonContextualMenuStyles,\n  CameraButtonProps,\n  CameraButtonStrings,\n  CameraButtonStyles,\n  ChatMessage,\n  CommunicationParticipant,\n  ComponentLocale,\n  ComponentSlotStyle,\n  ComponentStrings,\n  ContentSystemMessage,\n  ControlBarButtonProps,\n  ControlBarButtonStrings,\n  ControlBarButtonStyles,\n  ControlBarLayout,\n  ControlBarProps,\n  CreateVideoStreamViewResult,\n  CustomAvatarOptions,\n  CustomMessage,\n  DevicesButtonContextualMenuStyles,\n  DevicesButtonProps,\n  DevicesButtonStrings,\n  DevicesButtonStyles,\n  EndCallButtonProps,\n  EndCallButtonStrings,\n  ErrorBarProps,\n  ErrorBarStrings,\n  ErrorType,\n  GridLayoutProps,\n  GridLayoutStyles,\n  HorizontalGalleryStyles,\n  JumpToNewMessageButtonProps,\n  LocalizationProviderProps,\n  LocalVideoCameraCycleButtonProps,\n  LoadingState,\n  Message,\n  MessageAttachedStatus,\n  MessageCommon,\n  MessageContentType,\n  MessageProps,\n  MessageRenderer,\n  MessageStatusIndicatorProps,\n  MessageStatusIndicatorStrings,\n  MessageThreadProps,\n  MessageThreadStrings,\n  MessageThreadStyles,\n  MicrophoneButtonContextualMenuStyles,\n  MicrophoneButtonProps,\n  MicrophoneButtonStrings,\n  MicrophoneButtonStyles,\n  OnRenderAvatarCallback,\n  OptionsDevice,\n  ParticipantAddedSystemMessage,\n  ParticipantItemProps,\n  ParticipantItemStrings,\n  ParticipantItemStyles,\n  ParticipantListItemStyles,\n  ParticipantListParticipant,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback,\n  ParticipantRemovedSystemMessage,\n  ParticipantState,\n  ParticipantsButtonContextualMenuStyles,\n  ParticipantsButtonProps,\n  ParticipantsButtonStrings,\n  ParticipantsButtonStyles,\n  ReadReceiptsBySenderId,\n  ScreenShareButtonProps,\n  ScreenShareButtonStrings,\n  SendBoxProps,\n  SendBoxStrings,\n  SendBoxStylesProps,\n  StreamMediaProps,\n  SystemMessage,\n  SystemMessageCommon,\n  TopicUpdatedSystemMessage,\n  TypingIndicatorProps,\n  TypingIndicatorStrings,\n  TypingIndicatorStylesProps,\n  UpdateMessageCallback,\n  CancelEditCallback,\n  VideoGalleryLayout,\n  VideoGalleryLocalParticipant,\n  VideoGalleryParticipant,\n  VideoGalleryProps,\n  VideoGalleryRemoteParticipant,\n  VideoGalleryStream,\n  VideoGalleryStrings,\n  VideoGalleryStyles,\n  VideoStreamOptions,\n  VideoTileProps,\n  VideoTileStylesProps,\n  ViewScalingMode\n} from '../../react-components/src';\n/* @conditional-compile-remove(raise-hand) */\nexport type { RaiseHandButtonProps, RaiseHandButtonStrings, RaisedHand } from '../../react-components/src';\n/* @conditional-compile-remove(reaction) */\nexport type {\n  ReactionButtonStrings,\n  Reaction,\n  ReactionButtonProps,\n  ReactionResources,\n  ReactionSprite\n} from '../../react-components/src';\n/* @conditional-compile-remove(spotlight) */\nexport type { Spotlight } 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 { DialpadMode, DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */\nexport type {\n  ActiveFileUpload,\n  SendBoxErrorBarError,\n  FileDownloadHandler,\n  FileDownloadError\n} from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { AttachmentMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */\nexport type { FileMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { ChatAttachmentType, AttachmentDownloadResult, InlineImageMetadata } 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 {\n  BrowserPermissionDeniedIOSStrings,\n  BrowserPermissionDeniedStyles,\n  BrowserPermissionDeniedIOSProps\n} 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 {\n  StatefulChatClient,\n  StatefulChatClientArgs,\n  StatefulChatClientOptions,\n  ChatMessageWithStatus,\n  ChatClientState,\n  ChatError,\n  ChatErrors,\n  ChatThreadClientState,\n  ChatThreadProperties,\n  ChatErrorTarget\n} 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 {\n  VerticalGalleryStyles,\n  VerticalGalleryStrings,\n  VerticalGalleryControlBarStyles\n} from '../../react-components/src';\n/* @conditional-compile-remove(close-captions) */\nexport type { SpokenLanguageStrings, CaptionLanguageStrings } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { SurveyIssues } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { SurveyIssuesHeadingStrings } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { CallSurveyImprovementSuggestions } from '../../react-components/src';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,+BAA+B,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AAmCzG,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,4BAA4B,EAC7B,MAAM,sCAAsC,CAAC;AAE9C,yDAAyD;AACzD,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,iCAAiC,EAClC,MAAM,sCAAsC,CAAC;AAuB9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,yBAAyB,EAC1B,MAAM,mCAAmC,CAAC;AAU3C,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,QAAQ,EACR,UAAU,EACV,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,OAAO,EACP,WAAW,EACX,eAAe,EACf,YAAY,EACZ,SAAS,EACT,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACvB,MAAM,4BAA4B,CAAC;AACpC,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,EACL,kCAAkC,EAClC,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,4BAA4B,CAAC;AAsLpC,cAAc,iDAAiD,CAAC;AAChE,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAG/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAa1E,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 {\n  AreEqual,\n  CommonProperties,\n  MessageStatus,\n  Common,\n  AreTypeEqual,\n  AreParamEqual\n} from '../../acs-ui-common/src';\n\n// Not to export chat/calling specific hook from binding package\nexport type {\n  CallClientProviderProps,\n  CallAgentProviderProps,\n  CallProviderProps,\n  GetCallingSelector,\n  CallingHandlers,\n  CallingBaseSelectorProps,\n  CommonCallingHandlers\n} 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';\n\nexport type {\n  ChatClientProviderProps,\n  ChatThreadClientProviderProps,\n  GetChatSelector,\n  ChatHandlers,\n  ChatBaseSelectorProps\n} from '../../chat-component-bindings/src';\n\nexport {\n  CallClientProvider,\n  CallAgentProvider,\n  CallProvider,\n  useCallClient,\n  useCallAgent,\n  useCall,\n  useDeviceManager,\n  getCallingSelector,\n  createDefaultCallingHandlers\n} from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport {\n  useTeamsCallAgent,\n  useTeamsCall,\n  createDefaultTeamsCallingHandlers\n} from '../../calling-component-bindings/src';\n\n/* @conditional-compile-remove(teams-identity-support) */\nexport type { TeamsCallingHandlers } from '../../calling-component-bindings/src';\n\nexport type {\n  ScreenShareButtonSelector,\n  CameraButtonSelector,\n  VideoGallerySelector,\n  DevicesButtonSelector,\n  EmptySelector,\n  ErrorBarSelector as CallErrorBarSelector,\n  ParticipantListSelector,\n  MicrophoneButtonSelector,\n  ParticipantsButtonSelector,\n  CreateDefaultCallingHandlers\n} 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';\n\nexport {\n  ChatClientProvider,\n  ChatThreadClientProvider,\n  useChatClient,\n  useChatThreadClient,\n  getChatSelector,\n  createDefaultChatHandlers\n} from '../../chat-component-bindings/src';\n\nexport type {\n  MessageThreadSelector,\n  TypingIndicatorSelector,\n  ChatParticipantListSelector,\n  SendBoxSelector,\n  ErrorBarSelector as ChatErrorBarSelector\n} from '../../chat-component-bindings/src';\n\nexport {\n  _IdentifierProvider,\n  CameraButton,\n  ControlBar,\n  ControlBarButton,\n  DevicesButton,\n  EndCallButton,\n  ErrorBar,\n  GridLayout,\n  LocalizationProvider,\n  MessageStatusIndicator,\n  MessageThread,\n  MicrophoneButton,\n  ParticipantItem,\n  ParticipantList,\n  ParticipantsButton,\n  ScreenShareButton,\n  SendBox,\n  StreamMedia,\n  TypingIndicator,\n  VideoGallery,\n  VideoTile,\n  COMPONENT_LOCALE_EN_GB,\n  COMPONENT_LOCALE_AR_SA,\n  COMPONENT_LOCALE_CS_CZ,\n  COMPONENT_LOCALE_DE_DE,\n  COMPONENT_LOCALE_ES_ES,\n  COMPONENT_LOCALE_FI_FI,\n  COMPONENT_LOCALE_FR_FR,\n  COMPONENT_LOCALE_HE_IL,\n  COMPONENT_LOCALE_IT_IT,\n  COMPONENT_LOCALE_JA_JP,\n  COMPONENT_LOCALE_KO_KR,\n  COMPONENT_LOCALE_NB_NO,\n  COMPONENT_LOCALE_NL_NL,\n  COMPONENT_LOCALE_PL_PL,\n  COMPONENT_LOCALE_PT_BR,\n  COMPONENT_LOCALE_RU_RU,\n  COMPONENT_LOCALE_SV_SE,\n  COMPONENT_LOCALE_TR_TR,\n  COMPONENT_LOCALE_ZH_CN,\n  COMPONENT_LOCALE_ZH_TW\n} 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 {\n  CameraAndMicrophoneSitePermissions,\n  MicrophoneSitePermissions,\n  CameraSitePermissions\n} from '../../react-components/src';\n/* @conditional-compile-remove(call-readiness) */\nexport type {\n  CameraAndMicrophoneSitePermissionsStrings,\n  CameraAndMicrophoneSitePermissionsProps,\n  CameraSitePermissionsStrings,\n  CameraSitePermissionsProps,\n  CommonSitePermissionsProps,\n  SitePermissionsStrings,\n  SitePermissionsStyles,\n  MicrophoneSitePermissionsStrings,\n  MicrophoneSitePermissionsProps\n} 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 {\n  MentionOptions,\n  MentionDisplayOptions,\n  MentionLookupOptions,\n  Mention,\n  MentionPopoverStrings\n} from '../../react-components/src';\n\nexport type {\n  _IdentifierProviderProps,\n  _Identifiers,\n  ActiveErrorMessage,\n  BaseCustomStyles,\n  CallParticipantListParticipant,\n  CameraButtonContextualMenuStyles,\n  CameraButtonProps,\n  CameraButtonStrings,\n  CameraButtonStyles,\n  ChatMessage,\n  CommunicationParticipant,\n  ComponentLocale,\n  ComponentSlotStyle,\n  ComponentStrings,\n  ContentSystemMessage,\n  ControlBarButtonProps,\n  ControlBarButtonStrings,\n  ControlBarButtonStyles,\n  ControlBarLayout,\n  ControlBarProps,\n  CreateVideoStreamViewResult,\n  CustomAvatarOptions,\n  CustomMessage,\n  DevicesButtonContextualMenuStyles,\n  DevicesButtonProps,\n  DevicesButtonStrings,\n  DevicesButtonStyles,\n  EndCallButtonProps,\n  EndCallButtonStrings,\n  ErrorBarProps,\n  ErrorBarStrings,\n  ErrorType,\n  GridLayoutProps,\n  GridLayoutStyles,\n  HorizontalGalleryStyles,\n  JumpToNewMessageButtonProps,\n  LocalizationProviderProps,\n  LocalVideoCameraCycleButtonProps,\n  LoadingState,\n  Message,\n  MessageAttachedStatus,\n  MessageCommon,\n  MessageContentType,\n  MessageProps,\n  MessageRenderer,\n  MessageStatusIndicatorProps,\n  MessageStatusIndicatorStrings,\n  MessageThreadProps,\n  MessageThreadStrings,\n  MessageThreadStyles,\n  MicrophoneButtonContextualMenuStyles,\n  MicrophoneButtonProps,\n  MicrophoneButtonStrings,\n  MicrophoneButtonStyles,\n  OnRenderAvatarCallback,\n  OptionsDevice,\n  ParticipantAddedSystemMessage,\n  ParticipantItemProps,\n  ParticipantItemStrings,\n  ParticipantItemStyles,\n  ParticipantListItemStyles,\n  ParticipantListParticipant,\n  ParticipantListProps,\n  ParticipantListStyles,\n  ParticipantMenuItemsCallback,\n  ParticipantRemovedSystemMessage,\n  ParticipantState,\n  ParticipantsButtonContextualMenuStyles,\n  ParticipantsButtonProps,\n  ParticipantsButtonStrings,\n  ParticipantsButtonStyles,\n  ReadReceiptsBySenderId,\n  ScreenShareButtonProps,\n  ScreenShareButtonStrings,\n  SendBoxProps,\n  SendBoxStrings,\n  SendBoxStylesProps,\n  StreamMediaProps,\n  SystemMessage,\n  SystemMessageCommon,\n  TopicUpdatedSystemMessage,\n  TypingIndicatorProps,\n  TypingIndicatorStrings,\n  TypingIndicatorStylesProps,\n  UpdateMessageCallback,\n  CancelEditCallback,\n  VideoGalleryLayout,\n  VideoGalleryLocalParticipant,\n  VideoGalleryParticipant,\n  VideoGalleryProps,\n  VideoGalleryRemoteParticipant,\n  VideoGalleryStream,\n  VideoGalleryStrings,\n  VideoGalleryStyles,\n  VideoStreamOptions,\n  VideoTileProps,\n  VideoTileStylesProps,\n  ViewScalingMode\n} from '../../react-components/src';\n/* @conditional-compile-remove(raise-hand) */\nexport type { RaiseHandButtonProps, RaiseHandButtonStrings, RaisedHand } from '../../react-components/src';\n/* @conditional-compile-remove(reaction) */\nexport type {\n  ReactionButtonStrings,\n  Reaction,\n  ReactionButtonProps,\n  ReactionResources,\n  ReactionSprite\n} from '../../react-components/src';\n/* @conditional-compile-remove(spotlight) */\nexport type { Spotlight } 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 {\n  DialpadMode,\n  DialpadProps,\n  DialpadStrings,\n  DialpadStyles,\n  DtmfTone,\n  LongPressTrigger\n} from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */\nexport type {\n  ActiveFileUpload,\n  SendBoxErrorBarError,\n  FileDownloadHandler,\n  FileDownloadError\n} from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { AttachmentMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */\nexport type { FileMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nexport type { ChatAttachmentType, AttachmentDownloadResult, InlineImageMetadata } from '../../react-components/src';\n/* @conditional-compile-remove(image-gallery) */\nexport type { InlineImageOptions, InlineImage } 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 {\n  BrowserPermissionDeniedIOSStrings,\n  BrowserPermissionDeniedStyles,\n  BrowserPermissionDeniedIOSProps\n} 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 {\n  StatefulChatClient,\n  StatefulChatClientArgs,\n  StatefulChatClientOptions,\n  ChatMessageWithStatus,\n  ChatClientState,\n  ChatError,\n  ChatErrors,\n  ChatThreadClientState,\n  ChatThreadProperties,\n  ChatErrorTarget\n} 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 {\n  VerticalGalleryStyles,\n  VerticalGalleryStrings,\n  VerticalGalleryControlBarStyles\n} from '../../react-components/src';\n/* @conditional-compile-remove(close-captions) */\nexport type { SpokenLanguageStrings, CaptionLanguageStrings } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { SurveyIssues } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { SurveyIssuesHeadingStrings } from '../../react-components/src';\n/* @conditional-compile-remove(end-of-call-survey) */\nexport type { CallSurveyImprovementSuggestions } from '../../react-components/src';\n"]}

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

@@ -4,6 +4,7 @@ import { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../t
 import { BlockedMessage } from '../../types';
 import { FileDownloadHandler, AttachmentMetadata } from '../FileDownloadCards';
 import { MentionOptions } from '../MentionPopover';
+import { InlineImageOptions } from './ChatMessageContent';
 type ChatMessageComponentProps = {
     message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
     userId: string;
@@ -71,7 +72,7 @@ type ChatMessageComponentProps = {
      * Optional callback called when an inline image is clicked.
      * @beta
      */
-    onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;
+    inlineImageOptions?: InlineImageOptions;
 };
 /**
  * @private

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

@@ -53,7 +53,7 @@ export const ChatMessageComponent = (props) => {
             /* @conditional-compile-remove(date-time-customization) */
             onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, 
             /* @conditional-compile-remove(image-gallery) */
-            onInlineImageClicked: props.onInlineImageClicked, 
+            inlineImageOptions: props.inlineImageOptions, 
             /* @conditional-compile-remove(mention) */
             mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions })));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponent.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, 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, AttachmentMetadata } from '../FileDownloadCards';\n/* @conditional-compile-remove(mention) */\nimport { MentionOptions } from '../MentionPopover';\n\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?: (\n    messageId: string,\n    content: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachmentMetadata?: AttachmentMetadata[];\n    }\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: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /* @conditional-compile-remove(date-time-customization) */\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(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};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\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\n  if (isEditing && message.messageType === 'chat') {\n    return (\n      <ChatMessageComponentAsEditBox\n        message={message}\n        strings={props.strings}\n        onSubmit={async (text, metadata, options) => {\n          props.onUpdateMessage &&\n            message.messageId &&\n            (await props.onUpdateMessage(message.messageId, text, metadata, options));\n          setIsEditing(false);\n        }}\n        onCancel={(messageId) => {\n          props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n          setIsEditing(false);\n        }}\n        /* @conditional-compile-remove(mention) */\n        mentionLookupOptions={props.mentionOptions?.lookupOptions}\n      />\n    );\n  } else {\n    return (\n      <ChatMessageComponentAsMessageBubble\n        {...props}\n        onRemoveClick={onRemoveClick}\n        onEditClick={onEditClick}\n        onResendClick={onResendClick}\n        onRenderAvatar={props.onRenderAvatar}\n        /* @conditional-compile-remove(date-time-customization) */\n        onDisplayDateTimeString={props.onDisplayDateTimeString}\n        strings={props.strings}\n        /* @conditional-compile-remove(image-gallery) */\n        onInlineImageClicked={props.onInlineImageClicked}\n        /* @conditional-compile-remove(mention) */\n        mentionDisplayOptions={props.mentionOptions?.displayOptions}\n      />\n    );\n  }\n};\n"]}
+{"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponent.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, 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, AttachmentMetadata } from '../FileDownloadCards';\n/* @conditional-compile-remove(mention) */\nimport { MentionOptions } from '../MentionPopover';\n/* @conditional-compile-remove(image-gallery) */\nimport { InlineImageOptions } from './ChatMessageContent';\n\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?: (\n    messageId: string,\n    content: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachmentMetadata?: AttachmentMetadata[];\n    }\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: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /* @conditional-compile-remove(date-time-customization) */\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(image-gallery) */\n  /**\n   * Optional callback called when an inline image is clicked.\n   * @beta\n   */\n  inlineImageOptions?: InlineImageOptions;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\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\n  if (isEditing && message.messageType === 'chat') {\n    return (\n      <ChatMessageComponentAsEditBox\n        message={message}\n        strings={props.strings}\n        onSubmit={async (text, metadata, options) => {\n          props.onUpdateMessage &&\n            message.messageId &&\n            (await props.onUpdateMessage(message.messageId, text, metadata, options));\n          setIsEditing(false);\n        }}\n        onCancel={(messageId) => {\n          props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n          setIsEditing(false);\n        }}\n        /* @conditional-compile-remove(mention) */\n        mentionLookupOptions={props.mentionOptions?.lookupOptions}\n      />\n    );\n  } else {\n    return (\n      <ChatMessageComponentAsMessageBubble\n        {...props}\n        onRemoveClick={onRemoveClick}\n        onEditClick={onEditClick}\n        onResendClick={onResendClick}\n        onRenderAvatar={props.onRenderAvatar}\n        /* @conditional-compile-remove(date-time-customization) */\n        onDisplayDateTimeString={props.onDisplayDateTimeString}\n        strings={props.strings}\n        /* @conditional-compile-remove(image-gallery) */\n        inlineImageOptions={props.inlineImageOptions}\n        /* @conditional-compile-remove(mention) */\n        mentionDisplayOptions={props.mentionOptions?.displayOptions}\n      />\n    );\n  }\n};\n"]}

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

@@ -1,5 +1,6 @@
 import { IStyle } from '@fluentui/react';
 import React from 'react';
+import { InlineImageOptions } from './ChatMessageContent';
 import { ChatMessage } from '../../types/ChatMessage';
 import { BlockedMessage } from '../../types/ChatMessage';
 import { MessageThreadStrings } from '../MessageThread';
@@ -62,7 +63,7 @@ type ChatMessageComponentAsMessageBubbleProps = {
      * Optional callback called when an inline image is clicked.
      * @beta
      */
-    onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;
+    inlineImageOptions?: InlineImageOptions;
 };
 /** @private */
 export declare const ChatMessageComponentAsMessageBubble: React.MemoExoticComponent<(props: ChatMessageComponentAsMessageBubbleProps) => JSX.Element>;

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

@@ -1,14 +1,5 @@
 // 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';
@@ -52,7 +43,7 @@ const MessageBubble = (props) => {
     /* @conditional-compile-remove(file-sharing) */
     fileDownloadHandler, 
     /* @conditional-compile-remove(image-gallery) */
-    onInlineImageClicked, shouldOverlapAvatarAndMessage } = props;
+    inlineImageOptions, shouldOverlapAvatarAndMessage } = props;
     const defaultTimeStamp = message.createdOn
         ? generateDefaultTimestamp(message.createdOn, showDate, strings)
         : undefined;
@@ -118,13 +109,6 @@ 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') {
@@ -136,18 +120,17 @@ const MessageBubble = (props) => {
                 /* @conditional-compile-remove(mention) */
                 mentionDisplayOptions: props.mentionDisplayOptions, 
                 /* @conditional-compile-remove(image-gallery) */
-                onInlineImageClicked: handleOnInlineImageClicked }),
+                inlineImageOptions: inlineImageOptions }),
             /* @conditional-compile-remove(file-sharing) */ props.onRenderFileDownloads
                 ? props.onRenderFileDownloads(userId, message)
                 : defaultOnRenderFileDownloads()));
     }, [
         defaultOnRenderFileDownloads,
+        /* @conditional-compile-remove(image-gallery) */ inlineImageOptions,
         message,
         props,
         strings,
-        userId,
-        /* @conditional-compile-remove(image-gallery) */
-        handleOnInlineImageClicked
+        userId
     ]);
     const isBlockedMessage = false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
     const chatMyMessageStyles = useChatMyMessageStyles();

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles, IStyle } from '@fluentui/react';\nimport { ChatMessage as FluentChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport {\n  chatMessageEditedTagStyle,\n  chatMessageDateStyle,\n  chatMessageFailedTagStyle,\n  chatMessageAuthorStyle\n} from '../styles/ChatMessageComponent.styles';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';\nimport { useIdentifiers } from '../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../theming';\nimport { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';\nimport { ChatMessageContent } from './ChatMessageContent';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessageContent } from './ChatMessageContent';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageActionMenuProps } from './ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileDownloadHandler } from '../FileDownloadCards';\nimport { _FileDownloadCards } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions } from '../MentionPopover';\nimport { createStyleFromV8Style } from '../styles/v8StyleShim';\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport { mergeClasses } from '@fluentui/react-components';\nimport {\n  useChatMessageStyles,\n  useChatMyMessageStyles,\n  useChatMessageCommonStyles\n} from '../styles/MessageThread.styles';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  /** Styles for message status indicator container. */\n  messageStatusContainer?: (mine: boolean) => IStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  messageStatusRenderer?: (status: MessageStatus) => JSX.Element | null;\n  /**\n   * Whether to overlap avatar and message when the view is width constrained.\n   */\n  shouldOverlapAvatarAndMessage: boolean;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => 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 display suggestions in the mention scenario.\n   * @internal\n   */\n  mentionDisplayOptions?: MentionDisplayOptions;\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};\n\nconst generateDefaultTimestamp = (\n  createdOn: Date,\n  showDate: boolean | undefined,\n  strings: MessageThreadStrings\n): string => {\n  const formattedTimestamp = showDate\n    ? formatTimestampForChatMessage(createdOn, new Date(), strings)\n    : formatTimeForChatMessage(createdOn);\n\n  return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (\n  props: ChatMessageComponentAsMessageBubbleProps,\n  createdOn: Date,\n  locale: ComponentLocale\n): string => {\n  /* @conditional-compile-remove(date-time-customization) */\n  return props.onDisplayDateTimeString\n    ? props.onDisplayDateTimeString(createdOn)\n    : locale.onDisplayDateTimeString\n    ? locale.onDisplayDateTimeString(createdOn)\n    : '';\n\n  return '';\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    onRemoveClick,\n    onResendClick,\n    disableEditing,\n    showDate,\n    messageContainerStyle,\n    strings,\n    onEditClick,\n    remoteParticipantsCount = 0,\n    onRenderAvatar,\n    showMessageStatus,\n    messageStatus,\n    /* @conditional-compile-remove(file-sharing) */\n    fileDownloadHandler,\n    /* @conditional-compile-remove(image-gallery) */\n    onInlineImageClicked,\n    shouldOverlapAvatarAndMessage\n  } = props;\n\n  const defaultTimeStamp = message.createdOn\n    ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n    : undefined;\n\n  const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n\n  const formattedTimestamp = customTimestamp || defaultTimeStamp;\n\n  // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n  const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n  // `focused` state is used for show/hide actionMenu\n  const [focused, setFocused] = React.useState<boolean>(false);\n\n  // The chat message action flyout should target the Chat.Message action menu if clicked,\n  // or target the chat message if opened via touch press.\n  // Undefined indicates the flyout menu should not be being shown.\n  const messageRef = useRef<HTMLDivElement | null>(null);\n  const messageActionButtonRef = useRef<HTMLDivElement | null>(null);\n  const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<\n    React.MutableRefObject<HTMLElement | null> | undefined\n  >(undefined);\n\n  const chatActionsEnabled =\n    !disableEditing &&\n    message.status !== 'sending' &&\n    !!message.mine &&\n    /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';\n  const [messageReadBy, setMessageReadBy] = useState<{ id: string; displayName: string }[]>([]);\n\n  const actionMenuProps = chatMessageActionMenuProps({\n    ariaLabel: strings.actionMenuMoreOptions ?? '',\n    enabled: chatActionsEnabled,\n    menuButtonRef: messageActionButtonRef,\n    menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,\n    onActionButtonClick: () => {\n      if (message.messageType === 'chat') {\n        props.onActionButtonClick(message, setMessageReadBy);\n        setChatMessageActionFlyoutTarget(messageActionButtonRef);\n      }\n    },\n    theme\n  });\n\n  const onActionFlyoutDismiss = useCallback((): void => {\n    // When the flyout dismiss is called, since we control if the action flyout is visible\n    // or not we need to set the target to undefined here to actually hide the action flyout\n    setChatMessageActionFlyoutTarget(undefined);\n  }, [setChatMessageActionFlyoutTarget]);\n\n  const defaultOnRenderFileDownloads = useCallback(() => {\n    /* @conditional-compile-remove(file-sharing) */\n    return (\n      <_FileDownloadCards\n        userId={userId}\n        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n        fileMetadata={(message as ChatMessage).files || []}\n        /* @conditional-compile-remove(file-sharing) */\n        downloadHandler={fileDownloadHandler}\n        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n        strings={{ downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage }}\n      />\n    );\n  }, [\n    userId,\n    message,\n    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n    strings,\n    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n    fileDownloadHandler\n  ]);\n\n  const editedOn = 'editedOn' in message ? message.editedOn : undefined;\n  const getMessageDetails = useCallback(() => {\n    if (messageStatus === 'failed') {\n      return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n    } else if (message.messageType === 'chat' && editedOn) {\n      return <div className={chatMessageEditedTagStyle(theme)}>{strings.editedTag}</div>;\n    }\n    return undefined;\n  }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n  /* @conditional-compile-remove(image-gallery) */\n  const handleOnInlineImageClicked = useCallback(\n    async (attachmentId: string): Promise<void> => {\n      if (onInlineImageClicked === undefined) {\n        return;\n      }\n      await onInlineImageClicked(attachmentId, message.messageId);\n    },\n    [message, onInlineImageClicked]\n  );\n\n  const getContent = useCallback(() => {\n    /* @conditional-compile-remove(data-loss-prevention) */\n    if (message.messageType === 'blocked') {\n      return (\n        <div tabIndex={0}>\n          <BlockedMessageContent message={message} strings={strings} />\n        </div>\n      );\n    }\n    return (\n      <div tabIndex={0} className=\"ui-chat__message__content\">\n        <ChatMessageContent\n          message={message}\n          strings={strings}\n          /* @conditional-compile-remove(mention) */\n          mentionDisplayOptions={props.mentionDisplayOptions}\n          /* @conditional-compile-remove(image-gallery) */\n          onInlineImageClicked={handleOnInlineImageClicked}\n        />\n        {\n          /* @conditional-compile-remove(file-sharing) */ props.onRenderFileDownloads\n            ? props.onRenderFileDownloads(userId, message)\n            : defaultOnRenderFileDownloads()\n        }\n      </div>\n    );\n  }, [\n    defaultOnRenderFileDownloads,\n    message,\n    props,\n    strings,\n    userId,\n    /* @conditional-compile-remove(image-gallery) */\n    handleOnInlineImageClicked\n  ]);\n\n  const isBlockedMessage =\n    false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n  const chatMessageStyles = useChatMessageStyles();\n  const chatItemMessageContainerClassName = mergeClasses(\n    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n    chatMessageStyles.body,\n    // disable placeholder functionality for GA releases as it might confuse users\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\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    message.attached === 'top' || message.attached === false\n      ? chatMessageStyles.bodyWithAvatar\n      : chatMessageStyles.bodyWithoutAvatar,\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        {message.mine ? (\n          <ChatMyMessage\n            attached={attached}\n            key={props.message.messageId}\n            body={{\n              // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n              className: mergeClasses(\n                chatMyMessageStyles.body,\n                isBlockedMessage\n                  ? chatMessageCommonStyles.blocked\n                  : props.message.status === 'failed'\n                  ? chatMessageCommonStyles.failed\n                  : undefined,\n                attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,\n                mergeStyles(messageContainerStyle)\n              ),\n              style: { ...createStyleFromV8Style(messageContainerStyle) },\n              ref: messageRef\n            }}\n            root={{\n              className: chatMyMessageStyles.root,\n              onBlur: (e) => {\n                // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n                // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n                if (chatMessageActionFlyoutTarget?.current) {\n                  // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu\n                  return;\n                }\n                const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n                setFocused(shouldPreserveFocusState);\n              },\n              onFocus: () => {\n                // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n                // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n                setFocused(true);\n              },\n              // make body not focusable to remove repetitions from narrators.\n              // inner components are already focusable\n              role: 'none',\n              tabIndex: -1\n            }}\n            data-ui-id=\"chat-composite-message\"\n            author={\n              <Text className={chatMessageDateStyle} tabIndex={0}>\n                {message.senderDisplayName}\n              </Text>\n            }\n            timestamp={\n              <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\n                {formattedTimestamp}\n              </Text>\n            }\n            details={getMessageDetails()}\n            actions={{\n              children: actionMenuProps?.children,\n              className: mergeClasses(\n                chatMyMessageStyles.menu,\n                // Make actions menu visible when the message is focused or the flyout is shown\n                focused || chatMessageActionFlyoutTarget?.current\n                  ? chatMyMessageStyles.menuVisible\n                  : chatMyMessageStyles.menuHidden,\n                attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined\n              )\n            }}\n            onTouchStart={() => setWasInteractionByTouch(true)}\n            onPointerDown={() => setWasInteractionByTouch(false)}\n            onKeyDown={() => setWasInteractionByTouch(false)}\n            onClick={() => {\n              if (!wasInteractionByTouch) {\n                return;\n              }\n              // If the message was touched via touch we immediately open the menu\n              // flyout (when using mouse the 3-dot menu that appears on hover\n              // must be clicked to open the flyout).\n              // In doing so here we set the target of the flyout to be the message and\n              // not the 3-dot menu button to position the flyout correctly.\n              setChatMessageActionFlyoutTarget(messageRef);\n              if (message.messageType === 'chat') {\n                props.onActionButtonClick(message, setMessageReadBy);\n              }\n            }}\n          >\n            {getContent()}\n          </ChatMyMessage>\n        ) : (\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          >\n            {getContent()}\n          </FluentChatMessage>\n        )}\n      </div>\n      {chatActionsEnabled && (\n        <ChatMessageActionFlyout\n          hidden={!chatMessageActionFlyoutTarget}\n          target={chatMessageActionFlyoutTarget}\n          increaseFlyoutItemSize={wasInteractionByTouch}\n          onDismiss={onActionFlyoutDismiss}\n          onEditClick={onEditClick}\n          onRemoveClick={onRemoveClick}\n          onResendClick={onResendClick}\n          strings={strings}\n          messageReadBy={messageReadBy}\n          messageStatus={messageStatus ?? 'failed'}\n          remoteParticipantsCount={remoteParticipantsCount}\n          onRenderAvatar={onRenderAvatar}\n          showMessageStatus={showMessageStatus}\n        />\n      )}\n    </>\n  );\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}
+{"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles, IStyle } from '@fluentui/react';\nimport { ChatMessage as FluentChatMessage, ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport {\n  chatMessageEditedTagStyle,\n  chatMessageDateStyle,\n  chatMessageFailedTagStyle,\n  chatMessageAuthorStyle\n} from '../styles/ChatMessageComponent.styles';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from '../utils/Datetime';\nimport { useIdentifiers } from '../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../theming';\nimport { ChatMessageActionFlyout } from './ChatMessageActionsFlyout';\nimport { ChatMessageContent } from './ChatMessageContent';\n/* @conditional-compile-remove(image-gallery) */\nimport { InlineImageOptions } from './ChatMessageContent';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessageContent } from './ChatMessageContent';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageActionMenuProps } from './ChatMessageActionMenu';\nimport { ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileDownloadHandler } from '../FileDownloadCards';\nimport { _FileDownloadCards } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions } from '../MentionPopover';\nimport { createStyleFromV8Style } from '../styles/v8StyleShim';\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport { mergeClasses } from '@fluentui/react-components';\nimport {\n  useChatMessageStyles,\n  useChatMyMessageStyles,\n  useChatMessageCommonStyles\n} from '../styles/MessageThread.styles';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  /** Styles for message status indicator container. */\n  messageStatusContainer?: (mine: boolean) => IStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onEditClick: () => void;\n  onRemoveClick?: () => void;\n  onResendClick?: () => void;\n  strings: MessageThreadStrings;\n  userId: string;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  messageStatusRenderer?: (status: MessageStatus) => JSX.Element | null;\n  /**\n   * Whether to overlap avatar and message when the view is width constrained.\n   */\n  shouldOverlapAvatarAndMessage: boolean;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => 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 display suggestions in the mention scenario.\n   * @internal\n   */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /* @conditional-compile-remove(image-gallery) */\n  /**\n   * Optional callback called when an inline image is clicked.\n   * @beta\n   */\n  inlineImageOptions?: InlineImageOptions;\n};\n\nconst generateDefaultTimestamp = (\n  createdOn: Date,\n  showDate: boolean | undefined,\n  strings: MessageThreadStrings\n): string => {\n  const formattedTimestamp = showDate\n    ? formatTimestampForChatMessage(createdOn, new Date(), strings)\n    : formatTimeForChatMessage(createdOn);\n\n  return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\nconst generateCustomizedTimestamp = (\n  props: ChatMessageComponentAsMessageBubbleProps,\n  createdOn: Date,\n  locale: ComponentLocale\n): string => {\n  /* @conditional-compile-remove(date-time-customization) */\n  return props.onDisplayDateTimeString\n    ? props.onDisplayDateTimeString(createdOn)\n    : locale.onDisplayDateTimeString\n    ? locale.onDisplayDateTimeString(createdOn)\n    : '';\n\n  return '';\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    onRemoveClick,\n    onResendClick,\n    disableEditing,\n    showDate,\n    messageContainerStyle,\n    strings,\n    onEditClick,\n    remoteParticipantsCount = 0,\n    onRenderAvatar,\n    showMessageStatus,\n    messageStatus,\n    /* @conditional-compile-remove(file-sharing) */\n    fileDownloadHandler,\n    /* @conditional-compile-remove(image-gallery) */\n    inlineImageOptions,\n    shouldOverlapAvatarAndMessage\n  } = props;\n\n  const defaultTimeStamp = message.createdOn\n    ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n    : undefined;\n\n  const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';\n\n  const formattedTimestamp = customTimestamp || defaultTimeStamp;\n\n  // Track if the action menu was opened by touch - if so we increase the touch targets for the items\n  const [wasInteractionByTouch, setWasInteractionByTouch] = useState(false);\n  // `focused` state is used for show/hide actionMenu\n  const [focused, setFocused] = React.useState<boolean>(false);\n\n  // The chat message action flyout should target the Chat.Message action menu if clicked,\n  // or target the chat message if opened via touch press.\n  // Undefined indicates the flyout menu should not be being shown.\n  const messageRef = useRef<HTMLDivElement | null>(null);\n  const messageActionButtonRef = useRef<HTMLDivElement | null>(null);\n  const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = useState<\n    React.MutableRefObject<HTMLElement | null> | undefined\n  >(undefined);\n\n  const chatActionsEnabled =\n    !disableEditing &&\n    message.status !== 'sending' &&\n    !!message.mine &&\n    /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';\n  const [messageReadBy, setMessageReadBy] = useState<{ id: string; displayName: string }[]>([]);\n\n  const actionMenuProps = chatMessageActionMenuProps({\n    ariaLabel: strings.actionMenuMoreOptions ?? '',\n    enabled: chatActionsEnabled,\n    menuButtonRef: messageActionButtonRef,\n    menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,\n    onActionButtonClick: () => {\n      if (message.messageType === 'chat') {\n        props.onActionButtonClick(message, setMessageReadBy);\n        setChatMessageActionFlyoutTarget(messageActionButtonRef);\n      }\n    },\n    theme\n  });\n\n  const onActionFlyoutDismiss = useCallback((): void => {\n    // When the flyout dismiss is called, since we control if the action flyout is visible\n    // or not we need to set the target to undefined here to actually hide the action flyout\n    setChatMessageActionFlyoutTarget(undefined);\n  }, [setChatMessageActionFlyoutTarget]);\n\n  const defaultOnRenderFileDownloads = useCallback(() => {\n    /* @conditional-compile-remove(file-sharing) */\n    return (\n      <_FileDownloadCards\n        userId={userId}\n        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n        fileMetadata={(message as ChatMessage).files || []}\n        /* @conditional-compile-remove(file-sharing) */\n        downloadHandler={fileDownloadHandler}\n        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n        strings={{ downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage }}\n      />\n    );\n  }, [\n    userId,\n    message,\n    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n    strings,\n    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/\n    fileDownloadHandler\n  ]);\n\n  const editedOn = 'editedOn' in message ? message.editedOn : undefined;\n  const getMessageDetails = useCallback(() => {\n    if (messageStatus === 'failed') {\n      return <div className={chatMessageFailedTagStyle(theme)}>{strings.failToSendTag}</div>;\n    } else if (message.messageType === 'chat' && editedOn) {\n      return <div className={chatMessageEditedTagStyle(theme)}>{strings.editedTag}</div>;\n    }\n    return undefined;\n  }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);\n\n  const getContent = useCallback(() => {\n    /* @conditional-compile-remove(data-loss-prevention) */\n    if (message.messageType === 'blocked') {\n      return (\n        <div tabIndex={0}>\n          <BlockedMessageContent message={message} strings={strings} />\n        </div>\n      );\n    }\n    return (\n      <div tabIndex={0} className=\"ui-chat__message__content\">\n        <ChatMessageContent\n          message={message}\n          strings={strings}\n          /* @conditional-compile-remove(mention) */\n          mentionDisplayOptions={props.mentionDisplayOptions}\n          /* @conditional-compile-remove(image-gallery) */\n          inlineImageOptions={inlineImageOptions}\n        />\n        {\n          /* @conditional-compile-remove(file-sharing) */ props.onRenderFileDownloads\n            ? props.onRenderFileDownloads(userId, message)\n            : defaultOnRenderFileDownloads()\n        }\n      </div>\n    );\n  }, [\n    defaultOnRenderFileDownloads,\n    /* @conditional-compile-remove(image-gallery) */ inlineImageOptions,\n    message,\n    props,\n    strings,\n    userId\n  ]);\n\n  const isBlockedMessage =\n    false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n  const chatMessageStyles = useChatMessageStyles();\n  const chatItemMessageContainerClassName = mergeClasses(\n    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n    chatMessageStyles.body,\n    // disable placeholder functionality for GA releases as it might confuse users\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\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    message.attached === 'top' || message.attached === false\n      ? chatMessageStyles.bodyWithAvatar\n      : chatMessageStyles.bodyWithoutAvatar,\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        {message.mine ? (\n          <ChatMyMessage\n            attached={attached}\n            key={props.message.messageId}\n            body={{\n              // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n              className: mergeClasses(\n                chatMyMessageStyles.body,\n                isBlockedMessage\n                  ? chatMessageCommonStyles.blocked\n                  : props.message.status === 'failed'\n                  ? chatMessageCommonStyles.failed\n                  : undefined,\n                attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined,\n                mergeStyles(messageContainerStyle)\n              ),\n              style: { ...createStyleFromV8Style(messageContainerStyle) },\n              ref: messageRef\n            }}\n            root={{\n              className: chatMyMessageStyles.root,\n              onBlur: (e) => {\n                // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating\n                // with keyboard the focused element will be changed and there is no way to use `:focus` selector\n                if (chatMessageActionFlyoutTarget?.current) {\n                  // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu\n                  return;\n                }\n                const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);\n                setFocused(shouldPreserveFocusState);\n              },\n              onFocus: () => {\n                // react onFocus is called even when nested component receives focus (i.e. it bubbles)\n                // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible\n                setFocused(true);\n              },\n              // make body not focusable to remove repetitions from narrators.\n              // inner components are already focusable\n              role: 'none',\n              tabIndex: -1\n            }}\n            data-ui-id=\"chat-composite-message\"\n            author={\n              <Text className={chatMessageDateStyle} tabIndex={0}>\n                {message.senderDisplayName}\n              </Text>\n            }\n            timestamp={\n              <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp} tabIndex={0}>\n                {formattedTimestamp}\n              </Text>\n            }\n            details={getMessageDetails()}\n            actions={{\n              children: actionMenuProps?.children,\n              className: mergeClasses(\n                chatMyMessageStyles.menu,\n                // Make actions menu visible when the message is focused or the flyout is shown\n                focused || chatMessageActionFlyoutTarget?.current\n                  ? chatMyMessageStyles.menuVisible\n                  : chatMyMessageStyles.menuHidden,\n                attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined\n              )\n            }}\n            onTouchStart={() => setWasInteractionByTouch(true)}\n            onPointerDown={() => setWasInteractionByTouch(false)}\n            onKeyDown={() => setWasInteractionByTouch(false)}\n            onClick={() => {\n              if (!wasInteractionByTouch) {\n                return;\n              }\n              // If the message was touched via touch we immediately open the menu\n              // flyout (when using mouse the 3-dot menu that appears on hover\n              // must be clicked to open the flyout).\n              // In doing so here we set the target of the flyout to be the message and\n              // not the 3-dot menu button to position the flyout correctly.\n              setChatMessageActionFlyoutTarget(messageRef);\n              if (message.messageType === 'chat') {\n                props.onActionButtonClick(message, setMessageReadBy);\n              }\n            }}\n          >\n            {getContent()}\n          </ChatMyMessage>\n        ) : (\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          >\n            {getContent()}\n          </FluentChatMessage>\n        )}\n      </div>\n      {chatActionsEnabled && (\n        <ChatMessageActionFlyout\n          hidden={!chatMessageActionFlyoutTarget}\n          target={chatMessageActionFlyoutTarget}\n          increaseFlyoutItemSize={wasInteractionByTouch}\n          onDismiss={onActionFlyoutDismiss}\n          onEditClick={onEditClick}\n          onRemoveClick={onRemoveClick}\n          onResendClick={onResendClick}\n          strings={strings}\n          messageReadBy={messageReadBy}\n          messageStatus={messageStatus ?? 'failed'}\n          remoteParticipantsCount={remoteParticipantsCount}\n          onRenderAvatar={onRenderAvatar}\n          showMessageStatus={showMessageStatus}\n        />\n      )}\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/ChatMessageComponentWrapper.d.ts

@@ -6,6 +6,7 @@ import { BlockedMessage } from '../../types';
 import { FileDownloadHandler } from '../FileDownloadCards';
 import { MentionOptions } from '../MentionPopover';
 import { MessageStatusIndicatorProps } from '../MessageStatusIndicator';
+import { InlineImageOptions } from './ChatMessageContent';
 /**
  * Props for {@link ChatMessageComponentWrapper}
  *
@@ -32,7 +33,7 @@ export type ChatMessageComponentWrapperProps = _ChatMessageProps & {
     }[]) => void) => void;
     fileDownloadHandler?: FileDownloadHandler;
     onDisplayDateTimeString?: (messageDate: Date) => string;
-    onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;
+    inlineImageOptions?: InlineImageOptions;
     mentionOptions?: MentionOptions;
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentWrapper.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { MessageProps, MessageRenderer, MessageThreadStyles, _ChatMessageProps } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileDownloadHandler } from '../FileDownloadCards';\n/* @conditional-compile-remove(mention) */\nimport { MentionOptions } from '../MentionPopover';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { FluentChatMessageComponentWrapper } from './FluentChatMessageComponentWrapper';\nimport { DefaultSystemMessage } from './DefaultSystemMessage';\n\n/**\n * Props for {@link ChatMessageComponentWrapper}\n *\n * @private\n */\nexport type ChatMessageComponentWrapperProps = _ChatMessageProps & {\n  /**\n   * UserId of the current user.\n   */\n  userId: string;\n  styles: MessageThreadStyles | undefined;\n  shouldOverlapAvatarAndMessage: boolean;\n  onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined;\n  defaultStatusRenderer: (\n    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage,\n    participantCount: number,\n    readCount: number,\n    status?: MessageStatus\n  ) => JSX.Element;\n  onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showMessageStatus?: boolean;\n  participantCount?: number;\n  readCount?: number;\n  /* @conditional-compile-remove(file-sharing) */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (\n      readBy: {\n        id: string;\n        displayName: string;\n      }[]\n    ) => void\n  ) => void;\n  /* @conditional-compile-remove(file-sharing) */\n  fileDownloadHandler?: FileDownloadHandler;\n  /* @conditional-compile-remove(date-time-customization) */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  /* @conditional-compile-remove(image-gallery) */\n  onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  mentionOptions?: MentionOptions;\n};\n\n/**\n * The wrapper component to display different types of chat message.\n *\n * @private\n */\nexport const ChatMessageComponentWrapper = (props: ChatMessageComponentWrapperProps): JSX.Element => {\n  const { message, styles, onRenderMessage, key: messageKey } = props;\n\n  const systemMessageStyle = useMemo(() => {\n    return {\n      paddingTop: '0.5rem'\n    };\n  }, []);\n\n  const customMessageStyle = useMemo(() => {\n    return { paddingTop: '1rem', paddingBottom: '0.25rem' };\n  }, []);\n\n  /* @conditional-compile-remove(data-loss-prevention) */\n  // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)\n  if (message.messageType === 'blocked') {\n    const myChatMessageStyle =\n      message.status === 'failed'\n        ? styles?.failedMyChatMessageContainer ?? styles?.myChatMessageContainer\n        : styles?.myChatMessageContainer;\n    const blockedMessageStyle = styles?.blockedMessageContainer;\n    const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;\n    return (\n      <FluentChatMessageComponentWrapper {...props} message={message} messageContainerStyle={messageContainerStyle} />\n    );\n  }\n\n  switch (message.messageType) {\n    case 'chat': {\n      const myChatMessageStyle =\n        message.status === 'failed'\n          ? styles?.failedMyChatMessageContainer ?? styles?.myChatMessageContainer\n          : styles?.myChatMessageContainer;\n      const chatMessageStyle = styles?.chatMessageContainer;\n      const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;\n      return (\n        <FluentChatMessageComponentWrapper {...props} message={message} messageContainerStyle={messageContainerStyle} />\n      );\n    }\n\n    case 'system': {\n      const messageContainerStyle = styles?.systemMessageContainer;\n      const systemMessageComponent =\n        onRenderMessage === undefined ? (\n          <DefaultSystemMessage {...props} />\n        ) : (\n          onRenderMessage({ ...props, messageContainerStyle }, (props) => <DefaultSystemMessage {...props} />)\n        );\n      return (\n        <div key={messageKey} style={systemMessageStyle}>\n          {systemMessageComponent}\n        </div>\n      );\n    }\n\n    default: {\n      // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.\n      const customMessageComponent = onRenderMessage === undefined ? <></> : onRenderMessage({ ...props });\n      return (\n        <div key={messageKey} style={customMessageStyle}>\n          {customMessageComponent}\n        </div>\n      );\n    }\n  }\n};\n"]}
+{"version":3,"file":"ChatMessageComponentWrapper.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageStatus } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { MessageProps, MessageRenderer, MessageThreadStyles, _ChatMessageProps } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileDownloadHandler } from '../FileDownloadCards';\n/* @conditional-compile-remove(mention) */\nimport { MentionOptions } from '../MentionPopover';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { FluentChatMessageComponentWrapper } from './FluentChatMessageComponentWrapper';\nimport { DefaultSystemMessage } from './DefaultSystemMessage';\n/* @conditional-compile-remove(image-gallery) */\nimport { InlineImageOptions } from './ChatMessageContent';\n\n/**\n * Props for {@link ChatMessageComponentWrapper}\n *\n * @private\n */\nexport type ChatMessageComponentWrapperProps = _ChatMessageProps & {\n  /**\n   * UserId of the current user.\n   */\n  userId: string;\n  styles: MessageThreadStyles | undefined;\n  shouldOverlapAvatarAndMessage: boolean;\n  onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined;\n  defaultStatusRenderer: (\n    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage,\n    participantCount: number,\n    readCount: number,\n    status?: MessageStatus\n  ) => JSX.Element;\n  onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;\n  onRenderAvatar?: OnRenderAvatarCallback;\n  showMessageStatus?: boolean;\n  participantCount?: number;\n  readCount?: number;\n  /* @conditional-compile-remove(file-sharing) */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (\n      readBy: {\n        id: string;\n        displayName: string;\n      }[]\n    ) => void\n  ) => void;\n  /* @conditional-compile-remove(file-sharing) */\n  fileDownloadHandler?: FileDownloadHandler;\n  /* @conditional-compile-remove(date-time-customization) */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  /* @conditional-compile-remove(image-gallery) */\n  inlineImageOptions?: InlineImageOptions;\n  /* @conditional-compile-remove(mention) */\n  mentionOptions?: MentionOptions;\n};\n\n/**\n * The wrapper component to display different types of chat message.\n *\n * @private\n */\nexport const ChatMessageComponentWrapper = (props: ChatMessageComponentWrapperProps): JSX.Element => {\n  const { message, styles, onRenderMessage, key: messageKey } = props;\n\n  const systemMessageStyle = useMemo(() => {\n    return {\n      paddingTop: '0.5rem'\n    };\n  }, []);\n\n  const customMessageStyle = useMemo(() => {\n    return { paddingTop: '1rem', paddingBottom: '0.25rem' };\n  }, []);\n\n  /* @conditional-compile-remove(data-loss-prevention) */\n  // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)\n  if (message.messageType === 'blocked') {\n    const myChatMessageStyle =\n      message.status === 'failed'\n        ? styles?.failedMyChatMessageContainer ?? styles?.myChatMessageContainer\n        : styles?.myChatMessageContainer;\n    const blockedMessageStyle = styles?.blockedMessageContainer;\n    const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;\n    return (\n      <FluentChatMessageComponentWrapper {...props} message={message} messageContainerStyle={messageContainerStyle} />\n    );\n  }\n\n  switch (message.messageType) {\n    case 'chat': {\n      const myChatMessageStyle =\n        message.status === 'failed'\n          ? styles?.failedMyChatMessageContainer ?? styles?.myChatMessageContainer\n          : styles?.myChatMessageContainer;\n      const chatMessageStyle = styles?.chatMessageContainer;\n      const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;\n      return (\n        <FluentChatMessageComponentWrapper {...props} message={message} messageContainerStyle={messageContainerStyle} />\n      );\n    }\n\n    case 'system': {\n      const messageContainerStyle = styles?.systemMessageContainer;\n      const systemMessageComponent =\n        onRenderMessage === undefined ? (\n          <DefaultSystemMessage {...props} />\n        ) : (\n          onRenderMessage({ ...props, messageContainerStyle }, (props) => <DefaultSystemMessage {...props} />)\n        );\n      return (\n        <div key={messageKey} style={systemMessageStyle}>\n          {systemMessageComponent}\n        </div>\n      );\n    }\n\n    default: {\n      // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.\n      const customMessageComponent = onRenderMessage === undefined ? <></> : onRenderMessage({ ...props });\n      return (\n        <div key={messageKey} style={customMessageStyle}>\n          {customMessageComponent}\n        </div>\n      );\n    }\n  }\n};\n"]}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ChatMessage } from '../../types/ChatMessage';
 import { BlockedMessage } from '../../types/ChatMessage';
 import { MentionDisplayOptions } from '../MentionPopover';
@@ -7,12 +7,34 @@ type ChatMessageContentProps = {
     message: ChatMessage;
     strings: MessageThreadStrings;
     mentionDisplayOptions?: MentionDisplayOptions;
-    onInlineImageClicked?: (attachmentId: string) => void;
+    inlineImageOptions?: InlineImageOptions;
 };
 type BlockedMessageContentProps = {
     message: BlockedMessage;
     strings: MessageThreadStrings;
 };
+/**
+ * InlineImage's state, as reflected in the UI.
+ *
+ * @beta
+ */
+export interface InlineImage {
+    /** ID of the message that the inline image is belonged to */
+    messageId: string;
+    /** Attributes of the inline image */
+    imgAttrs: React.ImgHTMLAttributes<HTMLImageElement>;
+}
+/**
+ * Options to display inline image in the inline image scenario.
+ *
+ * @beta
+ */
+export interface InlineImageOptions {
+    /**
+     * Optional callback to render an inline image of in a message.
+     */
+    onRenderInlineImage?: (inlineImage: InlineImage, defaultOnRender: (inlineImage: InlineImage) => JSX.Element) => JSX.Element;
+}
 /** @private */
 export declare const ChatMessageContent: (props: ChatMessageContentProps) => JSX.Element;
 /**

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

@@ -82,11 +82,15 @@ const messageContentAriaText = (props) => {
             })
         : undefined;
 };
+/* @conditional-compile-remove(image-gallery) */
+const defaultOnRenderInlineImage = (inlineImage) => {
+    return (React.createElement("img", Object.assign({}, inlineImage.imgAttrs, { "data-ui-id": inlineImage.imgAttrs.id, tabIndex: 0, role: "button", style: Object.assign({ cursor: 'pointer' }, inlineImage.imgAttrs.style) })));
+};
 const processHtmlToReact = (props) => {
     var _a;
     const options = {
         transform(reactNode, domNode) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (domNode instanceof DOMElement && domNode.attribs) {
                 // Transform custom rendering of mentions
                 /* @conditional-compile-remove(mention) */
@@ -108,20 +112,13 @@ const processHtmlToReact = (props) => {
                         return metadata.id === domNode.attribs.id;
                     }))) {
                     domNode.attribs['aria-label'] = domNode.attribs.name;
-                    /* @conditional-compile-remove(image-gallery) */
-                    const handleOnClick = () => {
-                        props.onInlineImageClicked && props.onInlineImageClicked(domNode.attribs.id);
-                    };
                     const imgProps = attributesToProps(domNode.attribs);
                     /* @conditional-compile-remove(image-gallery) */
-                    return (React.createElement("span", { "data-ui-id": domNode.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
-                            cursor: 'pointer'
-                        }, onKeyDown: (e) => {
-                            if (e.key === 'Enter') {
-                                handleOnClick();
-                            }
-                        } },
-                        React.createElement("img", Object.assign({}, imgProps))));
+                    const inlineImageProps = { messageId: props.message.messageId, imgAttrs: imgProps };
+                    /* @conditional-compile-remove(image-gallery) */
+                    return ((_d = props.inlineImageOptions) === null || _d === void 0 ? void 0 : _d.onRenderInlineImage)
+                        ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
+                        : defaultOnRenderInlineImage(inlineImageProps);
                     return React.createElement("img", Object.assign({}, imgProps));
                 }
             }