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

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-202311250012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -192,6 +192,25 @@ const sanitize = (version) => {
     }
     return version;
 };
+/**
+ * Takes a telemetry implementation hint and returns the numerical value.
+ *
+ * @private
+ */
+const getTelemetryImplementationHint = (telemetryImplementationHint) => {
+    switch (telemetryImplementationHint) {
+        case 'Call':
+            return 1;
+        case 'Chat':
+            return 2;
+        case 'CallWithChat':
+            return 3;
+        case 'StatefulComponents':
+            return 4;
+        default:
+            return 0;
+    }
+};
 /**
  * Application ID to be included in telemetry data from the UI library.
  * Template: acXYYY/<version>
@@ -207,9 +226,12 @@ const sanitize = (version) => {
  *
  * @internal
  */
-const _getApplicationId = () => {
+const _getApplicationId = (telemetryImplementationHint) => {
+    const highLevelArtifact = 0;
+    const specificImplementation = getTelemetryImplementationHint(telemetryImplementationHint);
+    const implementationDetails = 0;
     const version = telemetryVersion;
-    return sanitize(`acr/${version}`);
+    return sanitize(`acr${highLevelArtifact}${specificImplementation}${implementationDetails}/${version}`);
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -4783,8 +4805,16 @@ class ProxyCallClient {
  * @public
  */
 const createStatefulCallClient = (args, options) => {
-    callingStatefulLogger.info(`Creating calling stateful client using library version: ${_getApplicationId()}`);
-    return createStatefulCallClientWithDeps(new communicationCalling.CallClient(withTelemetryTag(options === null || options === void 0 ? void 0 : options.callClientOptions)), new CallContext$2(communicationCommon.getIdentifierKind(args.userId), options === null || options === void 0 ? void 0 : options.maxStateChangeListeners, 
+    return _createStatefulCallClientInner(args, options);
+};
+/**
+ * This inner function is used to allow injection of TelemetryImplementationHint without changing the public API.
+ *
+ * @internal
+ */
+const _createStatefulCallClientInner = (args, options, telemetryImplementationHint = 'StatefulComponents') => {
+    callingStatefulLogger.info(`Creating calling stateful client using library version: ${_getApplicationId(telemetryImplementationHint)}`);
+    return createStatefulCallClientWithDeps(new communicationCalling.CallClient(withTelemetryTag(telemetryImplementationHint, options === null || options === void 0 ? void 0 : options.callClientOptions)), new CallContext$2(communicationCommon.getIdentifierKind(args.userId), options === null || options === void 0 ? void 0 : options.maxStateChangeListeners, 
     /* @conditional-compile-remove(PSTN-calls) */ args.alternateCallerId), new InternalCallContext());
 };
 /**
@@ -4827,10 +4857,10 @@ const createStatefulCallClientWithDeps = (callClient, context, internalContext)
     });
     return new Proxy(callClient, new ProxyCallClient(context, internalContext));
 };
-const withTelemetryTag = (options) => {
+const withTelemetryTag = (telemetryImplementationHint, options) => {
     var _a, _b;
     const tags = (_b = (_a = options === null || options === void 0 ? void 0 : options.diagnostics) === null || _a === void 0 ? void 0 : _a.tags) !== null && _b !== void 0 ? _b : [];
-    tags.push(_getApplicationId());
+    tags.push(_getApplicationId(telemetryImplementationHint));
     return Object.assign(Object.assign({}, options), { diagnostics: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.diagnostics), { tags }) });
 };
 
@@ -9000,168 +9030,697 @@ 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)';
+// 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 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)
-        }
-    }
-});
+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 chatMessageDateStyle = react.mergeStyles({
-    color: reactComponents.tokens.colorNeutralForeground2,
-    fontWeight: react.FontWeights.regular,
-    fontSize: '0.75rem'
-});
+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 chatMessageAuthorStyle = react.mergeStyles({
-    fontWeight: react.FontWeights.semibold,
-    fontSize: '0.75rem'
-});
+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 chatMessageEditedTagStyle = (theme) => react.mergeStyles({ fontWeight: react.FontWeights.semibold, color: theme.palette.neutralSecondary });
+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 chatMessageFailedTagStyle = (theme) => react.mergeStyles({
-    fontWeight: react.FontWeights.regular,
-    color: theme.semanticColors.errorText,
-    fontSize: theme.fonts.smallPlus.fontSize,
-    lineHeight: '1rem'
-});
+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
 /**
- * @private
+ * Creates v9 color tokens from a v8 palette.
  */
-const editChatMessageFailedTagStyle = react.mergeStyles({
-    marginBottom: '0.5rem'
-});
+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 chatMessageFailedTagStackItemStyle = react.mergeStyles({
-    alignSelf: 'end'
-});
+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 editChatMessageButtonsStackStyle = react.mergeStyles({
-    padding: '0 0.5rem',
-    marginTop: '-0.25rem'
-});
+const mapBorderRadiusTokens = (effects) => {
+    return {
+        borderRadiusSmall: effects.roundedCorner2,
+        borderRadiusMedium: effects.roundedCorner4,
+        borderRadiusLarge: effects.roundedCorner6
+    };
+};
 /**
+ * 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 chatMessageMenuStyle = react.mergeStyles({
-    minWidth: '8.5rem',
-    height: 'max-content',
-    cursor: 'pointer',
-    overflow: 'hidden'
-});
+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 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 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%' })
 });
 /**
- * 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'
-    },
-    linkContent: {
-        height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
-        lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
-        maxHeight: 'unset'
-    },
-    icon: {
-        maxHeight: 'unset'
-    }
-};
+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 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 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(() => {
+        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 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
+ */
+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 editBoxStyle = react.mergeStyles({
+    marginTop: '0.0875rem',
+    marginBottom: '0.0875rem'
+});
+/**
+ * @private
+ */
+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'
+    }
+});
+/**
+ * @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)';
+/**
+ * @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'
+});
+/**
+ * @private
+ */
+const chatMessageAuthorStyle = react.mergeStyles({
+    fontWeight: react.FontWeights.semibold,
+    fontSize: '0.75rem'
+});
+/**
+ * @private
+ */
+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
+    },
+    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)) })
+});
+/**
+ * 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'
+    },
+    linkContent: {
+        height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
+        lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM$1}rem`,
+        maxHeight: 'unset'
+    },
+    icon: {
+        maxHeight: 'unset'
+    }
+};
 /**
  * @private
  */
