@azure/communication-react 1.5.1-alpha-202304110013 → 1.5.1-alpha-202304130012

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.5.1-alpha-202304110013';
+module.exports = '1.5.1-alpha-202304130012';
 //# 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,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-202304110013';\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,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-202304130012';\n"]}

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

@@ -34,7 +34,7 @@ export type { _IdentifierProviderProps, _Identifiers, ActiveErrorMessage, BaseCu
 export type { BlockedMessage } from '../../react-components/src';
 export type { Role } from '../../react-components/src';
 export type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from '../../react-components/src';
-export type { ActiveFileUpload, SendBoxErrorBarError, FileDownloadHandler, FileDownloadError, FileMetadata } from '../../react-components/src';
+export type { ActiveFileUpload, SendBoxErrorBarError, FileDownloadHandler, FileDownloadError, FileMetadata, AttachmentDownloadResult } from '../../react-components/src';
 export type { FileMetadataAttachmentType } from '../../react-components/src';
 export type { HoldButtonProps, HoldButtonStrings, VideoTileStrings } from '../../react-components/src';
 export type { BrowserPermissionDeniedStrings, BrowserPermissionDeniedProps } 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;AA4BzG,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;AAmB9C,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,EACV,MAAM,4BAA4B,CAAC;AACpC,6CAA6C;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,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;AA+IpC,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';\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} from '../../calling-component-bindings/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonSelector } 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} from '../../react-components/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport { HoldButton } 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\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  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(data-loss-prevention) */\nexport type { BlockedMessage } from '../../react-components/src';\n/* @conditional-compile-remove(rooms) */\nexport type { Role } from '../../react-components/src';\n/* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\nexport type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */\nexport type {\n  ActiveFileUpload,\n  SendBoxErrorBarError,\n  FileDownloadHandler,\n  FileDownloadError,\n  FileMetadata\n} from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images) */\nexport type { FileMetadataAttachmentType } 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';\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"]}
+{"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;AA4BzG,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;AAmB9C,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,EACV,MAAM,4BAA4B,CAAC;AACpC,6CAA6C;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,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;AAgJpC,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';\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} from '../../calling-component-bindings/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport type { HoldButtonSelector } 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} from '../../react-components/src';\n/* @conditional-compile-remove(PSTN-calls) */\nexport { HoldButton } 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\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  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(data-loss-prevention) */\nexport type { BlockedMessage } from '../../react-components/src';\n/* @conditional-compile-remove(rooms) */\nexport type { Role } from '../../react-components/src';\n/* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */\nexport type { DialpadProps, DialpadStrings, DialpadStyles, DtmfTone } from '../../react-components/src';\n/* @conditional-compile-remove(file-sharing) */\nexport type {\n  ActiveFileUpload,\n  SendBoxErrorBarError,\n  FileDownloadHandler,\n  FileDownloadError,\n  FileMetadata,\n  AttachmentDownloadResult\n} from '../../react-components/src';\n/* @conditional-compile-remove(teams-inline-images) */\nexport type { FileMetadataAttachmentType } 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';\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"]}

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

@@ -65,6 +65,15 @@ declare type ChatMessageComponentProps = {
      * @beta
      */
     onDisplayDateTimeString?: (messageDate: Date) => string;
+    /**
+     * Optional function to fetch attachments.
+     * @beta
+     */
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;
+    /**
+     * Optional map of attachment ids to blob urls.
+     */
+    attachmentsMap?: Record<string, string>;
 };
 /**
  * @private

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

@@ -48,7 +48,11 @@ export const ChatMessageComponent = (props) => {
     else {
         return (React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, 
             /* @conditional-compile-remove(date-time-customization) */
-            onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings })));
+            onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, 
+            /* @conditional-compile-remove(teams-inline-images) */
+            onFetchAttachments: props.onFetchAttachments, 
+            /* @conditional-compile-remove(teams-inline-images) */
+            attachmentsMap: props.attachmentsMap })));
     }
 };
 //# sourceMappingURL=ChatMessageComponent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../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 { ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\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      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => Promise<void>;\n  onCancelMessageEdit?: (\n    messageId: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => 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   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineAcceptRejectEditButtons: 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\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n  const content = 'content' in message ? message.content : undefined;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientMessageId\n    else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n      onDeleteMessage(clientMessageId);\n    }\n  }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n    onSendMessage && onSendMessage(content !== undefined ? content : '');\n  }, [clientMessageId, content, onSendMessage, onDeleteMessage]);\n\n  if (isEditing && message.messageType === 'chat') {\n    return (\n      <ChatMessageComponentAsEditBox\n        message={message}\n        inlineEditButtons={props.inlineAcceptRejectEditButtons}\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, metadata, options) => {\n          props.onCancelMessageEdit && props.onCancelMessageEdit(messageId, metadata, options);\n          setIsEditing(false);\n        }}\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      />\n    );\n  }\n};\n\"../../../../acs-ui-common/src\""]}
