npm - @azure/communication-react - Versions diffs - 1.6.0 → 1.6.1-alpha-202306220014 - Mend

@azure/communication-react 1.6.0 → 1.6.1-alpha-202306220014

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (952) hide show

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

@@ -0,0 +1,95 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React, { useCallback, useEffect } from 'react';
+import { useMemo, useState } from 'react';
+import { Modal, Stack, useTheme, Text, IconButton, Dropdown, DefaultButton, PrimaryButton } from '@fluentui/react';
+import { buttonsContainerClassName, buttonStyles, dropdownContainerClassName, dropdownInfoTextStyle, dropdownStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';
+import { defaultSpokenLanguage } from './utils';
+import { _preventDismissOnEvent } from "../../../acs-ui-common/src";
+/**
+ * @internal
+ * a component for setting spoken languages
+ */
+export const _CaptionsSettingsModal = (props) => {
+    const { supportedSpokenLanguages, currentSpokenLanguage, isCaptionsFeatureActive, showModal, onSetSpokenLanguage, onDismissCaptionsSettings, onStartCaptions, strings, captionsAvailableLanguageStrings } = props;
+    const theme = useTheme();
+    const [selectedItem, setSelectedItem] = useState({
+        key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,
+        text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage
+    });
+    const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);
+    const onDismiss = useCallback(() => {
+        if (onDismissCaptionsSettings) {
+            onDismissCaptionsSettings();
+        }
+    }, [onDismissCaptionsSettings]);
+    useEffect(() => {
+        // set spoken language when start captions with a spoken language specified.
+        // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
+        if (isCaptionsFeatureActive && !hasSetSpokenLanguage) {
+            onSetSpokenLanguage(selectedItem.key.toString());
+            // we only need to call set spoken language once when first starting captions
+            setHasSetSpokenLanguage(true);
+        }
+    }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedItem.key, hasSetSpokenLanguage]);
+    const onConfirm = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        const languageCode = selectedItem.key.toString();
+        if (isCaptionsFeatureActive) {
+            onSetSpokenLanguage(languageCode);
+        }
+        else {
+            yield onStartCaptions({ spokenLanguage: languageCode });
+        }
+        onDismiss();
+    }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);
+    const dropdownOptions = useMemo(() => {
+        return supportedSpokenLanguages.map((languageCode) => {
+            return {
+                key: languageCode,
+                text: captionsAvailableLanguageStrings ? captionsAvailableLanguageStrings[languageCode] : languageCode
+            };
+        });
+    }, [supportedSpokenLanguages, captionsAvailableLanguageStrings]);
+    const onChange = (event, option) => {
+        if (option) {
+            setSelectedItem(option);
+        }
+    };
+    const calloutProps = useMemo(() => ({
+        preventDismissOnEvent: _preventDismissOnEvent
+    }), []);
+    const CaptionsSettingsComponent = useCallback(() => {
+        return (React.createElement(Stack, null,
+            React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel, selectedKey: selectedItem ? selectedItem.key : undefined, onChange: onChange, calloutProps: calloutProps, placeholder: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage, options: dropdownOptions, styles: dropdownStyles }),
+            React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText)));
+    }, [
+        calloutProps,
+        currentSpokenLanguage,
+        dropdownOptions,
+        selectedItem,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel,
+        theme
+    ]);
+    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 },
+        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(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))))));
+};
+//# sourceMappingURL=CaptionsSettingsModal.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsSettingsModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useCallback, useEffect } from 'react';\nimport { useMemo, useState } 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 { CaptionsAvailableLanguageStrings } 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 captionsSettingsDropdownLabel?: string;\n captionsSettingsDropdownInfoText?: 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 onSetSpokenLanguage: (language: string) => Promise<void>;\n onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n currentSpokenLanguage: string;\n captionsAvailableLanguageStrings?: CaptionsAvailableLanguageStrings;\n isCaptionsFeatureActive?: boolean;\n strings?: _CaptionsSettingsModalStrings;\n showModal?: boolean;\n onDismissCaptionsSettings?: () => void;\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 currentSpokenLanguage,\n isCaptionsFeatureActive,\n showModal,\n onSetSpokenLanguage,\n onDismissCaptionsSettings,\n onStartCaptions,\n strings,\n captionsAvailableLanguageStrings\n } = props;\n\n const theme = useTheme();\n\n const [selectedItem, setSelectedItem] = useState<IDropdownOption>({\n key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,\n text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage\n });\n\n const [hasSetSpokenLanguage, setHasSetSpokenLanguage] = useState(false);\n\n const onDismiss = useCallback((): void => {\n if (onDismissCaptionsSettings) {\n onDismissCaptionsSettings();\n }\n }, [onDismissCaptionsSettings]);\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(selectedItem.key.toString());\n // we only need to call set spoken language once when first starting captions\n setHasSetSpokenLanguage(true);\n }\n }, [isCaptionsFeatureActive, onSetSpokenLanguage, selectedItem.key, hasSetSpokenLanguage]);\n\n const onConfirm = useCallback(async (): Promise<void> => {\n const languageCode = selectedItem.key.toString();\n if (isCaptionsFeatureActive) {\n onSetSpokenLanguage(languageCode);\n } else {\n await onStartCaptions({ spokenLanguage: languageCode });\n }\n onDismiss();\n }, [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);\n\n const dropdownOptions: IDropdownOption[] = useMemo(() => {\n return supportedSpokenLanguages.map((languageCode) => {\n return {\n key: languageCode,\n text: captionsAvailableLanguageStrings ? captionsAvailableLanguageStrings[languageCode] : languageCode\n };\n });\n }, [supportedSpokenLanguages, captionsAvailableLanguageStrings]);\n\n const onChange = (event: React.FormEvent<HTMLDivElement>, option: IDropdownOption | undefined): void => {\n if (option) {\n setSelectedItem(option);\n }\n };\n\n const calloutProps = useMemo(\n () => ({\n preventDismissOnEvent: _preventDismissOnEvent\n }),\n []\n );\n\n const CaptionsSettingsComponent = useCallback((): JSX.Element => {\n return (\n <Stack>\n <Dropdown\n label={strings?.captionsSettingsDropdownLabel}\n selectedKey={selectedItem ? selectedItem.key : undefined}\n onChange={onChange}\n calloutProps={calloutProps}\n placeholder={currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage}\n options={dropdownOptions}\n styles={dropdownStyles}\n />\n <Text className={dropdownInfoTextStyle(theme)}>{strings?.captionsSettingsDropdownInfoText}</Text>\n </Stack>\n );\n }, [\n calloutProps,\n currentSpokenLanguage,\n dropdownOptions,\n selectedItem,\n strings?.captionsSettingsDropdownInfoText,\n strings?.captionsSettingsDropdownLabel,\n theme\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\"../../../acs-ui-common/src\""]}

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