@@ -9564,21 +10123,27 @@ const MessageContentWithLiveAria = (props) => {
         props.content));
 };
 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;
-        const attachments = (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.filter((fileMetadata) => {
-            return fileMetadata.attachmentType === 'inlineImage';
+        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 (props.attachmentsMap && attachments) {
-            attachments.forEach((fileMetadata) => {
-                if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {
-                    props.onFetchAttachment([fileMetadata], props.message.messageId);
-                    return;
-                }
-            });
+        if (attachments && attachments.length > 0) {
+            onFetchAttachments(attachments, message.messageId);
         }
-    }, [props]);
+    }, [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) => {
@@ -9821,43 +10386,6 @@ const useLocaleStringsTrampoline = () => {
     return useLocale$1().strings.messageThread;
 };
 
-// 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
- */
-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.
 // Licensed under the MIT License.
 var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -9966,7 +10494,7 @@ const MessageBubble = (props) => {
         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, 
+                onFetchAttachments: props.onFetchAttachments, 
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                 attachmentsMap: props.attachmentsMap, 
                 /* @conditional-compile-remove(mention) */
@@ -10052,590 +10580,355 @@ const MessageBubble = (props) => {
                 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());
-    });
-};
-/**
- * @private
- */
-const ChatMessageComponent = (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();
-        };
-    }, [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();
-        };
-    }, [containerRef, observer]);
-    return height;
-};
-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
- */
-const isShortHeight = (containerHeightRem) => containerHeightRem <= _convertRemToPx(SHORT_HEIGHT_REM);
-
-// 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.
- *
- * 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.
-// 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 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 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 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 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 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)'
-    };
+                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);
 };