+{"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 { ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\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      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => Promise<void>;\n  onCancelMessageEdit?: (\n    messageId: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => 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   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineAcceptRejectEditButtons: 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\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /**\n   * Optional function to fetch attachments.\n   * @beta\n   */\n  onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /**\n   * Optional map of attachment ids to blob urls.\n   */\n  attachmentsMap?: Record<string, string>;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n  const content = 'content' in message ? message.content : undefined;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientMessageId\n    else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n      onDeleteMessage(clientMessageId);\n    }\n  }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n    onSendMessage && onSendMessage(content !== undefined ? content : '');\n  }, [clientMessageId, content, onSendMessage, onDeleteMessage]);\n\n  if (isEditing && message.messageType === 'chat') {\n    return (\n      <ChatMessageComponentAsEditBox\n        message={message}\n        inlineEditButtons={props.inlineAcceptRejectEditButtons}\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, metadata, options) => {\n          props.onCancelMessageEdit && props.onCancelMessageEdit(messageId, metadata, options);\n          setIsEditing(false);\n        }}\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(teams-inline-images) */\n        onFetchAttachments={props.onFetchAttachments}\n        /* @conditional-compile-remove(teams-inline-images) */\n        attachmentsMap={props.attachmentsMap}\n      />\n    );\n  }\n};\n\"../../../../acs-ui-common/src\""]}

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

@@ -1,6 +1,7 @@
 import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import React from 'react';
 import { ChatMessage } from '../../types/ChatMessage';
+import { FileMetadata } from '../FileDownloadCards';
 import { BlockedMessage } from '../../types/ChatMessage';
 import { MessageThreadStrings } from '../MessageThread';
 import { OnRenderAvatarCallback } from '../../types';
@@ -44,6 +45,14 @@ declare type ChatMessageComponentAsMessageBubbleProps = {
      * @beta
      */
     onDisplayDateTimeString?: (messageDate: Date) => string;
+    /**
+     * Optional function to fetch attachments.
+     */
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;
+    /**
+     * Optional map of attachment ids to blob urls.
+     */
+    attachmentsMap?: Record<string, string>;
 };
 /** @private */
 export declare const ChatMessageComponentAsMessageBubble: React.MemoExoticComponent<(props: ChatMessageComponentAsMessageBubbleProps) => JSX.Element>;

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

