@azure/communication-react 1.32.0-beta.1 → 1.32.0

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

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { _Caption } from './Caption';\nimport { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsContainerClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';\nimport { rttDisclosureBannerClassName } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\nimport { RealTimeText } from './RealTimeText';\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\nimport { expandIconClassName, bannerTitleContainerClassName, realTimeTextInputBoxStyles } from './styles/Captions.style';\nimport { titleClassName } from './styles/CaptionsSettingsModal.styles';\nimport { Text, IconButton } from '@fluentui/react';\nimport { _CaptionsAndRTTAnnouncer } from './CaptionsAndRTTAnnouncer';\n/**\n * @public\n * information required for each line of caption\n */\nexport type CaptionsInformation = {\n  /**\n   * unique id for each caption\n   */\n  id: string;\n  /**\n   * speaker's display name\n   */\n  displayName: string;\n  /**\n   * content of the caption\n   */\n  captionText: string;\n  /**\n   * id of the speaker\n   */\n  userId?: string;\n  /**\n   * timestamp when the caption was created\n   * Please note that this value is essential for determining the order of captions and real time text messages\n   * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated\n   */\n  createdTimeStamp?: Date;\n  /**\n   * If caption is finalized\n   */\n  isFinalized?: boolean;\n};\n\n/**\n * @public\n * information required for each line of real time text\n */\nexport type RealTimeTextInformation = {\n  /**\n   * The id of the real time text.\n   */\n  id: number;\n  /**\n   * sender's display name\n   */\n  displayName: string;\n  /**\n   * id of the sender\n   */\n  userId?: string;\n  /**\n   * The real time text message.\n   */\n  message: string;\n  /**\n   * if the real time text received is partial\n   */\n  isTyping: boolean;\n  /**\n   * timestamp when the real time text was finalized\n   */\n  finalizedTimeStamp: Date;\n  /**\n   * If message originated from the local participant\n   * default value is false\n   */\n  isMe?: boolean;\n};\n/**\n * @public\n * strings for captions banner\n */\nexport interface CaptionsBannerStrings {\n  /**\n   * Spinner text for captions banner\n   */\n  captionsBannerSpinnerText?: string;\n\n  /**\n   * Default text for RTT input text box\n   */\n  realTimeTextInputBoxDefaultText?: string;\n\n  /**\n   * Error message for RTT input text box when the size exceeds the limit 2000\n   */\n  realTimeTextInputErrorMessage?: string;\n\n  /**\n   * Real time text disclosure banner title\n   */\n  realTimeTextBannerTitle?: string;\n\n  /**\n   * Real time text disclosure banner content\n   */\n  realTimeTextBannerContent?: string;\n\n  /**\n   * Real time text disclosure banner link label\n   */\n  realTimeTextBannerLinkLabel?: string;\n\n  /**\n   * Title for the container when only captions is enabled\n   */\n  captionsOnlyContainerTitle?: string;\n  /**\n   * Title for the container when only real time text is enabled\n   */\n  realTimeTextOnlyContainerTitle?: string;\n  /**\n   * Title for the container when both captions and real time text is enabled\n   */\n  captionsAndRealTimeTextContainerTitle?: string;\n  /**\n   * Expand button aria label\n   */\n  expandButtonAriaLabel?: string;\n  /**\n   * Minimize button aria label\n   */\n  minimizeButtonAriaLabel?: string;\n}\n\n/**\n * @public\n * CaptionsBanner Component Props.\n */\nexport interface CaptionsBannerProps {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /**\n   * Array of finalized and partial real time text messages\n   */\n  realTimeTexts?: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  /**\n   * Flag to indicate if captions are on\n   */\n  isCaptionsOn?: boolean;\n\n  /**\n   * Flag to indicate if real time text is on\n   */\n  isRealTimeTextOn?: boolean;\n  /**\n   * Flag to indicate if captions are being started\n   * This is used to show spinner while captions are being started\n   */\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional strings for the component\n   */\n  strings?: CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n  /**\n   * Optional options for the component.\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n\n  /**\n   * Optional callback to send real time text.\n   */\n  onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;\n\n  /**\n   * Latest local real time text\n   */\n  latestLocalRealTimeText?: RealTimeTextInformation;\n}\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\n * @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    realTimeTexts,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions,\n    isRealTimeTextOn,\n    onSendRealTimeText,\n    latestLocalRealTimeText\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const captionsScrollDivRef = useRef<HTMLDivElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n  const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);\n  const getTitle = (): string => {\n    if (isCaptionsOn && isRealTimeTextOn) {\n      return strings.captionsAndRealTimeTextContainerTitle ?? '';\n    } else if (isCaptionsOn) {\n      return strings.captionsOnlyContainerTitle ?? '';\n    } else if (isRealTimeTextOn) {\n      return strings.realTimeTextOnlyContainerTitle ?? '';\n    }\n    return '';\n  };\n\n  // merge realtimetexts and captions into one array based on timestamp\n  // Combine captions and realTimeTexts into one list\n  const combinedList: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return sortCaptionsAndRealTimeTexts(captions, realTimeTexts?.completedMessages ?? []);\n  }, [captions, realTimeTexts?.completedMessages]);\n  const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress].slice(-50) as (CaptionsInformation | RealTimeTextInformation)[];\n  }, [combinedList, realTimeTexts]);\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >= captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn, isRealTimeTextOn]);\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, realTimeTexts, isAtBottomOfScroll]);\n  const [textFieldValue, setTextFieldValue] = useState<string>('');\n  useEffect(() => {\n    // if the latest real time text sent by myself is final, clear the text field\n    if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {\n      setTextFieldValue('');\n    }\n  }, [latestLocalRealTimeText]);\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (textFieldValue && onSendRealTimeText) {\n        onSendRealTimeText(textFieldValue, true);\n        setTextFieldValue('');\n      }\n    }\n  };\n  const realTimeTextDisclosureBannerStrings = {\n    bannerTitle: strings.realTimeTextBannerTitle ?? '',\n    bannerContent: strings.realTimeTextBannerContent ?? '',\n    bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n  };\n  const captionsAndRealTimeText = (): JSX.Element => {\n    return <>\n        {mergedCaptions.filter(caption => caption).map(caption => {\n        if ('message' in caption) {\n          return <div key={`RealTimeText - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n                  <RealTimeText {...caption as RealTimeTextInformation} />\n                </div>;\n        }\n        return <div key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n                <_Caption {...caption as CaptionsInformation} onRenderAvatar={onRenderAvatar} />\n              </div>;\n      })}\n      </>;\n  };\n  return <>\n      {(startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n          <_CaptionsAndRTTAnnouncer captions={captions} realTimeTexts={realTimeTexts} realTimeTextTitle={strings.realTimeTextBannerTitle ?? ''} captionsTitle={strings.captionsOnlyContainerTitle ?? ''} />\n          {(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={bannerTitleContainerClassName}>\n              <Text className={titleClassName}>{getTitle()}</Text>\n              <IconButton data-ui-id=\"captions-banner-expand-icon\" iconProps={{\n          iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon'\n        }} ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel} onClick={() => setExpandBannerHeight(!expandBannerHeight)} styles={expandIconClassName(theme)} />\n            </Stack>}\n          {(isCaptionsOn || isRealTimeTextOn) && <div ref={captionsScrollDivRef} className={captionsOptions?.height === 'full' ? captionsBannerFullHeightClassName(theme) : captionsBannerClassName(formFactor, expandBannerHeight)} data-ui-id=\"captions-banner-inner\" data-is-focusable={true}>\n              {isRealTimeTextOn && <Stack className={rttDisclosureBannerClassName()}>\n                  <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n                </Stack>}\n              {captionsAndRealTimeText()}\n            </div>}\n          {isRealTimeTextOn && onSendRealTimeText && <TextField styles={realTimeTextInputBoxStyles(theme)} placeholder={strings.realTimeTextInputBoxDefaultText} value={textFieldValue} onKeyDown={handleKeyDown} onChange={(_, newValue) => {\n        setTextFieldValue(newValue || '');\n        onSendRealTimeText(newValue || '', false);\n      }} maxLength={2000} errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined} />}\n          {!isCaptionsOn && !isRealTimeTextOn && <Stack verticalAlign=\"center\" styles={captionsOptions?.height === 'full' ? loadingBannerFullHeightStyles(theme) : loadingBannerStyles(formFactor)} data-is-focusable={true}>\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>}\n        </FocusZone>}\n    </>;\n};"]}
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { _Caption } from './Caption';\nimport { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsBannerLoadingSpinnerStyles, captionsContainerClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';\nimport { rttDisclosureBannerClassName } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\nimport { RealTimeText } from './RealTimeText';\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\nimport { expandIconClassName, bannerTitleContainerClassName, realTimeTextInputBoxStyles } from './styles/Captions.style';\nimport { titleClassName } from './styles/CaptionsSettingsModal.styles';\nimport { Text, IconButton } from '@fluentui/react';\nimport { _CaptionsAndRTTAnnouncer } from './CaptionsAndRTTAnnouncer';\n/**\r\n * @public\r\n * information required for each line of caption\r\n */\nexport type CaptionsInformation = {\n  /**\r\n   * unique id for each caption\r\n   */\n  id: string;\n  /**\r\n   * speaker's display name\r\n   */\n  displayName: string;\n  /**\r\n   * content of the caption\r\n   */\n  captionText: string;\n  /**\r\n   * id of the speaker\r\n   */\n  userId?: string;\n  /**\r\n   * timestamp when the caption was created\r\n   * Please note that this value is essential for determining the order of captions and real time text messages\r\n   * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated\r\n   */\n  createdTimeStamp?: Date;\n  /**\r\n   * If caption is finalized\r\n   */\n  isFinalized?: boolean;\n};\n\n/**\r\n * @public\r\n * information required for each line of real time text\r\n */\nexport type RealTimeTextInformation = {\n  /**\r\n   * The id of the real time text.\r\n   */\n  id: number;\n  /**\r\n   * sender's display name\r\n   */\n  displayName: string;\n  /**\r\n   * id of the sender\r\n   */\n  userId?: string;\n  /**\r\n   * The real time text message.\r\n   */\n  message: string;\n  /**\r\n   * if the real time text received is partial\r\n   */\n  isTyping: boolean;\n  /**\r\n   * timestamp when the real time text was finalized\r\n   */\n  finalizedTimeStamp: Date;\n  /**\r\n   * If message originated from the local participant\r\n   * default value is false\r\n   */\n  isMe?: boolean;\n};\n/**\r\n * @public\r\n * strings for captions banner\r\n */\nexport interface CaptionsBannerStrings {\n  /**\r\n   * Spinner text for captions banner\r\n   */\n  captionsBannerSpinnerText?: string;\n\n  /**\r\n   * Default text for RTT input text box\r\n   */\n  realTimeTextInputBoxDefaultText?: string;\n\n  /**\r\n   * Error message for RTT input text box when the size exceeds the limit 2000\r\n   */\n  realTimeTextInputErrorMessage?: string;\n\n  /**\r\n   * Real time text disclosure banner title\r\n   */\n  realTimeTextBannerTitle?: string;\n\n  /**\r\n   * Real time text disclosure banner content\r\n   */\n  realTimeTextBannerContent?: string;\n\n  /**\r\n   * Real time text disclosure banner link label\r\n   */\n  realTimeTextBannerLinkLabel?: string;\n\n  /**\r\n   * Title for the container when only captions is enabled\r\n   */\n  captionsOnlyContainerTitle?: string;\n  /**\r\n   * Title for the container when only real time text is enabled\r\n   */\n  realTimeTextOnlyContainerTitle?: string;\n  /**\r\n   * Title for the container when both captions and real time text is enabled\r\n   */\n  captionsAndRealTimeTextContainerTitle?: string;\n  /**\r\n   * Expand button aria label\r\n   */\n  expandButtonAriaLabel?: string;\n  /**\r\n   * Minimize button aria label\r\n   */\n  minimizeButtonAriaLabel?: string;\n}\n\n/**\r\n * @public\r\n * CaptionsBanner Component Props.\r\n */\nexport interface CaptionsBannerProps {\n  /**\r\n   * Array of captions to be displayed\r\n   */\n  captions: CaptionsInformation[];\n  /**\r\n   * Array of finalized and partial real time text messages\r\n   */\n  realTimeTexts?: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  /**\r\n   * Flag to indicate if captions are on\r\n   */\n  isCaptionsOn?: boolean;\n\n  /**\r\n   * Flag to indicate if real time text is on\r\n   */\n  isRealTimeTextOn?: boolean;\n  /**\r\n   * Flag to indicate if captions are being started\r\n   * This is used to show spinner while captions are being started\r\n   */\n  startCaptionsInProgress?: boolean;\n  /**\r\n   * Optional callback to override render of the avatar.\r\n   *\r\n   * @param userId - user Id\r\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\r\n   * Optional strings for the component\r\n   */\n  strings?: CaptionsBannerStrings;\n  /**\r\n   * Optional form factor for the component.\r\n   * @defaultValue 'default'\r\n   */\n  formFactor?: 'default' | 'compact';\n  /**\r\n   * Optional options for the component.\r\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n\n  /**\r\n   * Optional callback to send real time text.\r\n   */\n  onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;\n\n  /**\r\n   * Latest local real time text\r\n   */\n  latestLocalRealTimeText?: RealTimeTextInformation;\n}\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\r\n * @public\r\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\r\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    realTimeTexts,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions,\n    isRealTimeTextOn,\n    onSendRealTimeText,\n    latestLocalRealTimeText\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const captionsScrollDivRef = useRef<HTMLDivElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n  const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);\n  const getTitle = (): string => {\n    if (isCaptionsOn && isRealTimeTextOn) {\n      return strings.captionsAndRealTimeTextContainerTitle ?? '';\n    } else if (isCaptionsOn) {\n      return strings.captionsOnlyContainerTitle ?? '';\n    } else if (isRealTimeTextOn) {\n      return strings.realTimeTextOnlyContainerTitle ?? '';\n    }\n    return '';\n  };\n\n  // merge realtimetexts and captions into one array based on timestamp\n  // Combine captions and realTimeTexts into one list\n  const combinedList: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return sortCaptionsAndRealTimeTexts(captions, realTimeTexts?.completedMessages ?? []);\n  }, [captions, realTimeTexts?.completedMessages]);\n  const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress].slice(-50) as (CaptionsInformation | RealTimeTextInformation)[];\n  }, [combinedList, realTimeTexts]);\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >= captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn, isRealTimeTextOn]);\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, realTimeTexts, isAtBottomOfScroll]);\n  const [textFieldValue, setTextFieldValue] = useState<string>('');\n  useEffect(() => {\n    // if the latest real time text sent by myself is final, clear the text field\n    if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {\n      setTextFieldValue('');\n    }\n  }, [latestLocalRealTimeText]);\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (textFieldValue && onSendRealTimeText) {\n        onSendRealTimeText(textFieldValue, true);\n        setTextFieldValue('');\n      }\n    }\n  };\n  const realTimeTextDisclosureBannerStrings = {\n    bannerTitle: strings.realTimeTextBannerTitle ?? '',\n    bannerContent: strings.realTimeTextBannerContent ?? '',\n    bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n  };\n  const captionsAndRealTimeText = (): JSX.Element => {\n    return <>\r\n        {mergedCaptions.filter(caption => caption).map(caption => {\n        if ('message' in caption) {\n          return <div key={`RealTimeText - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\r\n                  <RealTimeText {...caption as RealTimeTextInformation} />\r\n                </div>;\n        }\n        return <div key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\r\n                <_Caption {...caption as CaptionsInformation} onRenderAvatar={onRenderAvatar} />\r\n              </div>;\n      })}\r\n      </>;\n  };\n  return <>\r\n      {(startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\r\n          <_CaptionsAndRTTAnnouncer captions={captions} realTimeTexts={realTimeTexts} realTimeTextTitle={strings.realTimeTextBannerTitle ?? ''} captionsTitle={strings.captionsOnlyContainerTitle ?? ''} />\r\n          {(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={bannerTitleContainerClassName}>\r\n              <Text className={titleClassName}>{getTitle()}</Text>\r\n              <IconButton data-ui-id=\"captions-banner-expand-icon\" iconProps={{\n          iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon'\n        }} ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel} onClick={() => setExpandBannerHeight(!expandBannerHeight)} styles={expandIconClassName(theme)} />\r\n            </Stack>}\r\n          {(isCaptionsOn || isRealTimeTextOn) && <div ref={captionsScrollDivRef} className={captionsOptions?.height === 'full' ? captionsBannerFullHeightClassName(theme) : captionsBannerClassName(formFactor, expandBannerHeight)} data-ui-id=\"captions-banner-inner\" data-is-focusable={true}>\r\n              {isRealTimeTextOn && <Stack className={rttDisclosureBannerClassName()}>\r\n                  <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\r\n                </Stack>}\r\n              {captionsAndRealTimeText()}\r\n            </div>}\r\n          {isRealTimeTextOn && onSendRealTimeText && <TextField styles={realTimeTextInputBoxStyles(theme)} placeholder={strings.realTimeTextInputBoxDefaultText} value={textFieldValue} onKeyDown={handleKeyDown} onChange={(_, newValue) => {\n        setTextFieldValue(newValue || '');\n        onSendRealTimeText(newValue || '', false);\n      }} maxLength={2000} errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined} />}\r\n          {!isCaptionsOn && !isRealTimeTextOn && <Stack verticalAlign=\"center\" styles={captionsOptions?.height === 'full' ? loadingBannerFullHeightStyles(theme) : loadingBannerStyles(formFactor)} data-is-focusable={true}>\r\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" styles={captionsBannerLoadingSpinnerStyles(theme)} />\r\n            </Stack>}\r\n        </FocusZone>}\r\n    </>;\n};"]}

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