-/** @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(() => {
-        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 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 generateParticipantsStr = (participants, defaultName) => participants
+    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
+    .join(', ');
 
 // 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 });
+/**
+ * The wrapper component to display different types of chat message.
+ *
+ * @private
+ */
+const ChatMessageComponentWrapper = (props) => {
+    var _a, _b;
+    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 +10999,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 +11037,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 +11083,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 +11104,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 +11139,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 +11330,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 +11344,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 +14262,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 +14350,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 +15214,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 +15230,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 +15344,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 +15360,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,
@@ -21001,8 +21141,16 @@ const proxyChatClient = {
  * @public
  */
 const createStatefulChatClient = (args, options) => {
-    chatStatefulLogger.info(`Creating chat stateful client using library version: ${_getApplicationId()}`);
-    const tweakedOptions = Object.assign(Object.assign({}, options), { chatClientOptions: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.chatClientOptions), { userAgentOptions: { userAgentPrefix: _getApplicationId() } }) });
+    return _createStatefulChatClientInner(args, options);
+};
+/**
+ * This inner function is used to allow injection of TelemetryImplementationHint without changing the public API.
+ *
+ * @internal
+ */
+const _createStatefulChatClientInner = (args, options, telemetryImplementationHint = 'StatefulComponents') => {
+    chatStatefulLogger.info(`Creating chat stateful client using library version: ${_getApplicationId(telemetryImplementationHint)}`);
+    const tweakedOptions = Object.assign(Object.assign({}, options), { chatClientOptions: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.chatClientOptions), { userAgentOptions: { userAgentPrefix: _getApplicationId(telemetryImplementationHint) } }) });
     return _createStatefulChatClientWithDeps(new communicationChat.ChatClient(args.endpoint, args.credential, tweakedOptions.chatClientOptions), args, tweakedOptions);
 };
 /**
@@ -21858,15 +22006,23 @@ const convertEventType = (type) => {
  * @public
  */
 const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$k(void 0, void 0, void 0, function* () {
+    return _createAzureCommunicationChatAdapterInner(endpointUrl, userId, displayName, credential, threadId);
+});
+/**
+ * This inner function is used to allow injection of TelemetryImplementationHint without changing the public API.
+ *
+ * @internal
+ */
+const _createAzureCommunicationChatAdapterInner = (endpoint, userId, displayName, credential, threadId, telemetryImplementationHint = 'Chat') => __awaiter$k(void 0, void 0, void 0, function* () {
     if (!_isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
-    const chatClient = createStatefulChatClient({
+    const chatClient = _createStatefulChatClientInner({
         userId,
         displayName,
-        endpoint: endpointUrl,
-        credential: credential
-    });
+        endpoint,
+        credential
+    }, undefined, telemetryImplementationHint);
     const chatThreadClient = yield chatClient.getChatThreadClient(threadId);
     yield chatClient.startRealtimeNotifications();
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
@@ -22642,9 +22798,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 +22957,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 +26207,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 +30270,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 +30294,7 @@ class CallingSoundSubscriber {
             });
         };
         this.call = call;
-        this.callLocator = locator;
+        this.callee = callee;
         if (sounds) {
             this.soundsLoaded = this.loadSounds(sounds);
             this.subscribeCallSoundEvents();
@@ -30161,17 +30314,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 +30343,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 +30372,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 +30380,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 +30393,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 +30427,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 +31045,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 +31185,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 +31308,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;
@@ -31203,13 +31363,33 @@ class AzureCommunicationCallAdapter {
 const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator, 
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
 /* @conditional-compile-remove(video-background-effects) */ options }) => __awaiter$5(void 0, void 0, void 0, function* () {
+    return _createAzureCommunicationCallAdapterInner({
+        userId,
+        displayName,
+        credential,
+        locator,
+        /* @conditional-compile-remove(PSTN-calls) */
+        alternateCallerId,
+        /* @conditional-compile-remove(video-background-effects) */
+        options
+    });
+});
+/**
+ * This inner function is used to allow injection of TelemetryImplementationHint without changing the public API.
+ *
+ * @internal
+ */
+const _createAzureCommunicationCallAdapterInner = ({ userId, displayName, credential, locator, 
+/* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
+/* @conditional-compile-remove(video-background-effects) */ options, telemetryImplementationHint = 'Call' }) => __awaiter$5(void 0, void 0, void 0, function* () {
     if (!_isValidIdentifier(userId)) {
         throw new Error('Invalid identifier. Please provide valid identifier object.');
     }
-    const callClient = createStatefulCallClient({
+    const callClient = _createStatefulCallClientInner({
         userId,
-        /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId
-    });
+        /* @conditional-compile-remove(PSTN-calls) */
+        alternateCallerId
+    }, undefined, telemetryImplementationHint);
     const callAgent = yield callClient.createCallAgent(credential, {
         displayName
     });
@@ -31222,9 +31402,9 @@ const createAzureCommunicationCallAdapter = ({ userId, displayName, credential,
  * @beta
  */
 const createTeamsCallAdapter = ({ userId, credential, locator, options }) => __awaiter$5(void 0, void 0, void 0, function* () {
-    const callClient = createStatefulCallClient({
+    const callClient = _createStatefulCallClientInner({
         userId
-    });
+    }, undefined, 'Call');
     const callAgent = yield callClient.createTeamsCallAgent(credential, {
         undefined
     });
@@ -31982,10 +32162,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 +32212,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 +32286,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
@@ -32915,24 +33093,19 @@ const createAzureCommunicationCallWithChatAdapter = ({ userId, displayName, cred
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
 /* @conditional-compile-remove(video-background-effects) */ callAdapterOptions }) => __awaiter$2(void 0, void 0, void 0, function* () {
     const callAdapterLocator = isTeamsMeetingLinkLocator(locator) ? locator : locator.callLocator;
-    const createCallAdapterPromise = createAzureCommunicationCallAdapter({
+    const createCallAdapterPromise = _createAzureCommunicationCallAdapterInner({
         userId,
         displayName,
         credential,
         locator: callAdapterLocator,
         /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId,
-        /* @conditional-compile-remove(video-background-effects) */ options: callAdapterOptions
+        /* @conditional-compile-remove(video-background-effects) */ options: callAdapterOptions,
+        telemetryImplementationHint: 'CallWithChat'
     });
     const threadId = isTeamsMeetingLinkLocator(locator)
         ? getChatThreadFromTeamsLink(locator.meetingLink)
         : locator.chatThreadId;
-    const createChatAdapterPromise = createAzureCommunicationChatAdapter({
-        endpoint,
-        userId,
-        displayName,
-        credential,
-        threadId
-    });
+    const createChatAdapterPromise = _createAzureCommunicationChatAdapterInner(endpoint, userId, displayName, credential, threadId, 'CallWithChat');
     const [callAdapter, chatAdapter] = yield Promise.all([createCallAdapterPromise, createChatAdapterPromise]);
     return new AzureCommunicationCallWithChatAdapter(callAdapter, chatAdapter);
 });