@@ -107,7 +107,11 @@ const MessageBubble = (props) => {
                 React.createElement(BlockedMessageContent, { message: message, strings: strings })));
         }
         return (React.createElement("div", { tabIndex: 0 },
-            React.createElement(ChatMessageContent, { message: message, strings: strings }),
+            React.createElement(ChatMessageContent, { message: message, strings: strings, 
+                /* @conditional-compile-remove(teams-inline-images) */
+                onFetchAttachment: props.onFetchAttachments, 
+                /* @conditional-compile-remove(teams-inline-images) */
+                attachmentsMap: props.attachmentsMap }),
             props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()));
     }, [defaultOnRenderFileDownloads, message, props, strings, userId]);
     const chatMessage = (React.createElement(React.Fragment, null,

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 { IStyle, mergeStyles } from '@fluentui/react';\nimport { Chat, Text, ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport {\n  chatMessageEditedTagStyle,\n  chatMessageDateStyle,\n  chatMessageFailedTagStyle\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(data-loss-prevention) */\nimport { BlockedMessageContent } from './ChatMessageContent';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { chatMessageActionMenuProps } from './ChatMessageActionMenu';\nimport { OnRenderAvatarCallback } from '../../types';\nimport { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  messageContainerStyle?: ComponentSlotStyle;\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  /**\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\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\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    fileDownloadHandler\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\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<HTMLElement | 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 = wasInteractionByTouch\n    ? undefined\n    : chatMessageActionMenuProps({\n        ariaLabel: strings.actionMenuMoreOptions ?? '',\n        enabled: chatActionsEnabled,\n        menuButtonRef: messageActionButtonRef,\n        // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n        forceShow: 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    () => (\n      <_FileDownloadCards\n        userId={userId}\n        fileMetadata={message['attachedFilesMetadata'] || []}\n        downloadHandler={fileDownloadHandler}\n        /* @conditional-compile-remove(file-sharing) */\n        strings={{ downloadFile: props.strings.downloadFile ?? locale.strings.messageThread.downloadFile }}\n      />\n    ),\n    [\n      userId,\n      message,\n      /* @conditional-compile-remove(file-sharing) */\n      props,\n      /* @conditional-compile-remove(file-sharing) */\n      locale,\n      fileDownloadHandler\n    ]\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}>\n        <ChatMessageContent message={message} strings={strings} />\n        {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n      </div>\n    );\n  }, [defaultOnRenderFileDownloads, message, props, strings, userId]);\n\n  const chatMessage = (\n    <>\n      <div ref={messageRef}>\n        <Chat.Message\n          data-ui-id=\"chat-composite-message\"\n          className={mergeStyles(messageContainerStyle as IStyle)}\n          styles={messageContainerStyle}\n          content={getContent()}\n          author={<Text className={chatMessageDateStyle}>{message.senderDisplayName}</Text>}\n          mine={message.mine}\n          timestamp={<Text data-ui-id={ids.messageTimestamp}>{formattedTimestamp}</Text>}\n          details={getMessageDetails()}\n          positionActionMenu={false}\n          actionMenu={actionMenuProps}\n          onTouchStart={() => setWasInteractionByTouch(true)}\n          onPointerDown={() => setWasInteractionByTouch(false)}\n          onKeyDown={() => setWasInteractionByTouch(false)}\n          onBlur={() => 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      </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\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n\"../../../../acs-ui-common/src\""]}
+{"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 { IStyle, mergeStyles } from '@fluentui/react';\nimport { Chat, Text, ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useRef, useState } from 'react';\nimport {\n  chatMessageEditedTagStyle,\n  chatMessageDateStyle,\n  chatMessageFailedTagStyle\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(teams-inline-images) */\nimport { FileMetadata } from '../FileDownloadCards';\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 { OnRenderAvatarCallback } from '../../types';\nimport { _FileDownloadCards, FileDownloadHandler } from '../FileDownloadCards';\nimport { ComponentLocale, useLocale } from '../../localization';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  messageContainerStyle?: ComponentSlotStyle;\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  /**\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\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /**\n   * Optional function to fetch attachments.\n   */\n  onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /**\n   * Optional map of attachment ids to blob urls.\n   */\n  attachmentsMap?: Record<string, string>;\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    fileDownloadHandler\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\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<HTMLElement | 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 = wasInteractionByTouch\n    ? undefined\n    : chatMessageActionMenuProps({\n        ariaLabel: strings.actionMenuMoreOptions ?? '',\n        enabled: chatActionsEnabled,\n        menuButtonRef: messageActionButtonRef,\n        // Force show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n        forceShow: 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    () => (\n      <_FileDownloadCards\n        userId={userId}\n        fileMetadata={message['attachedFilesMetadata'] || []}\n        downloadHandler={fileDownloadHandler}\n        /* @conditional-compile-remove(file-sharing) */\n        strings={{ downloadFile: props.strings.downloadFile ?? locale.strings.messageThread.downloadFile }}\n      />\n    ),\n    [\n      userId,\n      message,\n      /* @conditional-compile-remove(file-sharing) */\n      props,\n      /* @conditional-compile-remove(file-sharing) */\n      locale,\n      fileDownloadHandler\n    ]\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}>\n        <ChatMessageContent\n          message={message}\n          strings={strings}\n          /* @conditional-compile-remove(teams-inline-images) */\n          onFetchAttachment={props.onFetchAttachments}\n          /* @conditional-compile-remove(teams-inline-images) */\n          attachmentsMap={props.attachmentsMap}\n        />\n        {props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()}\n      </div>\n    );\n  }, [defaultOnRenderFileDownloads, message, props, strings, userId]);\n\n  const chatMessage = (\n    <>\n      <div ref={messageRef}>\n        <Chat.Message\n          data-ui-id=\"chat-composite-message\"\n          className={mergeStyles(messageContainerStyle as IStyle)}\n          styles={messageContainerStyle}\n          content={getContent()}\n          author={<Text className={chatMessageDateStyle}>{message.senderDisplayName}</Text>}\n          mine={message.mine}\n          timestamp={<Text data-ui-id={ids.messageTimestamp}>{formattedTimestamp}</Text>}\n          details={getMessageDetails()}\n          positionActionMenu={false}\n          actionMenu={actionMenuProps}\n          onTouchStart={() => setWasInteractionByTouch(true)}\n          onPointerDown={() => setWasInteractionByTouch(false)}\n          onKeyDown={() => setWasInteractionByTouch(false)}\n          onBlur={() => 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      </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\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n\"../../../../acs-ui-common/src\""]}

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

@@ -2,9 +2,12 @@
 import { ChatMessage } from '../../types/ChatMessage';
 import { BlockedMessage } from '../../types/ChatMessage';
 import { MessageThreadStrings } from '../MessageThread';