@@ -1 +1 @@
-{"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/CaptionsSettingsModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback } from 'react';\nimport { useMemo, useState, useEffect } from 'react';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Dropdown, IDropdownOption, DefaultButton, PrimaryButton } from '@fluentui/react';\nimport { buttonsContainerClassName, buttonStyles, defaultButtonStyles, dropdownContainerClassName, dropdownInfoTextStyle, dropdownStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';\nimport { CaptionsOptions } from './StartCaptionsButton';\nimport { defaultSpokenLanguage } from './utils';\nimport { SpokenLanguageStrings, CaptionLanguageStrings, _spokenLanguageToCaptionLanguage, SupportedSpokenLanguage, SupportedCaptionLanguage, SpokenLanguageDropdownOptions, CaptionLanguageDropdownOptions } from '../types';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { useLocale } from '../localization';\n\n/**\n * @public\n * strings for captions setting modal\n */\nexport interface CaptionsSettingsModalStrings {\n  /**\n   * Title for the modal\n   */\n  captionsSettingsModalTitle?: string;\n  /**\n   * Label for the spoken language dropdown menu\n   */\n  captionsSettingsSpokenLanguageDropdownLabel?: string;\n  /**\n   * Label for the caption language dropdown menu\n   */\n  captionsSettingsCaptionLanguageDropdownLabel?: string;\n  /**\n   * Disclaimer for the spoken language dropdown menu\n   */\n  captionsSettingsSpokenLanguageDropdownInfoText?: string;\n  /**\n   * Disclaimer for the caption language dropdown menu\n   */\n  captionsSettingsCaptionLanguageDropdownInfoText?: string;\n  /**\n   * Label for the confirm button\n   */\n  captionsSettingsConfirmButtonLabel?: string;\n  /**\n   * Label for the cancel button\n   */\n  captionsSettingsCancelButtonLabel?: string;\n  /**\n   * Aria label for the modal\n   */\n  captionsSettingsModalAriaLabel?: string;\n  /**\n   * Aria label for the close modal button\n   */\n  captionsSettingsCloseModalButtonAriaLabel?: string;\n}\n\n/**\n * @public\n * CaptionsSettingsModal Component Props.\n */\nexport interface CaptionsSettingsModalProps {\n  /**\n   * List of supported spoken languages\n   */\n  supportedSpokenLanguages: SupportedSpokenLanguage[];\n  /**\n   * List of supported caption languages\n   */\n  supportedCaptionLanguages?: SupportedCaptionLanguage[];\n  /**\n   * Callback to set spoken language\n   */\n  onSetSpokenLanguage: (language: SupportedSpokenLanguage) => Promise<void>;\n  /**\n   * Callback to set caption language\n   */\n  onSetCaptionLanguage?: (language: SupportedCaptionLanguage) => Promise<void>;\n  /**\n   * Callback to start captions\n   */\n  onStartCaptions: (options?: CaptionsOptions) => Promise<void>;\n  /**\n   * Current spoken language\n   */\n  currentSpokenLanguage: SupportedSpokenLanguage;\n  /**\n   * Current caption language\n   */\n  currentCaptionLanguage?: SupportedCaptionLanguage;\n  /**\n   * 1 to 1 mapping between language code and language string for spoken languages\n   */\n  spokenLanguageStrings?: SpokenLanguageStrings;\n  /**\n   * 1 to 1 mapping between language code and language string for caption languages\n   */\n  captionLanguageStrings?: CaptionLanguageStrings;\n  /**\n   * Flag to indicate if captions feature is active\n   */\n  isCaptionsFeatureActive?: boolean;\n  /**\n   * Strings for the captions settings modal\n   */\n  strings?: CaptionsSettingsModalStrings;\n  /**\n   * Flag to show the modal\n   */\n  showModal?: boolean;\n  /**\n   * Callback that is triggered when the modal is dismissed\n   */\n  onDismissCaptionsSettings?: () => void;\n  /**\n   * Flag to show the caption language dropdown\n   */\n  changeCaptionLanguage?: boolean;\n}\n\n/**\n * @public\n * a component for setting spoken languages\n */\nexport const CaptionsSettingsModal = (props: CaptionsSettingsModalProps): JSX.Element => {\n  const {\n    supportedSpokenLanguages,\n    supportedCaptionLanguages,\n    currentSpokenLanguage,\n    currentCaptionLanguage,\n    isCaptionsFeatureActive,\n    showModal,\n    onSetSpokenLanguage,\n    onSetCaptionLanguage,\n    onDismissCaptionsSettings,\n    onStartCaptions,\n    changeCaptionLanguage = false\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.captionsSettingsModal;\n  const localSpokenLanguageStrings = useLocale().strings.spokenLanguages;\n  const localCaptionLanguageStrings = useLocale().strings.captionLanguages;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const spokenLanguageStrings = useMemo(() => {\n    return {\n      ...localSpokenLanguageStrings,\n      ...props.spokenLanguageStrings\n    };\n  }, [localSpokenLanguageStrings, props.spokenLanguageStrings]);\n  const captionLanguageStrings = useMemo(() => {\n    return {\n      ...localCaptionLanguageStrings,\n      ...props.captionLanguageStrings\n    };\n  }, [localCaptionLanguageStrings, props.captionLanguageStrings]);\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n  const [selectedSpokenLanguage, setSelectedSpokenLanguage] = useState<SpokenLanguageDropdownOptions>({\n    key: currentSpokenLanguage || defaultSpokenLanguage,\n    text: currentSpokenLanguage || defaultSpokenLanguage\n  });\n  const [selectedCaptionLanguage, setSelectedCaptionLanguage] = useState<CaptionLanguageDropdownOptions>({\n    key: currentCaptionLanguage || _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key] as keyof CaptionLanguageStrings,\n    text: currentCaptionLanguage || _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]\n  });\n  useEffect(() => {\n    // set spoken language when start captions with a spoken language specified.\n    // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n    if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {\n      onSetSpokenLanguage(selectedSpokenLanguage.key);\n      // we only need to call set spoken language once when first starting captions\n      setHasSetSpokenLanguage(true);\n    }\n  }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedSpokenLanguage.key, hasSetSpokenLanguage]);\n  const onDismiss = useCallback((): void => {\n    if (onDismissCaptionsSettings) {\n      onDismissCaptionsSettings();\n    }\n  }, [onDismissCaptionsSettings]);\n  const onConfirm = useCallback(async (): Promise<void> => {\n    const spokenLanguageCode = selectedSpokenLanguage.key;\n    const captionLanguageCode = selectedCaptionLanguage.key;\n    if (isCaptionsFeatureActive) {\n      onSetSpokenLanguage(spokenLanguageCode);\n      if (changeCaptionLanguage) {\n        onSetCaptionLanguage && onSetCaptionLanguage(captionLanguageCode);\n      }\n    } else {\n      await onStartCaptions({\n        spokenLanguage: spokenLanguageCode\n      });\n    }\n    onDismiss();\n  }, [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onSetCaptionLanguage, onStartCaptions, selectedSpokenLanguage.key, selectedCaptionLanguage.key, changeCaptionLanguage]);\n  const spokenLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n    return supportedSpokenLanguages.map(languageCode => {\n      return {\n        key: languageCode,\n        text: spokenLanguageStrings ? spokenLanguageStrings[languageCode] : languageCode\n      };\n    });\n  }, [supportedSpokenLanguages, spokenLanguageStrings]);\n  const captionLanguageDropdownOptions: IDropdownOption[] | undefined = useMemo(() => {\n    return supportedCaptionLanguages?.map(languageCode => {\n      return {\n        key: languageCode,\n        text: captionLanguageStrings ? captionLanguageStrings[languageCode] : languageCode\n      };\n    });\n  }, [supportedCaptionLanguages, captionLanguageStrings]);\n  const sortedSpokenLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n    const copy = [...spokenLanguageDropdownOptions];\n    return copy.sort((a, b) => a.text > b.text ? 1 : -1);\n  }, [spokenLanguageDropdownOptions]);\n  const sortedCaptionLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n    const copy = [...(captionLanguageDropdownOptions ?? [])];\n    return copy.sort((a, b) => a.text > b.text ? 1 : -1);\n  }, [captionLanguageDropdownOptions]);\n  const onSpokenLanguageChange = (event: React.FormEvent<HTMLDivElement>, option: SpokenLanguageDropdownOptions | undefined): void => {\n    if (option) {\n      setSelectedSpokenLanguage(option);\n    }\n  };\n  const onCaptionLanguageChange = (event: React.FormEvent<HTMLDivElement>, option: CaptionLanguageDropdownOptions | undefined): void => {\n    if (option) {\n      setSelectedCaptionLanguage(option);\n    }\n  };\n  const calloutProps = useMemo(() => ({\n    preventDismissOnEvent: _preventDismissOnEvent\n  }), []);\n  const CaptionsSettingsComponent = useCallback((): JSX.Element => {\n    const placeholderSpokenLanguage = currentSpokenLanguage ?? defaultSpokenLanguage;\n    const placeholderCaptionLanguage = currentCaptionLanguage ?? _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];\n    return <Stack>\n        <Dropdown label={strings?.captionsSettingsSpokenLanguageDropdownLabel} selectedKey={selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined} onChange={(ev, option) => onSpokenLanguageChange(ev, option as SpokenLanguageDropdownOptions)} calloutProps={calloutProps} placeholder={placeholderSpokenLanguage} options={sortedSpokenLanguageDropdownOptions} styles={dropdownStyles} />\n        <Text className={dropdownInfoTextStyle(theme)}>{strings?.captionsSettingsSpokenLanguageDropdownInfoText}</Text>\n        {changeCaptionLanguage && <>\n            <Dropdown label={strings?.captionsSettingsCaptionLanguageDropdownLabel} selectedKey={selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined} onChange={(ev, option) => onCaptionLanguageChange(ev, option as CaptionLanguageDropdownOptions)} calloutProps={calloutProps} placeholder={placeholderCaptionLanguage} options={sortedCaptionLanguageDropdownOptions} styles={dropdownStyles} />\n            <Text className={dropdownInfoTextStyle(theme)}>\n              {strings?.captionsSettingsCaptionLanguageDropdownInfoText}\n            </Text>\n          </>}\n      </Stack>;\n  }, [calloutProps, currentSpokenLanguage, currentCaptionLanguage, sortedSpokenLanguageDropdownOptions, sortedCaptionLanguageDropdownOptions, selectedCaptionLanguage, selectedSpokenLanguage, strings?.captionsSettingsSpokenLanguageDropdownInfoText, strings?.captionsSettingsCaptionLanguageDropdownLabel, strings?.captionsSettingsSpokenLanguageDropdownLabel, strings?.captionsSettingsCaptionLanguageDropdownInfoText, theme, changeCaptionLanguage]);\n  const CaptionsSettingsModalStyle: Partial<IModalStyles> = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);\n  return <>\n      {<Modal titleAriaId={strings?.captionsSettingsModalAriaLabel} isOpen={showModal} onDismiss={onDismiss} isBlocking={true} styles={CaptionsSettingsModalStyle}>\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n            <Text className={titleClassName} role=\"heading\" aria-level={1}>\n              {strings?.captionsSettingsModalTitle}\n            </Text>\n            <IconButton iconProps={{\n          iconName: 'Cancel'\n        }} ariaLabel={strings?.captionsSettingsCloseModalButtonAriaLabel} onClick={onDismiss} style={{\n          color: theme.palette.black\n        }} />\n          </Stack>\n\n          <Stack className={dropdownContainerClassName}>{CaptionsSettingsComponent()}</Stack>\n          <Stack horizontal horizontalAlign=\"end\" className={buttonsContainerClassName}>\n            <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>\n              <span>{strings?.captionsSettingsConfirmButtonLabel}</span>\n            </PrimaryButton>\n            <DefaultButton onClick={onDismiss} styles={defaultButtonStyles()}>\n              <span>{strings?.captionsSettingsCancelButtonLabel}</span>\n            </DefaultButton>\n          </Stack>\n        </Modal>}\n    </>;\n};"]}
+{"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/CaptionsSettingsModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback } from 'react';\nimport { useMemo, useState, useEffect } from 'react';\nimport { IModalStyles, Modal, Stack, useTheme, Text, IconButton, Dropdown, IDropdownOption, DefaultButton, PrimaryButton } from '@fluentui/react';\nimport { buttonsContainerClassName, buttonStyles, defaultButtonStyles, dropdownContainerClassName, dropdownInfoTextStyle, dropdownStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';\nimport { CaptionsOptions } from './StartCaptionsButton';\nimport { defaultSpokenLanguage } from './utils';\nimport { SpokenLanguageStrings, CaptionLanguageStrings, _spokenLanguageToCaptionLanguage, SupportedSpokenLanguage, SupportedCaptionLanguage, SpokenLanguageDropdownOptions, CaptionLanguageDropdownOptions } from '../types';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { useLocale } from '../localization';\n\n/**\r\n * @public\r\n * strings for captions setting modal\r\n */\nexport interface CaptionsSettingsModalStrings {\n  /**\r\n   * Title for the modal\r\n   */\n  captionsSettingsModalTitle?: string;\n  /**\r\n   * Label for the spoken language dropdown menu\r\n   */\n  captionsSettingsSpokenLanguageDropdownLabel?: string;\n  /**\r\n   * Label for the caption language dropdown menu\r\n   */\n  captionsSettingsCaptionLanguageDropdownLabel?: string;\n  /**\r\n   * Disclaimer for the spoken language dropdown menu\r\n   */\n  captionsSettingsSpokenLanguageDropdownInfoText?: string;\n  /**\r\n   * Disclaimer for the caption language dropdown menu\r\n   */\n  captionsSettingsCaptionLanguageDropdownInfoText?: string;\n  /**\r\n   * Label for the confirm button\r\n   */\n  captionsSettingsConfirmButtonLabel?: string;\n  /**\r\n   * Label for the cancel button\r\n   */\n  captionsSettingsCancelButtonLabel?: string;\n  /**\r\n   * Aria label for the modal\r\n   */\n  captionsSettingsModalAriaLabel?: string;\n  /**\r\n   * Aria label for the close modal button\r\n   */\n  captionsSettingsCloseModalButtonAriaLabel?: string;\n}\n\n/**\r\n * @public\r\n * CaptionsSettingsModal Component Props.\r\n */\nexport interface CaptionsSettingsModalProps {\n  /**\r\n   * List of supported spoken languages\r\n   */\n  supportedSpokenLanguages: SupportedSpokenLanguage[];\n  /**\r\n   * List of supported caption languages\r\n   */\n  supportedCaptionLanguages?: SupportedCaptionLanguage[];\n  /**\r\n   * Callback to set spoken language\r\n   */\n  onSetSpokenLanguage: (language: SupportedSpokenLanguage) => Promise<void>;\n  /**\r\n   * Callback to set caption language\r\n   */\n  onSetCaptionLanguage?: (language: SupportedCaptionLanguage) => Promise<void>;\n  /**\r\n   * Callback to start captions\r\n   */\n  onStartCaptions: (options?: CaptionsOptions) => Promise<void>;\n  /**\r\n   * Current spoken language\r\n   */\n  currentSpokenLanguage: SupportedSpokenLanguage;\n  /**\r\n   * Current caption language\r\n   */\n  currentCaptionLanguage?: SupportedCaptionLanguage;\n  /**\r\n   * 1 to 1 mapping between language code and language string for spoken languages\r\n   */\n  spokenLanguageStrings?: SpokenLanguageStrings;\n  /**\r\n   * 1 to 1 mapping between language code and language string for caption languages\r\n   */\n  captionLanguageStrings?: CaptionLanguageStrings;\n  /**\r\n   * Flag to indicate if captions feature is active\r\n   */\n  isCaptionsFeatureActive?: boolean;\n  /**\r\n   * Strings for the captions settings modal\r\n   */\n  strings?: CaptionsSettingsModalStrings;\n  /**\r\n   * Flag to show the modal\r\n   */\n  showModal?: boolean;\n  /**\r\n   * Callback that is triggered when the modal is dismissed\r\n   */\n  onDismissCaptionsSettings?: () => void;\n  /**\r\n   * Flag to show the caption language dropdown\r\n   */\n  changeCaptionLanguage?: boolean;\n}\n\n/**\r\n * @public\r\n * a component for setting spoken languages\r\n */\nexport const CaptionsSettingsModal = (props: CaptionsSettingsModalProps): JSX.Element => {\n  const {\n    supportedSpokenLanguages,\n    supportedCaptionLanguages,\n    currentSpokenLanguage,\n    currentCaptionLanguage,\n    isCaptionsFeatureActive,\n    showModal,\n    onSetSpokenLanguage,\n    onSetCaptionLanguage,\n    onDismissCaptionsSettings,\n    onStartCaptions,\n    changeCaptionLanguage = false\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.captionsSettingsModal;\n  const localSpokenLanguageStrings = useLocale().strings.spokenLanguages;\n  const localCaptionLanguageStrings = useLocale().strings.captionLanguages;\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const spokenLanguageStrings = useMemo(() => {\n    return {\n      ...localSpokenLanguageStrings,\n      ...props.spokenLanguageStrings\n    };\n  }, [localSpokenLanguageStrings, props.spokenLanguageStrings]);\n  const captionLanguageStrings = useMemo(() => {\n    return {\n      ...localCaptionLanguageStrings,\n      ...props.captionLanguageStrings\n    };\n  }, [localCaptionLanguageStrings, props.captionLanguageStrings]);\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n  const [selectedSpokenLanguage, setSelectedSpokenLanguage] = useState<SpokenLanguageDropdownOptions>({\n    key: currentSpokenLanguage || defaultSpokenLanguage,\n    text: currentSpokenLanguage || defaultSpokenLanguage\n  });\n  const [selectedCaptionLanguage, setSelectedCaptionLanguage] = useState<CaptionLanguageDropdownOptions>({\n    key: currentCaptionLanguage || _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key] as keyof CaptionLanguageStrings,\n    text: currentCaptionLanguage || _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]\n  });\n  useEffect(() => {\n    // set spoken language when start captions with a spoken language specified.\n    // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n    if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {\n      onSetSpokenLanguage(selectedSpokenLanguage.key);\n      // we only need to call set spoken language once when first starting captions\n      setHasSetSpokenLanguage(true);\n    }\n  }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedSpokenLanguage.key, hasSetSpokenLanguage]);\n  const onDismiss = useCallback((): void => {\n    if (onDismissCaptionsSettings) {\n      onDismissCaptionsSettings();\n    }\n  }, [onDismissCaptionsSettings]);\n  const onConfirm = useCallback(async (): Promise<void> => {\n    const spokenLanguageCode = selectedSpokenLanguage.key;\n    const captionLanguageCode = selectedCaptionLanguage.key;\n    if (isCaptionsFeatureActive) {\n      onSetSpokenLanguage(spokenLanguageCode);\n      if (changeCaptionLanguage) {\n        onSetCaptionLanguage && onSetCaptionLanguage(captionLanguageCode);\n      }\n    } else {\n      await onStartCaptions({\n        spokenLanguage: spokenLanguageCode\n      });\n    }\n    onDismiss();\n  }, [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onSetCaptionLanguage, onStartCaptions, selectedSpokenLanguage.key, selectedCaptionLanguage.key, changeCaptionLanguage]);\n  const spokenLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n    return supportedSpokenLanguages.map(languageCode => {\n      return {\n        key: languageCode,\n        text: spokenLanguageStrings ? spokenLanguageStrings[languageCode] : languageCode\n      };\n    });\n  }, [supportedSpokenLanguages, spokenLanguageStrings]);\n  const captionLanguageDropdownOptions: IDropdownOption[] | undefined = useMemo(() => {\n    return supportedCaptionLanguages?.map(languageCode => {\n      return {\n        key: languageCode,\n        text: captionLanguageStrings ? captionLanguageStrings[languageCode] : languageCode\n      };\n    });\n  }, [supportedCaptionLanguages, captionLanguageStrings]);\n  const sortedSpokenLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n    const copy = [...spokenLanguageDropdownOptions];\n    return copy.sort((a, b) => a.text > b.text ? 1 : -1);\n  }, [spokenLanguageDropdownOptions]);\n  const sortedCaptionLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n    const copy = [...(captionLanguageDropdownOptions ?? [])];\n    return copy.sort((a, b) => a.text > b.text ? 1 : -1);\n  }, [captionLanguageDropdownOptions]);\n  const onSpokenLanguageChange = (event: React.FormEvent<HTMLDivElement>, option: SpokenLanguageDropdownOptions | undefined): void => {\n    if (option) {\n      setSelectedSpokenLanguage(option);\n    }\n  };\n  const onCaptionLanguageChange = (event: React.FormEvent<HTMLDivElement>, option: CaptionLanguageDropdownOptions | undefined): void => {\n    if (option) {\n      setSelectedCaptionLanguage(option);\n    }\n  };\n  const calloutProps = useMemo(() => ({\n    preventDismissOnEvent: _preventDismissOnEvent\n  }), []);\n  const CaptionsSettingsComponent = useCallback((): JSX.Element => {\n    const placeholderSpokenLanguage = currentSpokenLanguage ?? defaultSpokenLanguage;\n    const placeholderCaptionLanguage = currentCaptionLanguage ?? _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];\n    return <Stack>\r\n        <Dropdown label={strings?.captionsSettingsSpokenLanguageDropdownLabel} selectedKey={selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined} onChange={(ev, option) => onSpokenLanguageChange(ev, option as SpokenLanguageDropdownOptions)} calloutProps={calloutProps} placeholder={placeholderSpokenLanguage} options={sortedSpokenLanguageDropdownOptions} styles={dropdownStyles} />\r\n        <Text className={dropdownInfoTextStyle(theme)}>{strings?.captionsSettingsSpokenLanguageDropdownInfoText}</Text>\r\n        {changeCaptionLanguage && <>\r\n            <Dropdown label={strings?.captionsSettingsCaptionLanguageDropdownLabel} selectedKey={selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined} onChange={(ev, option) => onCaptionLanguageChange(ev, option as CaptionLanguageDropdownOptions)} calloutProps={calloutProps} placeholder={placeholderCaptionLanguage} options={sortedCaptionLanguageDropdownOptions} styles={dropdownStyles} />\r\n            <Text className={dropdownInfoTextStyle(theme)}>\r\n              {strings?.captionsSettingsCaptionLanguageDropdownInfoText}\r\n            </Text>\r\n          </>}\r\n      </Stack>;\n  }, [calloutProps, currentSpokenLanguage, currentCaptionLanguage, sortedSpokenLanguageDropdownOptions, sortedCaptionLanguageDropdownOptions, selectedCaptionLanguage, selectedSpokenLanguage, strings?.captionsSettingsSpokenLanguageDropdownInfoText, strings?.captionsSettingsCaptionLanguageDropdownLabel, strings?.captionsSettingsSpokenLanguageDropdownLabel, strings?.captionsSettingsCaptionLanguageDropdownInfoText, theme, changeCaptionLanguage]);\n  const CaptionsSettingsModalStyle: Partial<IModalStyles> = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);\n  return <>\r\n      {<Modal titleAriaId={strings?.captionsSettingsModalAriaLabel} isOpen={showModal} onDismiss={onDismiss} isBlocking={true} styles={CaptionsSettingsModalStyle}>\r\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\r\n            <Text className={titleClassName} role=\"heading\" aria-level={1}>\r\n              {strings?.captionsSettingsModalTitle}\r\n            </Text>\r\n            <IconButton iconProps={{\n          iconName: 'Cancel'\n        }} ariaLabel={strings?.captionsSettingsCloseModalButtonAriaLabel} onClick={onDismiss} style={{\n          color: theme.palette.black\n        }} />\r\n          </Stack>\r\n\r\n          <Stack className={dropdownContainerClassName}>{CaptionsSettingsComponent()}</Stack>\r\n          <Stack horizontal horizontalAlign=\"end\" className={buttonsContainerClassName}>\r\n            <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>\r\n              <span>{strings?.captionsSettingsConfirmButtonLabel}</span>\r\n            </PrimaryButton>\r\n            <DefaultButton onClick={onDismiss} styles={defaultButtonStyles()}>\r\n              <span>{strings?.captionsSettingsCancelButtonLabel}</span>\r\n            </DefaultButton>\r\n          </Stack>\r\n        </Modal>}\r\n    </>;\n};"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageActionMenu.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageActionMenu.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAS,MAAM,iBAAiB,CAAC;AAE9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAOzE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,SAU1C,EAA0C,EAAE;IAC3C,MAAM,EACJ,SAAS,EACT,OAAO,EACP,KAAK,EACL,YAAY,EACb,GAAG,SAAS,CAAC;IACd,4HAA4H;IAC5H,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAC/C,MAAM,eAAe,GAA+B;QAClD,QAAQ,EAAE,6BAAK,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACvD,GAAG,EAAC,YAAY,iBAAa,oCAAoC,EAAC,GAAG,EAAE,SAAS,CAAC,aAAa,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE;gBAClL,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBAClC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;aAC/C,EAAE,IAAI,EAAC,QAAQ,gBAAa,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBAAiB,cAAc,mBAEnF,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE;gBAC1C,iCAAiC;gBACjC,IAAI,cAAc,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;oBAC3D,SAAS,CAAC,mBAAmB,EAAE,CAAC;gBAClC,CAAC;YACH,CAAC,IACI,cAAc,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAC,oBAAoB,gBAAa,SAAS,EAAE,MAAM,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,CAAC,GAAI,CAAC,CAAC,CAAC,SAAS,CACtI;KACT,CAAC;IACF,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, Theme } from '@fluentui/react';\nimport { MenuProps } from '@fluentui/react-components';\nimport React from 'react';\nimport { iconWrapperStyle } from '../styles/ChatMessageComponent.styles';\n\n/** @private */\nexport type ChatMessageActionMenuProps = MenuProps & {\n  showActionMenu?: boolean | undefined;\n};\n\n/**\n * Props for the Chat.Message action menu.\n * This is the 3 dots that appear when hovering over one of your own chat messages.\n *\n * @private\n */\nexport const chatMessageActionMenuProps = (menuProps: {\n  /** String for aria label that is read by Screen readers */\n  ariaLabel?: string;\n  /** Whether the action menu button is enabled, if not this will always return undefined */\n  enabled: boolean;\n  /** Whether the menu is shown */\n  menuExpanded: boolean;\n  menuButtonRef: React.MutableRefObject<HTMLDivElement | null>;\n  onActionButtonClick: () => void;\n  theme: Theme;\n}): ChatMessageActionMenuProps | undefined => {\n  const {\n    ariaLabel,\n    enabled,\n    theme,\n    menuExpanded\n  } = menuProps;\n  // Show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n  const showActionMenu = enabled || menuExpanded;\n  const actionMenuProps: ChatMessageActionMenuProps = {\n    children: <div tabIndex={showActionMenu ? 0 : undefined} //make div focusable, as Icon below is migrated to v9, this can be deleted\n    key=\"menuButton\" data-testid=\"chat-composite-message-action-icon\" ref={menuProps.menuButtonRef} onClick={showActionMenu ? () => menuProps.onActionButtonClick() : undefined} style={{\n      margin: showActionMenu ? '1px' : 0,\n      minHeight: showActionMenu ? undefined : '30px'\n    }} role=\"button\" aria-label={showActionMenu ? ariaLabel : undefined} aria-haspopup={showActionMenu}\n    // set expanded to true, only when the action menu is open\n    aria-expanded={menuExpanded} onKeyDown={e => {\n      // simulate <button> tag behavior\n      if (showActionMenu && (e.key === 'Enter' || e.key === ' ')) {\n        menuProps.onActionButtonClick();\n      }\n    }}>\n        {showActionMenu ? <Icon iconName=\"ChatMessageOptions\" aria-label={ariaLabel} styles={iconWrapperStyle(theme, menuExpanded)} /> : undefined}\n      </div>\n  };\n  return actionMenuProps;\n};"]}
+{"version":3,"file":"ChatMessageActionMenu.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageActionMenu.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAS,MAAM,iBAAiB,CAAC;AAE9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAOzE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,SAU1C,EAA0C,EAAE;IAC3C,MAAM,EACJ,SAAS,EACT,OAAO,EACP,KAAK,EACL,YAAY,EACb,GAAG,SAAS,CAAC;IACd,4HAA4H;IAC5H,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAC/C,MAAM,eAAe,GAA+B;QAClD,QAAQ,EAAE,6BAAK,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACvD,GAAG,EAAC,YAAY,iBAAa,oCAAoC,EAAC,GAAG,EAAE,SAAS,CAAC,aAAa,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE;gBAClL,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBAClC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;aAC/C,EAAE,IAAI,EAAC,QAAQ,gBAAa,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBAAiB,cAAc,mBAEnF,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE;gBAC1C,iCAAiC;gBACjC,IAAI,cAAc,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;oBAC3D,SAAS,CAAC,mBAAmB,EAAE,CAAC;gBAClC,CAAC;YACH,CAAC,IACI,cAAc,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,QAAQ,EAAC,oBAAoB,gBAAa,SAAS,EAAE,MAAM,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,CAAC,GAAI,CAAC,CAAC,CAAC,SAAS,CACtI;KACT,CAAC;IACF,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, Theme } from '@fluentui/react';\nimport { MenuProps } from '@fluentui/react-components';\nimport React from 'react';\nimport { iconWrapperStyle } from '../styles/ChatMessageComponent.styles';\n\n/** @private */\nexport type ChatMessageActionMenuProps = MenuProps & {\n  showActionMenu?: boolean | undefined;\n};\n\n/**\r\n * Props for the Chat.Message action menu.\r\n * This is the 3 dots that appear when hovering over one of your own chat messages.\r\n *\r\n * @private\r\n */\nexport const chatMessageActionMenuProps = (menuProps: {\n  /** String for aria label that is read by Screen readers */\n  ariaLabel?: string;\n  /** Whether the action menu button is enabled, if not this will always return undefined */\n  enabled: boolean;\n  /** Whether the menu is shown */\n  menuExpanded: boolean;\n  menuButtonRef: React.MutableRefObject<HTMLDivElement | null>;\n  onActionButtonClick: () => void;\n  theme: Theme;\n}): ChatMessageActionMenuProps | undefined => {\n  const {\n    ariaLabel,\n    enabled,\n    theme,\n    menuExpanded\n  } = menuProps;\n  // Show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)\n  const showActionMenu = enabled || menuExpanded;\n  const actionMenuProps: ChatMessageActionMenuProps = {\n    children: <div tabIndex={showActionMenu ? 0 : undefined} //make div focusable, as Icon below is migrated to v9, this can be deleted\n    key=\"menuButton\" data-testid=\"chat-composite-message-action-icon\" ref={menuProps.menuButtonRef} onClick={showActionMenu ? () => menuProps.onActionButtonClick() : undefined} style={{\n      margin: showActionMenu ? '1px' : 0,\n      minHeight: showActionMenu ? undefined : '30px'\n    }} role=\"button\" aria-label={showActionMenu ? ariaLabel : undefined} aria-haspopup={showActionMenu}\n    // set expanded to true, only when the action menu is open\n    aria-expanded={menuExpanded} onKeyDown={e => {\n      // simulate <button> tag behavior\n      if (showActionMenu && (e.key === 'Enter' || e.key === ' ')) {\n        menuProps.onActionButtonClick();\n      }\n    }}>\r\n        {showActionMenu ? <Icon iconName=\"ChatMessageOptions\" aria-label={ariaLabel} styles={iconWrapperStyle(theme, menuExpanded)} /> : undefined}\r\n      </div>\n  };\n  return actionMenuProps;\n};"]}

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

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

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