@@ -15,10 +15,7 @@ export const chatMessageActionMenuProps = (menuProps) => {
         return undefined;
     }
     const menuClass = mergeStyles(chatActionsCSS, {
-        'ul&': {
-            boxShadow: menuProps.theme.effects.elevation4,
-            backgroundColor: menuProps.theme.palette.white
-        }
+        'ul&': { boxShadow: menuProps.theme.effects.elevation4, backgroundColor: menuProps.theme.palette.white }
     });
     const actionMenuProps = {
         showActionMenu: menuProps.forceShow === true ? true : undefined,
@@ -26,12 +23,14 @@ export const chatMessageActionMenuProps = (menuProps) => {
         activeIndex: -1,
         className: menuClass,
         onItemClick: () => menuProps.onActionButtonClick(),
-        items: [{
-                children: React.createElement(Ref, { innerRef: menuProps.menuButtonRef },
-                    React.createElement(Icon, { iconName: "ChatMessageOptions", "data-ui-id": "chat-composite-message-action-icon", "aria-label": menuProps.ariaLabel, styles: iconWrapperStyle(menuProps.theme, menuProps.forceShow) })),
+        items: [
+            {
+                children: (React.createElement(Ref, { innerRef: menuProps.menuButtonRef },
+                    React.createElement(Icon, { iconName: "ChatMessageOptions", "data-ui-id": "chat-composite-message-action-icon", "aria-label": menuProps.ariaLabel, styles: iconWrapperStyle(menuProps.theme, menuProps.forceShow) }))),
                 key: 'menuButton',
                 indicator: false
-            }]
+            }
+        ]
     };
     return actionMenuProps;
 };

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

	@@ -1 +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,EAAE,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAa,GAAG,EAAE,0CAAoC;AAE7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAOzF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,SAU1C,EAA0C,EAAE;IAC3C,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;QACtB,OAAO,SAAS,CAAC;KAClB;~~IACD~~,MAAM,SAAS,GAAG,WAAW,CAAC,cAAc,EAAE;QAC5C,KAAK,EAAE~~;YACL~~,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU~~;YAC7C~~,eAAe,EAAE,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;~~SAC/C;KACF~~,CAAC,CAAC;~~IACH~~,MAAM,eAAe,GAA+B;QAClD,cAAc,EAAE,SAAS,CAAC,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAC/D,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,CAAC,CAAC;QACf,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,mBAAmB,EAAE;QAClD,KAAK,EAAE~~,CAAC~~;~~gBACN~~,QAAQ,EAAE,oBAAC,GAAG,IAAC,QAAQ,EAAE,SAAS,CAAC,aAAa;~~oBAC1C~~,oBAAC,IAAI,~~IAAC~~,QAAQ,EAAC,oBAAoB,~~gBAAY~~,oCAAoC,~~gBAAa~~,SAAS,CAAC,SAAS,~~EAAE~~,MAAM,EAAE,gBAAgB,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,~~GAAI~~,~~CACnL~~;~~gBACV~~,GAAG,EAAE,YAAY;gBACjB,SAAS,EAAE,KAAK;aACjB~~,CAAC~~;~~KACH~~,CAAC;~~IACF~~,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, mergeStyles, Theme } from '@fluentui/react';\nimport { MenuProps, Ref } from '@internal/northstar-wrapper';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { chatActionsCSS, 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 to force showing the action menu button - this has no effect if the action menu button is not enabled */\n forceShow: boolean;\n menuButtonRef: React.MutableRefObject<HTMLElement \| null>;\n onActionButtonClick: () => void;\n theme: Theme;\n}): ChatMessageActionMenuProps \| undefined => {\n if (!menuProps.enabled) {\n return undefined;\n }\n const menuClass = mergeStyles(chatActionsCSS, {\n 'ul&': {\n boxShadow: menuProps.theme.effects.elevation4~~,\n~~ backgroundColor: menuProps.theme.palette.white\n }\n });\n const actionMenuProps: ChatMessageActionMenuProps = {\n showActionMenu: menuProps.forceShow === true ? true : undefined,\n iconOnly: true,\n activeIndex: -1,\n className: menuClass,\n onItemClick: () => menuProps.onActionButtonClick(),\n items: [{\n children: <Ref innerRef={menuProps.menuButtonRef}>\n <Icon iconName=\"ChatMessageOptions\" data-ui-id=\"chat-composite-message-action-icon\" aria-label={menuProps.ariaLabel} styles={iconWrapperStyle(menuProps.theme, menuProps.forceShow)} />\n </Ref~~>,\~~n key: 'menuButton',\n indicator: false\n }]\n };\n return actionMenuProps;\n};\"../../../../northstar-wrapper/src\"\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageActionMenu.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageActionMenu.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAS,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAa,GAAG,EAAE,0CAAoC;AAE7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAOzF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,SAU1C,EAA0C,EAAE;IAC3C,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;QACtB,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,SAAS,GAAG,WAAW,CAAC,cAAc,EAAE;QAC5C,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,eAAe,EAAE,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE;KACzG,CAAC,CAAC;IAEH,MAAM,eAAe,GAA+B;QAClD,cAAc,EAAE,SAAS,CAAC,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAC/D,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,CAAC,CAAC;QACf,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,mBAAmB,EAAE;QAClD,KAAK,EAAE;YACL;gBACE,QAAQ,EAAE,CACR,oBAAC,GAAG,IAAC,QAAQ,EAAE,SAAS,CAAC,aAAa;oBACpC,oBAAC,IAAI,IACH,QAAQ,EAAC,oBAAoB,gBAClB,oCAAoC,gBACnC,SAAS,CAAC,SAAS,EAC/B,MAAM,EAAE,gBAAgB,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,GAC9D,CACE,CACP;gBAED,GAAG,EAAE,YAAY;gBACjB,SAAS,EAAE,KAAK;aACjB;SACF;KACF,CAAC;IAEF,OAAO,eAAe,CAAC;AACzB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { Icon, mergeStyles, Theme } from '@fluentui/react';\nimport { MenuProps, Ref } from '@internal/northstar-wrapper';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { chatActionsCSS, 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 to force showing the action menu button - this has no effect if the action menu button is not enabled */\n forceShow: boolean;\n menuButtonRef: React.MutableRefObject<HTMLElement \| null>;\n onActionButtonClick: () => void;\n theme: Theme;\n}): ChatMessageActionMenuProps \| undefined => {\n if (!menuProps.enabled) {\n return undefined;\n }\n\n const menuClass = mergeStyles(chatActionsCSS, {\n 'ul&': { boxShadow: menuProps.theme.effects.elevation4, backgroundColor: menuProps.theme.palette.white }\n });\n\n const actionMenuProps: ChatMessageActionMenuProps = {\n showActionMenu: menuProps.forceShow === true ? true : undefined,\n iconOnly: true,\n activeIndex: -1,\n className: menuClass,\n onItemClick: () => menuProps.onActionButtonClick(),\n items: [\n {\n children: (\n <Ref innerRef={menuProps.menuButtonRef}>\n <Icon\n iconName=\"ChatMessageOptions\"\n data-ui-id=\"chat-composite-message-action-icon\"\n aria-label={menuProps.ariaLabel}\n styles={iconWrapperStyle(menuProps.theme, menuProps.forceShow)}\n />\n </Ref>\n ),\n\n key: 'menuButton',\n indicator: false\n }\n ]\n };\n\n return actionMenuProps;\n};\n\"../../../../northstar-wrapper/src\"\"../../../../acs-ui-common/src\""]}

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

@@ -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,
@@ -30,9 +30,7 @@ export const ChatMessageActionFlyout = (props) => {
         return {
             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
@@ -40,33 +38,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, { id: "chat-composite-message-contextual-menu", alignTargetEdge: true, gapSpace: 5 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: DirectionalHint.topRightEdge, className: chatMessageMenuStyle, calloutProps: preventUnwantedDismissProps });
+    return (React.createElement(ContextualMenu, { id: "chat-composite-message-contextual-menu", alignTargetEdge: true, gapSpace: 5 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: DirectionalHint.topRightEdge, className: chatMessageMenuStyle, calloutProps: preventUnwantedDismissProps }));
 };
 /**
  * Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.

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

	@@ -1 +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 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 id: 'chat-composite-message-contextual-menu-read-name-list',\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 id=\"chat-composite-message-contextual-menu\" alignTargetEdge={true} gapSpace={5 /px/} isBeakVisible={false} items={menuItems} hidden={props.hidden} target={props.target} onDismiss={props.onDismiss} directionalHint={DirectionalHint.topRightEdge} className={chatMessageMenuStyle} calloutProps={preventUnwantedDismissProps} />;\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};\"../../../../acs-ui-common/src\""]}
1	+ {"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 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 id: 'chat-composite-message-contextual-menu-read-name-list',\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 id=\"chat-composite-message-contextual-menu\"\n alignTargetEdge={true}\n gapSpace={5 /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={preventUnwantedDismissProps}\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\"../../../../acs-ui-common/src\""]}

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

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import { MessageThreadStrings } from '../MessageThread';
 import { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';
+import { BlockedMessage } from '../../types';
 import { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';
+import { MentionOptions } from '../MentionPopover';
 declare type ChatMessageComponentProps = {
-    message: ChatMessage;
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
     userId: string;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
@@ -61,6 +63,20 @@ declare type ChatMessageComponentProps = {
      * @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: FileMetadata) => Promise<void>;
+    /**
+     * Optional map of attachment ids to blob urls.
+     */
+    attachmentsMap?: Record<string, string>;
 };
 /**
  * @private

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

@@ -16,6 +16,7 @@ import { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMes
  * @private
  */
 export const ChatMessageComponent = (props) => {
+    var _a, _b;
     const [isEditing, setIsEditing] = useState(false);
     const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);
     const { onDeleteMessage, onSendMessage, message } = props;
@@ -35,16 +36,28 @@ export const ChatMessageComponent = (props) => {
         onSendMessage && onSendMessage(content !== undefined ? content : '');
     }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
     if (isEditing && message.messageType === 'chat') {
-        return React.createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, 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, inlineEditButtons: props.inlineAcceptRejectEditButtons, 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(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 CHANGED Viewed

	@@ -1 +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;~~AAgE5F~~;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,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,~~EACJ~~,eAAe,~~EACf~~,aAAa,~~EACb~~,OAAO,~~EACR~~,GAAG,KAAK,CAAC;~~IACV~~,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;YACxC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QACD,4FAA4F;aACvF,IAAI,eAAe,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,IAAI,eAAe,EAAE;YAC7E,eAAe,CAAC,eAAe,CAAC,CAAC;SAClC;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;QAC/C,OAAO,oBAAC,6BAA6B,~~IAAC~~,OAAO,EAAE,OAAO,~~EAAE~~,iBAAiB,EAAE,KAAK,CAAC,6BAA6B,~~EAAE~~,OAAO,EAAE,KAAK,CAAC,OAAO,~~EAAE~~,QAAQ,EAAE,CAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;~~gBAClL~~,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;~~KACP~~;SAAM;QACL,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;~~KAC/M~~;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, FileMetadata } 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 attachedFilesMetadata?: FileMetadata[];\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 Inline the accept and reject edit buttons when editing a message.\n * Setting to false will mean they are on a new line inside the editable chat message.\n /\n inlineAcceptRejectEditButtons: boolean;\n /\n Optional callback to render uploaded files in the message component.\n /\n onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n /\n Optional function called when someone clicks on the file download icon.\n /\n fileDownloadHandler?: FileDownloadHandler;\n remoteParticipantsCount?: number;\n onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {\n id: string~~;\n~~ displayName: string~~;\n~~ }[]) => void) => void;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\n/\n @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n const [isEditing, setIsEditing] = useState(false);\n const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n const {\n onDeleteMessage~~,\n~~ onSendMessage~~,\n~~ message\n } = props;\n const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n const content = 'content' in message ? message.content : undefined;\n const onRemoveClick = useCallback(() => {\n if (onDeleteMessage && message.messageId) {\n onDeleteMessage(message.messageId);\n }\n // when fail to send, message does not have message id, delete message using clientMessageId\n else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n onDeleteMessage(clientMessageId);\n }\n }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n const onResendClick = useCallback(() => {\n onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n onSendMessage && onSendMessage(content !== undefined ? content : '');\n }, [clientMessageId, content, onSendMessage, onDeleteMessage]);\n if (isEditing && message.messageType === 'chat') {\n return <ChatMessageComponentAsEditBox message={message} inlineEditButtons={props.inlineAcceptRejectEditButtons} 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};\"../../../../acs-ui-common/src\""]}
1	+ {"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } 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 attachedFilesMetadata?: FileMetadata[];\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 Inline the accept and reject edit buttons when editing a message.\n * Setting to false will mean they are on a new line inside the editable chat message.\n /\n inlineAcceptRejectEditButtons: boolean;\n /\n Optional callback to render uploaded files in the message component.\n /\n onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n /\n Optional function called when someone clicks on the file download icon.\n /\n fileDownloadHandler?: FileDownloadHandler;\n remoteParticipantsCount?: number;\n onActionButtonClick: (\n message: ChatMessage,\n setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n ) => void;\n /\n Optional callback to override render of the avatar.\n \n @param userId - user Id\n /\n onRenderAvatar?: OnRenderAvatarCallback;\n\n /\n Optional function to provide customized date format.\n * @beta\n /\n onDisplayDateTimeString?: (messageDate: Date) => string;\n / @conditional-compile-remove(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: FileMetadata) => 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 [isEditing, setIsEditing] = useState(false);\n\n const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n const { onDeleteMessage, onSendMessage, message } = props;\n const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n const content = 'content' in message ? message.content : undefined;\n const onRemoveClick = useCallback(() => {\n if (onDeleteMessage && message.messageId) {\n onDeleteMessage(message.messageId);\n }\n // when fail to send, message does not have message id, delete message using clientMessageId\n else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n onDeleteMessage(clientMessageId);\n }\n }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n const onResendClick = useCallback(() => {\n onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n onSendMessage && onSendMessage(content !== undefined ? content : '');\n }, [clientMessageId, content, onSendMessage, onDeleteMessage]);\n\n if (isEditing && message.messageType === 'chat') {\n return (\n <ChatMessageComponentAsEditBox\n message={message}\n inlineEditButtons={props.inlineAcceptRejectEditButtons}\n strings={props.strings}\n onSubmit={async (text, metadata, options) => {\n props.onUpdateMessage &&\n message.messageId &&\n (await props.onUpdateMessage(message.messageId, text, metadata, options));\n setIsEditing(false);\n }}\n onCancel={(messageId) => {\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(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\"../../../../acs-ui-common/src\""]}

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

@@ -2,6 +2,7 @@
 import { MessageThreadStrings } from '../MessageThread';
 import { ChatMessage } from '../../types';
 import { FileMetadata } from '../FileDownloadCards';
+import { MentionLookupOptions } from '../MentionPopover';
 /** @private */
 export declare type ChatMessageComponentAsEditBoxProps = {
     onCancel?: (messageId: string) => void;
@@ -15,6 +16,7 @@ export declare type ChatMessageComponentAsEditBoxProps = {
      * Setting to false will mean they are on a new line inside the editable chat message.
      */
     inlineEditButtons: boolean;
+    mentionLookupOptions?: MentionLookupOptions;
 };
 /**
  * @private

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.js CHANGED Viewed

@@ -12,15 +12,11 @@ import { _FileUploadCards } from '../FileUploadCards';
 import { chatMessageFailedTagStyle, chatMessageEditContainerStyle } from '../styles/ChatMessageComponent.styles';
 const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
 const onRenderCancelIcon = (color) => {
-    const className = mergeStyles(inputBoxIcon, {
-        color
-    });
+    const className = mergeStyles(inputBoxIcon, { color });
     return React.createElement(Icon, { iconName: 'EditBoxCancel', className: className });
 };
 const onRenderSubmitIcon = (color) => {
-    const className = mergeStyles(inputBoxIcon, {
-        color
-    });
+    const className = mergeStyles(inputBoxIcon, { color });
     return React.createElement(Icon, { iconName: 'EditBoxSubmit', className: className });
 };
 /**
@@ -28,6 +24,8 @@ const onRenderSubmitIcon = (color) => {
  */
 export const ChatMessageComponentAsEditBox = (props) => {
     const { onCancel, onSubmit, strings, message } = props;
+    /* @conditional-compile-remove(mention) */
+    const { mentionLookupOptions } = props;
     const [textValue, setTextValue] = useState(message.content || '');
     const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));
     const editTextFieldRef = React.useRef(null);
@@ -41,58 +39,54 @@ export const ChatMessageComponentAsEditBox = (props) => {
     const setText = (event, newValue) => {
         setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
     };
-    const textTooLongMessage = messageState === 'too long' ? _formatString(strings.editBoxTextLimit, {
-        limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`
-    }) : undefined;
+    const textTooLongMessage = messageState === 'too long'
+        ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
+        : undefined;
     const onRenderThemedCancelIcon = useCallback(() => onRenderCancelIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
     const onRenderThemedSubmitIcon = useCallback(() => onRenderSubmitIcon(theme.palette.neutralSecondary), [theme.palette.neutralSecondary]);
     const editBoxStyles = useMemo(() => {
-        return concatStyleSets(editBoxStyleSet, {
-            textField: {
-                borderColor: theme.palette.themePrimary
-            }
-        });
+        return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
     }, [theme.palette.themePrimary]);
     const onRenderFileUploads = useCallback(() => {
-        return (attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.length) && React.createElement("div", { style: {
-                margin: '0.25rem'
-            } },
-            React.createElement(_FileUploadCards, { activeFileUploads: attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.map(file => ({
+        return ((attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.length) && (React.createElement("div", { style: { margin: '0.25rem' } },
+            React.createElement(_FileUploadCards, { activeFileUploads: attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.map((file) => ({
                     id: file.name,
                     filename: file.name,
                     progress: 1
-                })), onCancelFileUpload: fileId => {
-                    setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter(file => file.name !== fileId));
-                } }));
+                })), onCancelFileUpload: (fileId) => {
+                    setAttachedFilesMetadata(attachedFilesMetadata === null || attachedFilesMetadata === void 0 ? void 0 : attachedFilesMetadata.filter((file) => file.name !== fileId));
+                } }))));
     }, [attachedFilesMetadata]);
     const getContent = () => {
-        return React.createElement(Stack, { className: mergeStyles(borderAndBoxShadowStyle({
+        return (React.createElement(Stack, { className: mergeStyles(borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: message.failureReason !== undefined,
                 disabled: false
             })) },
-            React.createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: ev => {
+            React.createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: (ev) => {
                     if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
                         ev.stopPropagation();
                     }
                 }, onEnterKeyDown: () => {
-                    submitEnabled && onSubmit(textValue, message.metadata, {
-                        attachedFilesMetadata
-                    });
-                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles },
+                    submitEnabled &&
+                        onSubmit(textValue, message.metadata, {
+                            attachedFilesMetadata
+                        });
+                }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles,
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions },
                 React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
                         onCancel && onCancel(message.messageId);
                     }, id: 'dismissIconWrapper' }),
-                React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: e => {
-                        submitEnabled && onSubmit(textValue, message.metadata, {
-                            attachedFilesMetadata
-                        });
+                React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                        submitEnabled &&
+                            onSubmit(textValue, message.metadata, {
+                                attachedFilesMetadata
+                            });
                         e.stopPropagation();
                     }, id: 'submitIconWrapper' })),
-            message.failureReason && React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), {
-                    padding: '0.5rem'
-                }) }, message.failureReason),
-            onRenderFileUploads());
+            message.failureReason && (React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
+            onRenderFileUploads()));
     };
     return React.createElement(Chat.Message, { styles: chatMessageEditContainerStyle, content: getContent() });
 };
@@ -101,6 +95,8 @@ const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim(
 const getMessageState = (messageText, attachedFilesMetadata) => isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';
 // @TODO: Remove when file-sharing feature becomes stable.
 const getMessageAttachedFilesMetadata = (message) => {
+    /* @conditional-compile-remove(file-sharing) */
+    return message.attachedFilesMetadata;
     return [];
 };
 //# sourceMappingURL=ChatMessageComponentAsEditBox.js.map