+import { FileMetadata } from '../FileDownloadCards';
 declare type ChatMessageContentProps = {
     message: ChatMessage;
     strings: MessageThreadStrings;
+    attachmentsMap?: Record<string, string>;
+    onFetchAttachment?: (attachment: FileMetadata) => Promise<void>;
 };
 declare type BlockedMessageContentProps = {
     message: BlockedMessage;

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

@@ -2,12 +2,14 @@
 // Licensed under the MIT license.
 import React from 'react';
 import { _formatString } from "../../../../acs-ui-common/src";
-import { Parser } from 'html-to-react';
+import { Parser, ProcessNodeDefinitions } from 'html-to-react';
 import Linkify from 'react-linkify';
 import { LiveMessage } from 'react-aria-live';
 import { Link } from '@fluentui/react';
 /* @conditional-compile-remove(data-loss-prevention) */
 import { FontIcon, Stack } from '@fluentui/react';
+const processNodeDefinitions = new ProcessNodeDefinitions(React);
+const isValidNode = () => true;
 /** @private */
 export const ChatMessageContent = (props) => {
     switch (props.message.contentType) {
@@ -28,9 +30,8 @@ const MessageContentWithLiveAria = (props) => {
         props.content));
 };
 const MessageContentAsRichTextHTML = (props) => {
-    const htmlToReactParser = new Parser();
     const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, ariaLabel: messageContentAriaText(props), content: htmlToReactParser.parse(props.message.content) }));
+    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: `${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`, ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
 };
 const MessageContentAsText = (props) => {
     const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
@@ -79,4 +80,54 @@ const messageContentAriaText = (props) => {
             })
         : undefined;
 };
