@azure/communication-react 1.10.1-alpha-202311230013 → 1.10.1-alpha-202311240012

package/dist/dist-cjs/communication-react/index.js

@@ -18,10 +18,10 @@ var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
 var uuid = require('uuid');
 var reactChat = require('@fluentui-contrib/react-chat');
 var reactComponents = require('@fluentui/react-components');
+var react$1 = require('@griffel/react');
 var htmlToReact = require('html-to-react');
 var Linkify = require('react-linkify');
 var DOMPurify = require('dompurify');
-var react$1 = require('@griffel/react');
 var reactHooks = require('@fluentui/react-hooks');
 var reactUseDraggableScroll = require('react-use-draggable-scroll');
 var reactWindowProvider = require('@fluentui/react-window-provider');
@@ -177,7 +177,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.10.1-alpha-202311230013';
+var telemetryVersion = '1.10.1-alpha-202311240012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9000,1642 +9000,1905 @@ const delay = (delay) => {
 
 // Copyright (c) Microsoft Corporation.
 /**
- * @private
- */
-const systemMessageIconStyle = react.mergeStyles({
-    marginInlineEnd: '0.688rem'
-});
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
+ * A utility hook for providing the width of a parent element.
+ * Returns updated width if parent/window resizes.
+ * @param containerRef - Ref of a parent element whose width will be returned.
+ * @internal
  */
-const SystemMessage = (props) => {
-    const { iconName, content } = props;
-    const Icon = React__default["default"].createElement(react.FontIcon, { iconName: iconName, className: react.mergeStyles(systemMessageIconStyle) });
-    return (React__default["default"].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle), tabIndex: 0 },
-        Icon,
-        React__default["default"].createElement(react.Text, { style: { wordBreak: 'break-word' }, role: "status", title: content, variant: 'small' }, content)));
+const _useContainerWidth = (containerRef) => {
+    const [width, setWidth] = React.useState(undefined);
+    const observer = React.useRef(new ResizeObserver((entries) => {
+        const { width } = entries[0].contentRect;
+        setWidth(width);
+    }));
+    React.useEffect(() => {
+        if (containerRef.current) {
+            observer.current.observe(containerRef.current);
+        }
+        const currentObserver = observer.current;
+        return () => {
+            currentObserver.disconnect();
+        };
+    }, [containerRef, observer]);
+    return width;
 };
-
-// Copyright (c) Microsoft Corporation.
 /**
- * @private
+ * A utility hook for providing the height of a parent element.
+ * Returns updated height if parent/window resizes.
+ * @param containerRef - Ref of a parent element whose height will be returned.
+ * @internal
  */
-const editBoxStyle = react.mergeStyles({
-    marginTop: '0.0875rem',
-    marginBottom: '0.0875rem'
-});
+const _useContainerHeight = (containerRef) => {
+    const [height, setHeight] = React.useState(undefined);
+    const observer = React.useRef(new ResizeObserver((entries) => {
+        const { height } = entries[0].contentRect;
+        setHeight(height);
+    }));
+    React.useEffect(() => {
+        if (containerRef.current) {
+            observer.current.observe(containerRef.current);
+        }
+        const currentObserver = observer.current;
+        return () => {
+            currentObserver.disconnect();
+        };
+    }, [containerRef, observer]);
+    return height;
+};
+const NARROW_WIDTH_REM = 30;
+const SHORT_HEIGHT_REM = 23.75;
 /**
- * @private
+ * Utility function to determine if container width is narrow
+ * @param containerWidthRem  container width in rem
+ * @returns boolean
  */
-const editingButtonStyle = react.mergeStyles({
-    margin: '0',
-    width: '2.125rem',
-    height: '2.125rem',
-    padding: '0.375rem 0 0 0'
-});
+const isNarrowWidth = (containerWidthRem) => containerWidthRem <= _convertRemToPx(NARROW_WIDTH_REM);
 /**
- * @private
+ * Utility function to determine if container width is short
+ * @param containerWidthRem  container height in rem
+ * @returns boolean
  */
-const inputBoxIcon = react.mergeStyles({
-    margin: 'auto',
-    '&:hover svg': {
-        stroke: 'currentColor'
-    }
-});
+const isShortHeight = (containerHeightRem) => containerHeightRem <= _convertRemToPx(SHORT_HEIGHT_REM);
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 /**
  * @private
- */
-const editBoxStyleSet = {
-    root: {
-        minWidth: '6.25rem',
-        maxWidth: '100%'
-    }
+ *logic: Looking at message A, how do we know it's read number?
+ * Assumption: if user read the latest message, user has read all messages before that
+ * ReadReceipt behaviour: read receipt is only sent to the last message
+ *
+ * If participant read a message that is sent later than message A, then the participant has read message A
+ * How do we check if the message is sent later than message A?
+ * We compare if the messageID of the last read message is larger than or equal to the message A's id
+ * Because messageID is the creation timestamp of each message
+ * Timestamps are in epoch time so lecixographical ordering is the same as time ordering.
+ *
+ * if MessageId of B is larger than message Id of A, then B is created after A
+ * if the last read message is created after the message A is sent, then user should have read message A as well */
+var getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
+    return (Object.entries(readReceiptsBySenderId)
+        // Filter to only read receipts that match the message OR the participant has read a different message after this message has been created
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        .filter(([_, readReceipt]) => readReceipt.lastReadMessage >= message.messageId)
+        // make sure the person is not removed from chat
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        .filter(([_, readReceipt]) => readReceipt.displayName && readReceipt.displayName !== '')
+        // Map properties to useful array
+        .map(([id, readReceipt]) => ({ id, displayName: readReceipt.displayName })));
 };
 
 // Copyright (c) Microsoft Corporation.
-const MINIMUM_TOUCH_TARGET_HEIGHT_REM$1 = 3;
-const errorTextColor = 'var(--errorText)';
-/**
- * @private
- */
-const iconWrapperStyle = (theme, isSubMenuOpen) => ({
-    root: {
-        margin: _pxToRem(3),
-        // Show hover styles when the Edit/Delete menu is showing as this action button is still considered 'active'
-        color: isSubMenuOpen ? theme.palette.black : theme.palette.neutralPrimary,
-        strokeWidth: isSubMenuOpen ? _pxToRem(0.5) : _pxToRem(0),
-        stroke: theme.palette.black,
-        ':hover, :focus': {
-            color: theme.palette.black,
-            strokeWidth: _pxToRem(0.5)
-        }
-    }
-});
-/**
- * @private
- */
-const chatMessageDateStyle = react.mergeStyles({
-    color: reactComponents.tokens.colorNeutralForeground2,
-    fontWeight: react.FontWeights.regular,
-    fontSize: '0.75rem'
-});
+// Licensed under the MIT License.
+// These color records are required for createV9Theme
+// For more info, check https://react.fluentui.dev/iframe.html?viewMode=docs&id=concepts-migration-from-v8-components-theme-migration--page#compatible-themes
 /**
  * @private
  */
-const chatMessageAuthorStyle = react.mergeStyles({
-    fontWeight: react.FontWeights.semibold,
-    fontSize: '0.75rem'
-});
+const grey = {
+    '0': '#000000',
+    '2': '#050505',
+    '4': '#0a0a0a',
+    '6': '#0f0f0f',
+    '8': '#141414',
+    '10': '#1a1a1a',
+    '12': '#1f1f1f',
+    '14': '#242424',
+    '16': '#292929',
+    '18': '#2e2e2e',
+    '20': '#333333',
+    '22': '#383838',
+    '24': '#3d3d3d',
+    '26': '#424242',
+    '28': '#474747',
+    '30': '#4d4d4d',
+    '32': '#525252',
+    '34': '#575757',
+    '36': '#5c5c5c',
+    '38': '#616161',
+    '40': '#666666',
+    '42': '#6b6b6b',
+    '44': '#707070',
+    '46': '#757575',
+    '48': '#7a7a7a',
+    '50': '#808080',
+    '52': '#858585',
+    '54': '#8a8a8a',
+    '56': '#8f8f8f',
+    '58': '#949494',
+    '60': '#999999',
+    '62': '#9e9e9e',
+    '64': '#a3a3a3',
+    '66': '#a8a8a8',
+    '68': '#adadad',
+    '70': '#b3b3b3',
+    '72': '#b8b8b8',
+    '74': '#bdbdbd',
+    '76': '#c2c2c2',
+    '78': '#c7c7c7',
+    '80': '#cccccc',
+    '82': '#d1d1d1',
+    '84': '#d6d6d6',
+    '86': '#dbdbdb',
+    '88': '#e0e0e0',
+    '90': '#e6e6e6',
+    '92': '#ebebeb',
+    '94': '#f0f0f0',
+    '96': '#f5f5f5',
+    '98': '#fafafa',
+    '100': '#ffffff'
+};
 /**
  * @private
  */
-const chatMessageEditedTagStyle = (theme) => react.mergeStyles({ fontWeight: react.FontWeights.semibold, color: theme.palette.neutralSecondary });
+const whiteAlpha = {
+    '5': 'rgba(255, 255, 255, 0.05)',
+    '10': 'rgba(255, 255, 255, 0.1)',
+    '20': 'rgba(255, 255, 255, 0.2)',
+    '30': 'rgba(255, 255, 255, 0.3)',
+    '40': 'rgba(255, 255, 255, 0.4)',
+    '50': 'rgba(255, 255, 255, 0.5)',
+    '60': 'rgba(255, 255, 255, 0.6)',
+    '70': 'rgba(255, 255, 255, 0.7)',
+    '80': 'rgba(255, 255, 255, 0.8)',
+    '90': 'rgba(255, 255, 255, 0.9)'
+};
 /**
  * @private
  */
-const chatMessageFailedTagStyle = (theme) => react.mergeStyles({
-    fontWeight: react.FontWeights.regular,
-    color: theme.semanticColors.errorText,
-    fontSize: theme.fonts.smallPlus.fontSize,
-    lineHeight: '1rem'
-});
+const blackAlpha = {
+    '5': 'rgba(0, 0, 0, 0.05)',
+    '10': 'rgba(0, 0, 0, 0.1)',
+    '20': 'rgba(0, 0, 0, 0.2)',
+    '30': 'rgba(0, 0, 0, 0.3)',
+    '40': 'rgba(0, 0, 0, 0.4)',
+    '50': 'rgba(0, 0, 0, 0.5)',
+    '60': 'rgba(0, 0, 0, 0.6)',
+    '70': 'rgba(0, 0, 0, 0.7)',
+    '80': 'rgba(0, 0, 0, 0.8)',
+    '90': 'rgba(0, 0, 0, 0.9)'
+};
 /**
  * @private
  */
-const editChatMessageFailedTagStyle = react.mergeStyles({
-    marginBottom: '0.5rem'
-});
+const grey10Alpha = {
+    '5': 'rgba(26, 26, 26, 0.05)',
+    '10': 'rgba(26, 26, 26, 0.1)',
+    '20': 'rgba(26, 26, 26, 0.2)',
+    '30': 'rgba(26, 26, 26, 0.3)',
+    '40': 'rgba(26, 26, 26, 0.4)',
+    '50': 'rgba(26, 26, 26, 0.5)',
+    '60': 'rgba(26, 26, 26, 0.6)',
+    '70': 'rgba(26, 26, 26, 0.7)',
+    '80': 'rgba(26, 26, 26, 0.8)',
+    '90': 'rgba(26, 26, 26, 0.9)'
+};
 /**
  * @private
  */
-const chatMessageFailedTagStackItemStyle = react.mergeStyles({
-    alignSelf: 'end'
-});
-/**
- * @private
+const grey12Alpha = {
+    '5': 'rgba(31, 31, 31, 0.05)',
+    '10': 'rgba(31, 31, 31, 0.1)',
+    '20': 'rgba(31, 31, 31, 0.2)',
+    '30': 'rgba(31, 31, 31, 0.3)',
+    '40': 'rgba(31, 31, 31, 0.4)',
+    '50': 'rgba(31, 31, 31, 0.5)',
+    '60': 'rgba(31, 31, 31, 0.6)',
+    '70': 'rgba(31, 31, 31, 0.7)',
+    '80': 'rgba(31, 31, 31, 0.8)',
+    '90': 'rgba(31, 31, 31, 0.9)'
+};
+
+// Copyright (c) Microsoft Corporation.
+// These mappings are required for createV9Theme
+// For more info, check https://react.fluentui.dev/iframe.html?viewMode=docs&id=concepts-migration-from-v8-components-theme-migration--page#compatible-themes
+/**
+ * Creates v9 color tokens from a v8 palette.
  */
-const editChatMessageButtonsStackStyle = react.mergeStyles({
-    padding: '0 0.5rem',
-    marginTop: '-0.25rem'
-});
+const mapAliasColors = (palette, inverted) => {
+    return {
+        colorNeutralForeground1: palette.neutralPrimary,
+        colorNeutralForeground1Hover: palette.neutralPrimary,
+        colorNeutralForeground1Pressed: palette.neutralPrimary,
+        colorNeutralForeground1Selected: palette.neutralPrimary,
+        colorNeutralForeground2: palette.neutralSecondary,
+        colorNeutralForeground2Hover: palette.neutralPrimary,
+        colorNeutralForeground2Pressed: palette.neutralPrimary,
+        colorNeutralForeground2Selected: palette.neutralPrimary,
+        colorNeutralForeground2BrandHover: palette.themePrimary,
+        colorNeutralForeground2BrandPressed: palette.themeDarkAlt,
+        colorNeutralForeground2BrandSelected: palette.themePrimary,
+        colorNeutralForeground3: palette.neutralTertiary,
+        colorNeutralForeground3Hover: palette.neutralSecondary,
+        colorNeutralForeground3Pressed: palette.neutralSecondary,
+        colorNeutralForeground3Selected: palette.neutralSecondary,
+        colorNeutralForeground3BrandHover: palette.themePrimary,
+        colorNeutralForeground3BrandPressed: palette.themeDarkAlt,
+        colorNeutralForeground3BrandSelected: palette.themePrimary,
+        colorNeutralForeground4: palette.neutralQuaternary,
+        colorNeutralForegroundDisabled: palette.neutralTertiaryAlt,
+        colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
+        colorBrandForegroundLink: palette.themeDarkAlt,
+        colorBrandForegroundLinkHover: palette.themeDark,
+        colorBrandForegroundLinkPressed: palette.themeDarker,
+        colorBrandForegroundLinkSelected: palette.themeDarkAlt,
+        colorNeutralForeground2Link: palette.neutralSecondary,
+        colorNeutralForeground2LinkHover: palette.neutralPrimary,
+        colorNeutralForeground2LinkPressed: palette.neutralPrimary,
+        colorNeutralForeground2LinkSelected: palette.neutralPrimary,
+        colorCompoundBrandForeground1: palette.themePrimary,
+        colorCompoundBrandForeground1Hover: palette.themeDarkAlt,
+        colorCompoundBrandForeground1Pressed: palette.themeDark,
+        colorBrandForeground1: palette.themePrimary,
+        colorBrandForeground2: palette.themeDarkAlt,
+        colorBrandForeground2Hover: palette.themeDarkAlt,
+        colorBrandForeground2Pressed: palette.themeDarkAlt,
+        colorNeutralForeground1Static: palette.neutralPrimary,
+        colorNeutralForegroundInverted: palette.white,
+        colorNeutralForegroundInvertedHover: palette.white,
+        colorNeutralForegroundInvertedPressed: palette.white,
+        colorNeutralForegroundInvertedSelected: palette.white,
+        colorNeutralForegroundOnBrand: palette.white,
+        colorNeutralForegroundStaticInverted: palette.white,
+        colorNeutralForegroundInvertedLink: palette.white,
+        colorNeutralForegroundInvertedLinkHover: palette.white,
+        colorNeutralForegroundInvertedLinkPressed: palette.white,
+        colorNeutralForegroundInvertedLinkSelected: palette.white,
+        colorNeutralForegroundInverted2: palette.white,
+        colorBrandForegroundInverted: palette.themeSecondary,
+        colorBrandForegroundInvertedHover: palette.themeTertiary,
+        colorBrandForegroundInvertedPressed: palette.themeSecondary,
+        colorBrandForegroundOnLight: palette.themePrimary,
+        colorBrandForegroundOnLightHover: palette.themeDarkAlt,
+        colorBrandForegroundOnLightPressed: palette.themeDark,
+        colorBrandForegroundOnLightSelected: palette.themeDark,
+        colorNeutralBackground1: palette.white,
+        colorNeutralBackground1Hover: palette.neutralLighter,
+        colorNeutralBackground1Pressed: palette.neutralQuaternaryAlt,
+        colorNeutralBackground1Selected: palette.neutralLight,
+        colorNeutralBackground2: palette.neutralLighterAlt,
+        colorNeutralBackground2Hover: palette.neutralLighter,
+        colorNeutralBackground2Pressed: palette.neutralQuaternaryAlt,
+        colorNeutralBackground2Selected: palette.neutralLight,
+        colorNeutralBackground3: palette.neutralLighter,
+        colorNeutralBackground3Hover: palette.neutralLight,
+        colorNeutralBackground3Pressed: palette.neutralQuaternary,
+        colorNeutralBackground3Selected: palette.neutralQuaternaryAlt,
+        colorNeutralBackground4: palette.neutralLighter,
+        colorNeutralBackground4Hover: palette.neutralLighterAlt,
+        colorNeutralBackground4Pressed: palette.neutralLighter,
+        colorNeutralBackground4Selected: palette.white,
+        colorNeutralBackground5: palette.neutralLight,
+        colorNeutralBackground5Hover: palette.neutralLighter,
+        colorNeutralBackground5Pressed: palette.neutralLighter,
+        colorNeutralBackground5Selected: palette.neutralLighterAlt,
+        colorNeutralBackground6: palette.neutralLight,
+        colorNeutralBackgroundStatic: grey[20],
+        colorNeutralBackgroundInverted: palette.neutralSecondary,
+        colorNeutralBackgroundAlpha: inverted ? grey10Alpha[50] : whiteAlpha[50],
+        colorNeutralBackgroundAlpha2: inverted ? grey12Alpha[70] : whiteAlpha[80],
+        colorSubtleBackground: 'transparent',
+        colorSubtleBackgroundHover: palette.neutralLighter,
+        colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt,
+        colorSubtleBackgroundSelected: palette.neutralLight,
+        colorSubtleBackgroundLightAlphaHover: inverted ? whiteAlpha[10] : whiteAlpha[80],
+        colorSubtleBackgroundLightAlphaPressed: inverted ? whiteAlpha[5] : whiteAlpha[50],
+        colorSubtleBackgroundLightAlphaSelected: 'transparent',
+        colorSubtleBackgroundInverted: 'transparent',
+        colorSubtleBackgroundInvertedHover: blackAlpha[10],
+        colorSubtleBackgroundInvertedPressed: blackAlpha[30],
+        colorSubtleBackgroundInvertedSelected: blackAlpha[20],
+        colorTransparentBackground: 'transparent',
+        colorTransparentBackgroundHover: 'transparent',
+        colorTransparentBackgroundPressed: 'transparent',
+        colorTransparentBackgroundSelected: 'transparent',
+        colorNeutralBackgroundDisabled: palette.neutralLighter,
+        colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
+        colorNeutralStencil1: palette.neutralLight,
+        colorNeutralStencil2: palette.neutralLighterAlt,
+        colorNeutralStencil1Alpha: inverted ? whiteAlpha[10] : blackAlpha[10],
+        colorNeutralStencil2Alpha: inverted ? whiteAlpha[5] : blackAlpha[5],
+        colorBackgroundOverlay: blackAlpha[40],
+        colorScrollbarOverlay: blackAlpha[50],
+        colorBrandBackground: palette.themePrimary,
+        colorBrandBackgroundHover: palette.themeDarkAlt,
+        colorBrandBackgroundPressed: palette.themeDarker,
+        colorBrandBackgroundSelected: palette.themeDark,
+        colorCompoundBrandBackground: palette.themePrimary,
+        colorCompoundBrandBackgroundHover: palette.themeDarkAlt,
+        colorCompoundBrandBackgroundPressed: palette.themeDark,
+        colorBrandBackgroundStatic: palette.themePrimary,
+        colorBrandBackground2: palette.themeLighterAlt,
+        colorBrandBackground2Hover: palette.themeLighterAlt,
+        colorBrandBackground2Pressed: palette.themeLighterAlt,
+        colorBrandBackgroundInverted: palette.white,
+        colorBrandBackgroundInvertedHover: palette.themeLighterAlt,
+        colorBrandBackgroundInvertedPressed: palette.themeLight,
+        colorBrandBackgroundInvertedSelected: palette.themeLighter,
+        colorNeutralStrokeAccessible: palette.neutralSecondary,
+        colorNeutralStrokeAccessibleHover: palette.neutralSecondary,
+        colorNeutralStrokeAccessiblePressed: palette.neutralSecondary,
+        colorNeutralStrokeAccessibleSelected: palette.themePrimary,
+        colorNeutralStroke1: palette.neutralQuaternary,
+        colorNeutralStroke1Hover: palette.neutralTertiaryAlt,
+        colorNeutralStroke1Pressed: palette.neutralTertiaryAlt,
+        colorNeutralStroke1Selected: palette.neutralTertiaryAlt,
+        colorNeutralStroke2: palette.neutralQuaternaryAlt,
+        colorNeutralStroke3: palette.neutralLighter,
+        colorNeutralStrokeSubtle: palette.neutralQuaternaryAlt,
+        colorNeutralStrokeOnBrand: palette.white,
+        colorNeutralStrokeOnBrand2: palette.white,
+        colorNeutralStrokeOnBrand2Hover: palette.white,
+        colorNeutralStrokeOnBrand2Pressed: palette.white,
+        colorNeutralStrokeOnBrand2Selected: palette.white,
+        colorBrandStroke1: palette.themePrimary,
+        colorBrandStroke2: palette.themeLight,
+        colorBrandStroke2Hover: palette.themeLight,
+        colorBrandStroke2Pressed: palette.themeLight,
+        colorBrandStroke2Contrast: palette.themeLight,
+        colorCompoundBrandStroke: palette.themePrimary,
+        colorCompoundBrandStrokeHover: palette.themeDarkAlt,
+        colorCompoundBrandStrokePressed: palette.themeDark,
+        colorNeutralStrokeDisabled: palette.neutralQuaternaryAlt,
+        colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
+        colorTransparentStroke: 'transparent',
+        colorTransparentStrokeInteractive: 'transparent',
+        colorTransparentStrokeDisabled: 'transparent',
+        colorNeutralStrokeAlpha: inverted ? whiteAlpha[10] : blackAlpha[5],
+        colorNeutralStrokeAlpha2: whiteAlpha[20],
+        colorStrokeFocus1: palette.white,
+        colorStrokeFocus2: palette.black,
+        colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)',
+        colorNeutralShadowKey: 'rgba(0,0,0,0.14)',
+        colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
+        colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
+        colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
+        colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
+        colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
+        colorBrandShadowKey: 'rgba(0,0,0,0.25)'
+    };
+};
 /**
- * @private
+ * Creates v9 shadow tokens from v8 effects.
  */
