@azure/communication-react 1.12.0 → 1.12.1-alpha-202401200012

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

@@ -29,8 +29,12 @@ export const _CaptionsSettingsModal = (props) => {
         text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage
     });
     const [selectedCaptionLanguage, setSelectedCaptionLanguage] = useState({
-        key: currentCaptionLanguage !== '' ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],
-        text: currentCaptionLanguage !== '' ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]
+        key: currentCaptionLanguage !== ''
+            ? currentCaptionLanguage
+            : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],
+        text: currentCaptionLanguage !== ''
+            ? currentCaptionLanguage
+            : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]
     });
     useEffect(() => {
         // set spoken language when start captions with a spoken language specified.
@@ -54,14 +58,20 @@ export const _CaptionsSettingsModal = (props) => {
             onSetCaptionLanguage(captionLanguageCode);
         }
         else {
-            yield onStartCaptions({
-                spokenLanguage: spokenLanguageCode
-            });
+            yield onStartCaptions({ spokenLanguage: spokenLanguageCode });
         }
         onDismiss();
-    }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onSetCaptionLanguage, onStartCaptions, selectedSpokenLanguage.key, selectedCaptionLanguage.key]);
+    }), [
+        onDismiss,
+        isCaptionsFeatureActive,
+        onSetSpokenLanguage,
+        onSetCaptionLanguage,
+        onStartCaptions,
+        selectedSpokenLanguage.key,
+        selectedCaptionLanguage.key
+    ]);
     const spokenLanguageDropdownOptions = useMemo(() => {
-        return supportedSpokenLanguages.map(languageCode => {
+        return supportedSpokenLanguages.map((languageCode) => {
             return {
                 key: languageCode,
                 text: spokenLanguageStrings ? spokenLanguageStrings[languageCode] : languageCode
@@ -69,7 +79,7 @@ export const _CaptionsSettingsModal = (props) => {
         });
     }, [supportedSpokenLanguages, spokenLanguageStrings]);
     const captionLanguageDropdownOptions = useMemo(() => {
-        return supportedCaptionLanguages.map(languageCode => {
+        return supportedCaptionLanguages.map((languageCode) => {
             return {
                 key: languageCode,
                 text: captionLanguageStrings ? captionLanguageStrings[languageCode] : languageCode
@@ -78,11 +88,11 @@ export const _CaptionsSettingsModal = (props) => {
     }, [supportedCaptionLanguages, captionLanguageStrings]);
     const sortedSpokenLanguageDropdownOptions = useMemo(() => {
         const copy = [...spokenLanguageDropdownOptions];
-        return copy.sort((a, b) => a.text > b.text ? 1 : -1);
+        return copy.sort((a, b) => (a.text > b.text ? 1 : -1));
     }, [spokenLanguageDropdownOptions]);
     const sortedCaptionLanguageDropdownOptions = useMemo(() => {
         const copy = [...captionLanguageDropdownOptions];
-        return copy.sort((a, b) => a.text > b.text ? 1 : -1);
+        return copy.sort((a, b) => (a.text > b.text ? 1 : -1));
     }, [captionLanguageDropdownOptions]);
     const onSpokenLanguageChange = (event, option) => {
         if (option) {
@@ -99,28 +109,40 @@ export const _CaptionsSettingsModal = (props) => {
     }), []);
     const CaptionsSettingsComponent = useCallback(() => {
         const placeholderSpokenLanguage = currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage;
-        const placeholderCaptionLanguage = currentCaptionLanguage !== '' ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];
-        return React.createElement(Stack, null,
+        const placeholderCaptionLanguage = currentCaptionLanguage !== ''
+            ? currentCaptionLanguage
+            : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];
+        return (React.createElement(Stack, null,
             React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, selectedKey: selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined, onChange: onSpokenLanguageChange, calloutProps: calloutProps, placeholder: placeholderSpokenLanguage, options: sortedSpokenLanguageDropdownOptions, styles: dropdownStyles }),
             React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText),
-            changeCaptionLanguage && React.createElement(React.Fragment, null,
+            changeCaptionLanguage && (React.createElement(React.Fragment, null,
                 React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, selectedKey: selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined, onChange: onCaptionLanguageChange, calloutProps: calloutProps, placeholder: placeholderCaptionLanguage, options: sortedCaptionLanguageDropdownOptions, styles: dropdownStyles }),
-                React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText)));
-    }, [calloutProps, currentSpokenLanguage, currentCaptionLanguage, sortedSpokenLanguageDropdownOptions, sortedCaptionLanguageDropdownOptions, selectedCaptionLanguage, selectedSpokenLanguage, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText, theme, changeCaptionLanguage]);
+                React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText)))));
+    }, [
+        calloutProps,
+        currentSpokenLanguage,
+        currentCaptionLanguage,
+        sortedSpokenLanguageDropdownOptions,
+        sortedCaptionLanguageDropdownOptions,
+        selectedCaptionLanguage,
+        selectedSpokenLanguage,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownInfoText,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownLabel,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsSpokenLanguageDropdownLabel,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCaptionLanguageDropdownInfoText,
+        theme,
+        changeCaptionLanguage
+    ]);
     const CaptionsSettingsModalStyle = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
