@azure/communication-react 1.13.0-beta.1 → 1.13.1-alpha-202402280012

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

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

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

@@ -17,39 +17,37 @@ export const ChatMessageComponentWrapper = (props) => {
         };
     }, []);
     const customMessageStyle = useMemo(() => {
-        return {
-            paddingTop: '1rem',
-            paddingBottom: '0.25rem'
-        };
+        return { paddingTop: '1rem', paddingBottom: '0.25rem' };
     }, []);
     /* @conditional-compile-remove(data-loss-prevention) */
     // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)
     if (message.messageType === 'blocked') {
-        const myChatMessageStyle = message.status === 'failed' ? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
+        const myChatMessageStyle = message.status === 'failed'
+            ? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
+            : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
         const blockedMessageStyle = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer;
         const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
-        return React.createElement(FluentChatMessageComponentWrapper, Object.assign({}, props, { message: message, messageContainerStyle: messageContainerStyle }));
+        return (React.createElement(FluentChatMessageComponentWrapper, Object.assign({}, props, { message: message, messageContainerStyle: messageContainerStyle })));
     }
     switch (message.messageType) {
-        case 'chat':
-            {
-                const myChatMessageStyle = message.status === 'failed' ? (_b = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _b !== void 0 ? _b : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
-                const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
-                const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
-                return React.createElement(FluentChatMessageComponentWrapper, Object.assign({}, props, { message: message, messageContainerStyle: messageContainerStyle }));
-            }
-        case 'system':
-            {
-                const messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
-                const systemMessageComponent = onRenderMessage === undefined ? React.createElement(DefaultSystemMessage, Object.assign({}, props)) : onRenderMessage(Object.assign(Object.assign({}, props), { messageContainerStyle }), props => React.createElement(DefaultSystemMessage, Object.assign({}, props)));
-                return React.createElement("div", { key: messageKey, style: systemMessageStyle }, systemMessageComponent);
-            }
-        default:
-            {
-                // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
-                const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(Object.assign({}, props));
-                return React.createElement("div", { key: messageKey, style: customMessageStyle }, customMessageComponent);
-            }
+        case 'chat': {
+            const myChatMessageStyle = message.status === 'failed'
+                ? (_b = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _b !== void 0 ? _b : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
+                : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
+            const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
+            const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
+            return (React.createElement(FluentChatMessageComponentWrapper, Object.assign({}, props, { message: message, messageContainerStyle: messageContainerStyle })));
+        }
+        case 'system': {
+            const messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
+            const systemMessageComponent = onRenderMessage === undefined ? (React.createElement(DefaultSystemMessage, Object.assign({}, props))) : (onRenderMessage(Object.assign(Object.assign({}, props), { messageContainerStyle }), (props) => React.createElement(DefaultSystemMessage, Object.assign({}, props))));
+            return (React.createElement("div", { key: messageKey, style: systemMessageStyle }, systemMessageComponent));
+        }
+        default: {
+            // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
+            const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(Object.assign({}, props));
+            return (React.createElement("div", { key: messageKey, style: customMessageStyle }, customMessageComponent));
+        }
     }
 };
 //# sourceMappingURL=ChatMessageComponentWrapper.js.map

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

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

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

@@ -28,17 +28,17 @@ export const ChatMessageContent = (props) => {
     }
 };
 const MessageContentWithLiveAria = (props) => {
-    return React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
+    return (React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
         React.createElement(LiveMessage, { message: props.liveMessage, ariaLive: "polite" }),
-        props.content);
+        props.content));
 };
 const MessageContentAsRichTextHTML = (props) => {
-    return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) });
+    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
 };
 const MessageContentAsText = (props) => {
-    return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
-                return React.createElement(Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText);
-            } }, props.message.content) });
+    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
+                return (React.createElement(Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText));
+            } }, props.message.content) }));
 };
 /* @conditional-compile-remove(data-loss-prevention) */
 /**
@@ -49,13 +49,15 @@ export const BlockedMessageContent = (props) => {
     const Icon = React.createElement(FontIcon, { iconName: 'DataLossPreventionProhibited' });
     const blockedMessage = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;
     const blockedMessageLink = props.message.link;
-    const blockedMessageLinkText = blockedMessageLink ? (_a = props.message.linkText) !== null && _a !== void 0 ? _a : props.strings.blockedWarningLinkText : '';
+    const blockedMessageLinkText = blockedMessageLink
+        ? (_a = props.message.linkText) !== null && _a !== void 0 ? _a : props.strings.blockedWarningLinkText
+        : '';
     const liveAuthor = props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;
     const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;
-    return React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: liveBlockedWarningText, ariaLabel: liveBlockedWarningText, content: React.createElement(Stack, { horizontal: true, wrap: true },
+    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: liveBlockedWarningText, ariaLabel: liveBlockedWarningText, content: React.createElement(Stack, { horizontal: true, wrap: true },
             Icon,
             blockedMessage && React.createElement("p", null, blockedMessage),
-            blockedMessageLink && React.createElement(Link, { target: '_blank', href: blockedMessageLink }, blockedMessageLinkText)) });
+            blockedMessageLink && (React.createElement(Link, { target: '_blank', href: blockedMessageLink }, blockedMessageLinkText))) }));
 };
 // https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript
 const extractContent = (s) => {
@@ -64,27 +66,40 @@ const extractContent = (s) => {
     return span.textContent || span.innerText;
 };
 const generateLiveMessage = (props) => {
-    const liveAuthor = _formatString(props.strings.liveAuthorIntro, {
-        author: `${props.message.senderDisplayName}`
-    });
+    const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
     return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')} `;
 };
 const messageContentAriaText = (props) => {
-    // Strip all html tags from the content for aria.
-    return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {
-        message: DOMPurify.sanitize(props.message.content, {
-            ALLOWED_TAGS: []
-        })
-    }) : _formatString(props.strings.messageContentAriaText, {
-        author: `${props.message.senderDisplayName}`,
-        message: DOMPurify.sanitize(props.message.content, {
-            ALLOWED_TAGS: []
-        })
-    }) : undefined;
+    if (props.message.content) {
+        // Replace all <img> tags with 'image' for aria.
+        const parsedContent = DOMPurify.sanitize(props.message.content, {
+            ALLOWED_TAGS: ['img'],
+            RETURN_DOM_FRAGMENT: true
+        });
+        parsedContent.childNodes.forEach((child) => {
+            if (child.nodeName.toLowerCase() !== 'img') {
+                return;
+            }
+            const imageTextNode = document.createElement('div');
+            imageTextNode.innerHTML = 'image ';
+            parsedContent.replaceChild(imageTextNode, child);
+        });
+        // Strip all html tags from the content for aria.
+        const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });
+        return props.message.mine
+            ? _formatString(props.strings.messageContentMineAriaText, {
+                message: message
+            })
+            : _formatString(props.strings.messageContentAriaText, {
+                author: `${props.message.senderDisplayName}`,
+                message: message
+            });
+    }
+    return undefined;
 };
-/* @conditional-compile-remove(image-gallery) */
+/* @conditional-compile-remove(image-overlay) */
 const defaultOnRenderInlineImage = (inlineImage) => {
-    return React.createElement("img", Object.assign({}, inlineImage.imgAttrs, { "data-ui-id": inlineImage.imgAttrs.id, tabIndex: 0, role: "button", style: Object.assign({ cursor: 'pointer' }, inlineImage.imgAttrs.style) }));
+    return (React.createElement("img", Object.assign({ key: inlineImage.imgAttrs.id, tabIndex: 0, "data-ui-id": inlineImage.imgAttrs.id }, inlineImage.imgAttrs)));
 };
 const processHtmlToReact = (props) => {
     var _a;
@@ -104,19 +119,22 @@ const processHtmlToReact = (props) => {
                 }
                 // Transform inline images
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id && ((_c = props.message.inlineImages) === null || _c === void 0 ? void 0 : _c.find(metadata => {
-                    return metadata.id === domNode.attribs.id;
-                }))) {
+                if (domNode.name &&
+                    domNode.name === 'img' &&
+                    domNode.attribs &&
+                    domNode.attribs.id &&
+                    ((_c = props.message.inlineImages) === null || _c === void 0 ? void 0 : _c.find((metadata) => {
+                        return metadata.id === domNode.attribs.id;
+                    }))) {
                     domNode.attribs['aria-label'] = domNode.attribs.name;
                     const imgProps = attributesToProps(domNode.attribs);
-                    /* @conditional-compile-remove(image-gallery) */
-                    const inlineImageProps = {
-                        messageId: props.message.messageId,
-                        imgAttrs: imgProps
-                    };
-                    /* @conditional-compile-remove(image-gallery) */
-                    return ((_d = props.inlineImageOptions) === null || _d === void 0 ? void 0 : _d.onRenderInlineImage) ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage) : defaultOnRenderInlineImage(inlineImageProps);
-                    return React.createElement("img", Object.assign({}, imgProps));
+                    /* @conditional-compile-remove(image-overlay) */
+                    const inlineImageProps = { messageId: props.message.messageId, imgAttrs: imgProps };
+                    /* @conditional-compile-remove(image-overlay) */
+                    return ((_d = props.inlineImageOptions) === null || _d === void 0 ? void 0 : _d.onRenderInlineImage)
+                        ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
+                        : defaultOnRenderInlineImage(inlineImageProps);
+                    return React.createElement("img", Object.assign({ key: imgProps.id }, imgProps));
                 }
             }
             // Pass through the original node

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /* @conditional-compile-remove(image-gallery) */\n  inlineImageOptions?: InlineImageOptions;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\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/* @conditional-compile-remove(image-gallery) */\n/**\n * InlineImage's state, as reflected in the UI.\n *\n * @beta\n */\nexport interface InlineImage {\n  /** ID of the message that the inline image is belonged to */\n  messageId: string;\n  /** Attributes of the inline image */\n  imgAttrs: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/* @conditional-compile-remove(image-gallery) */\n/**\n * Options to display inline image in the inline image scenario.\n *\n * @beta\n */\nexport interface InlineImageOptions {\n  /**\n   * Optional callback to render an inline image of in a message.\n   */\n  onRenderInlineImage?: (inlineImage: InlineImage, defaultOnRender: (inlineImage: InlineImage) => JSX.Element) => 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};\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>;\n};\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={processHtmlToReact(props)} />;\n};\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  return <MessageContentWithLiveAria message={props.message} liveMessage={generateLiveMessage(props)} ariaLabel={messageContentAriaText(props)} content={<Linkify componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n    return <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>;\n  }}>\n          {props.message.content}\n        </Linkify>} />;\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 = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink ? props.message.linkText ?? props.strings.blockedWarningLinkText : '';\n  const liveAuthor = props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return <MessageContentWithLiveAria message={props.message} liveMessage={liveBlockedWarningText} ariaLabel={liveBlockedWarningText} content={<Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>}\n        </Stack>} />;\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};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n    author: `${props.message.senderDisplayName}`\n  });\n  return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')} `;\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  // Strip all html tags from the content for aria.\n\n  return props.message.content ? props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n    message: DOMPurify.sanitize(props.message.content, {\n      ALLOWED_TAGS: []\n    })\n  }) : _formatString(props.strings.messageContentAriaText, {\n    author: `${props.message.senderDisplayName}`,\n    message: DOMPurify.sanitize(props.message.content, {\n      ALLOWED_TAGS: []\n    })\n  }) : undefined;\n};\n\n/* @conditional-compile-remove(image-gallery) */\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n  return <img {...inlineImage.imgAttrs} data-ui-id={inlineImage.imgAttrs.id} tabIndex={0} role=\"button\" style={{\n    cursor: 'pointer',\n    ...inlineImage.imgAttrs.style\n  }} />;\n};\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const options: HTMLReactParserOptions = {\n    transform(reactNode, domNode) {\n      if (domNode instanceof DOMElement && domNode.attribs) {\n        // Transform custom rendering of mentions\n        /* @conditional-compile-remove(mention) */\n        if (props.mentionDisplayOptions?.onRenderMention && domNode.name === 'msft-mention') {\n          const {\n            id\n          } = domNode.attribs;\n          const mention: Mention = {\n            id: id,\n            displayText: ((domNode.children[0] as unknown) as Text).nodeValue ?? ''\n          };\n          return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n        }\n\n        // Transform inline images\n        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n        if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id && props.message.inlineImages?.find(metadata => {\n          return metadata.id === domNode.attribs.id;\n        })) {\n          domNode.attribs['aria-label'] = domNode.attribs.name;\n          const imgProps = attributesToProps(domNode.attribs);\n          /* @conditional-compile-remove(image-gallery) */\n          const inlineImageProps: InlineImage = {\n            messageId: props.message.messageId,\n            imgAttrs: imgProps\n          };\n\n          /* @conditional-compile-remove(image-gallery) */\n          return props.inlineImageOptions?.onRenderInlineImage ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage) : defaultOnRenderInlineImage(inlineImageProps);\n          return <img {...imgProps} />;\n        }\n      }\n      // Pass through the original node\n      return ((reactNode as unknown) as JSX.Element);\n    }\n  };\n  return <>{parse(props.message.content ?? '', options)}</>;\n};"]}
+{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /* @conditional-compile-remove(image-overlay) */\n  inlineImageOptions?: InlineImageOptions;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * InlineImage's state, as reflected in the UI.\n *\n * @beta\n */\nexport interface InlineImage {\n  /** ID of the message that the inline image is belonged to */\n  messageId: string;\n  /** Attributes of the inline image */\n  imgAttrs: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/* @conditional-compile-remove(image-overlay) */\n/**\n * Options to display inline image in the inline image scenario.\n *\n * @beta\n */\nexport interface InlineImageOptions {\n  /**\n   * Optional callback to render an inline image of in a message.\n   */\n  onRenderInlineImage?: (\n    inlineImage: InlineImage,\n    defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n  ) => JSX.Element;\n}\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={processHtmlToReact(props)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={\n        <Linkify\n          componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n            return (\n              <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>\n            );\n          }}\n        >\n          {props.message.content}\n        </Linkify>\n      }\n    />\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n  const blockedMessage =\n    props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink\n    ? props.message.linkText ?? props.strings.blockedWarningLinkText\n    : '';\n\n  const liveAuthor =\n    props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={liveBlockedWarningText}\n      ariaLabel={liveBlockedWarningText}\n      content={\n        <Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && (\n            <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>\n          )}\n        </Stack>\n      }\n    />\n  );\n};\n\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 generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n  return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n    props.message.mine ? '' : liveAuthor\n  } ${extractContent(props.message.content || '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  if (props.message.content) {\n    // Replace all <img> tags with 'image' for aria.\n    const parsedContent = DOMPurify.sanitize(props.message.content, {\n      ALLOWED_TAGS: ['img'],\n      RETURN_DOM_FRAGMENT: true\n    });\n\n    parsedContent.childNodes.forEach((child) => {\n      if (child.nodeName.toLowerCase() !== 'img') {\n        return;\n      }\n      const imageTextNode = document.createElement('div');\n      imageTextNode.innerHTML = 'image ';\n      parsedContent.replaceChild(imageTextNode, child);\n    });\n\n    // Strip all html tags from the content for aria.\n    const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });\n\n    return props.message.mine\n      ? _formatString(props.strings.messageContentMineAriaText, {\n          message: message\n        })\n      : _formatString(props.strings.messageContentAriaText, {\n          author: `${props.message.senderDisplayName}`,\n          message: message\n        });\n  }\n  return undefined;\n};\n\n/* @conditional-compile-remove(image-overlay) */\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n  return (\n    <img key={inlineImage.imgAttrs.id} tabIndex={0} data-ui-id={inlineImage.imgAttrs.id} {...inlineImage.imgAttrs} />\n  );\n};\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const options: HTMLReactParserOptions = {\n    transform(reactNode, domNode) {\n      if (domNode instanceof DOMElement && domNode.attribs) {\n        // Transform custom rendering of mentions\n        /* @conditional-compile-remove(mention) */\n        if (props.mentionDisplayOptions?.onRenderMention && domNode.name === 'msft-mention') {\n          const { id } = domNode.attribs;\n          const mention: Mention = {\n            id: id,\n            displayText: (domNode.children[0] as unknown as Text).nodeValue ?? ''\n          };\n          return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n        }\n\n        // Transform inline images\n        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n        if (\n          domNode.name &&\n          domNode.name === 'img' &&\n          domNode.attribs &&\n          domNode.attribs.id &&\n          props.message.inlineImages?.find((metadata) => {\n            return metadata.id === domNode.attribs.id;\n          })\n        ) {\n          domNode.attribs['aria-label'] = domNode.attribs.name;\n          const imgProps = attributesToProps(domNode.attribs);\n          /* @conditional-compile-remove(image-overlay) */\n          const inlineImageProps: InlineImage = { messageId: props.message.messageId, imgAttrs: imgProps };\n\n          /* @conditional-compile-remove(image-overlay) */\n          return props.inlineImageOptions?.onRenderInlineImage\n            ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)\n            : defaultOnRenderInlineImage(inlineImageProps);\n\n          return <img key={imgProps.id as string} {...imgProps} />;\n        }\n      }\n      // Pass through the original node\n      return reactNode as unknown as JSX.Element;\n    }\n  };\n  return <>{parse(props.message.content ?? '', options)}</>;\n};\n"]}

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

@@ -13,10 +13,10 @@ export const DefaultSystemMessage = (props) => {
         case 'system':
             switch (message.systemMessageType) {
                 case 'content':
-                    return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle });
+                    return (React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
                 case 'participantAdded':
                 case 'participantRemoved':
-                    return React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub });
+                    return (React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub }));
             }
     }
     return React.createElement(React.Fragment, null);