-const chatMessageMenuStyle = react.mergeStyles({
-    minWidth: '8.5rem',
-    height: 'max-content',
-    cursor: 'pointer',
-    overflow: 'hidden'
-});
+const mapShadowTokens = (effects) => {
+    return {
+        shadow4: effects.elevation4,
+        shadow8: effects.elevation8,
+        shadow16: effects.elevation16,
+        shadow64: effects.elevation64
+    };
+};
 /**
- * @private
+ * Creates v9 border radius tokens from v8 effects
  */
-const useChatMessageEditContainerStyles = reactComponents.makeStyles({
-    root: {
-        paddingTop: '1.25rem' //height of the menu button + marginBottom
-    },
-    body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding(0)), { backgroundColor: 'transparent', boxSizing: 'border-box' }), reactComponents.shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), reactComponents.shorthands.borderRadius(reactComponents.tokens.borderRadiusMedium)), reactComponents.shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`)), { 
-        // Width should be updated on hover to include the border width change
-        width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`, '&:hover, &:active, &:focus, &:focus-within': Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.margin('0rem')), reactComponents.shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)), { width: '100%' }) }),
-    bodyError: Object.assign({}, reactComponents.shorthands.borderColor(errorTextColor)),
-    bodyDefault: Object.assign(Object.assign({}, reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStrokeAccessible)), { '&:hover, &:active, &:focus, &:focus-within': Object.assign({}, reactComponents.shorthands.borderColor(reactComponents.tokens.colorCompoundBrandStroke)) })
-});
+const mapBorderRadiusTokens = (effects) => {
+    return {
+        borderRadiusSmall: effects.roundedCorner2,
+        borderRadiusMedium: effects.roundedCorner4,
+        borderRadiusLarge: effects.roundedCorner6
+    };
+};
 /**
- * Styles that can be applied to ensure flyout items have the minimum touch target size.
+ * Creates a v9 theme from a v8 theme and base v9 theme.
+ * FluentUI webLightTheme is used in case if no baseThemeV9 is provided.
  *
  * @private
  */
-const menuItemIncreasedSizeStyles = {
-    root: {
-        height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
-        lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
-        maxHeight: 'unset'
-    },
-    linkContent: {
-        height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
-        lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
-        maxHeight: 'unset'
-    },
-    icon: {
-        maxHeight: 'unset'
-    }
+const createV9Theme = (themeV8, baseThemeV9) => {
+    const baseTheme = baseThemeV9 !== null && baseThemeV9 !== void 0 ? baseThemeV9 : reactComponents.webLightTheme;
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseTheme), mapAliasColors(themeV8.palette, themeV8.isInverted)), mapShadowTokens(themeV8.effects)), mapBorderRadiusTokens(themeV8.effects)), { colorBrandBackground2: themeV8.palette.themeLight, colorBrandBackground2Hover: themeV8.palette.themeLight, colorBrandBackground2Pressed: themeV8.palette.themeLight, colorStatusWarningBackground3: '#D83B01', errorText: themeV8.semanticColors.errorText, colorNeutralStroke1Selected: themeV8.palette.neutralQuaternary, colorNeutralForeground2: themeV8.palette.neutralSecondary, colorBrandForegroundLink: themeV8.palette.themePrimary, colorBrandForegroundLinkHover: themeV8.palette.themeDarker, 
+        // Fix for an issue with black borders for iOS that are added with 'after' selector
+        colorStrokeFocus2: 'transparent' });
 };
+
+// Copyright (c) Microsoft Corporation.
 /**
  * @private
  */
-const menuIconStyleSet = {
-    root: {
-        height: 'calc(100% - 8px)',
-        width: '1.25rem'
-    }
-};
+const useFluentV9Wrapper = reactComponents.makeStyles({
+    body: Object.assign(Object.assign(Object.assign(Object.assign({ height: '100%' }, reactComponents.shorthands.margin(0)), reactComponents.shorthands.overflow('hidden')), reactComponents.shorthands.padding(0)), { width: '100%' })
+});
 /**
  * @private
  */
-const menuSubIconStyleSet = {
-    root: {
-        height: 'unset',
-        lineHeight: '100%',
-        width: '1.25rem'
-    }
+const FluentV9ThemeProvider = (props) => {
+    const { v8Theme, children } = props;
+    const v9Theme = createV9Theme(v8Theme);
+    const dir = v8Theme.rtl ? 'rtl' : 'ltr';
+    return (
+    // TextDirectionProvider is needed to fix issue with direction value update in FluentProvider
+    React__default["default"].createElement(react$1.TextDirectionProvider, { dir: dir },
+        React__default["default"].createElement(FluentProviderWithStylesOverrides, { theme: v9Theme, dir: dir }, children)));
+};
+const FluentProviderWithStylesOverrides = (props) => {
+    const classes = useFluentV9Wrapper();
+    return React__default["default"].createElement(reactComponents.FluentProvider, Object.assign({}, props, { className: classes.body }));
 };
 
 // Copyright (c) Microsoft Corporation.
-const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
-const onRenderCancelIcon = (color) => {
-    const className = react.mergeStyles(inputBoxIcon, { color });
-    return React__default["default"].createElement(react.Icon, { iconName: 'EditBoxCancel', className: className });
-};
-const onRenderSubmitIcon = (color) => {
-    const className = react.mergeStyles(inputBoxIcon, { color });
-    return React__default["default"].createElement(react.Icon, { iconName: 'EditBoxSubmit', className: className });
+const offScreenStyle = {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    padding: 0,
+    width: '1px',
+    position: 'absolute'
 };
-/**
- * @private
- */
-const ChatMessageComponentAsEditBox = (props) => {
-    const { onCancel, onSubmit, strings, message } = props;
-    /* @conditional-compile-remove(mention) */
-    const { mentionLookupOptions } = props;
-    const [textValue, setTextValue] = React.useState(message.content || '');
-    const [attachedFilesMetadata, setAttachedFilesMetadata] = React__default["default"].useState(getMessageAttachedFilesMetadata(message));
-    const editTextFieldRef = React__default["default"].useRef(null);
-    const theme = useTheme();
-    const messageState = getMessageState(textValue, attachedFilesMetadata !== null && attachedFilesMetadata !== void 0 ? attachedFilesMetadata : []);
-    const submitEnabled = messageState === 'OK';
-    const editContainerStyles = useChatMessageEditContainerStyles();
-    const chatMyMessageStyles = useChatMyMessageStyles();
+/** @private */
+const MessageBlock = (props) => (React__default["default"].createElement("div", { style: offScreenStyle, role: "log", "aria-live": props.ariaLive }, props.message ? props.message : ''));
+
+// Copyright (c) Microsoft Corporation.
+/** @private */
+const EMPTY_MESSAGE = { message: '', id: '' };
+/** @private */
+const Announcer = (props) => {
+    var _a, _b;
+    const newAssertive = (_a = props.assertive) !== null && _a !== void 0 ? _a : EMPTY_MESSAGE;
+    const oldAssertive = React__default["default"].useRef(EMPTY_MESSAGE);
+    const [activeAssertive1, setActiveAssertive1] = React__default["default"].useState(EMPTY_MESSAGE);
+    const [activeAssertive2, setActiveAssertive2] = React__default["default"].useState(EMPTY_MESSAGE);
+    const alternateAssertive = React__default["default"].useRef(false);
     React.useEffect(() => {
-        var _a;
-        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    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 onRenderThemedCancelIcon = React.useCallback((isHover) => onRenderCancelIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);
-    const onRenderThemedSubmitIcon = React.useCallback((isHover) => onRenderSubmitIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);
-    const editBoxStyles = React.useMemo(() => {
-        return react.concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
-    }, [theme.palette.themePrimary]);
-    const onRenderFileUploads = React.useCallback(() => {
-        return (!!attachedFilesMetadata &&
-            attachedFilesMetadata.length > 0 && (React__default["default"].createElement("div", { style: { margin: '0.25rem' } },
-            React__default["default"].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));
-                } }))));
-    }, [attachedFilesMetadata]);
-    const getContent = () => {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(InputBoxComponent, { "data-ui-id": "edit-box", textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, 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, 
-                /* @conditional-compile-remove(mention) */
-                mentionLookupOptions: mentionLookupOptions }),
-            React__default["default"].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: { childrenGap: '0.25rem' } },
-                message.failureReason && (React__default["default"].createElement(react.Stack.Item, { grow: true, align: "stretch", className: chatMessageFailedTagStackItemStyle },
-                    React__default["default"].createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle) }, message.failureReason))),
-                React__default["default"].createElement(react.Stack.Item, { align: "end" },
-                    React__default["default"].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                            onCancel && onCancel(message.messageId);
-                        }, id: 'dismissIconWrapper' })),
-                React__default["default"].createElement(react.Stack.Item, { align: "end" },
-                    React__default["default"].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
-                            submitEnabled &&
-                                onSubmit(textValue, message.metadata, {
-                                    attachedFilesMetadata
-                                });
-                            e.stopPropagation();
-                        }, id: 'submitIconWrapper' }))),
-            onRenderFileUploads()));
-    };
-    const bodyClassName = reactComponents.mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);
-    return (React__default["default"].createElement(reactChat.ChatMyMessage, { root: {
-            className: reactComponents.mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)
-        }, body: {
-            className: bodyClassName
-        } }, getContent()));
+        if (oldAssertive.current.message !== (newAssertive === null || newAssertive === void 0 ? void 0 : newAssertive.message) || oldAssertive.current.id !== (newAssertive === null || newAssertive === void 0 ? void 0 : newAssertive.id)) {
+            setActiveAssertive1(alternateAssertive.current ? EMPTY_MESSAGE : newAssertive);
+            setActiveAssertive2(alternateAssertive.current ? newAssertive : EMPTY_MESSAGE);
+            oldAssertive.current = newAssertive;
+            alternateAssertive.current = !alternateAssertive.current;
+        }
+    }, [newAssertive]);
+    const newPolite = (_b = props.polite) !== null && _b !== void 0 ? _b : EMPTY_MESSAGE;
+    const oldPolite = React__default["default"].useRef(EMPTY_MESSAGE);
+    const [activePolite1, setActivePolite1] = React__default["default"].useState(EMPTY_MESSAGE);
+    const [activePolite2, setActivePolite2] = React__default["default"].useState(EMPTY_MESSAGE);
+    const alternatePolite = React__default["default"].useRef(false);
+    React.useEffect(() => {
+        if (oldPolite.current.message !== (newPolite === null || newPolite === void 0 ? void 0 : newPolite.message) || oldPolite.current.id !== (newPolite === null || newPolite === void 0 ? void 0 : newPolite.id)) {
+            setActivePolite1(alternatePolite.current ? EMPTY_MESSAGE : newPolite);
+            setActivePolite2(alternatePolite.current ? newPolite : EMPTY_MESSAGE);
+            oldPolite.current = newPolite;
+            alternatePolite.current = !alternatePolite.current;
+        }
+    }, [newPolite]);
+    return (React__default["default"].createElement("div", null,
+        React__default["default"].createElement(MessageBlock, { ariaLive: "assertive", message: activeAssertive1.message }),
+        React__default["default"].createElement(MessageBlock, { ariaLive: "assertive", message: activeAssertive2.message }),
+        React__default["default"].createElement(MessageBlock, { ariaLive: "polite", message: activePolite1.message }),
+        React__default["default"].createElement(MessageBlock, { ariaLive: "polite", message: activePolite2.message })));
 };
-const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
-const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;
-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;
+
+// Copyright (c) Microsoft Corporation.
+/** @private */
+const LiveAnnouncer = (props) => {
+    const [politeMessage, setPoliteMessage] = React__default["default"].useState(EMPTY_MESSAGE);
+    const [assertiveMessage, setAssertiveMessage] = React__default["default"].useState(EMPTY_MESSAGE);
+    const announcePolite = React.useCallback((message, id) => {
+        setPoliteMessage({ message, id });
+    }, []);
+    const announceAssertive = React.useCallback((message, id) => {
+        setAssertiveMessage({ message, id });
+    }, []);
+    const updateFunctions = React.useMemo(() => ({
+        announcePolite,
+        announceAssertive
+    }), [announceAssertive, announcePolite]);
+    return (React__default["default"].createElement(AnnouncerContext.Provider, { value: updateFunctions },
+        props.children,
+        React__default["default"].createElement(Announcer, { assertive: assertiveMessage, polite: politeMessage })));
 };
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
+ * Function to create a React.CSSProperties object from a v8 style object.
+ * This function is still not ideal
+ * as v8Style can use pseudo-class selectors that style objects can't process correctly.
+ *
  * @private
  */
-const formatTimeForChatMessage = (messageDate) => {
-    return messageDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
-};
+function createStyleFromV8Style(v8Style) {
+    const result = {};
+    if (v8Style === undefined || v8Style === null || typeof v8Style === 'boolean' || typeof v8Style === 'string') {
+        return undefined;
+    }
+    else if (typeof v8Style === 'object') {
+        // v8Style is a style object
+        for (const record in v8Style) {
+            if (typeof v8Style[record] === 'string') {
+                // v8Style[record] is just a simple style
+                const msSuffix = 'MS';
+                if (record.startsWith(msSuffix)) {
+                    // React.CSSProperties uses camelCase for MS properties but v8Style uses PascalCase
+                    const newRecord = record.substring(0, msSuffix.length).toLowerCase + record.substring(msSuffix.length);
+                    result[newRecord] = v8Style[record];
+                }
+                else {
+                    result[record] = v8Style[record];
+                }
+            }
+            else {
+                result[record] = createStyleFromV8Style(v8Style[record]);
+            }
+        }
+    }
+    return result;
+}
+
+// Copyright (c) Microsoft Corporation.
 /**
  * @private
  */
-const formatDateForChatMessage = (messageDate) => {
-    return messageDate.toLocaleDateString();
-};
+const editBoxStyle = react.mergeStyles({
+    marginTop: '0.0875rem',
+    marginBottom: '0.0875rem'
+});
 /**
- * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text
- * using the system locale.
- * <time in locale format>.
- * Yesterday <time in locale format>.
- * <dateStrings day of week> <time in locale format>.
- * <date in locale format> <time in locale format>.
- *
- * If message is after yesterday, then only show the time.
- * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.
- * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.
- *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.
- * If message is in previous or older weeks, then show date string plus the time.
- *
- * @param messageDate - date of message
- * @param currentDate - date used as offset to create the user friendly timestamp (e.g. to create 'Yesterday' instead of an absolute date)
- *
  * @private
  */
-const formatTimestampForChatMessage = (messageDate, todayDate, dateStrings) => {
-    // If message was in the same day timestamp string is just the time like '1:30 p.m.'.
-    const startOfDay = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());
-    if (messageDate > startOfDay) {
-        return formatTimeForChatMessage(messageDate);
+const editingButtonStyle = react.mergeStyles({
+    margin: '0',
+    width: '2.125rem',
+    height: '2.125rem',
+    padding: '0.375rem 0 0 0'
+});
+/**
+ * @private
+ */
+const inputBoxIcon = react.mergeStyles({
+    margin: 'auto',
+    '&:hover svg': {
+        stroke: 'currentColor'
     }
-    // If message was yesterday then timestamp string is like this 'Yesterday 1:30 p.m.'.
-    const yesterdayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - 1);
-    if (messageDate > yesterdayDate) {
-        return dateStrings.yesterday + ' ' + formatTimeForChatMessage(messageDate);
-    }
-    // If message was before Sunday and today is Sunday (start of week) then timestamp string is like
-    // '2021-01-10 1:30 p.m.'.
-    const weekDay = todayDate.getDay();
-    if (weekDay === 0) {
-        return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
-    }
-    // If message was before first day of the week then timestamp string is like Monday 1:30 p.m.
-    const firstDayOfTheWeekDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - weekDay);
-    if (messageDate > firstDayOfTheWeekDate) {
-        return dayToDayName(messageDate.getDay(), dateStrings) + ' ' + formatTimeForChatMessage(messageDate);
-    }
-    // If message date is in previous or older weeks then timestamp string is like 2021-01-10 1:30 p.m.
-    return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
-};
-const dayToDayName = (day, dateStrings) => {
-    switch (day) {
-        case 0:
-            return dateStrings.sunday;
-        case 1:
-            return dateStrings.monday;
-        case 2:
-            return dateStrings.tuesday;
-        case 3:
-            return dateStrings.wednesday;
-        case 4:
-            return dateStrings.thursday;
-        case 5:
-            return dateStrings.friday;
-        case 6:
-            return dateStrings.saturday;
-        default:
-            throw new Error(`Invalid day [${day}] passed`);
+});
+/**
+ * @private
+ */
+const editBoxStyleSet = {
+    root: {
+        minWidth: '6.25rem',
+        maxWidth: '100%'
     }
 };
 
 // Copyright (c) Microsoft Corporation.
+const MINIMUM_TOUCH_TARGET_HEIGHT_REM$1 = 3;
+const errorTextColor = 'var(--errorText)';
 /**
- * Chat message actions flyout that contains actions such as Edit Message, or Remove Message.
- *
  * @private
  */
-const ChatMessageActionFlyout = (props) => {
-    var _a, _b;
-    const theme = react.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 personaOptions = {
-            hidePersonaDetails: true,
-            size: react.PersonaSize.size24,
-            text: person.displayName,
-            showOverflowTooltip: false,
-            styles: {
-                root: {
-                    margin: '0.25rem'
-                }
-            }
-        };
-        const { onRenderAvatar } = props;
-        return {
-            'data-ui-id': 'chat-composite-message-contextual-menu-read-name-list-item',
-            key: person.displayName,
-            text: person.displayName,
-            itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },
-            onRenderIcon: () => { var _a; return onRenderAvatar ? onRenderAvatar((_a = person.id) !== null && _a !== void 0 ? _a : '', personaOptions) : React__default["default"].createElement(react.Persona, Object.assign({}, personaOptions)); },
-            iconProps: {
-                styles: menuIconStyleSet
-            }
-        };
-    });
-    const menuItems = React.useMemo(() => {
-        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 },
-                onClick: props.onEditClick
-            },
-            {
-                key: 'Remove',
-                text: props.strings.removeMessage,
-                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') {
-            items.push({
-                key: 'Read Count',
-                'data-ui-id': 'chat-composite-message-contextual-menu-read-info',
-                text: _formatString(props.strings.messageReadCount, {
-                    messageReadByCount: `${messageReadByCount}`,
-                    remoteParticipantsCount: `${props.remoteParticipantsCount}`
-                }),
-                itemProps: {
-                    styles: react.concatStyleSets({
-                        linkContent: {
-                            color: messageReadByCount > 0 ? theme.palette.neutralPrimary : theme.palette.neutralTertiary
-                        },
-                        root: {
-                            borderTop: `1px solid ${theme.palette.neutralLighter}`
-                        }
-                    }, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)
-                },
-                calloutProps: preventUnwantedDismissProps,
-                subMenuProps: {
-                    items: messageReadByList !== null && messageReadByList !== void 0 ? messageReadByList : [],
-                    calloutProps: preventUnwantedDismissProps,
-                    styles: react.concatStyleSets({
-                        root: {
-                            maxWidth: _pxToRem(320),
-                            span: {
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis'
-                            }
-                        }
-                    })
-                },
-                iconProps: {
-                    iconName: 'MessageSeen',
-                    styles: {
-                        root: {
-                            color: messageReadByCount > 0 ? theme.palette.themeDarkAlt : theme.palette.neutralTertiary
-                        }
-                    }
-                },
-                submenuIconProps: {
-                    iconName: 'HorizontalGalleryRightButton',
-                    styles: menuSubIconStyleSet
-                },
-                disabled: messageReadByCount <= 0
-            });
-        }
-        else if (props.messageStatus === 'failed' && props.strings.resendMessage) {
-            items.push({
-                key: 'Resend',
-                text: props.strings.resendMessage,
-                itemProps: {
-                    styles: react.concatStyleSets({
-                        linkContent: {
-                            color: theme.palette.neutralPrimary
-                        },
-                        root: {
-                            borderTop: `1px solid ${theme.palette.neutralLighter}`
-                        }
-                    }, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)
-                },
-                calloutProps: preventUnwantedDismissProps,
-                iconProps: {
-                    iconName: 'MessageResend',
-                    styles: {
-                        root: {
-                            color: theme.palette.themeDarkAlt
-                        }
-                    }
-                },
-                onClick: props.onResendClick
-            });
+const iconWrapperStyle = (theme, isSubMenuOpen) => ({
+    root: {
+        margin: _pxToRem(3),
+        // Show hover styles when the Edit/Delete menu is showing as this action button is still considered 'active'
+        color: isSubMenuOpen ? theme.palette.black : theme.palette.neutralPrimary,
+        strokeWidth: isSubMenuOpen ? _pxToRem(0.5) : _pxToRem(0),
+        stroke: theme.palette.black,
+        ':hover, :focus': {
+            color: theme.palette.black,
+            strokeWidth: _pxToRem(0.5)
         }
-        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
-    ]);
-    // gap space uses pixels
-    return (React__default["default"].createElement(react.ContextualMenu, { alignTargetEdge: true, gapSpace: 2 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: react.DirectionalHint.topRightEdge, className: chatMessageMenuStyle, calloutProps: calloutMenuProps }));
-};
+    }
+});
 /**
- * Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.
+ * @private
  */