-    return React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
+    return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
         React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
             React.createElement(Text, { className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalTitle),
-            React.createElement(IconButton, { iconProps: {
-                    iconName: 'Cancel'
-                }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: {
-                    color: theme.palette.black
-                } })),
+            React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: { color: theme.palette.black } })),
         React.createElement(Stack, { className: dropdownContainerClassName }, CaptionsSettingsComponent()),
         React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: buttonsContainerClassName },
             React.createElement(PrimaryButton, { styles: buttonStyles(theme), onClick: onConfirm },
                 React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsConfirmButtonLabel)),
             React.createElement(DefaultButton, { onClick: onDismiss, styles: buttonStyles(theme) },
-                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel)))));
+                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel))))));
 };
 //# sourceMappingURL=CaptionsSettingsModal.js.map

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, dropdownContainerClassName, dropdownInfoTextStyle, dropdownStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';\nimport { _captionsOptions } from './StartCaptionsButton';\nimport { defaultSpokenLanguage } from './utils';\nimport { SpokenLanguageStrings, CaptionLanguageStrings, _spokenLanguageToCaptionLanguage } from '../types';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @internal\n * strings for captions setting modal\n */\nexport interface _CaptionsSettingsModalStrings {\n  captionsSettingsModalTitle?: string;\n  captionsSettingsSpokenLanguageDropdownLabel?: string;\n  captionsSettingsCaptionLanguageDropdownLabel?: string;\n  captionsSettingsSpokenLanguageDropdownInfoText?: string;\n  captionsSettingsCaptionLanguageDropdownInfoText?: string;\n  captionsSettingsConfirmButtonLabel?: string;\n  captionsSettingsCancelButtonLabel?: string;\n  captionsSettingsModalAriaLabel?: string;\n  captionsSettingsCloseModalButtonAriaLabel?: string;\n}\n\n/**\n * @internal\n * _CaptionsSettingsModal Component Props.\n */\nexport interface _CaptionsSettingsModalProps {\n  supportedSpokenLanguages: string[];\n  supportedCaptionLanguages: string[];\n  onSetSpokenLanguage: (language: string) => Promise<void>;\n  onSetCaptionLanguage: (language: string) => Promise<void>;\n  onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n  currentSpokenLanguage: string;\n  currentCaptionLanguage: string;\n  spokenLanguageStrings?: SpokenLanguageStrings;\n  captionLanguageStrings?: CaptionLanguageStrings;\n  isCaptionsFeatureActive?: boolean;\n  strings?: _CaptionsSettingsModalStrings;\n  showModal?: boolean;\n  onDismissCaptionsSettings?: () => void;\n  changeCaptionLanguage?: boolean;\n}\n\n/**\n * @internal\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    strings,\n    spokenLanguageStrings,\n    captionLanguageStrings,\n    changeCaptionLanguage = false\n  } = props;\n  const theme = useTheme();\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n  const [selectedSpokenLanguage, setSelectedSpokenLanguage] = useState<IDropdownOption>({\n    key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,\n    text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage\n  });\n  const [selectedCaptionLanguage, setSelectedCaptionLanguage] = useState<IDropdownOption>({\n    key: currentCaptionLanguage !== '' ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],\n    text: currentCaptionLanguage !== '' ? 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.toString());\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.toString();\n    const captionLanguageCode = selectedCaptionLanguage.key.toString();\n    if (isCaptionsFeatureActive) {\n      onSetSpokenLanguage(spokenLanguageCode);\n      onSetCaptionLanguage(captionLanguageCode);\n    } else {\n      await onStartCaptions({\n        spokenLanguage: spokenLanguageCode\n      });\n    }\n    onDismiss();\n  }, [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onSetCaptionLanguage, onStartCaptions, selectedSpokenLanguage.key, selectedCaptionLanguage.key]);\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[] = 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: IDropdownOption | undefined): void => {\n    if (option) {\n      setSelectedSpokenLanguage(option);\n    }\n  };\n  const onCaptionLanguageChange = (event: React.FormEvent<HTMLDivElement>, option: IDropdownOption | 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 !== '' ? currentSpokenLanguage : defaultSpokenLanguage;\n    const placeholderCaptionLanguage = currentCaptionLanguage !== '' ? currentCaptionLanguage : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];\n    return <Stack>\n        <Dropdown label={strings?.captionsSettingsSpokenLanguageDropdownLabel} selectedKey={selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined} onChange={onSpokenLanguageChange} 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={onCaptionLanguageChange} 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}>{strings?.captionsSettingsModalTitle}</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={buttonStyles(theme)}>\n              <span>{strings?.captionsSettingsCancelButtonLabel}</span>\n            </DefaultButton>\n          </Stack>\n        </Modal>}\n    </>;\n};"]}
+{"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsSettingsModal.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAEL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,QAAQ,EAER,aAAa,EACb,aAAa,EACd,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EACL,yBAAyB,EACzB,YAAY,EACZ,0BAA0B,EAC1B,qBAAqB,EACrB,cAAc,EACd,gCAAgC,EAChC,cAAc,EACd,uBAAuB,EACxB,MAAM,uCAAuC,CAAC;AAE/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAiD,gCAAgC,EAAE,MAAM,UAAU,CAAC;AAC3G,OAAO,EAAE,sBAAsB,EAAE,mCAAgC;AAuCjE;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;IACxF,MAAM,EACJ,wBAAwB,EACxB,yBAAyB,EACzB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACpB,yBAAyB,EACzB,eAAe,EACf,OAAO,EACP,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,GAAG,KAAK,EAC9B,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAkB;QACpF,GAAG,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB;QACjF,IAAI,EAAE,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB;KACnF,CAAC,CAAC;IAEH,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAkB;QACtF,GAAG,EACD,sBAAsB,KAAK,EAAE;YAC3B,CAAC,CAAC,sBAAsB;YACxB,CAAC,CAAC,gCAAgC,CAAC,sBAAsB,CAAC,GAAG,CAAC;QAClE,IAAI,EACF,sBAAsB,KAAK,EAAE;YAC3B,CAAC,CAAC,sBAAsB;YACxB,CAAC,CAAC,gCAAgC,CAAC,sBAAsB,CAAC,GAAG,CAAC;KACnE,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,4EAA4E;QAC5E,iIAAiI;QACjI,IAAI,uBAAuB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YACrD,mBAAmB,CAAC,sBAAsB,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC3D,6EAA6E;YAC7E,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,uBAAuB,EAAE,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAErG,MAAM,SAAS,GAAG,WAAW,CAAC,GAAS,EAAE;QACvC,IAAI,yBAAyB,EAAE,CAAC;YAC9B,yBAAyB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAEhC,MAAM,SAAS,GAAG,WAAW,CAAC,GAAwB,EAAE;QACtD,MAAM,kBAAkB,GAAG,sBAAsB,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QACjE,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QACnE,IAAI,uBAAuB,EAAE,CAAC;YAC5B,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;YACxC,oBAAoB,CAAC,mBAAmB,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACN,MAAM,eAAe,CAAC,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC,CAAC;QAChE,CAAC;QACD,SAAS,EAAE,CAAC;IACd,CAAC,CAAA,EAAE;QACD,SAAS;QACT,uBAAuB;QACvB,mBAAmB;QACnB,oBAAoB;QACpB,eAAe;QACf,sBAAsB,CAAC,GAAG;QAC1B,uBAAuB,CAAC,GAAG;KAC5B,CAAC,CAAC;IAEH,MAAM,6BAA6B,GAAsB,OAAO,CAAC,GAAG,EAAE;QACpE,OAAO,wBAAwB,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;YACnD,OAAO;gBACL,GAAG,EAAE,YAAY;gBACjB,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY;aACjF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,wBAAwB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEtD,MAAM,8BAA8B,GAAsB,OAAO,CAAC,GAAG,EAAE;QACrE,OAAO,yBAAyB,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;YACpD,OAAO;gBACL,GAAG,EAAE,YAAY;gBACjB,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY;aACnF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,yBAAyB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAExD,MAAM,mCAAmC,GAAsB,OAAO,CAAC,GAAG,EAAE;QAC1E,MAAM,IAAI,GAAG,CAAC,GAAG,6BAA6B,CAAC,CAAC;QAChD,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,6BAA6B,CAAC,CAAC,CAAC;IAEpC,MAAM,oCAAoC,GAAsB,OAAO,CAAC,GAAG,EAAE;QAC3E,MAAM,IAAI,GAAG,CAAC,GAAG,8BAA8B,CAAC,CAAC;QACjD,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC,EAAE,CAAC,8BAA8B,CAAC,CAAC,CAAC;IAErC,MAAM,sBAAsB,GAAG,CAC7B,KAAsC,EACtC,MAAmC,EAC7B,EAAE;QACR,IAAI,MAAM,EAAE,CAAC;YACX,yBAAyB,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAC9B,KAAsC,EACtC,MAAmC,EAC7B,EAAE;QACR,IAAI,MAAM,EAAE,CAAC;YACX,0BAA0B,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,qBAAqB,EAAE,sBAAsB;KAC9C,CAAC,EACF,EAAE,CACH,CAAC;IAEF,MAAM,yBAAyB,GAAG,WAAW,CAAC,GAAgB,EAAE;QAC9D,MAAM,yBAAyB,GAAG,qBAAqB,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAC/G,MAAM,0BAA0B,GAC9B,sBAAsB,KAAK,EAAE;YAC3B,CAAC,CAAC,sBAAsB;YACxB,CAAC,CAAC,gCAAgC,CAAC,yBAAyB,CAAC,CAAC;QAClE,OAAO,CACL,oBAAC,KAAK;YACJ,oBAAC,QAAQ,IACP,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,2CAA2C,EAC3D,WAAW,EAAE,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAC5E,QAAQ,EAAE,sBAAsB,EAChC,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,yBAAyB,EACtC,OAAO,EAAE,mCAAmC,EAC5C,MAAM,EAAE,cAAc,GACtB;YACF,oBAAC,IAAI,IAAC,SAAS,EAAE,qBAAqB,CAAC,KAAK,CAAC,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,8CAA8C,CAAQ;YAC9G,qBAAqB,IAAI,CACxB;gBACE,oBAAC,QAAQ,IACP,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,4CAA4C,EAC5D,WAAW,EAAE,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAC9E,QAAQ,EAAE,uBAAuB,EACjC,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,0BAA0B,EACvC,OAAO,EAAE,oCAAoC,EAC7C,MAAM,EAAE,cAAc,GACtB;gBACF,oBAAC,IAAI,IAAC,SAAS,EAAE,qBAAqB,CAAC,KAAK,CAAC,IAC1C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,+CAA+C,CACpD,CACN,CACJ,CACK,CACT,CAAC;IACJ,CAAC,EAAE;QACD,YAAY;QACZ,qBAAqB;QACrB,sBAAsB;QACtB,mCAAmC;QACnC,oCAAoC;QACpC,uBAAuB;QACvB,sBAAsB;QACtB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,8CAA8C;QACvD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,4CAA4C;QACrD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,2CAA2C;QACpD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,+CAA+C;QACxD,KAAK;QACL,qBAAqB;KACtB,CAAC,CAAC;IAEH,MAAM,0BAA0B,GAA0B,OAAO,CAC/D,GAAG,EAAE,CAAC,gCAAgC,CAAC,KAAK,CAAC,EAC7C,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CACL,0CAEI,oBAAC,KAAK,IACJ,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,8BAA8B,EACpD,MAAM,EAAE,SAAS,EACjB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,0BAA0B;QAElC,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,eAAe,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,uBAAuB;YACzG,oBAAC,IAAI,IAAC,SAAS,EAAE,cAAc,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,0BAA0B,CAAQ;YAC7E,oBAAC,UAAU,IACT,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EACjC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,yCAAyC,EAC7D,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,GACrC,CACI;QAER,oBAAC,KAAK,IAAC,SAAS,EAAE,0BAA0B,IAAG,yBAAyB,EAAE,CAAS;QACnF,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,KAAK,EAAC,SAAS,EAAE,yBAAyB;YAC1E,oBAAC,aAAa,IAAC,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS;gBAC5D,kCAAO,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kCAAkC,CAAQ,CAC5C;YAChB,oBAAC,aAAa,IAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,CAAC,KAAK,CAAC;gBAC5D,kCAAO,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iCAAiC,CAAQ,CAC3C,CACV,CACF,CAET,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback } from 'react';\nimport { useMemo, useState, useEffect } from 'react';\nimport {\n  IModalStyles,\n  Modal,\n  Stack,\n  useTheme,\n  Text,\n  IconButton,\n  Dropdown,\n  IDropdownOption,\n  DefaultButton,\n  PrimaryButton\n} from '@fluentui/react';\n\nimport {\n  buttonsContainerClassName,\n  buttonStyles,\n  dropdownContainerClassName,\n  dropdownInfoTextStyle,\n  dropdownStyles,\n  themedCaptionsSettingsModalStyle,\n  titleClassName,\n  titleContainerClassName\n} from './styles/CaptionsSettingsModal.styles';\nimport { _captionsOptions } from './StartCaptionsButton';\nimport { defaultSpokenLanguage } from './utils';\nimport { SpokenLanguageStrings, CaptionLanguageStrings, _spokenLanguageToCaptionLanguage } from '../types';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @internal\n * strings for captions setting modal\n */\nexport interface _CaptionsSettingsModalStrings {\n  captionsSettingsModalTitle?: string;\n  captionsSettingsSpokenLanguageDropdownLabel?: string;\n  captionsSettingsCaptionLanguageDropdownLabel?: string;\n  captionsSettingsSpokenLanguageDropdownInfoText?: string;\n  captionsSettingsCaptionLanguageDropdownInfoText?: string;\n  captionsSettingsConfirmButtonLabel?: string;\n  captionsSettingsCancelButtonLabel?: string;\n  captionsSettingsModalAriaLabel?: string;\n  captionsSettingsCloseModalButtonAriaLabel?: string;\n}\n\n/**\n * @internal\n * _CaptionsSettingsModal Component Props.\n */\nexport interface _CaptionsSettingsModalProps {\n  supportedSpokenLanguages: string[];\n  supportedCaptionLanguages: string[];\n  onSetSpokenLanguage: (language: string) => Promise<void>;\n  onSetCaptionLanguage: (language: string) => Promise<void>;\n  onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n  currentSpokenLanguage: string;\n  currentCaptionLanguage: string;\n  spokenLanguageStrings?: SpokenLanguageStrings;\n  captionLanguageStrings?: CaptionLanguageStrings;\n  isCaptionsFeatureActive?: boolean;\n  strings?: _CaptionsSettingsModalStrings;\n  showModal?: boolean;\n  onDismissCaptionsSettings?: () => void;\n  changeCaptionLanguage?: boolean;\n}\n\n/**\n * @internal\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    strings,\n    spokenLanguageStrings,\n    captionLanguageStrings,\n    changeCaptionLanguage = false\n  } = props;\n\n  const theme = useTheme();\n\n  const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n\n  const [selectedSpokenLanguage, setSelectedSpokenLanguage] = useState<IDropdownOption>({\n    key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,\n    text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage\n  });\n\n  const [selectedCaptionLanguage, setSelectedCaptionLanguage] = useState<IDropdownOption>({\n    key:\n      currentCaptionLanguage !== ''\n        ? currentCaptionLanguage\n        : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key],\n    text:\n      currentCaptionLanguage !== ''\n        ? currentCaptionLanguage\n        : _spokenLanguageToCaptionLanguage[selectedSpokenLanguage.key]\n  });\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.toString());\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\n  const onDismiss = useCallback((): void => {\n    if (onDismissCaptionsSettings) {\n      onDismissCaptionsSettings();\n    }\n  }, [onDismissCaptionsSettings]);\n\n  const onConfirm = useCallback(async (): Promise<void> => {\n    const spokenLanguageCode = selectedSpokenLanguage.key.toString();\n    const captionLanguageCode = selectedCaptionLanguage.key.toString();\n    if (isCaptionsFeatureActive) {\n      onSetSpokenLanguage(spokenLanguageCode);\n      onSetCaptionLanguage(captionLanguageCode);\n    } else {\n      await onStartCaptions({ spokenLanguage: spokenLanguageCode });\n    }\n    onDismiss();\n  }, [\n    onDismiss,\n    isCaptionsFeatureActive,\n    onSetSpokenLanguage,\n    onSetCaptionLanguage,\n    onStartCaptions,\n    selectedSpokenLanguage.key,\n    selectedCaptionLanguage.key\n  ]);\n\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\n  const captionLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n    return supportedCaptionLanguages.map((languageCode) => {\n      return {\n        key: languageCode,\n        text: captionLanguageStrings ? captionLanguageStrings[languageCode] : languageCode\n      };\n    });\n  }, [supportedCaptionLanguages, captionLanguageStrings]);\n\n  const sortedSpokenLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n    const copy = [...spokenLanguageDropdownOptions];\n    return copy.sort((a, b) => (a.text > b.text ? 1 : -1));\n  }, [spokenLanguageDropdownOptions]);\n\n  const sortedCaptionLanguageDropdownOptions: IDropdownOption[] = useMemo(() => {\n    const copy = [...captionLanguageDropdownOptions];\n    return copy.sort((a, b) => (a.text > b.text ? 1 : -1));\n  }, [captionLanguageDropdownOptions]);\n\n  const onSpokenLanguageChange = (\n    event: React.FormEvent<HTMLDivElement>,\n    option: IDropdownOption | undefined\n  ): void => {\n    if (option) {\n      setSelectedSpokenLanguage(option);\n    }\n  };\n\n  const onCaptionLanguageChange = (\n    event: React.FormEvent<HTMLDivElement>,\n    option: IDropdownOption | undefined\n  ): void => {\n    if (option) {\n      setSelectedCaptionLanguage(option);\n    }\n  };\n\n  const calloutProps = useMemo(\n    () => ({\n      preventDismissOnEvent: _preventDismissOnEvent\n    }),\n    []\n  );\n\n  const CaptionsSettingsComponent = useCallback((): JSX.Element => {\n    const placeholderSpokenLanguage = currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage;\n    const placeholderCaptionLanguage =\n      currentCaptionLanguage !== ''\n        ? currentCaptionLanguage\n        : _spokenLanguageToCaptionLanguage[placeholderSpokenLanguage];\n    return (\n      <Stack>\n        <Dropdown\n          label={strings?.captionsSettingsSpokenLanguageDropdownLabel}\n          selectedKey={selectedSpokenLanguage ? selectedSpokenLanguage.key : undefined}\n          onChange={onSpokenLanguageChange}\n          calloutProps={calloutProps}\n          placeholder={placeholderSpokenLanguage}\n          options={sortedSpokenLanguageDropdownOptions}\n          styles={dropdownStyles}\n        />\n        <Text className={dropdownInfoTextStyle(theme)}>{strings?.captionsSettingsSpokenLanguageDropdownInfoText}</Text>\n        {changeCaptionLanguage && (\n          <>\n            <Dropdown\n              label={strings?.captionsSettingsCaptionLanguageDropdownLabel}\n              selectedKey={selectedCaptionLanguage ? selectedCaptionLanguage.key : undefined}\n              onChange={onCaptionLanguageChange}\n              calloutProps={calloutProps}\n              placeholder={placeholderCaptionLanguage}\n              options={sortedCaptionLanguageDropdownOptions}\n              styles={dropdownStyles}\n            />\n            <Text className={dropdownInfoTextStyle(theme)}>\n              {strings?.captionsSettingsCaptionLanguageDropdownInfoText}\n            </Text>\n          </>\n        )}\n      </Stack>\n    );\n  }, [\n    calloutProps,\n    currentSpokenLanguage,\n    currentCaptionLanguage,\n    sortedSpokenLanguageDropdownOptions,\n    sortedCaptionLanguageDropdownOptions,\n    selectedCaptionLanguage,\n    selectedSpokenLanguage,\n    strings?.captionsSettingsSpokenLanguageDropdownInfoText,\n    strings?.captionsSettingsCaptionLanguageDropdownLabel,\n    strings?.captionsSettingsSpokenLanguageDropdownLabel,\n    strings?.captionsSettingsCaptionLanguageDropdownInfoText,\n    theme,\n    changeCaptionLanguage\n  ]);\n\n  const CaptionsSettingsModalStyle: Partial<IModalStyles> = useMemo(\n    () => themedCaptionsSettingsModalStyle(theme),\n    [theme]\n  );\n\n  return (\n    <>\n      {\n        <Modal\n          titleAriaId={strings?.captionsSettingsModalAriaLabel}\n          isOpen={showModal}\n          onDismiss={onDismiss}\n          isBlocking={true}\n          styles={CaptionsSettingsModalStyle}\n        >\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n            <Text className={titleClassName}>{strings?.captionsSettingsModalTitle}</Text>\n            <IconButton\n              iconProps={{ iconName: 'Cancel' }}\n              ariaLabel={strings?.captionsSettingsCloseModalButtonAriaLabel}\n              onClick={onDismiss}\n              style={{ 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={buttonStyles(theme)}>\n              <span>{strings?.captionsSettingsCancelButtonLabel}</span>\n            </DefaultButton>\n          </Stack>\n        </Modal>\n      }\n    </>\n  );\n};\n"]}

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