+const processHtmlToReact = (props) => {
+    const htmlToReactParser = new Parser();
+    /* @conditional-compile-remove(teams-inline-images) */
+    const processInlineImage = {
+        // Custom <img> processing
+        shouldProcessNode: (node) => {
+            var _a;
+            // Process img node with id in attachments list
+            return (node.name &&
+                node.name === 'img' &&
+                node.attribs &&
+                node.attribs.id &&
+                ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find((f) => f.id === node.attribs.id)));
+        },
+        processNode: (node, children, index) => {
+            var _a;
+            // logic to check id in map/list
+            const fileMetadata = (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find((f) => f.id === node.attribs.id);
+            // if in cache, early return
+            if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
+                node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
+                return processNodeDefinitions.processDefaultNode(node, children, index);
+            }
+            // not yet in cache
+            if (fileMetadata && props.onFetchAttachment && props.attachmentsMap) {
+                props.onFetchAttachment(fileMetadata);
+                if (node.attribs.id in props.attachmentsMap) {
+                    node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
+                }
+            }
+            return processNodeDefinitions.processDefaultNode(node, children, index);
+        }
+    };
+    const addProcessingStep = () => {
+        const steps = [];
+        /* @conditional-compile-remove(teams-inline-images) */
+        steps.push(processInlineImage);
+        return steps;
+    };
+    const processingInstructions = [
+        ...addProcessingStep(),
+        {
+            shouldProcessNode: () => {
+                return true;
+            },
+            processNode: processNodeDefinitions.processDefaultNode
+        }
+    ];
+    return htmlToReactParser.parseWithInstructions(props.message.content, isValidNode, processingInstructions);
+};
 //# sourceMappingURL=ChatMessageContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser } from 'html-to-react';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { LiveMessage } from 'react-aria-live';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} aria-live=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  const htmlToReactParser = new Parser();\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n      ariaLabel={messageContentAriaText(props)}\n      content={htmlToReactParser.parse(props.message.content)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n      ariaLabel={messageContentAriaText(props)}\n      content={\n        <Linkify\n          componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n            return (\n              <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>\n            );\n          }}\n        >\n          {props.message.content}\n        </Linkify>\n      }\n    />\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n  const blockedMessage =\n    props.message.warningText === false\n      ? ''\n      : props.message.warningText === '' || props.message.warningText === undefined\n      ? props.strings.blockedWarningText\n      : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink\n    ? props.message.linkText ?? props.strings.blockedWarningLinkText\n    : '';\n\n  const liveAuthor =\n    props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={liveBlockedWarningText}\n      ariaLabel={liveBlockedWarningText}\n      content={\n        <Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && (\n            <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>\n          )}\n        </Stack>\n      }\n    />\n  );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  return props.message.content\n    ? props.message.mine\n      ? _formatString(props.strings.messageContentMineAriaText, {\n          message: props.message.content\n        })\n      : _formatString(props.strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: props.message.content\n        })\n    : undefined;\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { Parser, ProcessNodeDefinitions, ProcessingInstructions } from 'html-to-react';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { LiveMessage } from 'react-aria-live';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\n/* @conditional-compile-remove(teams-inline-images) */\nimport { FileMetadata } from '../FileDownloadCards';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(teams-inline-images) */\n  attachmentsMap?: Record<string, string>;\n  /* @conditional-compile-remove(teams-inline-images) */\n  onFetchAttachment?: (attachment: FileMetadata) => Promise<void>;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\nconst processNodeDefinitions: ProcessNodeDefinitions = new ProcessNodeDefinitions(React);\nconst isValidNode = (): boolean => true;\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} aria-live=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n      ariaLabel={messageContentAriaText(props)}\n      content={processHtmlToReact(props)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={`${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')}`}\n      ariaLabel={messageContentAriaText(props)}\n      content={\n        <Linkify\n          componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n            return (\n              <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>\n            );\n          }}\n        >\n          {props.message.content}\n        </Linkify>\n      }\n    />\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n  const blockedMessage =\n    props.message.warningText === false\n      ? ''\n      : props.message.warningText === '' || props.message.warningText === undefined\n      ? props.strings.blockedWarningText\n      : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink\n    ? props.message.linkText ?? props.strings.blockedWarningLinkText\n    : '';\n\n  const liveAuthor =\n    props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={liveBlockedWarningText}\n      ariaLabel={liveBlockedWarningText}\n      content={\n        <Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && (\n            <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>\n          )}\n        </Stack>\n      }\n    />\n  );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n  const span = document.createElement('span');\n  span.innerHTML = s;\n  return span.textContent || span.innerText;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  return props.message.content\n    ? props.message.mine\n      ? _formatString(props.strings.messageContentMineAriaText, {\n          message: props.message.content\n        })\n      : _formatString(props.strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: props.message.content\n        })\n    : undefined;\n};\n\ntype NodeProcessInstruction = {\n  shouldProcessNode: unknown;\n  processNode: unknown;\n};\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const htmlToReactParser = new Parser();\n\n  /* @conditional-compile-remove(teams-inline-images) */\n  const processInlineImage: NodeProcessInstruction = {\n    // Custom <img> processing\n    shouldProcessNode: (node): boolean => {\n      // Process img node with id in attachments list\n      return (\n        node.name &&\n        node.name === 'img' &&\n        node.attribs &&\n        node.attribs.id &&\n        props.message.attachedFilesMetadata?.find((f) => f.id === node.attribs.id)\n      );\n    },\n    processNode: (node, children, index): HTMLElement => {\n      // logic to check id in map/list\n      const fileMetadata = props.message.attachedFilesMetadata?.find((f) => f.id === node.attribs.id);\n      // if in cache, early return\n      if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {\n        node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };\n        return processNodeDefinitions.processDefaultNode(node, children, index);\n      }\n      // not yet in cache\n      if (fileMetadata && props.onFetchAttachment && props.attachmentsMap) {\n        props.onFetchAttachment(fileMetadata);\n        if (node.attribs.id in props.attachmentsMap) {\n          node.attribs = { ...node.attribs, src: props.attachmentsMap[node.attribs.id] };\n        }\n      }\n      return processNodeDefinitions.processDefaultNode(node, children, index);\n    }\n  };\n\n  const addProcessingStep = (): NodeProcessInstruction[] => {\n    const steps: NodeProcessInstruction[] = [];\n    /* @conditional-compile-remove(teams-inline-images) */\n    steps.push(processInlineImage);\n    return steps;\n  };\n\n  const processingInstructions: ProcessingInstructions = [\n    ...addProcessingStep(),\n    {\n      shouldProcessNode: (): boolean => {\n        return true;\n      },\n      processNode: processNodeDefinitions.processDefaultNode\n    }\n  ];\n\n  return htmlToReactParser.parseWithInstructions(props.message.content, isValidNode, processingInstructions);\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/FileDownloadCards.d.ts

@@ -26,6 +26,12 @@ export interface FileMetadata {
     url: string;
     previewUrl?: string;
 }