-const preventUnwantedDismissProps = {
-    preventDismissOnEvent: (ev) => {
-        return ev.type === 'resize';
-    }
-};
-const calloutMenuProps = Object.assign(Object.assign({}, preventUnwantedDismissProps), { styles: { root: { marginRight: '3px' } } });
-
-// Copyright (c) Microsoft Corporation.
+const chatMessageDateStyle = react.mergeStyles({
+    color: reactComponents.tokens.colorNeutralForeground2,
+    fontWeight: react.FontWeights.regular,
+    fontSize: '0.75rem'
+});
 /**
- * Provides the default implementation for rendering an Mention in a message thread
- * @param mention - The mention to render
- *
  * @private
  */
-const defaultOnMentionRender = (mention) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const MsftMention = 'msft-mention';
-    return React__default["default"].createElement(MsftMention, { id: mention.id }, mention.displayText);
-};
-
-// Copyright (c) Microsoft Corporation.
-/** @private */
-const ChatMessageContent = (props) => {
-    switch (props.message.contentType) {
-        case 'text':
-            return MessageContentAsText(props);
-        case 'html':
-            return MessageContentAsRichTextHTML(props);
-        case 'richtext/html':
-            return MessageContentAsRichTextHTML(props);
-        default:
-            console.warn('unknown message content type');
-            return React__default["default"].createElement(React__default["default"].Fragment, null);
-    }
-};
-const MessageContentWithLiveAria = (props) => {
-    return (React__default["default"].createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
-        React__default["default"].createElement(LiveMessage, { message: props.liveMessage, ariaLive: "polite" }),
-        props.content));
-};
-const MessageContentAsRichTextHTML = (props) => {
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    React.useEffect(() => {
-        var _a;
-        const attachments = (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.filter((fileMetadata) => {
-            return fileMetadata.attachmentType === 'inlineImage';
-        });
-        if (props.attachmentsMap && attachments) {
-            attachments.forEach((fileMetadata) => {
-                if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {
-                    props.onFetchAttachment([fileMetadata], props.message.messageId);
-                    return;
-                }
-            });
-        }
-    }, [props]);
-    return (React__default["default"].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
-};
-const MessageContentAsText = (props) => {
-    return (React__default["default"].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: React__default["default"].createElement(Linkify__default["default"], { componentDecorator: (decoratedHref, decoratedText, key) => {
-                return (React__default["default"].createElement(react.Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText));
-            } }, props.message.content) }));
-};
-/* @conditional-compile-remove(data-loss-prevention) */
+const chatMessageAuthorStyle = react.mergeStyles({
+    fontWeight: react.FontWeights.semibold,
+    fontSize: '0.75rem'
+});
 /**
  * @private
  */
-const BlockedMessageContent = (props) => {
-    var _a;
-    const Icon = React__default["default"].createElement(react.FontIcon, { iconName: 'DataLossPreventionProhibited' });
-    const blockedMessage = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;
-    const blockedMessageLink = props.message.link;
-    const blockedMessageLinkText = blockedMessageLink
-        ? (_a = props.message.linkText) !== null && _a !== void 0 ? _a : props.strings.blockedWarningLinkText
-        : '';
-    const liveAuthor = props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;
-    const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;
-    return (React__default["default"].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: liveBlockedWarningText, ariaLabel: liveBlockedWarningText, content: React__default["default"].createElement(react.Stack, { horizontal: true, wrap: true },
-            Icon,
-            blockedMessage && React__default["default"].createElement("p", null, blockedMessage),
-            blockedMessageLink && (React__default["default"].createElement(react.Link, { target: '_blank', href: blockedMessageLink }, blockedMessageLinkText))) }));
-};
-// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript
-const extractContent = (s) => {
-    const span = document.createElement('span');
-    span.innerHTML = s;
-    return span.textContent || span.innerText;
-};
-const generateLiveMessage = (props) => {
-    const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')} `;
-};
-const messageContentAriaText = (props) => {
-    // Strip all html tags from the content for aria.
-    return props.message.content
-        ? props.message.mine
-            ? _formatString(props.strings.messageContentMineAriaText, {
-                message: DOMPurify__default["default"].sanitize(props.message.content, { ALLOWED_TAGS: [] })
-            })
-            : _formatString(props.strings.messageContentAriaText, {
-                author: `${props.message.senderDisplayName}`,
-                message: DOMPurify__default["default"].sanitize(props.message.content, { ALLOWED_TAGS: [] })
-            })
-        : undefined;
-};
-const processNodeDefinitions = htmlToReact.ProcessNodeDefinitions();
-const htmlToReactParser = htmlToReact.Parser();
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-const processInlineImage = (props) => ({
-    // Custom <img> processing
-    shouldProcessNode: (node) => {
-        var _a;
-        function isImageNode(file) {
-            return file.attachmentType === 'inlineImage' && file.id === node.attribs.id;
-        }
-        // Process img node with id in attachments list
-        return (node.name &&
-            node.name === 'img' &&
-            node.attribs &&
-            node.attribs.id &&
-            ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find(isImageNode)));
+const chatMessageEditedTagStyle = (theme) => react.mergeStyles({ fontWeight: react.FontWeights.semibold, color: theme.palette.neutralSecondary });
+/**
+ * @private
+ */
+const chatMessageFailedTagStyle = (theme) => react.mergeStyles({
+    fontWeight: react.FontWeights.regular,
+    color: theme.semanticColors.errorText,
+    fontSize: theme.fonts.smallPlus.fontSize,
+    lineHeight: '1rem'
+});
+/**
+ * @private
+ */
+const editChatMessageFailedTagStyle = react.mergeStyles({
+    marginBottom: '0.5rem'
+});
+/**
+ * @private
+ */
+const chatMessageFailedTagStackItemStyle = react.mergeStyles({
+    alignSelf: 'end'
+});
+/**
+ * @private
+ */
+const editChatMessageButtonsStackStyle = react.mergeStyles({
+    padding: '0 0.5rem',
+    marginTop: '-0.25rem'
+});
+/**
+ * @private
+ */
+const chatMessageMenuStyle = react.mergeStyles({
+    minWidth: '8.5rem',
+    height: 'max-content',
+    cursor: 'pointer',
+    overflow: 'hidden'
+});
+/**
+ * @private
+ */
+const useChatMessageEditContainerStyles = reactComponents.makeStyles({
+    root: {
+        paddingTop: '1.25rem' //height of the menu button + marginBottom
     },
-    processNode: (node, children, index) => {
-        node.attribs = Object.assign(Object.assign({}, node.attribs), { 'aria-label': node.attribs.name });
-        // logic to check id in map/list
-        if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
-            node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
-        }
-        /* @conditional-compile-remove(image-gallery) */
-        const handleOnClick = () => {
-            props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);
-        };
-        /* @conditional-compile-remove(image-gallery) */
-        return (React__default["default"].createElement("span", { "data-ui-id": node.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
-                cursor: 'pointer'
-            }, onKeyDown: (e) => {
-                if (e.key === 'Enter') {
-                    handleOnClick();
-                }
-            } }, processNodeDefinitions.processDefaultNode(node, children, index)));
-    }
+    body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding(0)), { backgroundColor: 'transparent', boxSizing: 'border-box' }), reactComponents.shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), reactComponents.shorthands.borderRadius(reactComponents.tokens.borderRadiusMedium)), reactComponents.shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`)), { 
+        // Width should be updated on hover to include the border width change
+        width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`, '&:hover, &:active, &:focus, &:focus-within': Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.margin('0rem')), reactComponents.shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)), { width: '100%' }) }),
+    bodyError: Object.assign({}, reactComponents.shorthands.borderColor(errorTextColor)),
+    bodyDefault: Object.assign(Object.assign({}, reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStrokeAccessible)), { '&:hover, &:active, &:focus, &:focus-within': Object.assign({}, reactComponents.shorthands.borderColor(reactComponents.tokens.colorCompoundBrandStroke)) })
 });
-/* @conditional-compile-remove(mention) */
-const processMention = (props) => ({
-    shouldProcessNode: (node) => {
-        var _a;
-        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
-            // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer
-            return node.name === 'msft-mention';
-        }
-        return false;
+/**
+ * Styles that can be applied to ensure flyout items have the minimum touch target size.
+ *
+ * @private
+ */
+const menuItemIncreasedSizeStyles = {
+    root: {
+        height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
+        lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
+        maxHeight: 'unset'
     },
-    processNode: (node) => {
-        var _a, _b, _c;
-        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
-            const { id } = node.attribs;
-            const mention = {
-                id: id,
-                displayText: (_c = (_b = node.children[0]) === null || _b === void 0 ? void 0 : _b.data) !== null && _c !== void 0 ? _c : ''
-            };
-            return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
-        }
-        return processNodeDefinitions.processDefaultNode;
+    linkContent: {
+        height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
+        lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
+        maxHeight: 'unset'
+    },
+    icon: {
+        maxHeight: 'unset'
     }
-});
-const processHtmlToReact = (props) => {
-    var _a;
-    const steps = [
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        processInlineImage(props),
-        /* @conditional-compile-remove(mention) */
-        processMention(props),
-        {
-            // Process everything else in the default way
-            shouldProcessNode: htmlToReact.IsValidNodeDefinitions.alwaysValid,
-            processNode: processNodeDefinitions.processDefaultNode
-        }
-    ];
-    return htmlToReactParser.parseWithInstructions((_a = props.message.content) !== null && _a !== void 0 ? _a : '', htmlToReact.IsValidNodeDefinitions.alwaysValid, steps);
 };
-
-// Copyright (c) Microsoft Corporation.
 /**
- * Props for the Chat.Message action menu.
- * This is the 3 dots that appear when hovering over one of your own chat messages.
- *
  * @private
  */
-const chatMessageActionMenuProps = (menuProps) => {
-    const { ariaLabel, enabled, theme, menuExpanded } = 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__default["default"].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__default["default"].createElement(react.Icon, { iconName: "ChatMessageOptions", "aria-label": ariaLabel, styles: iconWrapperStyle(theme, menuExpanded) })) : undefined))
-    };
-    return actionMenuProps;
+const menuIconStyleSet = {
+    root: {
+        height: 'calc(100% - 8px)',
+        width: '1.25rem'
+    }
+};
+/**
+ * @private
+ */
+const menuSubIconStyleSet = {
+    root: {
+        height: 'unset',
+        lineHeight: '100%',
+        width: '1.25rem'
+    }
 };
 
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-var __awaiter$y = (window && window.__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());
-    });
+const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
+const onRenderCancelIcon = (color) => {
+    const className = react.mergeStyles(inputBoxIcon, { color });
+    return React__default["default"].createElement(react.Icon, { iconName: 'EditBoxCancel', className: className });
 };
-const fileDownloadCardsStyle = {
-    marginTop: '0.25rem'
+const onRenderSubmitIcon = (color) => {
+    const className = react.mergeStyles(inputBoxIcon, { color });
+    return React__default["default"].createElement(react.Icon, { iconName: 'EditBoxSubmit', className: className });
 };
-const actionIconStyle = { height: '1rem' };
 /**
- * @internal
+ * @private
  */
-const _FileDownloadCards = (props) => {
-    var _a, _b;
-    const { userId, fileMetadata } = props;
-    const [showSpinner, setShowSpinner] = React.useState(false);
-    const localeStrings = useLocaleStringsTrampoline();
-    const downloadFileButtonString = React.useMemo(() => () => {
-        var _a, _b;
-        return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
-    }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
-    const isFileSharingAttachment = React.useCallback((attachment) => {
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        return attachment.attachmentType === 'fileSharing';
-    }, []);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const isShowDownloadIcon = React.useCallback((attachment) => {
+const ChatMessageComponentAsEditBox = (props) => {
+    const { onCancel, onSubmit, strings, message } = props;
+    /* @conditional-compile-remove(mention) */
+    const { mentionLookupOptions } = props;
+    const [textValue, setTextValue] = React.useState(message.content || '');
+    const [attachedFilesMetadata, setAttachedFilesMetadata] = React__default["default"].useState(getMessageAttachedFilesMetadata(message));
+    const editTextFieldRef = React__default["default"].useRef(null);
+    const theme = useTheme();
+    const messageState = getMessageState(textValue, attachedFilesMetadata !== null && attachedFilesMetadata !== void 0 ? attachedFilesMetadata : []);
+    const submitEnabled = messageState === 'OK';
+    const editContainerStyles = useChatMessageEditContainerStyles();
+    const chatMyMessageStyles = useChatMyMessageStyles();
+    React.useEffect(() => {
         var _a;
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        return attachment.attachmentType === 'fileSharing' && ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
+        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    const fileCardGroupDescription = React.useMemo(() => () => {
-        var _a, _b;
-        const fileGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.fileCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.fileCardGroupMessage;
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        return _formatString(fileGroupLocaleString, {
-            fileCount: `${fileMetadata.filter(isFileSharingAttachment).length}`
-        });
-    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$y(void 0, void 0, void 0, function* () {
-        if (!props.downloadHandler) {
-            window.open(file.url, '_blank', 'noopener,noreferrer');
-        }
-        else {
-            setShowSpinner(true);
-            try {
-                const response = yield props.downloadHandler(userId, file);
-                setShowSpinner(false);
-                if (response instanceof URL) {
-                    window.open(response.toString(), '_blank', 'noopener,noreferrer');
-                }
-                else {
-                    props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);
-                }
-            }
-            finally {
-                setShowSpinner(false);
-            }
-        }
-    }), [props]);
-    if (!fileMetadata ||
-        fileMetadata.length === 0 ||
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(isFileSharingAttachment)) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
-    }
-    return (React__default["default"].createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
-        React__default["default"].createElement(_FileCardGroup, { ariaLabel: fileCardGroupDescription() }, fileMetadata &&
-            fileMetadata
-                .filter((attachment) => {
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                return isFileSharingAttachment(attachment);
-            })
-                .map((file) => (React__default["default"].createElement(react.TooltipHost, { content: downloadFileButtonString(), key: file.name },
-                React__default["default"].createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? (React__default["default"].createElement(react.Spinner, { size: react.SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                        isShowDownloadIcon(file) ? (React__default["default"].createElement(react.IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
-                        React__default["default"].createElement(DownloadIconTrampoline, null))) : undefined, actionHandler: () => fileDownloadHandler(userId, file) })))))));
+    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 onRenderThemedCancelIcon = React.useCallback((isHover) => onRenderCancelIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);
+    const onRenderThemedSubmitIcon = React.useCallback((isHover) => onRenderSubmitIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary), [theme.palette.neutralSecondary, theme.palette.accent]);
+    const editBoxStyles = React.useMemo(() => {
+        return react.concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });
+    }, [theme.palette.themePrimary]);
+    const onRenderFileUploads = React.useCallback(() => {
+        return (!!attachedFilesMetadata &&
+            attachedFilesMetadata.length > 0 && (React__default["default"].createElement("div", { style: { margin: '0.25rem' } },
+            React__default["default"].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));
+                } }))));
+    }, [attachedFilesMetadata]);
+    const getContent = () => {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(InputBoxComponent, { "data-ui-id": "edit-box", textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, 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, 
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions }),
+            React__default["default"].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: editChatMessageButtonsStackStyle, tokens: { childrenGap: '0.25rem' } },
+                message.failureReason && (React__default["default"].createElement(react.Stack.Item, { grow: true, align: "stretch", className: chatMessageFailedTagStackItemStyle },
+                    React__default["default"].createElement("div", { className: react.mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle) }, message.failureReason))),
+                React__default["default"].createElement(react.Stack.Item, { align: "end" },
+                    React__default["default"].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                            onCancel && onCancel(message.messageId);
+                        }, id: 'dismissIconWrapper' })),
+                React__default["default"].createElement(react.Stack.Item, { align: "end" },
+                    React__default["default"].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                            submitEnabled &&
+                                onSubmit(textValue, message.metadata, {
+                                    attachedFilesMetadata
+                                });
+                            e.stopPropagation();
+                        }, id: 'submitIconWrapper' }))),
+            onRenderFileUploads()));
+    };
+    const bodyClassName = reactComponents.mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);
+    return (React__default["default"].createElement(reactChat.ChatMyMessage, { root: {
+            className: reactComponents.mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)
+        }, body: {
+            className: bodyClassName
+        } }, getContent()));
+};
+const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;
+const isMessageEmpty = (messageText, attachedFilesMetadata) => messageText.trim().length === 0 && attachedFilesMetadata.length === 0;
+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;
 };
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 /**
  * @private
  */
-const DownloadIconTrampoline = () => {
-    // @conditional-compile-remove(file-sharing)
-    return React__default["default"].createElement(react.Icon, { "data-ui-id": "file-download-card-download-icon", iconName: "DownloadFile", style: actionIconStyle });
+const formatTimeForChatMessage = (messageDate) => {
+    return messageDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
 };
-const useLocaleStringsTrampoline = () => {
-    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
-    return useLocale$1().strings.messageThread;
+/**
+ * @private
+ */
+const formatDateForChatMessage = (messageDate) => {
+    return messageDate.toLocaleDateString();
 };
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
 /**
- * Function to create a React.CSSProperties object from a v8 style object.
- * This function is still not ideal
- * as v8Style can use pseudo-class selectors that style objects can't process correctly.
+ * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text
+ * using the system locale.
+ * <time in locale format>.
+ * Yesterday <time in locale format>.
+ * <dateStrings day of week> <time in locale format>.
+ * <date in locale format> <time in locale format>.
+ *
+ * If message is after yesterday, then only show the time.
+ * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.
+ * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.
+ *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.
+ * If message is in previous or older weeks, then show date string plus the time.
+ *
+ * @param messageDate - date of message
+ * @param currentDate - date used as offset to create the user friendly timestamp (e.g. to create 'Yesterday' instead of an absolute date)
  *
  * @private
  */
-function createStyleFromV8Style(v8Style) {
-    const result = {};
-    if (v8Style === undefined || v8Style === null || typeof v8Style === 'boolean' || typeof v8Style === 'string') {
-        return undefined;
+const formatTimestampForChatMessage = (messageDate, todayDate, dateStrings) => {
+    // If message was in the same day timestamp string is just the time like '1:30 p.m.'.
+    const startOfDay = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());
+    if (messageDate > startOfDay) {
+        return formatTimeForChatMessage(messageDate);
     }
-    else if (typeof v8Style === 'object') {
-        // v8Style is a style object
-        for (const record in v8Style) {
-            if (typeof v8Style[record] === 'string') {
-                // v8Style[record] is just a simple style
-                const msSuffix = 'MS';
-                if (record.startsWith(msSuffix)) {
-                    // React.CSSProperties uses camelCase for MS properties but v8Style uses PascalCase
-                    const newRecord = record.substring(0, msSuffix.length).toLowerCase + record.substring(msSuffix.length);
-                    result[newRecord] = v8Style[record];
-                }
-                else {
-                    result[record] = v8Style[record];
-                }
-            }
-            else {
-                result[record] = createStyleFromV8Style(v8Style[record]);
-            }
-        }
+    // If message was yesterday then timestamp string is like this 'Yesterday 1:30 p.m.'.
+    const yesterdayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - 1);
+    if (messageDate > yesterdayDate) {
+        return dateStrings.yesterday + ' ' + formatTimeForChatMessage(messageDate);
     }
-    return result;
-}
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-var __awaiter$x = (window && window.__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());
-    });
+    // If message was before Sunday and today is Sunday (start of week) then timestamp string is like
+    // '2021-01-10 1:30 p.m.'.
+    const weekDay = todayDate.getDay();
+    if (weekDay === 0) {
+        return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
+    }
+    // If message was before first day of the week then timestamp string is like Monday 1:30 p.m.
+    const firstDayOfTheWeekDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - weekDay);
+    if (messageDate > firstDayOfTheWeekDate) {
+        return dayToDayName(messageDate.getDay(), dateStrings) + ' ' + formatTimeForChatMessage(messageDate);
+    }
+    // If message date is in previous or older weeks then timestamp string is like 2021-01-10 1:30 p.m.
+    return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
 };