@@ -2,11 +2,8 @@
 import { MessageStatus } from "../../../../acs-ui-common/src";
 import { MessageProps, MessageRenderer, MessageThreadStyles, _ChatMessageProps } from '../MessageThread';
 import { ChatMessage, OnRenderAvatarCallback } from '../../types';
-import { BlockedMessage } from '../../types';
 import { AttachmentMenuAction } from '../../types/Attachment';
 import { AttachmentMetadata } from "../../../../acs-ui-common/src";
-import { AttachmentMetadataInProgress } from "../../../../acs-ui-common/src";
-import { MentionOptions } from '../MentionPopover';
 import { MessageStatusIndicatorProps } from '../MessageStatusIndicator';
 import { InlineImageOptions } from './ChatMessageContent';
 /**
@@ -22,7 +19,7 @@ export type ChatMessageComponentWrapperProps = _ChatMessageProps & {
     styles: MessageThreadStyles | undefined;
     shouldOverlapAvatarAndMessage: boolean;
     onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined;
-    defaultStatusRenderer: (message: ChatMessage | BlockedMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element;
+    defaultStatusRenderer: (message: ChatMessage, participantCount: number, readCount: number, status?: MessageStatus) => JSX.Element;
     onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
     onRenderAvatar?: OnRenderAvatarCallback;
     showMessageStatus?: boolean;
@@ -32,21 +29,12 @@ export type ChatMessageComponentWrapperProps = _ChatMessageProps & {
         id: string;
         displayName: string;
     }[]) => void) => void;
-    onDisplayDateTimeString?: (messageDate: Date) => string;
     inlineImageOptions?: InlineImageOptions;
-    mentionOptions?: MentionOptions;
     onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;
     /**
      * Optional callback to define custom actions for attachments.
      */
     actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];