+/**
+ * @beta
+ */
+export interface AttachmentDownloadResult {
+    blobUrl: string;
+}
 /**
  * Strings of _FileDownloadCards that can be overridden.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Icon, IconButton, Spinner, SpinnerSize } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) */\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\n\n/* @conditional-compile-remove(teams-inline-images) */\n/**\n * @beta\n */\nexport type FileMetadataAttachmentType =\n  | 'fileSharing'\n  | /* @conditional-compile-remove(teams-inline-images) */ 'teamsInlineImage'\n  | 'unknown';\n\n/**\n * Meta Data containing information about the uploaded file.\n * @beta\n */\nexport interface FileMetadata {\n  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Attachment type of the file.\n   * Possible values {@link FileDownloadHandler}.\n   */\n  attachmentType: FileMetadataAttachmentType;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Unique ID of the file.\n   */\n  id: string;\n  /**\n   * File name to be displayed.\n   */\n  name: string;\n  /**\n   * Extension is used for rendering the file icon.\n   * An unknown extension will be rendered as a generic icon.\n   * Example: `jpeg`\n   */\n  extension: string;\n  /**\n   * Download URL for the file.\n   */\n  url: string;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Preview URL for the file.\n   * Used in the message bubble for inline images.\n   */\n  previewUrl?: string;\n}\n\n/**\n * Strings of _FileDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileDownloadCardsStrings {\n  /** Aria label to notify user when focus is on file download button. */\n  downloadFile: string;\n}\n\n/**\n * @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n */\nexport interface FileDownloadError {\n  /** The error message to display in the UI */\n  errorMessage: string;\n}\n\n/**\n * @beta\n *\n * A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n *\n * @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n *   if (isUnauthorizedUser(userId)) {\n *     return { errorMessage: 'You don’t have permission to download this file.' };\n *   } else {\n *     return new URL(fileData.url);\n *   }\n * }\n *\n * const App = () => (\n *   <ChatComposite\n *     ...\n *     fileSharing={{\n *       fileDownloadHandler: fileDownloadHandler\n *     }}\n *   />\n * )\n *\n * ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link FileMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (userId: string, fileMetadata: FileMetadata) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCards {\n  /**\n   * User id of the local participant\n   */\n  userId: string;\n  /**\n   * A chat message metadata that inculdes file metadata\n   */\n  fileMetadata: FileMetadata[];\n  /**\n   * A function of type {@link FileDownloadHandler} for handling file downloads.\n   * If the function is not specified, the file's `url` will be opened in a new tab to\n   * initiate the download.\n   */\n  downloadHandler?: FileDownloadHandler;\n  /**\n   * Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n   */\n  onDownloadErrorMessage?: (errMsg: string) => void;\n  /**\n   * Optional arialabel strings for file download cards\n   */\n  strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n  marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCards): JSX.Element => {\n  const { userId, fileMetadata } = props;\n  const [showSpinner, setShowSpinner] = useState(false);\n  const localeStrings = useLocaleStringsTrampoline();\n\n  const downloadFileButtonString = useMemo(\n    () => () => {\n      return props.strings?.downloadFile ?? localeStrings.downloadFile;\n      // Return download button without aria label\n      return props.strings?.downloadFile ?? '';\n    },\n    [props.strings?.downloadFile, localeStrings.downloadFile]\n  );\n\n  const fileDownloadHandler = useCallback(\n    async (userId, file) => {\n      if (!props.downloadHandler) {\n        window.open(file.url, '_blank', 'noopener,noreferrer');\n      } else {\n        setShowSpinner(true);\n        try {\n          const response = await props.downloadHandler(userId, file);\n          setShowSpinner(false);\n          if (response instanceof URL) {\n            window.open(response.toString(), '_blank', 'noopener,noreferrer');\n          } else {\n            props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n          }\n        } finally {\n          setShowSpinner(false);\n        }\n      }\n    },\n    [props]\n  );\n  // Its safe to assume that if the first item in the fileMetadata is not a fileSharing type we don't want to display the FileDownloadCard.\n  // Since you can't have both fileSharing and teamsInlineImage in the same message.\n  if (\n    !fileMetadata ||\n    fileMetadata.length === 0 ||\n    /* @conditional-compile-remove(teams-inline-images) */ fileMetadata[0].attachmentType !== 'fileSharing'\n  ) {\n    return <></>;\n  }\n\n  return (\n    <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n      <_FileCardGroup>\n        {fileMetadata &&\n          fileMetadata.map((file) => (\n            <_FileCard\n              fileName={file.name}\n              key={file.name}\n              fileExtension={file.extension}\n              actionIcon={\n                showSpinner ? (\n                  <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n                ) : (\n                  <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n                    <DownloadIconTrampoline />\n                  </IconButton>\n                )\n              }\n              actionHandler={() => fileDownloadHandler(userId, file)}\n            />\n          ))}\n      </_FileCardGroup>\n    </div>\n  );\n};\n\n/**\n * @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n  // @conditional-compile-remove(file-sharing)\n  return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n  // Return _some_ available icon, as the real icon is beta-only.\n  return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n  /* @conditional-compile-remove(file-sharing) */\n  return useLocale().strings.messageThread;\n  return { downloadFile: '' };\n};\n"]}
+{"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Icon, IconButton, Spinner, SpinnerSize } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) */\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\n\n/* @conditional-compile-remove(teams-inline-images) */\n/**\n * @beta\n */\nexport type FileMetadataAttachmentType =\n  | 'fileSharing'\n  | /* @conditional-compile-remove(teams-inline-images) */ 'teamsInlineImage'\n  | 'unknown';\n\n/**\n * Meta Data containing information about the uploaded file.\n * @beta\n */\nexport interface FileMetadata {\n  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Attachment type of the file.\n   * Possible values {@link FileDownloadHandler}.\n   */\n  attachmentType: FileMetadataAttachmentType;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Unique ID of the file.\n   */\n  id: string;\n  /**\n   * File name to be displayed.\n   */\n  name: string;\n  /**\n   * Extension is used for rendering the file icon.\n   * An unknown extension will be rendered as a generic icon.\n   * Example: `jpeg`\n   */\n  extension: string;\n  /**\n   * Download URL for the file.\n   */\n  url: string;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /*\n   * Preview URL for the file.\n   * Used in the message bubble for inline images.\n   */\n  previewUrl?: string;\n}\n\n/* @conditional-compile-remove(teams-inline-images) */\n/**\n * @beta\n */\nexport interface AttachmentDownloadResult {\n  blobUrl: string;\n}\n\n/**\n * Strings of _FileDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _FileDownloadCardsStrings {\n  /** Aria label to notify user when focus is on file download button. */\n  downloadFile: string;\n}\n\n/**\n * @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n */\nexport interface FileDownloadError {\n  /** The error message to display in the UI */\n  errorMessage: string;\n}\n\n/**\n * @beta\n *\n * A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n *\n * @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n *   if (isUnauthorizedUser(userId)) {\n *     return { errorMessage: 'You don’t have permission to download this file.' };\n *   } else {\n *     return new URL(fileData.url);\n *   }\n * }\n *\n * const App = () => (\n *   <ChatComposite\n *     ...\n *     fileSharing={{\n *       fileDownloadHandler: fileDownloadHandler\n *     }}\n *   />\n * )\n *\n * ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link FileMetadata} containing file `url`, `extension` and `name`.\n */\nexport type FileDownloadHandler = (userId: string, fileMetadata: FileMetadata) => Promise<URL | FileDownloadError>;\n\n/**\n * @internal\n */\nexport interface _FileDownloadCards {\n  /**\n   * User id of the local participant\n   */\n  userId: string;\n  /**\n   * A chat message metadata that inculdes file metadata\n   */\n  fileMetadata: FileMetadata[];\n  /**\n   * A function of type {@link FileDownloadHandler} for handling file downloads.\n   * If the function is not specified, the file's `url` will be opened in a new tab to\n   * initiate the download.\n   */\n  downloadHandler?: FileDownloadHandler;\n  /**\n   * Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n   */\n  onDownloadErrorMessage?: (errMsg: string) => void;\n  /**\n   * Optional arialabel strings for file download cards\n   */\n  strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n  marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/**\n * @internal\n */\nexport const _FileDownloadCards = (props: _FileDownloadCards): JSX.Element => {\n  const { userId, fileMetadata } = props;\n  const [showSpinner, setShowSpinner] = useState(false);\n  const localeStrings = useLocaleStringsTrampoline();\n\n  const downloadFileButtonString = useMemo(\n    () => () => {\n      return props.strings?.downloadFile ?? localeStrings.downloadFile;\n      // Return download button without aria label\n      return props.strings?.downloadFile ?? '';\n    },\n    [props.strings?.downloadFile, localeStrings.downloadFile]\n  );\n\n  const fileDownloadHandler = useCallback(\n    async (userId, file) => {\n      if (!props.downloadHandler) {\n        window.open(file.url, '_blank', 'noopener,noreferrer');\n      } else {\n        setShowSpinner(true);\n        try {\n          const response = await props.downloadHandler(userId, file);\n          setShowSpinner(false);\n          if (response instanceof URL) {\n            window.open(response.toString(), '_blank', 'noopener,noreferrer');\n          } else {\n            props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n          }\n        } finally {\n          setShowSpinner(false);\n        }\n      }\n    },\n    [props]\n  );\n  // Its safe to assume that if the first item in the fileMetadata is not a fileSharing type we don't want to display the FileDownloadCard.\n  // Since you can't have both fileSharing and teamsInlineImage in the same message.\n  if (\n    !fileMetadata ||\n    fileMetadata.length === 0 ||\n    /* @conditional-compile-remove(teams-inline-images) */ fileMetadata[0].attachmentType !== 'fileSharing'\n  ) {\n    return <></>;\n  }\n\n  return (\n    <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n      <_FileCardGroup>\n        {fileMetadata &&\n          fileMetadata.map((file) => (\n            <_FileCard\n              fileName={file.name}\n              key={file.name}\n              fileExtension={file.extension}\n              actionIcon={\n                showSpinner ? (\n                  <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n                ) : (\n                  <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n                    <DownloadIconTrampoline />\n                  </IconButton>\n                )\n              }\n              actionHandler={() => fileDownloadHandler(userId, file)}\n            />\n          ))}\n      </_FileCardGroup>\n    </div>\n  );\n};\n\n/**\n * @private\n */\nconst DownloadIconTrampoline = (): JSX.Element => {\n  // @conditional-compile-remove(file-sharing)\n  return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n  // Return _some_ available icon, as the real icon is beta-only.\n  return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n  /* @conditional-compile-remove(file-sharing) */\n  return useLocale().strings.messageThread;\n  return { downloadFile: '' };\n};\n"]}

package/dist/dist-esm/react-components/src/components/MessageThread.d.ts

@@ -5,6 +5,7 @@ import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAv
 import { BlockedMessage } from '../types';
 import { MessageStatusIndicatorProps } from './MessageStatusIndicator';
 import { FileDownloadHandler, FileMetadata } from './FileDownloadCards';
+import { AttachmentDownloadResult } from './FileDownloadCards';
 /**
  * Fluent styles for {@link MessageThread}.
  *
@@ -230,6 +231,12 @@ export declare type MessageThreadProps = {
      * @beta
      */
     onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
+    /**
+     * Optional callback to retrieve the inline image in a message.
+     * @param attachment - FileMetadata object we want to render
+     * @beta
+     */
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<AttachmentDownloadResult>;
     /**
      * Optional callback to edit a message.
      *

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

@@ -214,7 +214,9 @@ export const MessageThread = (props) => {
     var _a;
     const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelMessageEdit, onDeleteMessage, onSendMessage, 
     /* @conditional-compile-remove(date-time-customization) */
-    onDisplayDateTimeString } = props;
+    onDisplayDateTimeString, 
+    /* @conditional-compile-remove(teams-inline-images) */
+    onFetchAttachments } = props;
     const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
     const [messages, setMessages] = useState([]);
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
@@ -231,6 +233,16 @@ export const MessageThread = (props) => {
     const [lastSendingChatMessage, setLastSendingChatMessage] = useState(undefined);
     // readCount and participantCount will only need to be updated on-fly when user hover on an indicator
     const [readCountForHoveredIndicator, setReadCountForHoveredIndicator] = useState(undefined);
+    /* @conditional-compile-remove(teams-inline-images) */
+    const [inlineAttachments, setInlineAttachments] = useState({});
+    /* @conditional-compile-remove(teams-inline-images) */
+    const onFetchInlineAttachment = useCallback((attachment) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!onFetchAttachments || attachment.id in inlineAttachments) {
+            return;
+        }
+        const attachmentDownloadResult = yield onFetchAttachments(attachment);
+        setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: attachmentDownloadResult.blobUrl })));
+    }), [inlineAttachments, onFetchAttachments]);
     const isAllChatMessagesLoadedRef = useRef(false);
     // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
     // onLoadPreviousChatMessages is updated when a new adapter is set