-const generateDefaultTimestamp = (createdOn, showDate, strings) => {
-    const formattedTimestamp = showDate
-        ? formatTimestampForChatMessage(createdOn, new Date(), strings)
-        : formatTimeForChatMessage(createdOn);
-    return formattedTimestamp;
+const dayToDayName = (day, dateStrings) => {
+    switch (day) {
+        case 0:
+            return dateStrings.sunday;
+        case 1:
+            return dateStrings.monday;
+        case 2:
+            return dateStrings.tuesday;
+        case 3:
+            return dateStrings.wednesday;
+        case 4:
+            return dateStrings.thursday;
+        case 5:
+            return dateStrings.friday;
+        case 6:
+            return dateStrings.saturday;
+        default:
+            throw new Error(`Invalid day [${day}] passed`);
+    }
 };
-// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale
-const generateCustomizedTimestamp = (props, createdOn, locale) => {
-    /* @conditional-compile-remove(date-time-customization) */
-    return props.onDisplayDateTimeString
-        ? props.onDisplayDateTimeString(createdOn)
-        : locale.onDisplayDateTimeString
-            ? locale.onDisplayDateTimeString(createdOn)
-            : '';
-};
-/** @private */
-const MessageBubble = (props) => {
-    var _a;
-    const ids = useIdentifiers();
-    const theme = useTheme();
-    const locale = useLocale$1();
-    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler, 
-    /* @conditional-compile-remove(image-gallery) */
-    onInlineImageClicked, shouldOverlapAvatarAndMessage } = props;
-    const defaultTimeStamp = message.createdOn
-        ? generateDefaultTimestamp(message.createdOn, showDate, strings)
-        : undefined;
-    const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';
-    const formattedTimestamp = customTimestamp || defaultTimeStamp;
-    // Track if the action menu was opened by touch - if so we increase the touch targets for the items
-    const [wasInteractionByTouch, setWasInteractionByTouch] = React.useState(false);
-    // `focused` state is used for show/hide actionMenu
-    const [focused, setFocused] = React__default["default"].useState(false);
-    // The chat message action flyout should target the Chat.Message action menu if clicked,
-    // or target the chat message if opened via touch press.
-    // Undefined indicates the flyout menu should not be being shown.
-    const messageRef = React.useRef(null);
-    const messageActionButtonRef = React.useRef(null);
-    const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = React.useState(undefined);
-    const chatActionsEnabled = !disableEditing &&
-        message.status !== 'sending' &&
-        !!message.mine &&
-        /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';
-    const [messageReadBy, setMessageReadBy] = React.useState([]);
-    const actionMenuProps = chatMessageActionMenuProps({
-        ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
-        enabled: chatActionsEnabled,
-        menuButtonRef: messageActionButtonRef,
-        menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,
-        onActionButtonClick: () => {
-            if (message.messageType === 'chat') {
-                props.onActionButtonClick(message, setMessageReadBy);
-                setChatMessageActionFlyoutTarget(messageActionButtonRef);
-            }
-        },
-        theme
-    });
-    const onActionFlyoutDismiss = React.useCallback(() => {
-        // When the flyout dismiss is called, since we control if the action flyout is visible
-        // or not we need to set the target to undefined here to actually hide the action flyout
-        setChatMessageActionFlyoutTarget(undefined);
-    }, [setChatMessageActionFlyoutTarget]);
-    const defaultOnRenderFileDownloads = React.useCallback(() => (React__default["default"].createElement(_FileDownloadCards, { userId: userId, fileMetadata: message['attachedFilesMetadata'] || [], downloadHandler: fileDownloadHandler, 
-        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
-        strings: { downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage } })), [
-        userId,
-        message,
-        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
-        strings,
-        fileDownloadHandler
-    ]);
-    const editedOn = 'editedOn' in message ? message.editedOn : undefined;
-    const getMessageDetails = React.useCallback(() => {
-        if (messageStatus === 'failed') {
-            return React__default["default"].createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag);
-        }
-        else if (message.messageType === 'chat' && editedOn) {
-            return React__default["default"].createElement("div", { className: chatMessageEditedTagStyle(theme) }, strings.editedTag);
-        }
-        return undefined;
-    }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
-    /* @conditional-compile-remove(image-gallery) */
-    const handleOnInlineImageClicked = React.useCallback((attachmentId) => __awaiter$x(void 0, void 0, void 0, function* () {
-        if (onInlineImageClicked === undefined) {
-            return;
-        }
-        yield onInlineImageClicked(attachmentId, message.messageId);
-    }), [message, onInlineImageClicked]);
-    const getContent = React.useCallback(() => {
-        /* @conditional-compile-remove(data-loss-prevention) */
-        if (message.messageType === 'blocked') {
-            return (React__default["default"].createElement("div", { tabIndex: 0 },
-                React__default["default"].createElement(BlockedMessageContent, { message: message, strings: strings })));
-        }
-        return (React__default["default"].createElement("div", { tabIndex: 0, className: "ui-chat__message__content" },
-            React__default["default"].createElement(ChatMessageContent, { message: message, strings: strings, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                onFetchAttachment: props.onFetchAttachments, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                attachmentsMap: props.attachmentsMap, 
-                /* @conditional-compile-remove(mention) */
-                mentionDisplayOptions: props.mentionDisplayOptions, 
-                /* @conditional-compile-remove(image-gallery) */
-                onInlineImageClicked: handleOnInlineImageClicked }),
-            props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()));
-    }, [
-        defaultOnRenderFileDownloads,
-        message,
-        props,
-        strings,
-        userId,
-        /* @conditional-compile-remove(image-gallery) */
-        handleOnInlineImageClicked
-    ]);
-    const isBlockedMessage = /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
-    const chatMyMessageStyles = useChatMyMessageStyles();
-    const chatMessageCommonStyles = useChatMessageCommonStyles();
-    const chatMessageStyles = useChatMessageStyles();
-    const chatItemMessageContainerClassName = reactComponents.mergeClasses(
-    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
-    chatMessageStyles.body, isBlockedMessage
-        ? chatMessageCommonStyles.blocked
-        : props.message.status === 'failed'
-            ? chatMessageCommonStyles.failed
-            : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false
-        ? chatMessageStyles.bodyWithAvatar
-        : chatMessageStyles.bodyWithoutAvatar, react.mergeStyles(messageContainerStyle));
-    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
-    const chatMessage = (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { key: props.message.messageId }, message.mine ? (React__default["default"].createElement(reactChat.ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
-                // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
-                className: reactComponents.mergeClasses(chatMyMessageStyles.body, isBlockedMessage
-                    ? chatMessageCommonStyles.blocked
-                    : props.message.status === 'failed'
-                        ? chatMessageCommonStyles.failed
-                        : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, react.mergeStyles(messageContainerStyle)),
-                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
-                ref: messageRef
-            }, root: {
-                className: chatMyMessageStyles.root,
-                onBlur: (e) => {
-                    // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
-                    // with keyboard the focused element will be changed and there is no way to use `:focus` selector
-                    if (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current) {
-                        // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu
-                        return;
-                    }
-                    const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);
-                    setFocused(shouldPreserveFocusState);
-                },
-                onFocus: () => {
-                    // react onFocus is called even when nested component receives focus (i.e. it bubbles)
-                    // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible
-                    setFocused(true);
-                },
-                // make body not focusable to remove repetitions from narrators.
-                // inner components are already focusable
-                role: 'none',
-                tabIndex: -1
-            }, "data-ui-id": "chat-composite-message", author: React__default["default"].createElement(react.Text, { className: chatMessageDateStyle, tabIndex: 0 }, message.senderDisplayName), timestamp: React__default["default"].createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp, tabIndex: 0 }, formattedTimestamp), details: getMessageDetails(), actions: {
-                children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
-                className: reactComponents.mergeClasses(chatMyMessageStyles.menu, 
-                // Make actions menu visible when the message is focused or the flyout is shown
-                focused || (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current)
-                    ? chatMyMessageStyles.menuVisible
-                    : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)
-            }, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onClick: () => {
-                if (!wasInteractionByTouch) {
-                    return;
-                }
-                // If the message was touched via touch we immediately open the menu
-                // flyout (when using mouse the 3-dot menu that appears on hover
-                // must be clicked to open the flyout).
-                // In doing so here we set the target of the flyout to be the message and
-                // not the 3-dot menu button to position the flyout correctly.
-                setChatMessageActionFlyoutTarget(messageRef);
-                if (message.messageType === 'chat') {
-                    props.onActionButtonClick(message, setMessageReadBy);
-                }
-            } }, getContent())) : (React__default["default"].createElement(reactChat.ChatMessage, { attached: attached, key: props.message.messageId, root: {
-                className: chatMessageStyles.root,
-                // make body not focusable to remove repetitions from narrators.
-                // inner components are already focusable
-                tabIndex: -1,
-                role: 'none'
-            }, author: React__default["default"].createElement(react.Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
-                className: chatItemMessageContainerClassName,
-                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
-            }, "data-ui-id": "chat-composite-message", timestamp: React__default["default"].createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp) }, getContent()))),
-        chatActionsEnabled && (React__default["default"].createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }))));
-    return chatMessage;
-};
-/** @private */
-const ChatMessageComponentAsMessageBubble = React__default["default"].memo(MessageBubble);
 
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-var __awaiter$w = (window && window.__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());
-    });
-};
 /**
+ * Chat message actions flyout that contains actions such as Edit Message, or Remove Message.
+ *
  * @private
  */
-const ChatMessageComponent = (props) => {
+const ChatMessageActionFlyout = (props) => {
     var _a, _b;
-    const [isEditing, setIsEditing] = React.useState(false);
-    const onEditClick = React.useCallback(() => setIsEditing(true), [setIsEditing]);
-    const { onDeleteMessage, onSendMessage, message } = props;
-    const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;
-    const content = 'content' in message ? message.content : undefined;
-    const onRemoveClick = React.useCallback(() => {
-        if (onDeleteMessage && message.messageId) {
-            onDeleteMessage(message.messageId);
-        }
-        // when fail to send, message does not have message id, delete message using clientMessageId
-        else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {
-            onDeleteMessage(clientMessageId);
-        }
-    }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);
-    const onResendClick = React.useCallback(() => {
-        onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);
-        onSendMessage && onSendMessage(content !== undefined ? content : '');
-    }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
-    if (isEditing && message.messageType === 'chat') {
-        return (React__default["default"].createElement(ChatMessageComponentAsEditBox, { message: message, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$w(void 0, void 0, void 0, function* () {
-                props.onUpdateMessage &&
-                    message.messageId &&
-                    (yield props.onUpdateMessage(message.messageId, text, metadata, options));
-                setIsEditing(false);
-            }), 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__default["default"].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(image-gallery) */
-            attachmentsMap: props.attachmentsMap, 
-            /* @conditional-compile-remove(mention) */
-            mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions })));
-    }
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * A utility hook for providing the width of a parent element.
- * Returns updated width if parent/window resizes.
- * @param containerRef - Ref of a parent element whose width will be returned.
- * @internal
- */
-const _useContainerWidth = (containerRef) => {
-    const [width, setWidth] = React.useState(undefined);
-    const observer = React.useRef(new ResizeObserver((entries) => {
-        const { width } = entries[0].contentRect;
-        setWidth(width);
-    }));
-    React.useEffect(() => {
-        if (containerRef.current) {
-            observer.current.observe(containerRef.current);
-        }
-        const currentObserver = observer.current;
-        return () => {
-            currentObserver.disconnect();
+    const theme = react.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 personaOptions = {
+            hidePersonaDetails: true,
+            size: react.PersonaSize.size24,
+            text: person.displayName,
+            showOverflowTooltip: false,
+            styles: {
+                root: {
+                    margin: '0.25rem'
+                }
+            }
         };
-    }, [containerRef, observer]);
-    return width;
-};
-/**
- * A utility hook for providing the height of a parent element.
- * Returns updated height if parent/window resizes.
- * @param containerRef - Ref of a parent element whose height will be returned.
- * @internal
- */
-const _useContainerHeight = (containerRef) => {
-    const [height, setHeight] = React.useState(undefined);
-    const observer = React.useRef(new ResizeObserver((entries) => {
-        const { height } = entries[0].contentRect;
-        setHeight(height);
-    }));
-    React.useEffect(() => {
-        if (containerRef.current) {
-            observer.current.observe(containerRef.current);
-        }
-        const currentObserver = observer.current;
-        return () => {
-            currentObserver.disconnect();
+        const { onRenderAvatar } = props;
+        return {
+            'data-ui-id': 'chat-composite-message-contextual-menu-read-name-list-item',
+            key: person.displayName,
+            text: person.displayName,
+            itemProps: { styles: props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined },
+            onRenderIcon: () => { var _a; return onRenderAvatar ? onRenderAvatar((_a = person.id) !== null && _a !== void 0 ? _a : '', personaOptions) : React__default["default"].createElement(react.Persona, Object.assign({}, personaOptions)); },
+            iconProps: {
+                styles: menuIconStyleSet
+            }
         };
-    }, [containerRef, observer]);
-    return height;
+    });
+    const menuItems = React.useMemo(() => {
+        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 },
+                onClick: props.onEditClick
+            },
+            {
+                key: 'Remove',
+                text: props.strings.removeMessage,
+                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') {
+            items.push({
+                key: 'Read Count',
+                'data-ui-id': 'chat-composite-message-contextual-menu-read-info',
+                text: _formatString(props.strings.messageReadCount, {
+                    messageReadByCount: `${messageReadByCount}`,
+                    remoteParticipantsCount: `${props.remoteParticipantsCount}`
+                }),
+                itemProps: {
+                    styles: react.concatStyleSets({
+                        linkContent: {
+                            color: messageReadByCount > 0 ? theme.palette.neutralPrimary : theme.palette.neutralTertiary
+                        },
+                        root: {
+                            borderTop: `1px solid ${theme.palette.neutralLighter}`
+                        }
+                    }, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)
+                },
+                calloutProps: preventUnwantedDismissProps,
+                subMenuProps: {
+                    items: messageReadByList !== null && messageReadByList !== void 0 ? messageReadByList : [],
+                    calloutProps: preventUnwantedDismissProps,
+                    styles: react.concatStyleSets({
+                        root: {
+                            maxWidth: _pxToRem(320),
+                            span: {
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis'
+                            }
+                        }
+                    })
+                },
+                iconProps: {
+                    iconName: 'MessageSeen',
+                    styles: {
+                        root: {
+                            color: messageReadByCount > 0 ? theme.palette.themeDarkAlt : theme.palette.neutralTertiary
+                        }
+                    }
+                },
+                submenuIconProps: {
+                    iconName: 'HorizontalGalleryRightButton',
+                    styles: menuSubIconStyleSet
+                },
+                disabled: messageReadByCount <= 0
+            });
+        }
+        else if (props.messageStatus === 'failed' && props.strings.resendMessage) {
+            items.push({
+                key: 'Resend',
+                text: props.strings.resendMessage,
+                itemProps: {
+                    styles: react.concatStyleSets({
+                        linkContent: {
+                            color: theme.palette.neutralPrimary
+                        },
+                        root: {
+                            borderTop: `1px solid ${theme.palette.neutralLighter}`
+                        }
+                    }, props.increaseFlyoutItemSize ? menuItemIncreasedSizeStyles : undefined)
+                },
+                calloutProps: preventUnwantedDismissProps,
+                iconProps: {
+                    iconName: 'MessageResend',
+                    styles: {
+                        root: {
+                            color: theme.palette.themeDarkAlt
+                        }
+                    }
+                },
+                onClick: props.onResendClick
+            });
+        }
+        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
+    ]);
+    // gap space uses pixels
+    return (React__default["default"].createElement(react.ContextualMenu, { alignTargetEdge: true, gapSpace: 2 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: react.DirectionalHint.topRightEdge, className: chatMessageMenuStyle, calloutProps: calloutMenuProps }));
 };
-const NARROW_WIDTH_REM = 30;
-const SHORT_HEIGHT_REM = 23.75;
-/**
- * Utility function to determine if container width is narrow
- * @param containerWidthRem  container width in rem
- * @returns boolean
- */
-const isNarrowWidth = (containerWidthRem) => containerWidthRem <= _convertRemToPx(NARROW_WIDTH_REM);
 /**
- * Utility function to determine if container width is short
- * @param containerWidthRem  container height in rem
- * @returns boolean
+ * Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.
  */
-const isShortHeight = (containerHeightRem) => containerHeightRem <= _convertRemToPx(SHORT_HEIGHT_REM);
+const preventUnwantedDismissProps = {
+    preventDismissOnEvent: (ev) => {
+        return ev.type === 'resize';
+    }
+};
+const calloutMenuProps = Object.assign(Object.assign({}, preventUnwantedDismissProps), { styles: { root: { marginRight: '3px' } } });
 
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
 /**
- * @private
- *logic: Looking at message A, how do we know it's read number?
- * Assumption: if user read the latest message, user has read all messages before that
- * ReadReceipt behaviour: read receipt is only sent to the last message
- *
- * If participant read a message that is sent later than message A, then the participant has read message A
- * How do we check if the message is sent later than message A?
- * We compare if the messageID of the last read message is larger than or equal to the message A's id
- * Because messageID is the creation timestamp of each message
- * Timestamps are in epoch time so lecixographical ordering is the same as time ordering.
+ * Provides the default implementation for rendering an Mention in a message thread
+ * @param mention - The mention to render
  *
- * if MessageId of B is larger than message Id of A, then B is created after A
- * if the last read message is created after the message A is sent, then user should have read message A as well */
-var getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
-    return (Object.entries(readReceiptsBySenderId)
-        // Filter to only read receipts that match the message OR the participant has read a different message after this message has been created
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        .filter(([_, readReceipt]) => readReceipt.lastReadMessage >= message.messageId)
-        // make sure the person is not removed from chat
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        .filter(([_, readReceipt]) => readReceipt.displayName && readReceipt.displayName !== '')
-        // Map properties to useful array
-        .map(([id, readReceipt]) => ({ id, displayName: readReceipt.displayName })));
+ * @private
+ */
+const defaultOnMentionRender = (mention) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const MsftMention = 'msft-mention';
+    return React__default["default"].createElement(MsftMention, { id: mention.id }, mention.displayText);
 };
 
 // Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-// These color records are required for createV9Theme