@@ -14,15 +14,12 @@ export const chatMessageActionMenuProps = (menuProps) => {
     // Show the action button while the flyout is open (otherwise this will dismiss when the pointer is hovered over the flyout)
     const showActionMenu = enabled || menuExpanded;
     const actionMenuProps = {
-        children: React.createElement("div", { tabIndex: showActionMenu ? 0 : undefined, key: "menuButton", "data-ui-id": "chat-composite-message-action-icon", ref: menuProps.menuButtonRef, onClick: showActionMenu ? () => menuProps.onActionButtonClick() : undefined, style: {
-                margin: showActionMenu ? '1px' : 0,
-                minHeight: showActionMenu ? undefined : '30px'
-            }, role: "button", "aria-label": showActionMenu ? ariaLabel : undefined, "aria-haspopup": showActionMenu, "aria-expanded": menuExpanded, onKeyDown: e => {
+        children: (React.createElement("div", { tabIndex: showActionMenu ? 0 : undefined, key: "menuButton", "data-ui-id": "chat-composite-message-action-icon", ref: menuProps.menuButtonRef, onClick: showActionMenu ? () => menuProps.onActionButtonClick() : undefined, style: { margin: showActionMenu ? '1px' : 0, minHeight: showActionMenu ? undefined : '30px' }, role: "button", "aria-label": showActionMenu ? ariaLabel : undefined, "aria-haspopup": showActionMenu, "aria-expanded": menuExpanded, onKeyDown: (e) => {
                 // simulate <button> tag behavior
                 if (showActionMenu && (e.key === 'Enter' || e.key === ' ')) {
                     menuProps.onActionButtonClick();
                 }
-            } }, showActionMenu ? React.createElement(Icon, { iconName: "ChatMessageOptions", "aria-label": ariaLabel, styles: iconWrapperStyle(theme, menuExpanded) }) : undefined)
+            } }, showActionMenu ? (React.createElement(Icon, { iconName: "ChatMessageOptions", "aria-label": ariaLabel, styles: iconWrapperStyle(theme, menuExpanded) })) : undefined))
     };
     return actionMenuProps;
 };

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,gBAAY,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;gBACjL,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-ui-id=\"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":["../../../../../../../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,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC;IAC9D,4HAA4H;IAC5H,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAE/C,MAAM,eAAe,GAA+B;QAClD,QAAQ,EAAE,CACR,6BACE,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACxC,GAAG,EAAC,YAAY,gBACL,oCAAoC,EAC/C,GAAG,EAAE,SAAS,CAAC,aAAa,EAC5B,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,SAAS,EAC3E,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE,EAC7F,IAAI,EAAC,QAAQ,gBACD,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,mBACnC,cAAc,mBAEd,YAAY,EAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,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,IAEA,cAAc,CAAC,CAAC,CAAC,CAChB,oBAAC,IAAI,IAAC,QAAQ,EAAC,oBAAoB,gBAAa,SAAS,EAAE,MAAM,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,CAAC,GAAI,CAC7G,CAAC,CAAC,CAAC,SAAS,CACT,CACP;KACF,CAAC;IAEF,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 { ariaLabel, enabled, theme, menuExpanded } = 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\n  const actionMenuProps: ChatMessageActionMenuProps = {\n    children: (\n      <div\n        tabIndex={showActionMenu ? 0 : undefined} //make div focusable, as Icon below is migrated to v9, this can be deleted\n        key=\"menuButton\"\n        data-ui-id=\"chat-composite-message-action-icon\"\n        ref={menuProps.menuButtonRef}\n        onClick={showActionMenu ? () => menuProps.onActionButtonClick() : undefined}\n        style={{ margin: showActionMenu ? '1px' : 0, minHeight: showActionMenu ? undefined : '30px' }}\n        role=\"button\"\n        aria-label={showActionMenu ? ariaLabel : undefined}\n        aria-haspopup={showActionMenu}\n        // set expanded to true, only when the action menu is open\n        aria-expanded={menuExpanded}\n        onKeyDown={(e) => {\n          // simulate <button> tag behavior\n          if (showActionMenu && (e.key === 'Enter' || e.key === ' ')) {\n            menuProps.onActionButtonClick();\n          }\n        }}\n      >\n        {showActionMenu ? (\n          <Icon iconName=\"ChatMessageOptions\" aria-label={ariaLabel} styles={iconWrapperStyle(theme, menuExpanded)} />\n        ) : undefined}\n      </div>\n    )\n  };\n\n  return actionMenuProps;\n};\n"]}

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