@@ -441,7 +453,11 @@ export const MessageThread = (props) => {
                 /* @conditional-compile-remove(file-sharing) */
                 strings: strings, message: messageProps.message, userId: props.userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, inlineAcceptRejectEditButtons: !isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo, 
                 /* @conditional-compile-remove(date-time-customization) */
-                onDisplayDateTimeString: onDisplayDateTimeString })));
+                onDisplayDateTimeString: onDisplayDateTimeString, 
+                /* @conditional-compile-remove(teams-inline-images) */
+                onFetchAttachments: onFetchInlineAttachment, 
+                /* @conditional-compile-remove(teams-inline-images) */
+                attachmentsMap: inlineAttachments })));
         }
         return React.createElement(React.Fragment, null);
     }, [
@@ -455,7 +471,11 @@ export const MessageThread = (props) => {
         showMessageStatus,
         onActionButtonClickMemo,
         /* @conditional-compile-remove(date-time-customization) */
-        onDisplayDateTimeString
+        onDisplayDateTimeString,
+        /* @conditional-compile-remove(teams-inline-images) */
+        onFetchInlineAttachment,
+        /* @conditional-compile-remove(teams-inline-images) */
+        inlineAttachments
     ]);
     const defaultStatusRenderer = useCallback((message, status, participantCount, readCount) => {
         const onToggleToolTip = (isToggled) => {