@@ -24,11 +24,15 @@ export const DefaultSystemMessage = (props) => {
 const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
     const { strings } = useLocale();
     const participantsStr = generateParticipantsStr(message.participants, defaultName);
-    const messageSuffix = message.systemMessageType === 'participantAdded' ? strings.messageThread.participantJoined : strings.messageThread.participantLeft;
+    const messageSuffix = message.systemMessageType === 'participantAdded'
+        ? strings.messageThread.participantJoined
+        : strings.messageThread.participantLeft;
     if (participantsStr !== '') {
-        return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style });
+        return (React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
     }
     return React.createElement(React.Fragment, null);
 };
-const generateParticipantsStr = (participants, defaultName) => participants.map(participant => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`).join(', ');
+const generateParticipantsStr = (participants, defaultName) => participants
+    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
+    .join(', ');
 //# sourceMappingURL=DefaultSystemMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultSystemMessage.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/DefaultSystemMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,IAAI,sBAAsB,EAA0B,MAAM,oBAAoB,CAAC;AACrG,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAoB,CAAC,KAAmB,EAAE,EAAE;;IAC3E,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,QAAQ,OAAO,CAAC,WAAW,EAAE,CAAC;QAC5B,KAAK,QAAQ;YACX,QAAQ,OAAO,CAAC,iBAAiB,EAAE,CAAC;gBAClC,KAAK,SAAS;oBACZ,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAA4B,EAAE,OAAO,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,EAAE,EAAE,cAAc,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,qBAAqB,GAAI,CAAC;gBACpM,KAAK,kBAAkB,CAAC;gBACxB,KAAK,oBAAoB;oBACvB,OAAO,oBAAC,iCAAiC,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,qBAAqB,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,GAAI,CAAC;YACpJ,CAAC;IACL,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AACF,MAAM,iCAAiC,GAAG,CAAC,EACzC,OAAO,EACP,KAAK,EACL,WAAW,EAKZ,EAAe,EAAE;IAChB,MAAM,EACJ,OAAO,EACR,GAAG,SAAS,EAAE,CAAC;IAChB,MAAM,eAAe,GAAG,uBAAuB,CAAC,OAAO,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IACnF,MAAM,aAAa,GAAG,OAAO,CAAC,iBAAiB,KAAK,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,eAAe,CAAC;IACzJ,IAAI,eAAe,KAAK,EAAE,EAAE,CAAC;QAC3B,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAA4B,EAAE,OAAO,EAAE,GAAG,eAAe,IAAI,aAAa,EAAE,EAAE,cAAc,EAAE,KAAK,GAAI,CAAC;IAC7L,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AACF,MAAM,uBAAuB,GAAG,CAAC,YAAwC,EAAE,WAAmB,EAAU,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,WAAW,CAAC,WAAW,IAAI,WAAW,CAAC,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { MessageProps, MessageRenderer, _ChatMessageProps } from '../MessageThread';\nimport { CommunicationParticipant, ComponentSlotStyle, ParticipantAddedSystemMessage, ParticipantRemovedSystemMessage } from '../../types';\nimport { SystemMessage as SystemMessageComponent, SystemMessageIconTypes } from './../SystemMessage';\nimport { useLocale } from '../../localization/LocalizationProvider';\n\n/**\n * @private\n */\nexport const DefaultSystemMessage: MessageRenderer = (props: MessageProps) => {\n  const message = props.message;\n  switch (message.messageType) {\n    case 'system':\n      switch (message.systemMessageType) {\n        case 'content':\n          return <SystemMessageComponent iconName={((message.iconName ? message.iconName : '') as SystemMessageIconTypes)} content={message.content ?? ''} containerStyle={props?.messageContainerStyle} />;\n        case 'participantAdded':\n        case 'participantRemoved':\n          return <ParticipantSystemMessageComponent message={message} style={props.messageContainerStyle} defaultName={props.strings.noDisplayNameSub} />;\n      }\n  }\n  return <></>;\n};\nconst ParticipantSystemMessageComponent = ({\n  message,\n  style,\n  defaultName\n}: {\n  message: ParticipantAddedSystemMessage | ParticipantRemovedSystemMessage;\n  style?: ComponentSlotStyle;\n  defaultName: string;\n}): JSX.Element => {\n  const {\n    strings\n  } = useLocale();\n  const participantsStr = generateParticipantsStr(message.participants, defaultName);\n  const messageSuffix = message.systemMessageType === 'participantAdded' ? strings.messageThread.participantJoined : strings.messageThread.participantLeft;\n  if (participantsStr !== '') {\n    return <SystemMessageComponent iconName={((message.iconName ? message.iconName : '') as SystemMessageIconTypes)} content={`${participantsStr} ${messageSuffix}`} containerStyle={style} />;\n  }\n  return <></>;\n};\nconst generateParticipantsStr = (participants: CommunicationParticipant[], defaultName: string): string => participants.map(participant => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`).join(', ');"]}