-    isRichTextEditorEnabled?: boolean;
-    onPaste?: (event: {
-        content: DocumentFragment;
-    }) => void;
-    onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
-    onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
-    inlineImagesWithProgress?: AttachmentMetadataInProgress[];
 };
 /**
  * The wrapper component to display different types of chat message.

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

@@ -10,7 +10,7 @@ import { FluentChatMessageComponent } from './MessageComponents/FluentChatMessag
  * @private
  */
 export const ChatMessageComponentWrapper = (props) => {
-    var _a, _b;
+    var _a;
     const { message, styles, onRenderMessage, key: messageKey } = props;
     const systemMessageStyle = useMemo(() => {
         return {
@@ -22,17 +22,11 @@ export const ChatMessageComponentWrapper = (props) => {
             paddingTop: '1rem',
             paddingBottom: '0.25rem'
         };
-    }, []); // 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 blockedMessageStyle = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer;
-        const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
-        return fluentChatComponent(Object.assign(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 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 chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
                 const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
                 return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));

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';\nimport { BlockedMessage } from '../../types';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { MentionOptions } from '../MentionPopover';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { FluentChatMessageComponentWrapperProps } from './MessageComponents/FluentChatMessageComponent';\nimport { DefaultSystemMessage } from './DefaultSystemMessage';\nimport { InlineImageOptions } from './ChatMessageContent';\nimport { FluentChatMyMessageComponent } from './MyMessageComponents/FluentChatMyMessageComponent';\nimport { FluentChatMessageComponent } from './MessageComponents/FluentChatMessageComponent';\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 | 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  onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => void;\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  inlineImageOptions?: InlineImageOptions;\n  mentionOptions?: MentionOptions;\n  onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n  /**\n   * Optional callback to define custom actions for attachments.\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n  isRichTextEditorEnabled?: boolean;\n  onPaste?: (event: {\n    content: DocumentFragment;\n  }) => void;\n  onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n  onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n  inlineImagesWithProgress?: AttachmentMetadataInProgress[];\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  }, []); // 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 fluentChatComponent({\n      ...props,\n      message: message,\n      messageContainerStyle: messageContainerStyle\n    });\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 fluentChatComponent({\n          ...props,\n          message: message,\n          messageContainerStyle: messageContainerStyle\n        });\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};\nconst fluentChatComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  if (props.message.mine === true) {\n    return <FluentChatMyMessageComponent {...props} />;\n  } else {\n    return <FluentChatMessageComponent {...props} />;\n  }\n};"]}
+{"version":3,"file":"ChatMessageComponentWrapper.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/ChatMessage/ChatMessageComponentWrapper.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,4BAA4B,EAAE,MAAM,oDAAoD,CAAC;AAClG,OAAO,EAAE,0BAA0B,EAAE,MAAM,gDAAgD,CAAC;AAiC5F;;;;GAIG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,KAAuC,EAAe,EAAE;;IAClG,MAAM,EACJ,OAAO,EACP,MAAM,EACN,eAAe,EACf,GAAG,EAAE,UAAU,EAChB,GAAG,KAAK,CAAC;IACV,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACL,UAAU,EAAE,QAAQ;SACrB,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACL,UAAU,EAAE,MAAM;YAClB,aAAa,EAAE,SAAS;SACzB,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,QAAQ,OAAO,CAAC,WAAW,EAAE,CAAC;QAC5B,KAAK,MAAM;YACT,CAAC;gBACC,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,4BAA4B,mCAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,sBAAsB,CAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,sBAAsB,CAAC;gBACjK,MAAM,gBAAgB,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,oBAAoB,CAAC;gBACtD,MAAM,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBACnF,OAAO,mBAAmB,iCACrB,KAAK,KACR,OAAO,EAAE,OAAO,EAChB,qBAAqB,EAAE,qBAAqB,IAC5C,CAAC;YACL,CAAC;QACH,KAAK,QAAQ;YACX,CAAC;gBACC,MAAM,qBAAqB,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,sBAAsB,CAAC;gBAC7D,MAAM,sBAAsB,GAAG,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,oBAAC,oBAAoB,oBAAK,KAAK,EAAI,CAAC,CAAC,CAAC,eAAe,iCAC/G,KAAK,KACR,qBAAqB,KACpB,KAAK,CAAC,EAAE,CAAC,oBAAC,oBAAoB,oBAAK,KAAK,EAAI,CAAC,CAAC;gBACjD,OAAO,6BAAK,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,kBAAkB,IACnD,sBAAsB,CACnB,CAAC;YACT,CAAC;QACH;YACE,CAAC;gBACC,mHAAmH;gBACnH,MAAM,sBAAsB,GAAG,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,yCAAK,CAAC,CAAC,CAAC,eAAe,mBACjF,KAAK,EACR,CAAC;gBACH,OAAO,6BAAK,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,kBAAkB,IACnD,sBAAsB,CACnB,CAAC;YACT,CAAC;IACL,CAAC;AACH,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,CAAC,KAA6C,EAAe,EAAE;IACzF,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;QAChC,OAAO,oBAAC,4BAA4B,oBAAK,KAAK,EAAI,CAAC;IACrD,CAAC;SAAM,CAAC;QACN,OAAO,oBAAC,0BAA0B,oBAAK,KAAK,EAAI,CAAC;IACnD,CAAC;AACH,CAAC,CAAC","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';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { MessageStatusIndicatorProps } from '../MessageStatusIndicator';\nimport { FluentChatMessageComponentWrapperProps } from './MessageComponents/FluentChatMessageComponent';\nimport { DefaultSystemMessage } from './DefaultSystemMessage';\nimport { InlineImageOptions } from './ChatMessageContent';\nimport { FluentChatMyMessageComponent } from './MyMessageComponents/FluentChatMyMessageComponent';\nimport { FluentChatMessageComponent } from './MessageComponents/FluentChatMessageComponent';\n\n/**\r\n * Props for {@link ChatMessageComponentWrapper}\r\n *\r\n * @private\r\n */\nexport type ChatMessageComponentWrapperProps = _ChatMessageProps & {\n  /**\r\n   * UserId of the current user.\r\n   */\n  userId: string;\n  styles: MessageThreadStyles | undefined;\n  shouldOverlapAvatarAndMessage: boolean;\n  onRenderMessageStatus: ((messageStatusIndicatorProps: MessageStatusIndicatorProps) => JSX.Element | null) | undefined;\n  defaultStatusRenderer: (message: ChatMessage, 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  onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n    id: string;\n    displayName: string;\n  }[]) => void) => void;\n  inlineImageOptions?: InlineImageOptions;\n  onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;\n  /**\r\n   * Optional callback to define custom actions for attachments.\r\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n};\n\n/**\r\n * The wrapper component to display different types of chat message.\r\n *\r\n * @private\r\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  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 fluentChatComponent({\n          ...props,\n          message: message,\n          messageContainerStyle: messageContainerStyle\n        });\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}>\r\n          {systemMessageComponent}\r\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}>\r\n          {customMessageComponent}\r\n        </div>;\n      }\n  }\n};\nconst fluentChatComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  if (props.message.mine === true) {\n    return <FluentChatMyMessageComponent {...props} />;\n  } else {\n    return <FluentChatMessageComponent {...props} />;\n  }\n};"]}

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

@@ -1,19 +1,12 @@
 import React from 'react';
 import { AttachmentMetadata } from "../../../../acs-ui-common/src";
 import { ChatMessage } from '../../types/ChatMessage';
-import { BlockedMessage } from '../../types/ChatMessage';
-import { MentionDisplayOptions } from '../MentionPopover';
 import { MessageThreadStrings } from '../MessageThread';
 type ChatMessageContentProps = {
     message: ChatMessage;
     strings: MessageThreadStrings;
-    mentionDisplayOptions?: MentionDisplayOptions;
     inlineImageOptions?: InlineImageOptions;
 };
-type BlockedMessageContentProps = {
-    message: BlockedMessage;
-    strings: MessageThreadStrings;
-};
 /**
  * InlineImage's state, as reflected in the UI.
  *
@@ -38,10 +31,6 @@ export interface InlineImageOptions {
 }
 /** @private */
 export declare const ChatMessageContent: (props: ChatMessageContentProps) => JSX.Element;
-/**
- * @private
- */
-export declare const BlockedMessageContent: (props: BlockedMessageContentProps) => JSX.Element;
 /**
  * @private
  */

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

@@ -6,11 +6,8 @@ import parse, { Element as DOMElement } from 'html-react-parser';
 import { attributesToProps } from 'html-react-parser';
 import Linkify from 'react-linkify';
 import { Link } from '@fluentui/react';
-import { FontIcon, Stack } from '@fluentui/react';
 import LiveMessage from '../Announcer/LiveMessage';
-import { defaultOnMentionRender } from './MentionRenderer';
 import DOMPurify from 'dompurify';
-import { dataLossIconStyle } from '../styles/MessageThread.styles';
 import { messageTextContentStyles } from '../styles/MessageThread.styles';
 /** @private */
 export const ChatMessageContent = (props) => {
@@ -39,22 +36,6 @@ const MessageContentAsText = (props) => {
                 return React.createElement(Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText);
             } }, props.message.content) });
 };