-// For more info, check https://react.fluentui.dev/iframe.html?viewMode=docs&id=concepts-migration-from-v8-components-theme-migration--page#compatible-themes
-/**
- * @private
- */
-const grey = {
-    '0': '#000000',
-    '2': '#050505',
-    '4': '#0a0a0a',
-    '6': '#0f0f0f',
-    '8': '#141414',
-    '10': '#1a1a1a',
-    '12': '#1f1f1f',
-    '14': '#242424',
-    '16': '#292929',
-    '18': '#2e2e2e',
-    '20': '#333333',
-    '22': '#383838',
-    '24': '#3d3d3d',
-    '26': '#424242',
-    '28': '#474747',
-    '30': '#4d4d4d',
-    '32': '#525252',
-    '34': '#575757',
-    '36': '#5c5c5c',
-    '38': '#616161',
-    '40': '#666666',
-    '42': '#6b6b6b',
-    '44': '#707070',
-    '46': '#757575',
-    '48': '#7a7a7a',
-    '50': '#808080',
-    '52': '#858585',
-    '54': '#8a8a8a',
-    '56': '#8f8f8f',
-    '58': '#949494',
-    '60': '#999999',
-    '62': '#9e9e9e',
-    '64': '#a3a3a3',
-    '66': '#a8a8a8',
-    '68': '#adadad',
-    '70': '#b3b3b3',
-    '72': '#b8b8b8',
-    '74': '#bdbdbd',
-    '76': '#c2c2c2',
-    '78': '#c7c7c7',
-    '80': '#cccccc',
-    '82': '#d1d1d1',
-    '84': '#d6d6d6',
-    '86': '#dbdbdb',
-    '88': '#e0e0e0',
-    '90': '#e6e6e6',
-    '92': '#ebebeb',
-    '94': '#f0f0f0',
-    '96': '#f5f5f5',
-    '98': '#fafafa',
-    '100': '#ffffff'
+/** @private */
+const ChatMessageContent = (props) => {
+    switch (props.message.contentType) {
+        case 'text':
+            return MessageContentAsText(props);
+        case 'html':
+            return MessageContentAsRichTextHTML(props);
+        case 'richtext/html':
+            return MessageContentAsRichTextHTML(props);
+        default:
+            console.warn('unknown message content type');
+            return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }
 };
-/**
- * @private
- */
-const whiteAlpha = {
-    '5': 'rgba(255, 255, 255, 0.05)',
-    '10': 'rgba(255, 255, 255, 0.1)',
-    '20': 'rgba(255, 255, 255, 0.2)',
-    '30': 'rgba(255, 255, 255, 0.3)',
-    '40': 'rgba(255, 255, 255, 0.4)',
-    '50': 'rgba(255, 255, 255, 0.5)',
-    '60': 'rgba(255, 255, 255, 0.6)',
-    '70': 'rgba(255, 255, 255, 0.7)',
-    '80': 'rgba(255, 255, 255, 0.8)',
-    '90': 'rgba(255, 255, 255, 0.9)'
+const MessageContentWithLiveAria = (props) => {
+    return (React__default["default"].createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
+        React__default["default"].createElement(LiveMessage, { message: props.liveMessage, ariaLive: "polite" }),
+        props.content));
 };
-/**
- * @private
- */
-const blackAlpha = {
-    '5': 'rgba(0, 0, 0, 0.05)',
-    '10': 'rgba(0, 0, 0, 0.1)',
-    '20': 'rgba(0, 0, 0, 0.2)',
-    '30': 'rgba(0, 0, 0, 0.3)',
-    '40': 'rgba(0, 0, 0, 0.4)',
-    '50': 'rgba(0, 0, 0, 0.5)',
-    '60': 'rgba(0, 0, 0, 0.6)',
-    '70': 'rgba(0, 0, 0, 0.7)',
-    '80': 'rgba(0, 0, 0, 0.8)',
-    '90': 'rgba(0, 0, 0, 0.9)'
+const MessageContentAsRichTextHTML = (props) => {
+    const { 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    // message is used only in useEffect that is under teams-inline-images-and-file-sharing cc
+    message, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    attachmentsMap, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    onFetchAttachments } = props;
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    React.useEffect(() => {
+        var _a;
+        if (!attachmentsMap || !onFetchAttachments) {
+            return;
+        }
+        const attachments = (_a = message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.filter((fileMetadata) => {
+            return fileMetadata.attachmentType === 'inlineImage' && attachmentsMap[fileMetadata.id] === undefined;
+        });
+        if (attachments && attachments.length > 0) {
+            onFetchAttachments(attachments, message.messageId);
+        }
+    }, [message.attachedFilesMetadata, message.messageId, onFetchAttachments, attachmentsMap]);
+    return (React__default["default"].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
+};
+const MessageContentAsText = (props) => {
+    return (React__default["default"].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: React__default["default"].createElement(Linkify__default["default"], { componentDecorator: (decoratedHref, decoratedText, key) => {
+                return (React__default["default"].createElement(react.Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText));
+            } }, props.message.content) }));
 };
+/* @conditional-compile-remove(data-loss-prevention) */
 /**
  * @private
  */
-const grey10Alpha = {
-    '5': 'rgba(26, 26, 26, 0.05)',
-    '10': 'rgba(26, 26, 26, 0.1)',
-    '20': 'rgba(26, 26, 26, 0.2)',
-    '30': 'rgba(26, 26, 26, 0.3)',
-    '40': 'rgba(26, 26, 26, 0.4)',
-    '50': 'rgba(26, 26, 26, 0.5)',
-    '60': 'rgba(26, 26, 26, 0.6)',
-    '70': 'rgba(26, 26, 26, 0.7)',
-    '80': 'rgba(26, 26, 26, 0.8)',
-    '90': 'rgba(26, 26, 26, 0.9)'
+const BlockedMessageContent = (props) => {
+    var _a;
+    const Icon = React__default["default"].createElement(react.FontIcon, { iconName: 'DataLossPreventionProhibited' });
+    const blockedMessage = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;
+    const blockedMessageLink = props.message.link;
+    const blockedMessageLinkText = blockedMessageLink
+        ? (_a = props.message.linkText) !== null && _a !== void 0 ? _a : props.strings.blockedWarningLinkText
+        : '';
+    const liveAuthor = props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;
+    const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;
+    return (React__default["default"].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: liveBlockedWarningText, ariaLabel: liveBlockedWarningText, content: React__default["default"].createElement(react.Stack, { horizontal: true, wrap: true },
+            Icon,
+            blockedMessage && React__default["default"].createElement("p", null, blockedMessage),
+            blockedMessageLink && (React__default["default"].createElement(react.Link, { target: '_blank', href: blockedMessageLink }, blockedMessageLinkText))) }));
+};
+// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript
+const extractContent = (s) => {
+    const span = document.createElement('span');
+    span.innerHTML = s;
+    return span.textContent || span.innerText;
+};
+const generateLiveMessage = (props) => {
+    const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
+    return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContent(props.message.content || '')} `;
+};
+const messageContentAriaText = (props) => {
+    // Strip all html tags from the content for aria.
+    return props.message.content
+        ? props.message.mine
+            ? _formatString(props.strings.messageContentMineAriaText, {
+                message: DOMPurify__default["default"].sanitize(props.message.content, { ALLOWED_TAGS: [] })
+            })
+            : _formatString(props.strings.messageContentAriaText, {
+                author: `${props.message.senderDisplayName}`,
+                message: DOMPurify__default["default"].sanitize(props.message.content, { ALLOWED_TAGS: [] })
+            })
+        : undefined;
+};
+const processNodeDefinitions = htmlToReact.ProcessNodeDefinitions();
+const htmlToReactParser = htmlToReact.Parser();
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+const processInlineImage = (props) => ({
+    // Custom <img> processing
+    shouldProcessNode: (node) => {
+        var _a;
+        function isImageNode(file) {
+            return file.attachmentType === 'inlineImage' && file.id === node.attribs.id;
+        }
+        // Process img node with id in attachments list
+        return (node.name &&
+            node.name === 'img' &&
+            node.attribs &&
+            node.attribs.id &&
+            ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find(isImageNode)));
+    },
+    processNode: (node, children, index) => {
+        node.attribs = Object.assign(Object.assign({}, node.attribs), { 'aria-label': node.attribs.name });
+        // logic to check id in map/list
+        if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
+            node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
+        }
+        /* @conditional-compile-remove(image-gallery) */
+        const handleOnClick = () => {
+            props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);
+        };
+        /* @conditional-compile-remove(image-gallery) */
+        return (React__default["default"].createElement("span", { "data-ui-id": node.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
+                cursor: 'pointer'
+            }, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    handleOnClick();
+                }
+            } }, processNodeDefinitions.processDefaultNode(node, children, index)));
+    }
+});
+/* @conditional-compile-remove(mention) */
+const processMention = (props) => ({
+    shouldProcessNode: (node) => {
+        var _a;
+        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
+            // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer
+            return node.name === 'msft-mention';
+        }
+        return false;
+    },
+    processNode: (node) => {
+        var _a, _b, _c;
+        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
+            const { id } = node.attribs;
+            const mention = {
+                id: id,
+                displayText: (_c = (_b = node.children[0]) === null || _b === void 0 ? void 0 : _b.data) !== null && _c !== void 0 ? _c : ''
+            };
+            return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
+        }
+        return processNodeDefinitions.processDefaultNode;
+    }
+});
+const processHtmlToReact = (props) => {
+    var _a;
+    const steps = [
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        processInlineImage(props),
+        /* @conditional-compile-remove(mention) */
+        processMention(props),
+        {
+            // Process everything else in the default way
+            shouldProcessNode: htmlToReact.IsValidNodeDefinitions.alwaysValid,
+            processNode: processNodeDefinitions.processDefaultNode
+        }
+    ];
+    return htmlToReactParser.parseWithInstructions((_a = props.message.content) !== null && _a !== void 0 ? _a : '', htmlToReact.IsValidNodeDefinitions.alwaysValid, steps);
 };
+
+// Copyright (c) Microsoft Corporation.
 /**
+ * Props for the Chat.Message action menu.
+ * This is the 3 dots that appear when hovering over one of your own chat messages.
+ *
  * @private
  */
-const grey12Alpha = {
-    '5': 'rgba(31, 31, 31, 0.05)',
-    '10': 'rgba(31, 31, 31, 0.1)',
-    '20': 'rgba(31, 31, 31, 0.2)',
-    '30': 'rgba(31, 31, 31, 0.3)',
-    '40': 'rgba(31, 31, 31, 0.4)',
-    '50': 'rgba(31, 31, 31, 0.5)',
-    '60': 'rgba(31, 31, 31, 0.6)',
-    '70': 'rgba(31, 31, 31, 0.7)',
-    '80': 'rgba(31, 31, 31, 0.8)',
-    '90': 'rgba(31, 31, 31, 0.9)'
+const chatMessageActionMenuProps = (menuProps) => {
+    const { ariaLabel, enabled, theme, menuExpanded } = 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__default["default"].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__default["default"].createElement(react.Icon, { iconName: "ChatMessageOptions", "aria-label": ariaLabel, styles: iconWrapperStyle(theme, menuExpanded) })) : undefined))
+    };
+    return actionMenuProps;
 };
 
 // Copyright (c) Microsoft Corporation.
-// These mappings are required for createV9Theme
-// For more info, check https://react.fluentui.dev/iframe.html?viewMode=docs&id=concepts-migration-from-v8-components-theme-migration--page#compatible-themes
-/**
- * Creates v9 color tokens from a v8 palette.
+// Licensed under the MIT License.
+var __awaiter$y = (window && window.__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());
+    });
+};
+const fileDownloadCardsStyle = {
+    marginTop: '0.25rem'
+};
+const actionIconStyle = { height: '1rem' };
+/**
+ * @internal
  */
-const mapAliasColors = (palette, inverted) => {
-    return {
-        colorNeutralForeground1: palette.neutralPrimary,
-        colorNeutralForeground1Hover: palette.neutralPrimary,
-        colorNeutralForeground1Pressed: palette.neutralPrimary,
-        colorNeutralForeground1Selected: palette.neutralPrimary,
-        colorNeutralForeground2: palette.neutralSecondary,
-        colorNeutralForeground2Hover: palette.neutralPrimary,
-        colorNeutralForeground2Pressed: palette.neutralPrimary,
-        colorNeutralForeground2Selected: palette.neutralPrimary,
-        colorNeutralForeground2BrandHover: palette.themePrimary,
-        colorNeutralForeground2BrandPressed: palette.themeDarkAlt,
-        colorNeutralForeground2BrandSelected: palette.themePrimary,
-        colorNeutralForeground3: palette.neutralTertiary,
-        colorNeutralForeground3Hover: palette.neutralSecondary,
-        colorNeutralForeground3Pressed: palette.neutralSecondary,
-        colorNeutralForeground3Selected: palette.neutralSecondary,
-        colorNeutralForeground3BrandHover: palette.themePrimary,
-        colorNeutralForeground3BrandPressed: palette.themeDarkAlt,
-        colorNeutralForeground3BrandSelected: palette.themePrimary,
-        colorNeutralForeground4: palette.neutralQuaternary,
-        colorNeutralForegroundDisabled: palette.neutralTertiaryAlt,
-        colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
-        colorBrandForegroundLink: palette.themeDarkAlt,
-        colorBrandForegroundLinkHover: palette.themeDark,
-        colorBrandForegroundLinkPressed: palette.themeDarker,
-        colorBrandForegroundLinkSelected: palette.themeDarkAlt,
-        colorNeutralForeground2Link: palette.neutralSecondary,
-        colorNeutralForeground2LinkHover: palette.neutralPrimary,
-        colorNeutralForeground2LinkPressed: palette.neutralPrimary,
-        colorNeutralForeground2LinkSelected: palette.neutralPrimary,
-        colorCompoundBrandForeground1: palette.themePrimary,
-        colorCompoundBrandForeground1Hover: palette.themeDarkAlt,
-        colorCompoundBrandForeground1Pressed: palette.themeDark,
-        colorBrandForeground1: palette.themePrimary,
-        colorBrandForeground2: palette.themeDarkAlt,
-        colorBrandForeground2Hover: palette.themeDarkAlt,
-        colorBrandForeground2Pressed: palette.themeDarkAlt,
-        colorNeutralForeground1Static: palette.neutralPrimary,
-        colorNeutralForegroundInverted: palette.white,
-        colorNeutralForegroundInvertedHover: palette.white,
-        colorNeutralForegroundInvertedPressed: palette.white,
-        colorNeutralForegroundInvertedSelected: palette.white,
-        colorNeutralForegroundOnBrand: palette.white,
-        colorNeutralForegroundStaticInverted: palette.white,
-        colorNeutralForegroundInvertedLink: palette.white,
-        colorNeutralForegroundInvertedLinkHover: palette.white,
-        colorNeutralForegroundInvertedLinkPressed: palette.white,
-        colorNeutralForegroundInvertedLinkSelected: palette.white,
-        colorNeutralForegroundInverted2: palette.white,
-        colorBrandForegroundInverted: palette.themeSecondary,
-        colorBrandForegroundInvertedHover: palette.themeTertiary,
-        colorBrandForegroundInvertedPressed: palette.themeSecondary,
-        colorBrandForegroundOnLight: palette.themePrimary,
-        colorBrandForegroundOnLightHover: palette.themeDarkAlt,
-        colorBrandForegroundOnLightPressed: palette.themeDark,
-        colorBrandForegroundOnLightSelected: palette.themeDark,
-        colorNeutralBackground1: palette.white,
-        colorNeutralBackground1Hover: palette.neutralLighter,
-        colorNeutralBackground1Pressed: palette.neutralQuaternaryAlt,
-        colorNeutralBackground1Selected: palette.neutralLight,
-        colorNeutralBackground2: palette.neutralLighterAlt,
-        colorNeutralBackground2Hover: palette.neutralLighter,
-        colorNeutralBackground2Pressed: palette.neutralQuaternaryAlt,
-        colorNeutralBackground2Selected: palette.neutralLight,
-        colorNeutralBackground3: palette.neutralLighter,
-        colorNeutralBackground3Hover: palette.neutralLight,
-        colorNeutralBackground3Pressed: palette.neutralQuaternary,
-        colorNeutralBackground3Selected: palette.neutralQuaternaryAlt,
-        colorNeutralBackground4: palette.neutralLighter,
-        colorNeutralBackground4Hover: palette.neutralLighterAlt,
-        colorNeutralBackground4Pressed: palette.neutralLighter,
-        colorNeutralBackground4Selected: palette.white,
-        colorNeutralBackground5: palette.neutralLight,
-        colorNeutralBackground5Hover: palette.neutralLighter,
-        colorNeutralBackground5Pressed: palette.neutralLighter,
-        colorNeutralBackground5Selected: palette.neutralLighterAlt,
-        colorNeutralBackground6: palette.neutralLight,
-        colorNeutralBackgroundStatic: grey[20],
-        colorNeutralBackgroundInverted: palette.neutralSecondary,
-        colorNeutralBackgroundAlpha: inverted ? grey10Alpha[50] : whiteAlpha[50],
-        colorNeutralBackgroundAlpha2: inverted ? grey12Alpha[70] : whiteAlpha[80],
-        colorSubtleBackground: 'transparent',
-        colorSubtleBackgroundHover: palette.neutralLighter,
-        colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt,
-        colorSubtleBackgroundSelected: palette.neutralLight,
-        colorSubtleBackgroundLightAlphaHover: inverted ? whiteAlpha[10] : whiteAlpha[80],
-        colorSubtleBackgroundLightAlphaPressed: inverted ? whiteAlpha[5] : whiteAlpha[50],
-        colorSubtleBackgroundLightAlphaSelected: 'transparent',
-        colorSubtleBackgroundInverted: 'transparent',
-        colorSubtleBackgroundInvertedHover: blackAlpha[10],
-        colorSubtleBackgroundInvertedPressed: blackAlpha[30],
-        colorSubtleBackgroundInvertedSelected: blackAlpha[20],
-        colorTransparentBackground: 'transparent',
-        colorTransparentBackgroundHover: 'transparent',
-        colorTransparentBackgroundPressed: 'transparent',
-        colorTransparentBackgroundSelected: 'transparent',
-        colorNeutralBackgroundDisabled: palette.neutralLighter,
-        colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
-        colorNeutralStencil1: palette.neutralLight,
-        colorNeutralStencil2: palette.neutralLighterAlt,
-        colorNeutralStencil1Alpha: inverted ? whiteAlpha[10] : blackAlpha[10],
-        colorNeutralStencil2Alpha: inverted ? whiteAlpha[5] : blackAlpha[5],
-        colorBackgroundOverlay: blackAlpha[40],
-        colorScrollbarOverlay: blackAlpha[50],
-        colorBrandBackground: palette.themePrimary,
-        colorBrandBackgroundHover: palette.themeDarkAlt,
-        colorBrandBackgroundPressed: palette.themeDarker,
-        colorBrandBackgroundSelected: palette.themeDark,
-        colorCompoundBrandBackground: palette.themePrimary,
-        colorCompoundBrandBackgroundHover: palette.themeDarkAlt,
-        colorCompoundBrandBackgroundPressed: palette.themeDark,
-        colorBrandBackgroundStatic: palette.themePrimary,
-        colorBrandBackground2: palette.themeLighterAlt,
-        colorBrandBackground2Hover: palette.themeLighterAlt,
-        colorBrandBackground2Pressed: palette.themeLighterAlt,
-        colorBrandBackgroundInverted: palette.white,
-        colorBrandBackgroundInvertedHover: palette.themeLighterAlt,
-        colorBrandBackgroundInvertedPressed: palette.themeLight,
-        colorBrandBackgroundInvertedSelected: palette.themeLighter,
-        colorNeutralStrokeAccessible: palette.neutralSecondary,
-        colorNeutralStrokeAccessibleHover: palette.neutralSecondary,
-        colorNeutralStrokeAccessiblePressed: palette.neutralSecondary,
-        colorNeutralStrokeAccessibleSelected: palette.themePrimary,
-        colorNeutralStroke1: palette.neutralQuaternary,
-        colorNeutralStroke1Hover: palette.neutralTertiaryAlt,
-        colorNeutralStroke1Pressed: palette.neutralTertiaryAlt,
-        colorNeutralStroke1Selected: palette.neutralTertiaryAlt,
-        colorNeutralStroke2: palette.neutralQuaternaryAlt,
-        colorNeutralStroke3: palette.neutralLighter,
-        colorNeutralStrokeSubtle: palette.neutralQuaternaryAlt,
-        colorNeutralStrokeOnBrand: palette.white,
-        colorNeutralStrokeOnBrand2: palette.white,
-        colorNeutralStrokeOnBrand2Hover: palette.white,
-        colorNeutralStrokeOnBrand2Pressed: palette.white,
-        colorNeutralStrokeOnBrand2Selected: palette.white,
-        colorBrandStroke1: palette.themePrimary,
-        colorBrandStroke2: palette.themeLight,
-        colorBrandStroke2Hover: palette.themeLight,
-        colorBrandStroke2Pressed: palette.themeLight,
-        colorBrandStroke2Contrast: palette.themeLight,
-        colorCompoundBrandStroke: palette.themePrimary,
-        colorCompoundBrandStrokeHover: palette.themeDarkAlt,
-        colorCompoundBrandStrokePressed: palette.themeDark,
-        colorNeutralStrokeDisabled: palette.neutralQuaternaryAlt,
-        colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
-        colorTransparentStroke: 'transparent',
-        colorTransparentStrokeInteractive: 'transparent',
-        colorTransparentStrokeDisabled: 'transparent',
-        colorNeutralStrokeAlpha: inverted ? whiteAlpha[10] : blackAlpha[5],
-        colorNeutralStrokeAlpha2: whiteAlpha[20],
-        colorStrokeFocus1: palette.white,
-        colorStrokeFocus2: palette.black,
-        colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)',
-        colorNeutralShadowKey: 'rgba(0,0,0,0.14)',
-        colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
-        colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
-        colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
-        colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
-        colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
-        colorBrandShadowKey: 'rgba(0,0,0,0.25)'
-    };
+const _FileDownloadCards = (props) => {
+    var _a, _b;
+    const { userId, fileMetadata } = props;
+    const [showSpinner, setShowSpinner] = React.useState(false);
+    const localeStrings = useLocaleStringsTrampoline();
+    const downloadFileButtonString = React.useMemo(() => () => {
+        var _a, _b;
+        return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
+    }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
+    const isFileSharingAttachment = React.useCallback((attachment) => {
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        return attachment.attachmentType === 'fileSharing';
+    }, []);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const isShowDownloadIcon = React.useCallback((attachment) => {
+        var _a;
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        return attachment.attachmentType === 'fileSharing' && ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
+    }, []);
+    const fileCardGroupDescription = React.useMemo(() => () => {
+        var _a, _b;
+        const fileGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.fileCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.fileCardGroupMessage;
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        return _formatString(fileGroupLocaleString, {
+            fileCount: `${fileMetadata.filter(isFileSharingAttachment).length}`
+        });
+    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$y(void 0, void 0, void 0, function* () {
+        if (!props.downloadHandler) {
+            window.open(file.url, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            setShowSpinner(true);
+            try {
+                const response = yield props.downloadHandler(userId, file);
+                setShowSpinner(false);
+                if (response instanceof URL) {
+                    window.open(response.toString(), '_blank', 'noopener,noreferrer');
+                }
+                else {
+                    props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);
+                }
+            }
+            finally {
+                setShowSpinner(false);
+            }
+        }
+    }), [props]);
+    if (!fileMetadata ||
+        fileMetadata.length === 0 ||
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(isFileSharingAttachment)) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }
+    return (React__default["default"].createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
+        React__default["default"].createElement(_FileCardGroup, { ariaLabel: fileCardGroupDescription() }, fileMetadata &&
+            fileMetadata
+                .filter((attachment) => {
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                return isFileSharingAttachment(attachment);
+            })
+                .map((file) => (React__default["default"].createElement(react.TooltipHost, { content: downloadFileButtonString(), key: file.name },
+                React__default["default"].createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? (React__default["default"].createElement(react.Spinner, { size: react.SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                        isShowDownloadIcon(file) ? (React__default["default"].createElement(react.IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
+                        React__default["default"].createElement(DownloadIconTrampoline, null))) : undefined, actionHandler: () => fileDownloadHandler(userId, file) })))))));
+};
+/**
+ * @private
+ */
+const DownloadIconTrampoline = () => {
+    // @conditional-compile-remove(file-sharing)
+    return React__default["default"].createElement(react.Icon, { "data-ui-id": "file-download-card-download-icon", iconName: "DownloadFile", style: actionIconStyle });
+};
+const useLocaleStringsTrampoline = () => {
+    /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
+    return useLocale$1().strings.messageThread;
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+var __awaiter$x = (window && window.__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());
+    });
+};
+const generateDefaultTimestamp = (createdOn, showDate, strings) => {
+    const formattedTimestamp = showDate
+        ? formatTimestampForChatMessage(createdOn, new Date(), strings)
+        : formatTimeForChatMessage(createdOn);
+    return formattedTimestamp;
+};
+// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale
+const generateCustomizedTimestamp = (props, createdOn, locale) => {
+    /* @conditional-compile-remove(date-time-customization) */
+    return props.onDisplayDateTimeString
+        ? props.onDisplayDateTimeString(createdOn)
+        : locale.onDisplayDateTimeString
+            ? locale.onDisplayDateTimeString(createdOn)
+            : '';
+};
+/** @private */
+const MessageBubble = (props) => {
+    var _a;
+    const ids = useIdentifiers();
+    const theme = useTheme();
+    const locale = useLocale$1();
+    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler, 
+    /* @conditional-compile-remove(image-gallery) */
+    onInlineImageClicked, shouldOverlapAvatarAndMessage } = props;
+    const defaultTimeStamp = message.createdOn
+        ? generateDefaultTimestamp(message.createdOn, showDate, strings)
+        : undefined;
+    const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';
+    const formattedTimestamp = customTimestamp || defaultTimeStamp;
+    // Track if the action menu was opened by touch - if so we increase the touch targets for the items
+    const [wasInteractionByTouch, setWasInteractionByTouch] = React.useState(false);
+    // `focused` state is used for show/hide actionMenu
+    const [focused, setFocused] = React__default["default"].useState(false);
+    // The chat message action flyout should target the Chat.Message action menu if clicked,
+    // or target the chat message if opened via touch press.
+    // Undefined indicates the flyout menu should not be being shown.
+    const messageRef = React.useRef(null);
+    const messageActionButtonRef = React.useRef(null);
+    const [chatMessageActionFlyoutTarget, setChatMessageActionFlyoutTarget] = React.useState(undefined);
+    const chatActionsEnabled = !disableEditing &&
+        message.status !== 'sending' &&
+        !!message.mine &&
+        /* @conditional-compile-remove(data-loss-prevention) */ message.messageType !== 'blocked';
+    const [messageReadBy, setMessageReadBy] = React.useState([]);
+    const actionMenuProps = chatMessageActionMenuProps({
+        ariaLabel: (_a = strings.actionMenuMoreOptions) !== null && _a !== void 0 ? _a : '',
+        enabled: chatActionsEnabled,
+        menuButtonRef: messageActionButtonRef,
+        menuExpanded: chatMessageActionFlyoutTarget === messageActionButtonRef,
+        onActionButtonClick: () => {
+            if (message.messageType === 'chat') {
+                props.onActionButtonClick(message, setMessageReadBy);
+                setChatMessageActionFlyoutTarget(messageActionButtonRef);
+            }
+        },
+        theme
+    });
+    const onActionFlyoutDismiss = React.useCallback(() => {
+        // When the flyout dismiss is called, since we control if the action flyout is visible
+        // or not we need to set the target to undefined here to actually hide the action flyout
+        setChatMessageActionFlyoutTarget(undefined);
+    }, [setChatMessageActionFlyoutTarget]);
+    const defaultOnRenderFileDownloads = React.useCallback(() => (React__default["default"].createElement(_FileDownloadCards, { userId: userId, fileMetadata: message['attachedFilesMetadata'] || [], downloadHandler: fileDownloadHandler, 
+        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
+        strings: { downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage } })), [
+        userId,
+        message,
+        /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing)*/
+        strings,
+        fileDownloadHandler
+    ]);
+    const editedOn = 'editedOn' in message ? message.editedOn : undefined;
+    const getMessageDetails = React.useCallback(() => {
+        if (messageStatus === 'failed') {
+            return React__default["default"].createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag);
+        }
+        else if (message.messageType === 'chat' && editedOn) {
+            return React__default["default"].createElement("div", { className: chatMessageEditedTagStyle(theme) }, strings.editedTag);
+        }
+        return undefined;
+    }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
+    /* @conditional-compile-remove(image-gallery) */
+    const handleOnInlineImageClicked = React.useCallback((attachmentId) => __awaiter$x(void 0, void 0, void 0, function* () {
+        if (onInlineImageClicked === undefined) {
+            return;
+        }
+        yield onInlineImageClicked(attachmentId, message.messageId);
+    }), [message, onInlineImageClicked]);
+    const getContent = React.useCallback(() => {
+        /* @conditional-compile-remove(data-loss-prevention) */
+        if (message.messageType === 'blocked') {
+            return (React__default["default"].createElement("div", { tabIndex: 0 },
+                React__default["default"].createElement(BlockedMessageContent, { message: message, strings: strings })));
+        }
+        return (React__default["default"].createElement("div", { tabIndex: 0, className: "ui-chat__message__content" },
+            React__default["default"].createElement(ChatMessageContent, { message: message, strings: 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: props.mentionDisplayOptions, 
+                /* @conditional-compile-remove(image-gallery) */
+                onInlineImageClicked: handleOnInlineImageClicked }),
+            props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()));
+    }, [
+        defaultOnRenderFileDownloads,
+        message,
+        props,
+        strings,
+        userId,
+        /* @conditional-compile-remove(image-gallery) */
+        handleOnInlineImageClicked
+    ]);
+    const isBlockedMessage = /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
+    const chatMyMessageStyles = useChatMyMessageStyles();
+    const chatMessageCommonStyles = useChatMessageCommonStyles();
+    const chatMessageStyles = useChatMessageStyles();
+    const chatItemMessageContainerClassName = reactComponents.mergeClasses(
+    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
+    chatMessageStyles.body, isBlockedMessage
+        ? chatMessageCommonStyles.blocked
+        : props.message.status === 'failed'
+            ? chatMessageCommonStyles.failed
+            : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false
+        ? chatMessageStyles.bodyWithAvatar
+        : chatMessageStyles.bodyWithoutAvatar, react.mergeStyles(messageContainerStyle));
+    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
+    const chatMessage = (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { key: props.message.messageId }, message.mine ? (React__default["default"].createElement(reactChat.ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
+                // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
+                className: reactComponents.mergeClasses(chatMyMessageStyles.body, isBlockedMessage
+                    ? chatMessageCommonStyles.blocked
+                    : props.message.status === 'failed'
+                        ? chatMessageCommonStyles.failed
+                        : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, react.mergeStyles(messageContainerStyle)),
+                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
+                ref: messageRef
+            }, root: {
+                className: chatMyMessageStyles.root,
+                onBlur: (e) => {
+                    // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
+                    // with keyboard the focused element will be changed and there is no way to use `:focus` selector
+                    if (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current) {
+                        // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu
+                        return;
+                    }
+                    const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);
+                    setFocused(shouldPreserveFocusState);
+                },
+                onFocus: () => {
+                    // react onFocus is called even when nested component receives focus (i.e. it bubbles)
+                    // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible
+                    setFocused(true);
+                },
+                // make body not focusable to remove repetitions from narrators.
+                // inner components are already focusable
+                role: 'none',
+                tabIndex: -1
+            }, "data-ui-id": "chat-composite-message", author: React__default["default"].createElement(react.Text, { className: chatMessageDateStyle, tabIndex: 0 }, message.senderDisplayName), timestamp: React__default["default"].createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp, tabIndex: 0 }, formattedTimestamp), details: getMessageDetails(), actions: {
+                children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
+                className: reactComponents.mergeClasses(chatMyMessageStyles.menu, 
+                // Make actions menu visible when the message is focused or the flyout is shown
+                focused || (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current)
+                    ? chatMyMessageStyles.menuVisible
+                    : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)
+            }, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onClick: () => {
+                if (!wasInteractionByTouch) {
+                    return;
+                }
+                // If the message was touched via touch we immediately open the menu
+                // flyout (when using mouse the 3-dot menu that appears on hover
+                // must be clicked to open the flyout).
+                // In doing so here we set the target of the flyout to be the message and
+                // not the 3-dot menu button to position the flyout correctly.
+                setChatMessageActionFlyoutTarget(messageRef);
+                if (message.messageType === 'chat') {
+                    props.onActionButtonClick(message, setMessageReadBy);
+                }
+            } }, getContent())) : (React__default["default"].createElement(reactChat.ChatMessage, { attached: attached, key: props.message.messageId, root: {
+                className: chatMessageStyles.root,
+                // make body not focusable to remove repetitions from narrators.
+                // inner components are already focusable
+                tabIndex: -1,
+                role: 'none'
+            }, author: React__default["default"].createElement(react.Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
+                className: chatItemMessageContainerClassName,
+                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
+            }, "data-ui-id": "chat-composite-message", timestamp: React__default["default"].createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp) }, getContent()))),
+        chatActionsEnabled && (React__default["default"].createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }))));
+    return chatMessage;
 };
-/**
- * Creates v9 shadow tokens from v8 effects.
- */
-const mapShadowTokens = (effects) => {
-    return {
-        shadow4: effects.elevation4,
-        shadow8: effects.elevation8,
-        shadow16: effects.elevation16,
-        shadow64: effects.elevation64
-    };
+/** @private */
+const ChatMessageComponentAsMessageBubble = React__default["default"].memo(MessageBubble);
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+var __awaiter$w = (window && window.__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());
+    });
 };
 /**
- * Creates v9 border radius tokens from v8 effects
+ * @private
  */
-const mapBorderRadiusTokens = (effects) => {
-    return {
-        borderRadiusSmall: effects.roundedCorner2,
-        borderRadiusMedium: effects.roundedCorner4,
-        borderRadiusLarge: effects.roundedCorner6
-    };
+const ChatMessageComponent = (props) => {
+    var _a, _b;
+    const { onDeleteMessage, onSendMessage, message } = props;
+    const [isEditing, setIsEditing] = React.useState(false);
+    const onEditClick = React.useCallback(() => setIsEditing(true), [setIsEditing]);
+    const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;
+    const content = 'content' in message ? message.content : undefined;
+    const onRemoveClick = React.useCallback(() => {
+        if (onDeleteMessage && message.messageId) {
+            onDeleteMessage(message.messageId);
+        }
+        // when fail to send, message does not have message id, delete message using clientMessageId
+        else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {
+            onDeleteMessage(clientMessageId);
+        }
+    }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);
+    const onResendClick = React.useCallback(() => {
+        onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);
+        onSendMessage && onSendMessage(content !== undefined ? content : '');
+    }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
+    if (isEditing && message.messageType === 'chat') {
+        return (React__default["default"].createElement(ChatMessageComponentAsEditBox, { message: message, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$w(void 0, void 0, void 0, function* () {
+                props.onUpdateMessage &&
+                    message.messageId &&
+                    (yield props.onUpdateMessage(message.messageId, text, metadata, options));
+                setIsEditing(false);
+            }), 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__default["default"].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 })));
+    }
 };
+
+// Copyright (c) Microsoft Corporation.
 /**
- * Creates a v9 theme from a v8 theme and base v9 theme.
- * FluentUI webLightTheme is used in case if no baseThemeV9 is provided.
+ * The component for rendering a chat message using Fluent UI components
+ * and handling default and custom renderers.
+ * This component handles rendering for chat message body, avatar and message status.
+ * The chat message body, avatar and message status should be shown for both default and custom renderers.
  *
  * @private
  */
-const createV9Theme = (themeV8, baseThemeV9) => {
-    const baseTheme = baseThemeV9 !== null && baseThemeV9 !== void 0 ? baseThemeV9 : reactComponents.webLightTheme;
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, baseTheme), mapAliasColors(themeV8.palette, themeV8.isInverted)), mapShadowTokens(themeV8.effects)), mapBorderRadiusTokens(themeV8.effects)), { colorBrandBackground2: themeV8.palette.themeLight, colorBrandBackground2Hover: themeV8.palette.themeLight, colorBrandBackground2Pressed: themeV8.palette.themeLight, colorStatusWarningBackground3: '#D83B01', errorText: themeV8.semanticColors.errorText, colorNeutralStroke1Selected: themeV8.palette.neutralQuaternary, colorNeutralForeground2: themeV8.palette.neutralSecondary, colorBrandForegroundLink: themeV8.palette.themePrimary, colorBrandForegroundLinkHover: themeV8.palette.themeDarker, 
-        // Fix for an issue with black borders for iOS that are added with 'after' selector
-        colorStrokeFocus2: 'transparent' });
+const FluentChatMessageComponentWrapper = (props) => {
+    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick, 
+    /* @conditional-compile-remove(date-time-customization) */
+    onDisplayDateTimeString, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    onFetchInlineAttachment, 
+    /* @conditional-compile-remove(image-gallery) */
+    onInlineImageClicked, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    inlineAttachments, 
+    /* @conditional-compile-remove(mention) */
+    mentionOptions, 
+    /* @conditional-compile-remove(file-sharing) */
+    fileDownloadHandler, userId, 
+    /* @conditional-compile-remove(file-sharing) */
+    onRenderFileDownloads, defaultStatusRenderer, statusToRender } = props;
+    const chatMessageRenderStyles = useChatMessageRenderStyles();
+    const onRenderFileDownloadsMemo = React.useMemo(() => {
+        /* @conditional-compile-remove(file-sharing) */
+        return onRenderFileDownloads;
+    }, [/* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads]);
+    // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
+    // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
+    const defaultChatMessageRenderer = React.useCallback((messageProps) => {
+        var _a;
+        if (messageProps.message.messageType === 'chat' ||
+            /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
+            return (React__default["default"].createElement(ChatMessageComponent, Object.assign({}, messageProps, { 
+                /* @conditional-compile-remove(file-sharing) */
+                onRenderFileDownloads: onRenderFileDownloadsMemo, 
+                /* @conditional-compile-remove(file-sharing) */
+                strings: messageProps.strings, message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick, 
+                /* @conditional-compile-remove(date-time-customization) */
+                onDisplayDateTimeString: onDisplayDateTimeString, 
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                onFetchAttachments: onFetchInlineAttachment, 
+                /* @conditional-compile-remove(image-gallery) */
+                onInlineImageClicked: onInlineImageClicked, 
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                attachmentsMap: (_a = inlineAttachments[messageProps.message.messageId]) !== null && _a !== void 0 ? _a : {}, 
+                /* @conditional-compile-remove(mention) */
+                mentionOptions: mentionOptions, 
+                /* @conditional-compile-remove(file-sharing) */
+                fileDownloadHandler: fileDownloadHandler })));
+        }
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }, [
+        onActionButtonClick,
+        onRenderAvatar,
+        onRenderFileDownloadsMemo,
+        participantCount,
+        shouldOverlapAvatarAndMessage,
+        showMessageStatus,
+        userId,
+        /* @conditional-compile-remove(date-time-customization) */
+        onDisplayDateTimeString,
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        onFetchInlineAttachment,
+        /* @conditional-compile-remove(image-gallery) */
+        onInlineImageClicked,
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        inlineAttachments,
+        /* @conditional-compile-remove(mention) */
+        mentionOptions,
+        /* @conditional-compile-remove(file-sharing) */
+        fileDownloadHandler,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        new Date().toDateString()
+    ]);
+    const messageRenderer = React.useCallback((messageProps) => {
+        return onRenderMessage === undefined
+            ? defaultChatMessageRenderer(Object.assign({}, messageProps))
+            : onRenderMessage(messageProps, defaultChatMessageRenderer);
+    }, [defaultChatMessageRenderer, onRenderMessage]);
+    const messageStatusRenderer = React.useCallback((onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) => {
+        return showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: message.status })) : (defaultStatusRenderer(message, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0, message.status))) : (React__default["default"].createElement("div", { className: react.mergeStyles(noMessageStatusStyle) }));
+    }, [message, statusToRender]);
+    const shouldShowAvatar = React.useMemo(() => {
+        return message.attached === 'top' || message.attached === false;
+    }, [message.attached]);
+    const attached = React.useMemo(() => {
+        return shouldShowAvatar ? 'top' : 'center';
+    }, [shouldShowAvatar]);
+    const myMessageRootProps = React.useMemo(() => {
+        return {
+            // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
+            className: reactComponents.mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, react.mergeStyles(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer)),
+            style: (styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer) !== undefined
+                ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer)
+                : {},
+            role: 'none'
+        };
+    }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMyMessage, styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer]);
+    const myMessageBodyProps = React.useMemo(() => {
+        return {
+            className: reactComponents.mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),
+            // make body not focusable to remove repetitions from narrators.
+            // inner components are already focusable
+            tabIndex: -1,
+            role: 'none'
+        };
+    }, [chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage]);
+    const myMessageStatusIcon = React.useMemo(() => {
+        var _a;
+        return (React__default["default"].createElement("div", { className: react.mergeStyles({ paddingLeft: '0.25rem' }, (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_a = message.mine) !== null && _a !== void 0 ? _a : false) : '') }, message.status
+            ? messageStatusRenderer(onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount)
+            : undefined));
+    }, [
+        defaultStatusRenderer,
+        message.mine,
+        message.status,
+        messageStatusRenderer,
+        onRenderMessageStatus,
+        participantCount,
+        readCount,
+        showMessageStatus,
+        styles
+    ]);
+    const messageRootProps = React.useMemo(() => {
+        return { className: reactComponents.mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };
+    }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);
+    const messageBodyProps = React.useMemo(() => {
+        return {
+            // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
+            className: reactComponents.mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, react.mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
+            style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) : {},
+            // make body not focusable to remove repetitions from narrators.
+            // inner components are already focusable
+            tabIndex: -1,
+            role: 'none'
+        };
+    }, [
+        chatMessageRenderStyles.avatarNoOverlap,
+        chatMessageRenderStyles.avatarOverlap,
+        chatMessageRenderStyles.bodyCommon,
+        chatMessageRenderStyles.bodyWithAvatar,
+        chatMessageRenderStyles.bodyWithoutAvatar,
+        shouldOverlapAvatarAndMessage,
+        shouldShowAvatar,
+        styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer
+    ]);
+    const avatar = React.useMemo(() => {
+        const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
+        const personaOptions = {
+            hidePersonaDetails: true,
+            size: react.PersonaSize.size32,
+            text: message.senderDisplayName,
+            showOverflowTooltip: false
+        };
+        return (React__default["default"].createElement("div", { className: react.mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React__default["default"].createElement(react.Persona, Object.assign({}, personaOptions))));
+    }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
+    // Fluent UI message components are used here as for default message renderer,
+    // timestamp and author name should be shown but they aren't shown for custom renderer.
+    // More investigations are needed to check if this can be simplified with states.
+    // Status and avatar should be shown for both custom and default renderers.
+    if (message.mine === true) {
+        return (React__default["default"].createElement("div", null,
+            React__default["default"].createElement(reactChat.ChatMyMessage, { attached: attached, root: myMessageRootProps, body: myMessageBodyProps, statusIcon: myMessageStatusIcon }, messageRenderer(Object.assign({}, props)))));
+    }
+    else {
+        return (React__default["default"].createElement("div", null,
+            React__default["default"].createElement(reactChat.ChatMessage, { attached: attached, root: messageRootProps, body: messageBodyProps, avatar: avatar }, messageRenderer(Object.assign({}, props)))));
+    }
 };
 
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
  */
-const useFluentV9Wrapper = reactComponents.makeStyles({
-    body: Object.assign(Object.assign(Object.assign(Object.assign({ height: '100%' }, reactComponents.shorthands.margin(0)), reactComponents.shorthands.overflow('hidden')), reactComponents.shorthands.padding(0)), { width: '100%' })
+const systemMessageIconStyle = react.mergeStyles({
+    marginInlineEnd: '0.688rem'
 });
+
+// Copyright (c) Microsoft Corporation.
 /**
  * @private
  */
-const FluentV9ThemeProvider = (props) => {
-    const { v8Theme, children } = props;
-    const v9Theme = createV9Theme(v8Theme);
-    const dir = v8Theme.rtl ? 'rtl' : 'ltr';
-    return (
-    // TextDirectionProvider is needed to fix issue with direction value update in FluentProvider
-    React__default["default"].createElement(react$1.TextDirectionProvider, { dir: dir },
-        React__default["default"].createElement(FluentProviderWithStylesOverrides, { theme: v9Theme, dir: dir }, children)));
-};
-const FluentProviderWithStylesOverrides = (props) => {
-    const classes = useFluentV9Wrapper();
-    return React__default["default"].createElement(reactComponents.FluentProvider, Object.assign({}, props, { className: classes.body }));
+const SystemMessage = (props) => {
+    const { iconName, content } = props;
+    const Icon = React__default["default"].createElement(react.FontIcon, { iconName: iconName, className: react.mergeStyles(systemMessageIconStyle) });
+    return (React__default["default"].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle), tabIndex: 0 },
+        Icon,
+        React__default["default"].createElement(react.Text, { style: { wordBreak: 'break-word' }, role: "status", title: content, variant: 'small' }, content)));
 };
 
 // Copyright (c) Microsoft Corporation.
-const offScreenStyle = {
-    border: 0,
-    clip: 'rect(0 0 0 0)',
-    height: '1px',
-    margin: '-1px',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    padding: 0,
-    width: '1px',
-    position: 'absolute'
+/**
+ * @private
+ */
+const DefaultSystemMessage = (props) => {
+    var _a;
+    const message = props.message;
+    switch (message.messageType) {
+        case 'system':
+            switch (message.systemMessageType) {
+                case 'content':
+                    return (React__default["default"].createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
+                case 'participantAdded':
+                case 'participantRemoved':
+                    return (React__default["default"].createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub }));
+            }
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+};
+const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
+    const { strings } = useLocale$1();
+    const participantsStr = generateParticipantsStr(message.participants, defaultName);
+    const messageSuffix = message.systemMessageType === 'participantAdded'
+        ? strings.messageThread.participantJoined
+        : strings.messageThread.participantLeft;
+    if (participantsStr !== '') {
+        return (React__default["default"].createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
 };
-/** @private */
-const MessageBlock = (props) => (React__default["default"].createElement("div", { style: offScreenStyle, role: "log", "aria-live": props.ariaLive }, props.message ? props.message : ''));
+const generateParticipantsStr = (participants, defaultName) => participants
+    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
+    .join(', ');
 
 // Copyright (c) Microsoft Corporation.
-/** @private */
-const EMPTY_MESSAGE = { message: '', id: '' };
-/** @private */
-const Announcer = (props) => {
+/**
+ * The wrapper component to display different types of chat message.
+ *
+ * @private
+ */
+const ChatMessageComponentWrapper = (props) => {
     var _a, _b;
-    const newAssertive = (_a = props.assertive) !== null && _a !== void 0 ? _a : EMPTY_MESSAGE;
-    const oldAssertive = React__default["default"].useRef(EMPTY_MESSAGE);
-    const [activeAssertive1, setActiveAssertive1] = React__default["default"].useState(EMPTY_MESSAGE);
-    const [activeAssertive2, setActiveAssertive2] = React__default["default"].useState(EMPTY_MESSAGE);
-    const alternateAssertive = React__default["default"].useRef(false);
-    React.useEffect(() => {
-        if (oldAssertive.current.message !== (newAssertive === null || newAssertive === void 0 ? void 0 : newAssertive.message) || oldAssertive.current.id !== (newAssertive === null || newAssertive === void 0 ? void 0 : newAssertive.id)) {
-            setActiveAssertive1(alternateAssertive.current ? EMPTY_MESSAGE : newAssertive);
-            setActiveAssertive2(alternateAssertive.current ? newAssertive : EMPTY_MESSAGE);
-            oldAssertive.current = newAssertive;
-            alternateAssertive.current = !alternateAssertive.current;
-        }
-    }, [newAssertive]);
-    const newPolite = (_b = props.polite) !== null && _b !== void 0 ? _b : EMPTY_MESSAGE;
-    const oldPolite = React__default["default"].useRef(EMPTY_MESSAGE);
-    const [activePolite1, setActivePolite1] = React__default["default"].useState(EMPTY_MESSAGE);
-    const [activePolite2, setActivePolite2] = React__default["default"].useState(EMPTY_MESSAGE);
-    const alternatePolite = React__default["default"].useRef(false);
-    React.useEffect(() => {
-        if (oldPolite.current.message !== (newPolite === null || newPolite === void 0 ? void 0 : newPolite.message) || oldPolite.current.id !== (newPolite === null || newPolite === void 0 ? void 0 : newPolite.id)) {
-            setActivePolite1(alternatePolite.current ? EMPTY_MESSAGE : newPolite);
-            setActivePolite2(alternatePolite.current ? newPolite : EMPTY_MESSAGE);
-            oldPolite.current = newPolite;
-            alternatePolite.current = !alternatePolite.current;
-        }
-    }, [newPolite]);
-    return (React__default["default"].createElement("div", null,
-        React__default["default"].createElement(MessageBlock, { ariaLive: "assertive", message: activeAssertive1.message }),
-        React__default["default"].createElement(MessageBlock, { ariaLive: "assertive", message: activeAssertive2.message }),
-        React__default["default"].createElement(MessageBlock, { ariaLive: "polite", message: activePolite1.message }),
-        React__default["default"].createElement(MessageBlock, { ariaLive: "polite", message: activePolite2.message })));
-};
-
-// Copyright (c) Microsoft Corporation.
-/** @private */
-const LiveAnnouncer = (props) => {
-    const [politeMessage, setPoliteMessage] = React__default["default"].useState(EMPTY_MESSAGE);
-    const [assertiveMessage, setAssertiveMessage] = React__default["default"].useState(EMPTY_MESSAGE);
-    const announcePolite = React.useCallback((message, id) => {
-        setPoliteMessage({ message, id });
+    const { message, styles, onRenderMessage, key: messageKey } = props;
+    const systemMessageStyle = React.useMemo(() => {
+        return {
+            paddingTop: '0.5rem'
+        };
     }, []);
-    const announceAssertive = React.useCallback((message, id) => {
-        setAssertiveMessage({ message, id });
+    const customMessageStyle = React.useMemo(() => {
+        return { paddingTop: '1rem', paddingBottom: '0.25rem' };
     }, []);
-    const updateFunctions = React.useMemo(() => ({
-        announcePolite,
-        announceAssertive
-    }), [announceAssertive, announcePolite]);
-    return (React__default["default"].createElement(AnnouncerContext.Provider, { value: updateFunctions },
-        props.children,
-        React__default["default"].createElement(Announcer, { assertive: assertiveMessage, polite: politeMessage })));
+    /* @conditional-compile-remove(data-loss-prevention) */
+    // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)
+    if (message.messageType === 'blocked') {
+        const myChatMessageStyle = message.status === 'failed'
+            ? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
+            : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
+        const blockedMessageStyle = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer;
+        const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
+        return (React__default["default"].createElement(FluentChatMessageComponentWrapper, Object.assign({}, props, { message: message, messageContainerStyle: messageContainerStyle })));
+    }
+    switch (message.messageType) {
+        case 'chat': {
+            const myChatMessageStyle = message.status === 'failed'
+                ? (_b = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _b !== void 0 ? _b : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
+                : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
+            const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
+            const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
+            return (React__default["default"].createElement(FluentChatMessageComponentWrapper, Object.assign({}, props, { message: message, messageContainerStyle: messageContainerStyle })));
+        }
+        case 'system': {
+            const messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
+            const systemMessageComponent = onRenderMessage === undefined ? (React__default["default"].createElement(DefaultSystemMessage, Object.assign({}, props))) : (onRenderMessage(Object.assign(Object.assign({}, props), { messageContainerStyle }), (props) => React__default["default"].createElement(DefaultSystemMessage, Object.assign({}, props))));
+            return (React__default["default"].createElement("div", { key: messageKey, style: systemMessageStyle }, systemMessageComponent));
+        }
+        default: {
+            // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
+            const customMessageComponent = onRenderMessage === undefined ? React__default["default"].createElement(React__default["default"].Fragment, null) : onRenderMessage(Object.assign({}, props));
+            return (React__default["default"].createElement("div", { key: messageKey, style: customMessageStyle }, customMessageComponent));
+        }
+    }
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10706,38 +10969,37 @@ const DefaultJumpToNewMessageButton = (props) => {
     const { text, onClick } = props;
     return (React__default["default"].createElement(react.PrimaryButton, { className: newMessageButtonStyle, styles: buttonWithIconStyles$1, text: text, onClick: onClick, onRenderIcon: () => React__default["default"].createElement(react.Icon, { iconName: "Down", className: DownIconStyle }) }));
 };
-const generateParticipantsStr = (participants, defaultName) => participants
-    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
-    .join(', ');
-const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
-    const { strings } = useLocale$1();
-    const participantsStr = generateParticipantsStr(message.participants, defaultName);
-    const messageSuffix = message.systemMessageType === 'participantAdded'
-        ? strings.messageThread.participantJoined
-        : strings.messageThread.participantLeft;
-    if (participantsStr !== '') {
-        return (React__default["default"].createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
-    }
-    return React__default["default"].createElement(React__default["default"].Fragment, null);
-};
-const DefaultSystemMessage = (props) => {
-    var _a;
-    const message = props.message;
-    switch (message.messageType) {
-        case 'system':
-            switch (message.systemMessageType) {
-                case 'content':
-                    return (React__default["default"].createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
-                case 'participantAdded':
-                case 'participantRemoved':
-                    return (React__default["default"].createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub }));
+const memoizeAllMessages = memoizeFnAll((message, showMessageDate, showMessageStatus, strings, index, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, disableEditing, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage) => {
+    let key = message.messageId;
+    let statusToRender = undefined;
+    if (message.messageType === 'chat' ||
+        /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked') {
+        if ((!message.messageId || message.messageId === '') && 'clientMessageId' in message) {
+            key = message.clientMessageId;
+        }
+        if (showMessageStatus && message.mine) {
+            switch (message.messageId) {
+                case lastSeenChatMessage: {
+                    statusToRender = 'seen';
+                    break;
+                }
+                case lastSendingChatMessage: {
+                    statusToRender = 'sending';
+                    break;
+                }
+                case lastDeliveredChatMessage: {
+                    statusToRender = 'delivered';
+                    break;
+                }
             }
+        }
+        if (message.mine && message.status === 'failed') {
+            statusToRender = 'failed';
+        }
     }
-    return React__default["default"].createElement(React__default["default"].Fragment, null);
-};
-const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, chatMessageRenderStyles, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, disableEditing) => {
-    var _a, _b;
-    const messageProps = {
+    return {
+        key: key !== null && key !== void 0 ? key : 'id_' + index,
+        statusToRender,
         message,
         strings,
         showDate: showMessageDate,
@@ -10745,92 +11007,9 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
         onCancelEditMessage,
         onDeleteMessage,
         onSendMessage,
-        disableEditing
-    };
-    const chatMessage = (message, messageProps) => {
-        var _a;
-        const messageStatusRenderer = showMessageStatus && statusToRender
-            ? onRenderMessageStatus
-                ? (status) => onRenderMessageStatus({ status })
-                : (status) => defaultStatusRenderer(message, status, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0)
-            : () => React__default["default"].createElement("div", { className: react.mergeStyles(noMessageStatusStyle) });
-        let chatMessageComponent;
-        const shouldShowAvatar = message.attached === 'top' || message.attached === false;
-        const attached = shouldShowAvatar ? 'top' : 'center';
-        if (message.mine === true) {
-            chatMessageComponent = (React__default["default"].createElement(reactChat.ChatMyMessage, { attached: attached, root: {
-                    // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
-                    className: reactComponents.mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, react.mergeStyles(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer)),
-                    style: (styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer) !== undefined
-                        ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer)
-                        : {},
-                    role: 'none'
-                }, body: {
-                    className: reactComponents.mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),
-                    // make body not focusable to remove repetitions from narrators.
-                    // inner components are already focusable
-                    tabIndex: -1,
-                    role: 'none'
-                }, statusIcon: React__default["default"].createElement("div", { className: react.mergeStyles({ paddingLeft: '0.25rem' }, (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_a = message.mine) !== null && _a !== void 0 ? _a : false) : '') }, message.status ? messageStatusRenderer(message.status) : undefined) }, onRenderMessage === undefined
-                ? defaultChatMessageRenderer(Object.assign(Object.assign({}, messageProps), { messageStatusRenderer }))
-                : onRenderMessage(messageProps, defaultChatMessageRenderer)));
-        }
-        else {
-            const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
-            const personaOptions = {
-                hidePersonaDetails: true,
-                size: react.PersonaSize.size32,
-                text: message.senderDisplayName,
-                showOverflowTooltip: false
-            };
-            chatMessageComponent = (React__default["default"].createElement(reactChat.ChatMessage, { attached: attached, root: { className: reactComponents.mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) }, body: {
-                    // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
-                    className: reactComponents.mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage
-                        ? chatMessageRenderStyles.avatarOverlap
-                        : chatMessageRenderStyles.avatarNoOverlap, react.mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
-                    style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined
-                        ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)
-                        : {},
-                    // make body not focusable to remove repetitions from narrators.
-                    // inner components are already focusable
-                    tabIndex: -1,
-                    role: 'none'
-                }, avatar: React__default["default"].createElement("div", { className: react.mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React__default["default"].createElement(react.Persona, Object.assign({}, personaOptions))) }, onRenderMessage === undefined
-                ? defaultChatMessageRenderer(Object.assign(Object.assign({}, messageProps), { messageStatusRenderer }))
-                : onRenderMessage(messageProps, defaultChatMessageRenderer)));
-        }
-        return React__default["default"].createElement("div", { key: _messageKey }, chatMessageComponent);
+        disableEditing,
+        showMessageStatus
     };
-    /* @conditional-compile-remove(data-loss-prevention) */
-    // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)
-    if (message.messageType === 'blocked') {
-        const myChatMessageStyle = message.status === 'failed'
-            ? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
-            : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
-        const blockedMessageStyle = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer;
-        messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
-        return chatMessage(message, messageProps);
-    }
-    switch (message.messageType) {
-        case 'chat': {
-            const myChatMessageStyle = message.status === 'failed'
-                ? (_b = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _b !== void 0 ? _b : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
-                : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
-            const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
-            messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
-            return chatMessage(message, messageProps);
-        }
-        case 'system': {
-            messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
-            const systemMessageComponent = onRenderMessage === undefined ? (React__default["default"].createElement(DefaultSystemMessage, Object.assign({}, messageProps))) : (onRenderMessage(messageProps, (props) => React__default["default"].createElement(DefaultSystemMessage, Object.assign({}, props))));
-            return (React__default["default"].createElement("div", { key: _messageKey, style: { paddingTop: '0.5rem' } }, systemMessageComponent));
-        }
-        default: {
-            // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
-            const customMessageComponent = onRenderMessage === undefined ? React__default["default"].createElement(React__default["default"].Fragment, null) : onRenderMessage(messageProps);
-            return (React__default["default"].createElement("div", { key: _messageKey, style: { paddingTop: '1rem', paddingBottom: '0.25rem' } }, customMessageComponent));
-        }
-    }
 });
 const getLastChatMessageIdWithStatus = (messages, status) => {
     for (let i = messages.length - 1; i >= 0; i--) {
@@ -10874,9 +11053,9 @@ const MessageThreadWrapper = (props) => {
     /* @conditional-compile-remove(mention) */
     mentionOptions, 
     /* @conditional-compile-remove(image-gallery) */
-    onInlineImageClicked } = props;
-    const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
-    const [messages, setMessages] = React.useState([]);
+    onInlineImageClicked, 
+    /* @conditional-compile-remove(file-sharing) */
+    onRenderFileDownloads } = props;
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
     // Otherwise chatScrollDivRef.current.clientHeight is wrong if we scroll to bottom before messages are initialized.
     const [chatMessagesInitialized, setChatMessagesInitialized] = React.useState(false);
@@ -10895,19 +11074,24 @@ const MessageThreadWrapper = (props) => {
     const [inlineAttachments, setInlineAttachments] = React.useState({});
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const onFetchInlineAttachment = React.useCallback((attachments, messageId) => __awaiter$v(void 0, void 0, void 0, function* () {
-        if (!onFetchAttachments) {
+        if (!onFetchAttachments || attachments.length === 0) {
             return;
         }
         const attachmentDownloadResult = yield onFetchAttachments(attachments);
-        const listOfAttachments = inlineAttachments[messageId];
-        for (const result of attachmentDownloadResult) {
-            const { attachmentId, blobUrl } = result;
-            listOfAttachments[attachmentId] = blobUrl;
-        }
-        if (Object.keys(listOfAttachments).length > 0) {
-            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [messageId]: listOfAttachments })));
+        if (attachmentDownloadResult.length > 0) {
+            setInlineAttachments((prev) => {
+                var _a;
+                // The new state should always be based on the previous one
+                // otherwise there can be issues with renders
+                const listOfAttachments = (_a = prev[messageId]) !== null && _a !== void 0 ? _a : {};
+                for (const result of attachmentDownloadResult) {
+                    const { attachmentId, blobUrl } = result;
+                    listOfAttachments[attachmentId] = blobUrl;
+                }
+                return Object.assign(Object.assign({}, prev), { [messageId]: listOfAttachments });
+            });
         }
-    }), [inlineAttachments, onFetchAttachments]);
+    }), [onFetchAttachments]);
     const isAllChatMessagesLoadedRef = React.useRef(false);
     // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
     // onLoadPreviousChatMessages is updated when a new adapter is set
@@ -10925,10 +11109,12 @@ const MessageThreadWrapper = (props) => {
     const messageIdSeenByMeRef = React.useRef('');
     const chatScrollDivRef = React.useRef(null);
     const isLoadingChatMessagesRef = React.useRef(false);
+    const messages = React.useMemo(() => {
+        return newMessages;
+    }, [newMessages]);
     const messagesRef = React.useRef(messages);
     const setMessagesRef = (messagesWithAttachedValue) => {
         messagesRef.current = messagesWithAttachedValue;
-        setMessages(messagesWithAttachedValue);
     };
     const isAtBottomOfScrollRef = React.useRef(isAtBottomOfScroll);
     const setIsAtBottomOfScrollRef = (isAtBottomOfScrollValue) => {
@@ -11114,52 +11300,7 @@ const MessageThreadWrapper = (props) => {
     }, []);
     const localeStrings = useLocale$1().strings.messageThread;
     const strings = React.useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
-    // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp need to be regenerated)
-    const defaultChatMessageRenderer = React.useCallback((messageProps) => {
-        var _a;
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        if (inlineAttachments[messageProps.message.messageId] === undefined) {
-            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [messageProps.message.messageId]: {} })));
-        }
-        if (messageProps.message.messageType === 'chat' ||
-            /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
-            return (React__default["default"].createElement(ChatMessageComponent, Object.assign({}, messageProps, { onRenderFileDownloads: onRenderFileDownloads, 
-                /* @conditional-compile-remove(file-sharing) */
-                strings: strings, message: messageProps.message, userId: props.userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo, 
-                /* @conditional-compile-remove(date-time-customization) */
-                onDisplayDateTimeString: onDisplayDateTimeString, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                onFetchAttachments: onFetchInlineAttachment, 
-                /* @conditional-compile-remove(image-gallery) */
-                onInlineImageClicked: onInlineImageClicked, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                attachmentsMap: (_a = inlineAttachments[messageProps.message.messageId]) !== null && _a !== void 0 ? _a : {}, 
-                /* @conditional-compile-remove(mention) */
-                mentionOptions: mentionOptions })));
-        }
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
-    }, [
-        onRenderFileDownloads,
-        /* @conditional-compile-remove(file-sharing) */
-        strings,
-        props.userId,
-        participantCount,
-        isNarrow,
-        onRenderAvatar,
-        showMessageStatus,
-        onActionButtonClickMemo,
-        /* @conditional-compile-remove(date-time-customization) */
-        onDisplayDateTimeString,
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        onFetchInlineAttachment,
-        /* @conditional-compile-remove(image-gallery) */
-        onInlineImageClicked,
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        inlineAttachments,
-        /* @conditional-compile-remove(mention) */
-        mentionOptions
-    ]);
-    const defaultStatusRenderer = React.useCallback((message, status, participantCount, readCount) => {
+    const defaultStatusRenderer = React.useCallback((message, participantCount, readCount, status) => {
         const onToggleToolTip = (isToggled) => {
             if (isToggled && readReceiptsBySenderIdRef.current) {
                 setReadCountForHoveredIndicator(getParticipantsWhoHaveReadMessage(message, readReceiptsBySenderIdRef.current).length);
@@ -11173,87 +11314,56 @@ const MessageThreadWrapper = (props) => {
             remoteParticipantsCount: participantCount ? participantCount - 1 : 0 }));
     }, []);
     const theme = useTheme();
-    const chatMessageRenderStyles = useChatMessageRenderStyles();
-    const messagesToDisplay = React.useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
-        return messages.map((message, index) => {
-            let key = message.messageId;
-            let statusToRender = undefined;
-            if (message.messageType === 'chat' ||
-                /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked') {
-                if ((!message.messageId || message.messageId === '') && 'clientMessageId' in message) {
-                    key = message.clientMessageId;
-                }
-                if (showMessageStatus && message.mine) {
-                    switch (message.messageId) {
-                        case lastSeenChatMessage: {
-                            statusToRender = 'seen';
-                            break;
-                        }
-                        case lastSendingChatMessage: {
-                            statusToRender = 'sending';
-                            break;
-                        }
-                        case lastDeliveredChatMessage: {
-                            statusToRender = 'delivered';
-                            break;
-                        }
-                    }
-                }
-                if (message.mine && message.status === 'failed') {
-                    statusToRender = 'failed';
-                }
-            }
-            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, chatMessageRenderStyles, 
-            // Temporary solution to make sure we re-render if attach attribute is changed.
-            // The proper fix should be in selector.
-            message.messageType === 'chat' ||
-                /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked'
-                ? message.attached
-                : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, props.disableEditing);
+    const messagesToDisplay = React.useMemo(() => {
+        return memoizeAllMessages((memoizedMessageFn) => {
+            return messages.map((message, index) => {
+                return memoizedMessageFn(message, showMessageDate, showMessageStatus, strings, index, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, props.disableEditing, lastDeliveredChatMessage, lastSeenChatMessage, lastSendingChatMessage);
+            });
         });
-    }), [
+    }, [
+        lastDeliveredChatMessage,
+        lastSeenChatMessage,
+        lastSendingChatMessage,
         messages,
-        showMessageDate,
-        showMessageStatus,
-        onRenderAvatar,
-        isNarrow,
-        styles,
-        onRenderMessageStatus,
-        defaultStatusRenderer,
-        defaultChatMessageRenderer,
-        strings,
-        theme,
-        chatMessageRenderStyles,
-        participantCount,
-        readCountForHoveredIndicator,
-        onRenderMessage,
-        onUpdateMessage,
         onCancelEditMessage,
         onDeleteMessage,
         onSendMessage,
+        onUpdateMessage,
         props.disableEditing,
-        lastSeenChatMessage,
-        lastSendingChatMessage,
-        lastDeliveredChatMessage
+        showMessageDate,
+        showMessageStatus,
+        strings
     ]);
     const classes = useChatStyles();
-    const chatBody = React.useMemo(() => {
-        return (React__default["default"].createElement(LiveAnnouncer, null,
+    return (React__default["default"].createElement("div", { className: react.mergeStyles(messageThreadWrapperContainerStyle), ref: chatThreadRef },
+        existsNewChatMessage && !disableJumpToNewMessageButton && (React__default["default"].createElement("div", { className: react.mergeStyles(newMessageButtonContainerStyle, styles === null || styles === void 0 ? void 0 : styles.newMessageButtonContainer) }, onRenderJumpToNewMessageButton ? (onRenderJumpToNewMessageButton({ text: strings.newMessagesIndicator, onClick: scrollToBottom })) : (React__default["default"].createElement(DefaultJumpToNewMessageButton, { text: strings.newMessagesIndicator, onClick: scrollToBottom })))),
+        React__default["default"].createElement(LiveAnnouncer, null,
             React__default["default"].createElement(FluentV9ThemeProvider, { v8Theme: theme },
                 React__default["default"].createElement(reactChat.Chat
                 // styles?.chatContainer used in className and style prop as style prop can't handle CSS selectors
                 , { 
                     // styles?.chatContainer used in className and style prop as style prop can't handle CSS selectors
-                    className: reactComponents.mergeClasses(classes.root, react.mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatContainer)), ref: chatScrollDivRef, style: Object.assign({}, createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatContainer)) }, messagesToDisplay))));
-    }, [theme, classes.root, styles === null || styles === void 0 ? void 0 : styles.chatContainer, messagesToDisplay]);
-    return (React__default["default"].createElement("div", { className: react.mergeStyles(messageThreadWrapperContainerStyle), ref: chatThreadRef },
-        existsNewChatMessage && !disableJumpToNewMessageButton && (React__default["default"].createElement("div", { className: react.mergeStyles(newMessageButtonContainerStyle, styles === null || styles === void 0 ? void 0 : styles.newMessageButtonContainer) }, onRenderJumpToNewMessageButton ? (onRenderJumpToNewMessageButton({ text: strings.newMessagesIndicator, onClick: scrollToBottom })) : (React__default["default"].createElement(DefaultJumpToNewMessageButton, { text: strings.newMessagesIndicator, onClick: scrollToBottom })))),
-        chatBody));
-};
-const onRenderFileDownloadsTrampoline = (props) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return props.onRenderFileDownloads;
-};
+                    className: reactComponents.mergeClasses(classes.root, react.mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatContainer)), ref: chatScrollDivRef, style: Object.assign({}, createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatContainer)) }, messagesToDisplay.map((message) => {
+                    return (React__default["default"].createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, 
+                        /* @conditional-compile-remove(file-sharing) */
+                        fileDownloadHandler: props.fileDownloadHandler, 
+                        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                        onFetchInlineAttachment: onFetchInlineAttachment, 
+                        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                        inlineAttachments: inlineAttachments, 
+                        /* @conditional-compile-remove(image-gallery) */
+                        onInlineImageClicked: onInlineImageClicked, 
+                        /* @conditional-compile-remove(date-time-customization) */
+                        onDisplayDateTimeString: onDisplayDateTimeString, 
+                        /* @conditional-compile-remove(mention) */
+                        mentionOptions: mentionOptions, 
+                        /* @conditional-compile-remove(file-sharing) */
+                        onRenderFileDownloads: onRenderFileDownloads })));
+                }))))));
+};
+const MemoChatMessageComponentWrapper = React__default["default"].memo((obj) => {
+    return React__default["default"].createElement(ChatMessageComponentWrapper, Object.assign({}, obj));
+});
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -14122,13 +14232,13 @@ const OverflowGallery = (props) => {
     const scrollableHorizontalGalleryContainerStyles = React.useMemo(() => {
         if (isNarrow && parentWidth) {
             return {
-                width: props.layout === 'default'
-                    ? `${_convertPxToRem(parentWidth) - 1}rem`
-                    : `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`
+                width: shouldFloatLocalVideo
+                    ? `${_convertPxToRem(parentWidth) - SMALL_FLOATING_MODAL_SIZE_REM.width - 1}rem`
+                    : `${_convertPxToRem(parentWidth) - 1}rem`
             };
         }
         return undefined;
-    }, [isNarrow, parentWidth, props.layout]);
+    }, [isNarrow, parentWidth, shouldFloatLocalVideo]);
     /* @conditional-compile-remove(vertical-gallery) */
     if (overflowGalleryPosition === 'verticalRight') {
         return (React__default["default"].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React__default["default"].createElement(React__default["default"].Fragment, null)]));
@@ -14210,9 +14320,7 @@ const DefaultLayout = (props) => {
             /* @conditional-compile-remove(vertical-gallery) */
             overflowGalleryPosition: overflowGalleryPosition, onFetchTilesToRender: setIndexesToRender, onChildrenPerPageChange: (n) => {
                 childrenPerPage.current = n;
-            }, 
-            /* @conditional-compile-remove(gallery-layouts) */
-            layout: 'default', parentWidth: parentWidth }));
+            }, parentWidth: parentWidth }));
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
@@ -15076,7 +15184,7 @@ const FloatingLocalVideoLayout = (props) => {
         /* @conditional-compile-remove(vertical-gallery) */
         , { 
             /* @conditional-compile-remove(vertical-gallery) */
-            isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+            isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: !!localVideoComponent, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
             verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
@@ -15092,7 +15200,8 @@ const FloatingLocalVideoLayout = (props) => {
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         setIndexesToRender,
         /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
-        parentWidth
+        parentWidth,
+        localVideoComponent
     ]);
     return (React__default["default"].createElement(react.Stack, { styles: rootLayoutStyle },
         wrappedLocalVideoComponent,
@@ -15205,7 +15314,7 @@ const SpeakerVideoLayout = (props) => {
         /* @conditional-compile-remove(vertical-gallery) */
         , { 
             /* @conditional-compile-remove(vertical-gallery) */
-            isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: true, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+            isShort: isShort, onFetchTilesToRender: setIndexesToRender, isNarrow: isNarrow, shouldFloatLocalVideo: !!localVideoComponent, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
             verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
@@ -15221,7 +15330,8 @@ const SpeakerVideoLayout = (props) => {
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         setIndexesToRender,
         /* @conditional-compile-remove(vertical-gallery) */ styles === null || styles === void 0 ? void 0 : styles.verticalGallery,
-        parentWidth
+        parentWidth,
+        localVideoComponent
     ]);
     return (React__default["default"].createElement(react.Stack, { styles: rootLayoutStyle },
         wrappedLocalVideoComponent,
@@ -22642,9 +22752,15 @@ const ChatScreen = (props) => {
     const onRenderAvatarCallback = React.useCallback((userId, defaultOptions) => {
         return (React__default["default"].createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
     }, [onFetchAvatarPersonaData]);
-    const messageThreadStyles = Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles === null || styles === void 0 ? void 0 : styles.messageThread);
-    const typingIndicatorStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.typingIndicator);
-    const sendBoxStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.sendBox);
+    const messageThreadStyles = React.useMemo(() => {
+        return Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles === null || styles === void 0 ? void 0 : styles.messageThread);
+    }, [styles === null || styles === void 0 ? void 0 : styles.messageThread, theme.semanticColors.bodyBackground]);
+    const typingIndicatorStyles = React.useMemo(() => {
+        return Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.typingIndicator);
+    }, [styles === null || styles === void 0 ? void 0 : styles.typingIndicator]);
+    const sendBoxStyles = React.useMemo(() => {
+        return Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.sendBox);
+    }, [styles === null || styles === void 0 ? void 0 : styles.sendBox]);
     const userId = toFlatCommunicationIdentifier(adapter.getState().userId);
     const fileUploadButtonOnChange = React.useCallback((files) => {
         if (!files) {
@@ -22795,21 +22911,12 @@ const ChatScreen = (props) => {
 const ChatComposite = (props) => {
     const { adapter, options, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage, onFetchParticipantMenuItems } = props;
     const formFactor = props['formFactor'] || 'desktop';
-    /**
-     * @TODO Remove this function and pass the props directly when file-sharing is promoted to stable.
-     * @private
-     */
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-    const fileSharingOptions = () => {
-        /* @conditional-compile-remove(file-sharing) */
-        return {
-            fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing
-        };
-    };
     return (React__default["default"].createElement("div", { className: chatScreenContainerStyle },
         React__default["default"].createElement(BaseProvider, Object.assign({}, props),
             React__default["default"].createElement(ChatAdapterProvider, { adapter: adapter },
-                React__default["default"].createElement(ChatScreen, Object.assign({ formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems }, fileSharingOptions()))))));
+                React__default["default"].createElement(ChatScreen, { formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems, 
+                    /* @conditional-compile-remove(file-sharing) */
+                    fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing })))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -26054,7 +26161,7 @@ const SidePane = (props) => {
         props.onPeopleButtonClicked,
         props.disablePeopleButton,
         props.disableChatButton,
-        sidePaneRenderer,
+        sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id,
         closePane
     ]);
     const HeaderToRender = props.mobileView && (overrideSidePaneId === 'chat' || (sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id) === 'people') ? LegacyHeader : Header();
@@ -30117,11 +30224,11 @@ const CALL_REJECTED_CODE = 603;
  * @private
  */
 class CallingSoundSubscriber {
-    constructor(call, locator, sounds) {
+    constructor(call, callee, sounds) {
         this.onCallStateChanged = () => {
             this.call.on('stateChanged', () => {
                 var _a, _b, _c, _d, _e;
-                if (shouldPlayRingingSound(this.call, this.callLocator) && ((_a = this.soundsLoaded) === null || _a === void 0 ? void 0 : _a.callRingingSound)) {
+                if (isPSTNCall(this.call, this.callee) && ((_a = this.soundsLoaded) === null || _a === void 0 ? void 0 : _a.callRingingSound)) {
                     this.soundsLoaded.callRingingSound.loop = true;
                     this.playSound(this.soundsLoaded.callRingingSound);
                 }
@@ -30141,7 +30248,7 @@ class CallingSoundSubscriber {
             });
         };
         this.call = call;
-        this.callLocator = locator;
+        this.callee = callee;
         if (sounds) {
             this.soundsLoaded = this.loadSounds(sounds);
             this.subscribeCallSoundEvents();
@@ -30161,17 +30268,17 @@ class CallingSoundSubscriber {
         var _a, _b, _c;
         let callEndedSound;
         if (sounds === null || sounds === void 0 ? void 0 : sounds.callEnded) {
-            callEndedSound = new Audio((_a = sounds === null || sounds === void 0 ? void 0 : sounds.callEnded) === null || _a === void 0 ? void 0 : _a.path);
+            callEndedSound = new Audio((_a = sounds === null || sounds === void 0 ? void 0 : sounds.callEnded) === null || _a === void 0 ? void 0 : _a.url);
             callEndedSound.preload = 'auto';
         }
         let callRingingSound;
         if (sounds === null || sounds === void 0 ? void 0 : sounds.callRinging) {
-            callRingingSound = new Audio((_b = sounds === null || sounds === void 0 ? void 0 : sounds.callRinging) === null || _b === void 0 ? void 0 : _b.path);
+            callRingingSound = new Audio((_b = sounds === null || sounds === void 0 ? void 0 : sounds.callRinging) === null || _b === void 0 ? void 0 : _b.url);
             callRingingSound.preload = 'auto';
         }
         let callBusySound;
         if (sounds === null || sounds === void 0 ? void 0 : sounds.callBusy) {
-            callBusySound = new Audio((_c = sounds === null || sounds === void 0 ? void 0 : sounds.callBusy) === null || _c === void 0 ? void 0 : _c.path);
+            callBusySound = new Audio((_c = sounds === null || sounds === void 0 ? void 0 : sounds.callBusy) === null || _c === void 0 ? void 0 : _c.url);
             callBusySound.preload = 'auto';
         }
         return {
@@ -30190,12 +30297,11 @@ class CallingSoundSubscriber {
  * Helper function to allow the calling sound subscriber to determine when to play the ringing
  * sound when making an outbound call.
  */
-const shouldPlayRingingSound = (call, locator) => {
+const isPSTNCall = (call, callee) => {
     /* @conditional-compile-remove(calling-sounds) */
-    const callee = locator.participantIds;
-    /* @conditional-compile-remove(calling-sounds) */
-    if (callee.length >= 1 &&
-        !communicationCommon.isPhoneNumberIdentifier(fromFlatCommunicationIdentifier(callee[0])) &&
+    if (callee &&
+        callee.length >= 1 &&
+        !communicationCommon.isPhoneNumberIdentifier(callee[0]) &&
         (call.state === 'Ringing' || call.state === 'Connecting')) {
         return true;
     }
@@ -30220,7 +30326,7 @@ class CallContext {
     constructor(clientState, isTeamsCall, 
     /* @conditional-compile-remove(rooms) */
     isRoomsCall, options) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         this.emitter = new EventEmitter.EventEmitter();
         this.state = {
             isLocalPreviewMicrophoneEnabled: false,
@@ -30228,6 +30334,7 @@ class CallContext {
             displayName: (_a = clientState.callAgent) === null || _a === void 0 ? void 0 : _a.displayName,
             devices: clientState.deviceManager,
             call: undefined,
+            /* @conditional-compile-remove(calling-sounds) */ targetCallees: undefined,
             page: 'configuration',
             latestErrors: clientState.latestErrors,
             isTeamsCall,
@@ -30240,9 +30347,9 @@ class CallContext {
             onResolveVideoEffectDependency: (_c = options === null || options === void 0 ? void 0 : options.videoBackgroundOptions) === null || _c === void 0 ? void 0 : _c.onResolveDependency,
             /* @conditional-compile-remove(video-background-effects) */ selectedVideoBackgroundEffect: undefined,
             cameraStatus: undefined,
-            /* @conditional-compile-remove(calling-sounds) */ sounds: (_d = options === null || options === void 0 ? void 0 : options.soundOptions) === null || _d === void 0 ? void 0 : _d.callingSounds
+            /* @conditional-compile-remove(calling-sounds) */ sounds: options === null || options === void 0 ? void 0 : options.callingSounds
         };
-        this.emitter.setMaxListeners((_e = options === null || options === void 0 ? void 0 : options.maxListeners) !== null && _e !== void 0 ? _e : 50);
+        this.emitter.setMaxListeners((_d = options === null || options === void 0 ? void 0 : options.maxListeners) !== null && _d !== void 0 ? _d : 50);
         this.bindPublicMethods();
         this.displayNameModifier = (options === null || options === void 0 ? void 0 : options.onFetchProfile)
             ? createProfileStateModifier(options.onFetchProfile, () => {
@@ -30274,6 +30381,10 @@ class CallContext {
     setCurrentCallId(callId) {
         this.callId = callId;
     }
+    /* @conditional-compile-remove(calling-sounds) */
+    setTargetCallee(targetCallees) {
+        this.setState(Object.assign(Object.assign({}, this.state), { targetCallees }));
+    }
     onCallEnded(handler) {
         this.emitter.on('callEnded', handler);
     }
@@ -30888,6 +30999,8 @@ class AzureCommunicationCallAdapter {
             }
             return backendId;
         });
+        /* @conditional-compile-remove(calling-sounds) */
+        this.context.setTargetCallee(idsToAdd);
         const call = this.handlers.onStartCall(idsToAdd, options);
         if (!call) {
             throw new Error('Unable to start call.');
@@ -31026,7 +31139,7 @@ class AzureCommunicationCallAdapter {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         /* @conditional-compile-remove(calling-sounds) */
         if (this.call) {
-            this.callingSoundSubscriber = new CallingSoundSubscriber(this.call, this.locator, this.getState().sounds);
+            this.callingSoundSubscriber = new CallingSoundSubscriber(this.call, this.getState().targetCallees, this.getState().sounds);
         }
         (_a = this.call) === null || _a === void 0 ? void 0 : _a.on('remoteParticipantsUpdated', this.onRemoteParticipantsUpdated.bind(this));
         (_b = this.call) === null || _b === void 0 ? void 0 : _b.on('isMutedChanged', this.isMyMutedChanged.bind(this));
@@ -31149,6 +31262,7 @@ class AzureCommunicationCallAdapter {
         if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.role) === 'Consumer') {
             (_b = this.call) === null || _b === void 0 ? void 0 : _b.feature(communicationCalling.Features.RaiseHand).lowerHand();
         }
+        this.emitter.emit('roleChanged');
     }
     callIdChanged() {
         var _a;
@@ -31982,10 +32096,8 @@ const CallWithChatScreen = (props) => {
             callWithChatAdapter.offStateChange(updateCallWithChatPage);
         };
     }, [callWithChatAdapter]);
-    const chatProps = React.useMemo(() => {
-        return {
-            adapter: new CallWithChatBackedChatAdapter(callWithChatAdapter)
-        };
+    const chatAdapter = React.useMemo(() => {
+        return new CallWithChatBackedChatAdapter(callWithChatAdapter);
     }, [callWithChatAdapter]);
     /** Constant setting of id for the parent stack of the composite */
     const compositeParentDivId = reactHooks.useId('callWithChatCompositeParentDiv-internal');
@@ -32034,7 +32146,7 @@ const CallWithChatScreen = (props) => {
             disabled: chatButtonDisabled
         }
         : undefined, [chatButtonDisabled, mobileView, toggleChat, showChatButton]);
-    const unreadChatMessagesCount = useUnreadMessagesTracker(chatProps.adapter, isChatOpen);
+    const unreadChatMessagesCount = useUnreadMessagesTracker(chatAdapter, isChatOpen);
     const customChatButton = React.useCallback((args) => ({
         placement: mobileView ? 'primary' : 'secondary',
         onRenderButton: () => (React__default["default"].createElement(ChatButtonWithUnreadMessagesBadge, { checked: isChatOpen, showLabel: args.displayType !== 'compact', onClick: toggleChat, disabled: chatButtonDisabled, strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel, unreadChatMessagesCount: unreadChatMessagesCount, 
@@ -32108,14 +32220,14 @@ const CallWithChatScreen = (props) => {
         /* @conditional-compile-remove(custom-branding) */
         props.backgroundImage
     ]);
-    const onRenderChatContent = React.useCallback(() => (React__default["default"].createElement(ChatComposite, Object.assign({}, chatProps, { fluentTheme: theme, options: {
+    const onRenderChatContent = React.useCallback(() => (React__default["default"].createElement(ChatComposite, { adapter: chatAdapter, fluentTheme: theme, options: {
             topic: false,
             /* @conditional-compile-remove(chat-composite-participant-pane) */
             participantPane: false,
             /* @conditional-compile-remove(file-sharing) */
             fileSharing: props.fileSharing
-        }, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData }))), [
-        chatProps,
+        }, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), [
+        chatAdapter,
         /* @conditional-compile-remove(file-sharing) */ props.fileSharing,
         props.onFetchAvatarPersonaData,
         theme