@@ -14,7 +14,7 @@ export const ChatMessageActionFlyout = (props) => {
     const theme = useTheme();
     const messageReadByCount = (_a = props.messageReadBy) === null || _a === void 0 ? void 0 : _a.length;
     const sortedMessageReadyByList = [...((_b = props.messageReadBy) !== null && _b !== void 0 ? _b : [])].sort((a, b) => a.displayName.localeCompare(b.displayName));
-    const messageReadByList = sortedMessageReadyByList === null || sortedMessageReadyByList === void 0 ? void 0 : sortedMessageReadyByList.map(person => {
+    const messageReadByList = sortedMessageReadyByList === null || sortedMessageReadyByList === void 0 ? void 0 : sortedMessageReadyByList.map((person) => {
         const personaOptions = {
             hidePersonaDetails: true,
             size: PersonaSize.size24,
@@ -31,9 +31,7 @@ export const ChatMessageActionFlyout = (props) => {
             'data-ui-id': 'chat-composite-message-contextual-menu-read-name-list-item',
             key: person.displayName,
             text: person.displayName,
-            itemProps: {
-                styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
-            },
+            itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },
             onRenderIcon: () => { var _a; return onRenderAvatar ? onRenderAvatar((_a = person.id) !== null && _a !== void 0 ? _a : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions)); },
             iconProps: {
                 styles: menuIconStyleSet
@@ -41,33 +39,36 @@ export const ChatMessageActionFlyout = (props) => {
         };
     });
     const menuItems = useMemo(() => {
-        const items = [{
+        const items = [
+            {
                 key: 'Edit',
                 'data-ui-id': 'chat-composite-message-contextual-menu-edit-action',
                 text: props.strings.editMessage,
                 itemProps: {
                     styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
                 },
-                iconProps: {
-                    iconName: 'MessageEdit',
-                    styles: menuIconStyleSet
-                },
+                iconProps: { iconName: 'MessageEdit', styles: menuIconStyleSet },
                 onClick: props.onEditClick
-            }, {
+            },
+            {
                 key: 'Remove',
                 text: props.strings.removeMessage,
-                itemProps: {
-                    styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined
-                },
+                itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },
                 iconProps: {
                     iconName: 'MessageRemove',
                     styles: menuIconStyleSet
                 },
                 onClick: props.onRemoveClick
-            }];
+            }
+        ];
         // only show read by x of x if more than 3 participants in total including myself
         // TODO: change strings.messageReadCount to be required if we can fallback to our own en-us strings for anything that Contoso doesn't provide
-        if (props.remoteParticipantsCount && messageReadByCount !== undefined && props.remoteParticipantsCount >= 2 && props.showMessageStatus && props.strings.messageReadCount && props.messageStatus !== 'failed') {
+        if (props.remoteParticipantsCount &&
+            messageReadByCount !== undefined &&
+            props.remoteParticipantsCount >= 2 &&
+            props.showMessageStatus &&
+            props.strings.messageReadCount &&
+            props.messageStatus !== 'failed') {
             items.push({
                 key: 'Read Count',
                 'data-ui-id': 'chat-composite-message-contextual-menu-read-info',
@@ -141,9 +142,27 @@ export const ChatMessageActionFlyout = (props) => {
             });
         }
         return items;
-    }, [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]);
+    }, [
+        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
+    ]);
     // gap space uses pixels
-    return React.createElement(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 });
+    return (React.createElement(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 }));
 };
 /**
  * Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.
@@ -153,9 +172,5 @@ const preventUnwantedDismissProps = {
         return ev.type === 'resize';
     }
 };
-const calloutMenuProps = Object.assign(Object.assign({}, preventUnwantedDismissProps), { styles: {
-        root: {
-            marginRight: '3px'
-        }
-    } });
+const calloutMenuProps = Object.assign(Object.assign({}, preventUnwantedDismissProps), { styles: { root: { marginRight: '3px' } } });
 //# sourceMappingURL=ChatMessageActionsFlyout.js.map

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: () => onRenderAvatar ? onRenderAvatar(person.id ?? '', personaOptions) : <Persona {...personaOptions} />,\n      iconProps: {\n        styles: menuIconStyleSet\n      }\n    };\n  });\n  const menuItems = useMemo((): IContextualMenuItem[] => {\n    const items: IContextualMenuItem[] = [{\n      key: 'Edit',\n      'data-ui-id': '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      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 x if more than 3 participants in total including myself\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.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":["../../../../../../../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 {\n  concatStyleSets,\n  ContextualMenu,\n  DirectionalHint,\n  IContextualMenuItem,\n  IPersona,\n  Persona,\n  PersonaSize,\n  Target,\n  useTheme\n} 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 {\n  chatMessageMenuStyle,\n  menuIconStyleSet,\n  menuItemIncreasedSizeStyles,\n  menuSubIconStyleSet\n} 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?: { id: string; displayName: string }[];\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\n  const sortedMessageReadyByList = [...(props.messageReadBy ?? [])].sort((a, b) =>\n    a.displayName.localeCompare(b.displayName)\n  );\n\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 { onRenderAvatar } = 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: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },\n      onRenderIcon: () =>\n        onRenderAvatar ? onRenderAvatar(person.id ?? '', personaOptions) : <Persona {...personaOptions} />,\n      iconProps: {\n        styles: menuIconStyleSet\n      }\n    };\n  });\n\n  const menuItems = useMemo((): IContextualMenuItem[] => {\n    const items: IContextualMenuItem[] = [\n      {\n        key: 'Edit',\n        'data-ui-id': 'chat-composite-message-contextual-menu-edit-action',\n        text: props.strings.editMessage,\n        itemProps: {\n          styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n        },\n        iconProps: { iconName: 'MessageEdit', styles: menuIconStyleSet },\n        onClick: props.onEditClick\n      },\n      {\n        key: 'Remove',\n        text: props.strings.removeMessage,\n        itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },\n        iconProps: {\n          iconName: 'MessageRemove',\n          styles: menuIconStyleSet\n        },\n        onClick: props.onRemoveClick\n      }\n    ];\n    // only show read by x of x if more than 3 participants in total including myself\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 (\n      props.remoteParticipantsCount &&\n      messageReadByCount !== undefined &&\n      props.remoteParticipantsCount >= 2 &&\n      props.showMessageStatus &&\n      props.strings.messageReadCount &&\n      props.messageStatus !== 'failed'\n    ) {\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            {\n              linkContent: {\n                color: messageReadByCount > 0 ? theme.palette.neutralPrimary : theme.palette.neutralTertiary\n              },\n              root: {\n                borderTop: `1px solid ${theme.palette.neutralLighter}`\n              }\n            },\n            props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n          )\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            {\n              linkContent: {\n                color: theme.palette.neutralPrimary\n              },\n              root: {\n                borderTop: `1px solid ${theme.palette.neutralLighter}`\n              }\n            },\n            props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined\n          )\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\n    return items;\n  }, [\n    props.strings.editMessage,\n    props.strings.removeMessage,\n    props.strings.messageReadCount,\n    props.strings.resendMessage,\n    props.messageStatus,\n    props.increaseFlyoutItemSize,\n    props.onEditClick,\n    props.onRemoveClick,\n    props.onResendClick,\n    props.remoteParticipantsCount,\n    props.showMessageStatus,\n    messageReadByCount,\n    theme.palette.neutralPrimary,\n    theme.palette.neutralTertiary,\n    theme.palette.neutralLighter,\n    theme.palette.themeDarkAlt,\n    messageReadByList\n  ]);\n\n  // gap space uses pixels\n  return (\n    <ContextualMenu\n      alignTargetEdge={true}\n      gapSpace={2 /*px*/}\n      isBeakVisible={false}\n      items={menuItems}\n      hidden={props.hidden}\n      target={props.target}\n      onDismiss={props.onDismiss}\n      directionalHint={DirectionalHint.topRightEdge}\n      className={chatMessageMenuStyle}\n      calloutProps={calloutMenuProps}\n    />\n  );\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};\n\nconst calloutMenuProps = {\n  ...preventUnwantedDismissProps,\n  styles: { root: { marginRight: '3px' } }\n};\n"]}

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

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

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

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

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

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

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

@@ -1,12 +1,17 @@
 /// <reference types="react" />
 import { MessageThreadStrings } from '../MessageThread';
 import { ChatMessage } from '../../types';
+import { FileMetadata } from '../FileDownloadCards';
+import { MentionLookupOptions } from '../MentionPopover';
 /** @private */
 export type ChatMessageComponentAsEditBoxProps = {
     onCancel?: (messageId: string) => void;
-    onSubmit: (text: string, metadata?: Record<string, string>, options?: {}) => void;
+    onSubmit: (text: string, metadata?: Record<string, string>, options?: {
+        attachmentMetadata?: FileMetadata[];
+    }) => void;
     message: ChatMessage;
     strings: MessageThreadStrings;
+    mentionLookupOptions?: MentionLookupOptions;
 };
 /**
  * @private