+{"version":3,"file":"DefaultSystemMessage.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/DefaultSystemMessage.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,aAAa,IAAI,sBAAsB,EAA0B,MAAM,oBAAoB,CAAC;AACrG,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEpE;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAoB,CAAC,KAAmB,EAAE,EAAE;;IAC3E,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,QAAQ,OAAO,CAAC,WAAW,EAAE,CAAC;QAC5B,KAAK,QAAQ;YACX,QAAQ,OAAO,CAAC,iBAAiB,EAAE,CAAC;gBAClC,KAAK,SAAS;oBACZ,OAAO,CACL,oBAAC,sBAAsB,IACrB,QAAQ,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAA2B,EAC9E,OAAO,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,EAAE,EAC9B,cAAc,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,qBAAqB,GAC5C,CACH,CAAC;gBACJ,KAAK,kBAAkB,CAAC;gBACxB,KAAK,oBAAoB;oBACvB,OAAO,CACL,oBAAC,iCAAiC,IAChC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,CAAC,qBAAqB,EAClC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,GAC3C,CACH,CAAC;YACN,CAAC;IACL,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,iCAAiC,GAAG,CAAC,EACzC,OAAO,EACP,KAAK,EACL,WAAW,EAKZ,EAAe,EAAE;IAChB,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAC;IAChC,MAAM,eAAe,GAAG,uBAAuB,CAAC,OAAO,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IACnF,MAAM,aAAa,GACjB,OAAO,CAAC,iBAAiB,KAAK,kBAAkB;QAC9C,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,iBAAiB;QACzC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,eAAe,CAAC;IAE5C,IAAI,eAAe,KAAK,EAAE,EAAE,CAAC;QAC3B,OAAO,CACL,oBAAC,sBAAsB,IACrB,QAAQ,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAA2B,EAC9E,OAAO,EAAE,GAAG,eAAe,IAAI,aAAa,EAAE,EAC9C,cAAc,EAAE,KAAK,GACrB,CACH,CAAC;IACJ,CAAC;IACD,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,YAAwC,EAAE,WAAmB,EAAU,EAAE,CACxG,YAAY;KACT,GAAG,CACF,CAAC,WAAW,EAAE,EAAE,CACd,GAAG,CAAC,WAAW,CAAC,WAAW,IAAI,WAAW,CAAC,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,WAAW,EAAE,CAC1G;KACA,IAAI,CAAC,IAAI,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { MessageProps, MessageRenderer, _ChatMessageProps } from '../MessageThread';\nimport {\n  CommunicationParticipant,\n  ComponentSlotStyle,\n  ParticipantAddedSystemMessage,\n  ParticipantRemovedSystemMessage\n} from '../../types';\nimport { SystemMessage as SystemMessageComponent, SystemMessageIconTypes } from './../SystemMessage';\nimport { useLocale } from '../../localization/LocalizationProvider';\n\n/**\n * @private\n */\nexport const DefaultSystemMessage: MessageRenderer = (props: MessageProps) => {\n  const message = props.message;\n  switch (message.messageType) {\n    case 'system':\n      switch (message.systemMessageType) {\n        case 'content':\n          return (\n            <SystemMessageComponent\n              iconName={(message.iconName ? message.iconName : '') as SystemMessageIconTypes}\n              content={message.content ?? ''}\n              containerStyle={props?.messageContainerStyle}\n            />\n          );\n        case 'participantAdded':\n        case 'participantRemoved':\n          return (\n            <ParticipantSystemMessageComponent\n              message={message}\n              style={props.messageContainerStyle}\n              defaultName={props.strings.noDisplayNameSub}\n            />\n          );\n      }\n  }\n  return <></>;\n};\n\nconst ParticipantSystemMessageComponent = ({\n  message,\n  style,\n  defaultName\n}: {\n  message: ParticipantAddedSystemMessage | ParticipantRemovedSystemMessage;\n  style?: ComponentSlotStyle;\n  defaultName: string;\n}): JSX.Element => {\n  const { strings } = useLocale();\n  const participantsStr = generateParticipantsStr(message.participants, defaultName);\n  const messageSuffix =\n    message.systemMessageType === 'participantAdded'\n      ? strings.messageThread.participantJoined\n      : strings.messageThread.participantLeft;\n\n  if (participantsStr !== '') {\n    return (\n      <SystemMessageComponent\n        iconName={(message.iconName ? message.iconName : '') as SystemMessageIconTypes}\n        content={`${participantsStr} ${messageSuffix}`}\n        containerStyle={style}\n      />\n    );\n  }\n  return <></>;\n};\n\nconst generateParticipantsStr = (participants: CommunicationParticipant[], defaultName: string): string =>\n  participants\n    .map(\n      (participant) =>\n        `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`\n    )\n    .join(', ');\n"]}