-/**
- * @private
- */
-export const BlockedMessageContent = (props) => {
-    var _a;
-    const Icon = React.createElement(FontIcon, { className: dataLossIconStyle, 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 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 },
-            Icon,
-            blockedMessage && React.createElement("p", null, blockedMessage),
-            blockedMessageLink && React.createElement(Link, { target: '_blank', href: blockedMessageLink }, blockedMessageLinkText)) });
-};
 const extractContentForAllyMessage = (props) => {
     var _a;
     if (props.message.content || props.message.attachments) {
@@ -138,20 +119,9 @@ const processHtmlToReact = (props) => {
     var _a;
     const options = {
         transform(reactNode, domNode) {
-            var _a, _b, _c;
+            var _a;
             if (domNode instanceof DOMElement && domNode.attribs) {
                 // Transform custom rendering of mentions
-                if (domNode.name === 'msft-mention' && domNode.attribs.id) {
-                    const { id } = domNode.attribs;
-                    const mention = {
-                        id: id,
-                        displayText: (_a = domNode.children[0].nodeValue) !== null && _a !== void 0 ? _a : ''
-                    };
-                    if ((_b = props.mentionDisplayOptions) === null || _b === void 0 ? void 0 : _b.onRenderMention) {
-                        return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
-                    }
-                    return defaultOnMentionRender(mention);
-                }
                 // Transform inline images
                 if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {
                     if (domNode.attribs.name) {
@@ -162,7 +132,7 @@ const processHtmlToReact = (props) => {
                         messageId: props.message.messageId,
                         imageAttributes: imgProps
                     };
-                    return ((_c = props.inlineImageOptions) === null || _c === void 0 ? void 0 : _c.onRenderInlineImage) ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage) : defaultOnRenderInlineImage(inlineImageProps);
+                    return ((_a = props.inlineImageOptions) === null || _a === void 0 ? void 0 : _a.onRenderInlineImage) ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage) : defaultOnRenderInlineImage(inlineImageProps);
                 }
                 // Transform links to open in new tab
                 if (domNode.name === 'a' && React.isValidElement(reactNode)) {

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 { AttachmentMetadata, _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\nimport { _AttachmentDownloadCardsStrings } from '../Attachment/AttachmentDownloadCards';\nimport { dataLossIconStyle } from '../styles/MessageThread.styles';\nimport { messageTextContentStyles } from '../styles/MessageThread.styles';\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  mentionDisplayOptions?: MentionDisplayOptions;\n  inlineImageOptions?: InlineImageOptions;\n};\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n  className?: string;\n};\n\n/**\n * InlineImage's state, as reflected in the UI.\n *\n * @public\n */\nexport interface InlineImage {\n  /** ID of the message that the inline image is belonged to */\n  messageId: string;\n  /** Attributes of the inline image */\n  imageAttributes: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/**\n * Options to display inline image in the inline image scenario.\n *\n * @public\n */\nexport interface InlineImageOptions {\n  /**\n   * Optional callback to render an inline image of in a message.\n   */\n  onRenderInlineImage?: (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} className={props.className}>\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)} className={messageTextContentStyles} 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 * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon className={dataLossIconStyle} 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};\nconst extractContentForAllyMessage = (props: ChatMessageContentProps): string => {\n  if (props.message.content || props.message.attachments) {\n    // Replace all <img> tags with 'image' for aria.\n    const parsedContent = DOMPurify.sanitize(props.message.content ?? '', {\n      ALLOWED_TAGS: ['img'],\n      RETURN_DOM_FRAGMENT: true\n    });\n    parsedContent.childNodes.forEach(child => {\n      if (child.nodeName.toLowerCase() !== 'img') {\n        return;\n      }\n      const imageTextNode = document.createElement('div');\n      imageTextNode.innerHTML = 'image ';\n      parsedContent.replaceChild(imageTextNode, child);\n    });\n\n    // Inject message attachment count for aria.\n    // this is only applying to file attachments not for inline images.\n    if (props.message.attachments && props.message.attachments.length > 0) {\n      const attachmentCardDescription = attachmentCardGroupDescription(props);\n      const attachmentTextNode = document.createElement('div');\n      attachmentTextNode.innerHTML = `${attachmentCardDescription}`;\n      parsedContent.appendChild(attachmentTextNode);\n    }\n\n    // Strip all html tags from the content for aria.\n    let message = DOMPurify.sanitize(parsedContent, {\n      ALLOWED_TAGS: []\n    });\n    // decode HTML entities so that screen reader can read the content properly.\n    message = decodeEntities(message);\n    return message;\n  }\n  return '';\n};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const messageContent = extractContentForAllyMessage(props);\n  if (props.message.editedOn) {\n    const liveAuthor = _formatString(props.strings.editedMessageLiveAuthorIntro, {\n      author: `${props.message.senderDisplayName}`\n    });\n    return `${props.message.mine ? props.strings.editedMessageLocalUserLiveAuthorIntro : liveAuthor} ${messageContent}`;\n  } else {\n    const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n      author: `${props.message.senderDisplayName}`\n    });\n    return `${props.message.mine ? '' : liveAuthor} ${messageContent} `;\n  }\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  const message = extractContentForAllyMessage(props);\n  return props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n    status: props.message.status ?? '',\n    message: message\n  }) : _formatString(props.strings.messageContentAriaText, {\n    status: props.message.status ?? '',\n    author: `${props.message.senderDisplayName}`,\n    message: message\n  });\n};\nconst attachmentCardGroupDescription = (props: ChatMessageContentProps): string => {\n  const attachments = props.message.attachments;\n  return getAttachmentCountLiveMessage(attachments ?? [], props.strings.attachmentCardGroupMessage);\n};\n\n/**\n * @private\n */\nexport const getAttachmentCountLiveMessage = (attachments: AttachmentMetadata[], attachmentCardGroupMessage: string): string => {\n  if (attachments.length === 0) {\n    return '';\n  }\n  return _formatString(attachmentCardGroupMessage, {\n    attachmentCount: `${attachments.length}`\n  });\n};\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n  return <img key={inlineImage.imageAttributes.id} tabIndex={0} data-ui-id={inlineImage.imageAttributes.id} {...inlineImage.imageAttributes} />;\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        if (domNode.name === 'msft-mention' && domNode.attribs.id) {\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          if (props.mentionDisplayOptions?.onRenderMention) {\n            return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n          }\n          return defaultOnMentionRender(mention);\n        }\n\n        // Transform inline images\n        if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {\n          if (domNode.attribs.name) {\n            domNode.attribs['aria-label'] = domNode.attribs.name;\n          }\n          const imgProps = attributesToProps(domNode.attribs);\n          const inlineImageProps: InlineImage = {\n            messageId: props.message.messageId,\n            imageAttributes: imgProps\n          };\n          return props.inlineImageOptions?.onRenderInlineImage ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage) : defaultOnRenderInlineImage(inlineImageProps);\n        }\n\n        // Transform links to open in new tab\n        if (domNode.name === 'a' && React.isValidElement<React.AnchorHTMLAttributes<HTMLAnchorElement>>(reactNode)) {\n          return React.cloneElement(reactNode, {\n            target: '_blank',\n            rel: 'noreferrer noopener'\n          });\n        }\n      }\n      // Pass through the original node\n      return reactNode as unknown as JSX.Element;\n    }\n  };\n  return <>{parse(props.message.content ?? '', options)}</>;\n};\nconst decodeEntities = (encodedString: string): string => {\n  // This regular expression matches HTML entities.\n  const translate_re = /&(nbsp|amp|quot|lt|gt);/g;\n  // This object maps HTML entities to their respective characters.\n  const translate: Record<string, string> = {\n    nbsp: ' ',\n    amp: '&',\n    quot: '\"',\n    lt: '<',\n    gt: '>'\n  };\n  return encodedString\n  // Find all matches of HTML entities defined in translate_re and\n  // replace them with the corresponding character from the translate object.\n  .replace(translate_re, function (match, entity) {\n    return translate[entity] ?? match;\n  })\n  // Find numeric entities (e.g., &#65;)\n  // and replace them with the equivalent character using the String.fromCharCode method,\n  // which converts Unicode values into characters.\n  .replace(/&#(\\d+);/gi, function (match, numStr) {\n    const num = parseInt(numStr, 10);\n    return String.fromCharCode(num);\n  });\n};"]}
+{"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 { AttachmentMetadata, _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\nimport DOMPurify from 'dompurify';\nimport { _AttachmentDownloadCardsStrings } from '../Attachment/AttachmentDownloadCards';\nimport { messageTextContentStyles } from '../styles/MessageThread.styles';\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  inlineImageOptions?: InlineImageOptions;\n};\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n  className?: string;\n};\n\n/**\r\n * InlineImage's state, as reflected in the UI.\r\n *\r\n * @public\r\n */\nexport interface InlineImage {\n  /** ID of the message that the inline image is belonged to */\n  messageId: string;\n  /** Attributes of the inline image */\n  imageAttributes: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/**\r\n * Options to display inline image in the inline image scenario.\r\n *\r\n * @public\r\n */\nexport interface InlineImageOptions {\n  /**\r\n   * Optional callback to render an inline image of in a message.\r\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} className={props.className}>\r\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\r\n      {props.content}\r\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)} className={messageTextContentStyles} content={<Linkify componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n    return <Link target=\"_blank\" href={decoratedHref} key={key}>\r\n                {decoratedText}\r\n              </Link>;\n  }}>\r\n          {props.message.content}\r\n        </Linkify>} />;\n};\nconst extractContentForAllyMessage = (props: ChatMessageContentProps): string => {\n  if (props.message.content || props.message.attachments) {\n    // Replace all <img> tags with 'image' for aria.\n    const parsedContent = DOMPurify.sanitize(props.message.content ?? '', {\n      ALLOWED_TAGS: ['img'],\n      RETURN_DOM_FRAGMENT: true\n    });\n    parsedContent.childNodes.forEach(child => {\n      if (child.nodeName.toLowerCase() !== 'img') {\n        return;\n      }\n      const imageTextNode = document.createElement('div');\n      imageTextNode.innerHTML = 'image ';\n      parsedContent.replaceChild(imageTextNode, child);\n    });\n\n    // Inject message attachment count for aria.\n    // this is only applying to file attachments not for inline images.\n    if (props.message.attachments && props.message.attachments.length > 0) {\n      const attachmentCardDescription = attachmentCardGroupDescription(props);\n      const attachmentTextNode = document.createElement('div');\n      attachmentTextNode.innerHTML = `${attachmentCardDescription}`;\n      parsedContent.appendChild(attachmentTextNode);\n    }\n\n    // Strip all html tags from the content for aria.\n    let message = DOMPurify.sanitize(parsedContent, {\n      ALLOWED_TAGS: []\n    });\n    // decode HTML entities so that screen reader can read the content properly.\n    message = decodeEntities(message);\n    return message;\n  }\n  return '';\n};\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const messageContent = extractContentForAllyMessage(props);\n  if (props.message.editedOn) {\n    const liveAuthor = _formatString(props.strings.editedMessageLiveAuthorIntro, {\n      author: `${props.message.senderDisplayName}`\n    });\n    return `${props.message.mine ? props.strings.editedMessageLocalUserLiveAuthorIntro : liveAuthor} ${messageContent}`;\n  } else {\n    const liveAuthor = _formatString(props.strings.liveAuthorIntro, {\n      author: `${props.message.senderDisplayName}`\n    });\n    return `${props.message.mine ? '' : liveAuthor} ${messageContent} `;\n  }\n};\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  const message = extractContentForAllyMessage(props);\n  return props.message.mine ? _formatString(props.strings.messageContentMineAriaText, {\n    status: props.message.status ?? '',\n    message: message\n  }) : _formatString(props.strings.messageContentAriaText, {\n    status: props.message.status ?? '',\n    author: `${props.message.senderDisplayName}`,\n    message: message\n  });\n};\nconst attachmentCardGroupDescription = (props: ChatMessageContentProps): string => {\n  const attachments = props.message.attachments;\n  return getAttachmentCountLiveMessage(attachments ?? [], props.strings.attachmentCardGroupMessage);\n};\n\n/**\r\n * @private\r\n */\nexport const getAttachmentCountLiveMessage = (attachments: AttachmentMetadata[], attachmentCardGroupMessage: string): string => {\n  if (attachments.length === 0) {\n    return '';\n  }\n  return _formatString(attachmentCardGroupMessage, {\n    attachmentCount: `${attachments.length}`\n  });\n};\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n  return <img key={inlineImage.imageAttributes.id} tabIndex={0} data-ui-id={inlineImage.imageAttributes.id} {...inlineImage.imageAttributes} />;\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        // Transform inline images\n        if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {\n          if (domNode.attribs.name) {\n            domNode.attribs['aria-label'] = domNode.attribs.name;\n          }\n          const imgProps = attributesToProps(domNode.attribs);\n          const inlineImageProps: InlineImage = {\n            messageId: props.message.messageId,\n            imageAttributes: imgProps\n          };\n          return props.inlineImageOptions?.onRenderInlineImage ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage) : defaultOnRenderInlineImage(inlineImageProps);\n        }\n\n        // Transform links to open in new tab\n        if (domNode.name === 'a' && React.isValidElement<React.AnchorHTMLAttributes<HTMLAnchorElement>>(reactNode)) {\n          return React.cloneElement(reactNode, {\n            target: '_blank',\n            rel: 'noreferrer noopener'\n          });\n        }\n      }\n      // Pass through the original node\n      return reactNode as unknown as JSX.Element;\n    }\n  };\n  return <>{parse(props.message.content ?? '', options)}</>;\n};\nconst decodeEntities = (encodedString: string): string => {\n  // This regular expression matches HTML entities.\n  const translate_re = /&(nbsp|amp|quot|lt|gt);/g;\n  // This object maps HTML entities to their respective characters.\n  const translate: Record<string, string> = {\n    nbsp: ' ',\n    amp: '&',\n    quot: '\"',\n    lt: '<',\n    gt: '>'\n  };\n  return encodedString\n  // Find all matches of HTML entities defined in translate_re and\n  // replace them with the corresponding character from the translate object.\n  .replace(translate_re, function (match, entity) {\n    return translate[entity] ?? match;\n  })\n  // Find numeric entities (e.g., &#65;)\n  // and replace them with the equivalent character using the String.fromCharCode method,\n  // which converts Unicode values into characters.\n  .replace(/&#(\\d+);/gi, function (match, numStr) {\n    const num = parseInt(numStr, 10);\n    return String.fromCharCode(num);\n  });\n};"]}