@azure/communication-react 1.4.3-alpha-202301150014.0 → 1.5.0

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

@@ -21,7 +21,14 @@ export const MessageStatusIndicator = (props) => {
     const [isTooltipToggled, setIsTooltipToggled] = useState(false);
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = useTheme();
-    const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
+    const calloutStyle = {
+        root: {
+            padding: 0
+        },
+        calloutMain: {
+            padding: '0.5rem'
+        }
+    };
     // Place callout with no gap between it and the button.
     const calloutProps = {
         gapSpace: 0,
@@ -30,41 +37,43 @@ export const MessageStatusIndicator = (props) => {
     };
     switch (status) {
         case 'failed':
-            return (React.createElement(TooltipHost, { content: strings.failedToSendTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
-                strings.failedToSendAriaLabel && (
-                // live message is used here and in the following tooltips so that aria labels are announced on mobile
-                React.createElement(LiveMessage, { message: strings.failedToSendAriaLabel, "aria-live": "polite" })),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.failedToSendAriaLabel, iconName: "MessageFailed", className: mergeStyles(MessageStatusIndicatorErrorIconStyle, { color: theme.palette.redDark }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+            return React.createElement(TooltipHost, { content: strings.failedToSendTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
+                strings.failedToSendAriaLabel &&
+                    // live message is used here and in the following tooltips so that aria labels are announced on mobile
+                    React.createElement(LiveMessage, { message: strings.failedToSendAriaLabel, "aria-live": "polite" }),
+                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.failedToSendAriaLabel, iconName: "MessageFailed", className: mergeStyles(MessageStatusIndicatorErrorIconStyle, {
+                        color: theme.palette.redDark
+                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
         case 'sending':
-            return (React.createElement(TooltipHost, { content: strings.sendingTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
+            return React.createElement(TooltipHost, { content: strings.sendingTooltipText, "data-ui-id": "chat-composite-message-tooltip", calloutProps: Object.assign({}, calloutProps), styles: hostStyles },
                 strings.sendingAriaLabel && React.createElement(LiveMessage, { message: strings.sendingAriaLabel, "aria-live": "polite" }),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.sendingAriaLabel, iconName: "MessageSending", className: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.sendingAriaLabel, iconName: "MessageSending", className: mergeStyles(MessageStatusIndicatorIconStyle, {
+                        color: theme.palette.themePrimary
+                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
         case 'seen':
-            return (React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles, content: 
+            return React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles, content: 
                 // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'
                 // when readcount is 0, we have a bug, show 'seen' to cover up as a fall back
                 // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back
-                readCount === 0 ||
-                    (remoteParticipantsCount && remoteParticipantsCount <= 1) ||
-                    !readCount ||
-                    !remoteParticipantsCount ||
-                    strings.readByTooltipText === undefined
-                    ? strings.seenTooltipText
-                    : _formatString(strings.readByTooltipText, {
-                        messageThreadReadCount: `${readCount}`,
-                        remoteParticipantsCount: `${remoteParticipantsCount}`
-                    }), onTooltipToggle: () => {
+                readCount === 0 || remoteParticipantsCount && remoteParticipantsCount <= 1 || !readCount || !remoteParticipantsCount || strings.readByTooltipText === undefined ? strings.seenTooltipText : _formatString(strings.readByTooltipText, {
+                    messageThreadReadCount: `${readCount}`,
+                    remoteParticipantsCount: `${remoteParticipantsCount}`
+                }), onTooltipToggle: () => {
                     if (onToggleToolTip) {
                         onToggleToolTip(!isTooltipToggled);
                         setIsTooltipToggled(!isTooltipToggled);
                     }
                 } },
                 strings.seenAriaLabel && React.createElement(LiveMessage, { message: strings.seenAriaLabel, "aria-live": "polite" }),
-                React.createElement(Icon, { "data-ui-id": "chat-composite-message-status-icon", role: "status", "aria-label": strings.seenAriaLabel, iconName: "MessageSeen", className: mergeStyles({ color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                React.createElement(Icon, { "data-ui-id": "chat-composite-message-status-icon", role: "status", "aria-label": strings.seenAriaLabel, iconName: "MessageSeen", className: mergeStyles({
+                        color: theme.palette.themePrimary
+                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
         case 'delivered':
-            return (React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), content: strings.deliveredTooltipText, "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles },
+            return React.createElement(TooltipHost, { calloutProps: Object.assign({}, calloutProps), content: strings.deliveredTooltipText, "data-ui-id": "chat-composite-message-tooltip", styles: hostStyles },
                 strings.deliveredAriaLabel && React.createElement(LiveMessage, { message: strings.deliveredAriaLabel, "aria-live": "polite" }),
-                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.deliveredAriaLabel, iconName: "MessageDelivered", className: mergeStyles(MessageStatusIndicatorIconStyle, { color: theme.palette.themePrimary }, styles === null || styles === void 0 ? void 0 : styles.root) })));
+                React.createElement(Icon, { role: "status", "data-ui-id": "chat-composite-message-status-icon", "aria-label": strings.deliveredAriaLabel, iconName: "MessageDelivered", className: mergeStyles(MessageStatusIndicatorIconStyle, {
+                        color: theme.palette.themePrimary
+                    }, styles === null || styles === void 0 ? void 0 : styles.root) }));
         default:
             return React.createElement(React.Fragment, null);
     }
@@ -72,5 +81,9 @@ export const MessageStatusIndicator = (props) => {
 // The TooltipHost root uses display: inline by default.
 // To prevent sizing issues or tooltip positioning issues, we override to inline-block.
 // For more details see "Icon Button with Tooltip" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
-const hostStyles = { root: { display: 'inline-block' } };
+const hostStyles = {
+    root: {
+        display: 'inline-block'
+    }
+};
 //# sourceMappingURL=MessageStatusIndicator.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ICalloutContentStyles, Icon, ITooltipHostStyles, mergeStyles, TooltipHost } from '@fluentui/react';\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useState } from 'react';\nimport { LiveMessage } from 'react-aria-live';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { BaseCustomStyles } from '../types';\nimport {\n  MessageStatusIndicatorErrorIconStyle,\n  MessageStatusIndicatorIconStyle\n} from './styles/MessageStatusIndicator.styles';\n\n/**\n * Strings of {@link MessageStatusIndicator} that can be overridden.\n *\n * @public\n */\nexport interface MessageStatusIndicatorStrings {\n  /** Aria label to notify user when their message has been delivered. */\n  deliveredAriaLabel?: string;\n  /** Text to display in the delivered message icon tooltip. */\n  deliveredTooltipText: string;\n  /** Aria label to notify user when their message has been seen by others. */\n  seenAriaLabel?: string;\n  /** Text to display in the seen message icon tooltip if read number/ participant number is 1 */\n  seenTooltipText: string;\n  /** Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)*/\n  readByTooltipText?: string;\n  /** Aria label to notify user when their message is being sent. */\n  sendingAriaLabel?: string;\n  /** Text to display in the sending message icon tooltip. */\n  sendingTooltipText: string;\n  /** Aria label to notify user when their message has failed to be sent. */\n  failedToSendAriaLabel?: string;\n  /** Text to display in the failed message icon tooltip. */\n  failedToSendTooltipText: string;\n}\n\n/**\n * Props for {@link MessageStatusIndicator}.\n *\n * @public\n */\nexport interface MessageStatusIndicatorProps {\n  /** Message status that determines the icon to display. */\n  status?: MessageStatus;\n  readCount?: number;\n  onToggleToolTip?: (isToggled: boolean) => void;\n  /** number of participants not including myself */\n  remoteParticipantsCount?: number;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <MessageStatus styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: MessageStatusIndicatorStrings;\n}\n\n/**\n * Component to display the status of a sent message.\n *\n * Adds an icon and tooltip corresponding to the message status.\n *\n * @public\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n  const { status, styles, remoteParticipantsCount, onToggleToolTip, readCount } = props;\n  const localeStrings = useLocale().strings.messageStatusIndicator;\n  const [isTooltipToggled, setIsTooltipToggled] = useState<boolean>(false);\n  const strings = { ...localeStrings, ...props.strings };\n  const theme = useTheme();\n\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n\n  switch (status) {\n    case 'failed':\n      return (\n        <TooltipHost\n          content={strings.failedToSendTooltipText}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          calloutProps={{ ...calloutProps }}\n          styles={hostStyles}\n        >\n          {strings.failedToSendAriaLabel && (\n            // live message is used here and in the following tooltips so that aria labels are announced on mobile\n            <LiveMessage message={strings.failedToSendAriaLabel} aria-live=\"polite\" />\n          )}\n          <Icon\n            role=\"status\"\n            data-ui-id=\"chat-composite-message-status-icon\"\n            aria-label={strings.failedToSendAriaLabel}\n            iconName=\"MessageFailed\"\n            className={mergeStyles(\n              MessageStatusIndicatorErrorIconStyle,\n              { color: theme.palette.redDark },\n              styles?.root\n            )}\n          />\n        </TooltipHost>\n      );\n    case 'sending':\n      return (\n        <TooltipHost\n          content={strings.sendingTooltipText}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          calloutProps={{ ...calloutProps }}\n          styles={hostStyles}\n        >\n          {strings.sendingAriaLabel && <LiveMessage message={strings.sendingAriaLabel} aria-live=\"polite\" />}\n\n          <Icon\n            role=\"status\"\n            data-ui-id=\"chat-composite-message-status-icon\"\n            aria-label={strings.sendingAriaLabel}\n            iconName=\"MessageSending\"\n            className={mergeStyles(\n              MessageStatusIndicatorIconStyle,\n              { color: theme.palette.themePrimary },\n              styles?.root\n            )}\n          />\n        </TooltipHost>\n      );\n    case 'seen':\n      return (\n        <TooltipHost\n          calloutProps={{ ...calloutProps }}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          styles={hostStyles}\n          content={\n            // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'\n            // when readcount is 0, we have a bug, show 'seen' to cover up as a fall back\n            // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back\n            readCount === 0 ||\n            (remoteParticipantsCount && remoteParticipantsCount <= 1) ||\n            !readCount ||\n            !remoteParticipantsCount ||\n            strings.readByTooltipText === undefined\n              ? strings.seenTooltipText\n              : _formatString(strings.readByTooltipText, {\n                  messageThreadReadCount: `${readCount}`,\n                  remoteParticipantsCount: `${remoteParticipantsCount}`\n                })\n          }\n          onTooltipToggle={() => {\n            if (onToggleToolTip) {\n              onToggleToolTip(!isTooltipToggled);\n              setIsTooltipToggled(!isTooltipToggled);\n            }\n          }}\n        >\n          {strings.seenAriaLabel && <LiveMessage message={strings.seenAriaLabel} aria-live=\"polite\" />}\n\n          <Icon\n            data-ui-id=\"chat-composite-message-status-icon\"\n            role=\"status\"\n            aria-label={strings.seenAriaLabel}\n            iconName=\"MessageSeen\"\n            className={mergeStyles({ color: theme.palette.themePrimary }, styles?.root)}\n          />\n        </TooltipHost>\n      );\n    case 'delivered':\n      return (\n        <TooltipHost\n          calloutProps={{ ...calloutProps }}\n          content={strings.deliveredTooltipText}\n          data-ui-id=\"chat-composite-message-tooltip\"\n          styles={hostStyles}\n        >\n          {strings.deliveredAriaLabel && <LiveMessage message={strings.deliveredAriaLabel} aria-live=\"polite\" />}\n          <Icon\n            role=\"status\"\n            data-ui-id=\"chat-composite-message-status-icon\"\n            aria-label={strings.deliveredAriaLabel}\n            iconName=\"MessageDelivered\"\n            className={mergeStyles(\n              MessageStatusIndicatorIconStyle,\n              { color: theme.palette.themePrimary },\n              styles?.root\n            )}\n          />\n        </TooltipHost>\n      );\n    default:\n      return <></>;\n  }\n};\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };\n\"../../../acs-ui-common/src\""]}
+{"version":3,"file":"MessageStatusIndicator.js","sourceRoot":"","sources":["../../../../../preprocess-dist/react-components/src/components/MessageStatusIndicator.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ICalloutContentStyles, Icon, ITooltipHostStyles, mergeStyles, TooltipHost } from '@fluentui/react';\nimport { MessageStatus, _formatString } from '@internal/acs-ui-common';\nimport React, { useState } from 'react';\nimport { LiveMessage } from 'react-aria-live';\nimport { useLocale } from '../localization';\nimport { useTheme } from '../theming';\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { BaseCustomStyles } from '../types';\nimport { MessageStatusIndicatorErrorIconStyle, MessageStatusIndicatorIconStyle } from './styles/MessageStatusIndicator.styles';\n\n/**\n * Strings of {@link MessageStatusIndicator} that can be overridden.\n *\n * @public\n */\nexport interface MessageStatusIndicatorStrings {\n  /** Aria label to notify user when their message has been delivered. */\n  deliveredAriaLabel?: string;\n  /** Text to display in the delivered message icon tooltip. */\n  deliveredTooltipText: string;\n  /** Aria label to notify user when their message has been seen by others. */\n  seenAriaLabel?: string;\n  /** Text to display in the seen message icon tooltip if read number/ participant number is 1 */\n  seenTooltipText: string;\n  /** Text to display in the seen message icon tooltip if read number logic is working correctly (more than 1 read number and more than 1 particiants)*/\n  readByTooltipText?: string;\n  /** Aria label to notify user when their message is being sent. */\n  sendingAriaLabel?: string;\n  /** Text to display in the sending message icon tooltip. */\n  sendingTooltipText: string;\n  /** Aria label to notify user when their message has failed to be sent. */\n  failedToSendAriaLabel?: string;\n  /** Text to display in the failed message icon tooltip. */\n  failedToSendTooltipText: string;\n}\n\n/**\n * Props for {@link MessageStatusIndicator}.\n *\n * @public\n */\nexport interface MessageStatusIndicatorProps {\n  /** Message status that determines the icon to display. */\n  status?: MessageStatus;\n  readCount?: number;\n  onToggleToolTip?: (isToggled: boolean) => void;\n  /** number of participants not including myself */\n  remoteParticipantsCount?: number;\n  /**\n   * Allows users to pass an object containing custom CSS styles.\n   * @Example\n   * ```\n   * <MessageStatus styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: BaseCustomStyles;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: MessageStatusIndicatorStrings;\n}\n\n/**\n * Component to display the status of a sent message.\n *\n * Adds an icon and tooltip corresponding to the message status.\n *\n * @public\n */\nexport const MessageStatusIndicator = (props: MessageStatusIndicatorProps): JSX.Element => {\n  const {\n    status,\n    styles,\n    remoteParticipantsCount,\n    onToggleToolTip,\n    readCount\n  } = props;\n  const localeStrings = useLocale().strings.messageStatusIndicator;\n  const [isTooltipToggled, setIsTooltipToggled] = useState<boolean>(false);\n  const strings = {\n    ...localeStrings,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = {\n    root: {\n      padding: 0\n    },\n    calloutMain: {\n      padding: '0.5rem'\n    }\n  };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  switch (status) {\n    case 'failed':\n      return <TooltipHost content={strings.failedToSendTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n        ...calloutProps\n      }} styles={hostStyles}>\n          {strings.failedToSendAriaLabel &&\n        // live message is used here and in the following tooltips so that aria labels are announced on mobile\n        <LiveMessage message={strings.failedToSendAriaLabel} aria-live=\"polite\" />}\n          <Icon role=\"status\" data-ui-id=\"chat-composite-message-status-icon\" aria-label={strings.failedToSendAriaLabel} iconName=\"MessageFailed\" className={mergeStyles(MessageStatusIndicatorErrorIconStyle, {\n          color: theme.palette.redDark\n        }, styles?.root)} />\n        </TooltipHost>;\n    case 'sending':\n      return <TooltipHost content={strings.sendingTooltipText} data-ui-id=\"chat-composite-message-tooltip\" calloutProps={{\n        ...calloutProps\n      }} styles={hostStyles}>\n          {strings.sendingAriaLabel && <LiveMessage message={strings.sendingAriaLabel} aria-live=\"polite\" />}\n\n          <Icon role=\"status\" data-ui-id=\"chat-composite-message-status-icon\" aria-label={strings.sendingAriaLabel} iconName=\"MessageSending\" className={mergeStyles(MessageStatusIndicatorIconStyle, {\n          color: theme.palette.themePrimary\n        }, styles?.root)} />\n        </TooltipHost>;\n    case 'seen':\n      return <TooltipHost calloutProps={{\n        ...calloutProps\n      }} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles} content={\n      // when it's just 1 to 1 texting, we don't need to know who has read the message, just show message as 'seen'\n      // when readcount is 0, we have a bug, show 'seen' to cover up as a fall back\n      // when participant count is 0, we have a bug, show 'seen' to cover up as a fall back\n      readCount === 0 || remoteParticipantsCount && remoteParticipantsCount <= 1 || !readCount || !remoteParticipantsCount || strings.readByTooltipText === undefined ? strings.seenTooltipText : _formatString(strings.readByTooltipText, {\n        messageThreadReadCount: `${readCount}`,\n        remoteParticipantsCount: `${remoteParticipantsCount}`\n      })} onTooltipToggle={() => {\n        if (onToggleToolTip) {\n          onToggleToolTip(!isTooltipToggled);\n          setIsTooltipToggled(!isTooltipToggled);\n        }\n      }}>\n          {strings.seenAriaLabel && <LiveMessage message={strings.seenAriaLabel} aria-live=\"polite\" />}\n\n          <Icon data-ui-id=\"chat-composite-message-status-icon\" role=\"status\" aria-label={strings.seenAriaLabel} iconName=\"MessageSeen\" className={mergeStyles({\n          color: theme.palette.themePrimary\n        }, styles?.root)} />\n        </TooltipHost>;\n    case 'delivered':\n      return <TooltipHost calloutProps={{\n        ...calloutProps\n      }} content={strings.deliveredTooltipText} data-ui-id=\"chat-composite-message-tooltip\" styles={hostStyles}>\n          {strings.deliveredAriaLabel && <LiveMessage message={strings.deliveredAriaLabel} aria-live=\"polite\" />}\n          <Icon role=\"status\" data-ui-id=\"chat-composite-message-status-icon\" aria-label={strings.deliveredAriaLabel} iconName=\"MessageDelivered\" className={mergeStyles(MessageStatusIndicatorIconStyle, {\n          color: theme.palette.themePrimary\n        }, styles?.root)} />\n        </TooltipHost>;\n    default:\n      return <></>;\n  }\n};\n\n// The TooltipHost root uses display: inline by default.\n// To prevent sizing issues or tooltip positioning issues, we override to inline-block.\n// For more details see \"Icon Button with Tooltip\" on https://developer.microsoft.com/en-us/fluentui#/controls/web/button\nconst hostStyles: Partial<ITooltipHostStyles> = {\n  root: {\n    display: 'inline-block'\n  }\n};\"../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/MessageThread.d.ts

@@ -3,7 +3,6 @@ import { IStyle } from '@fluentui/react';
 import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message, ReadReceiptsBySenderId } from '../types';
 import { MessageStatusIndicatorProps } from './MessageStatusIndicator';
-import { FileDownloadHandler, FileMetadata } from './FileDownloadCards';
 /**
  * Fluent styles for {@link MessageThread}.
  *
@@ -89,8 +88,6 @@ export interface MessageThreadStrings {
     editBoxSubmitButton: string;
     /** String for action menu indicating there are more options */
     actionMenuMoreOptions?: string;
-    /** String for download file button in file card */
-    downloadFile: string;
 }
 /**
  * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
@@ -113,9 +110,7 @@ export declare type MessageRenderer = (props: MessageProps) => JSX.Element;
  * @public
  * Callback function run when a message is updated.
  */
-export declare type UpdateMessageCallback = (messageId: string, content: string, metadata?: Record<string, string>, options?: {
-    attachedFilesMetadata?: FileMetadata[];
-}) => Promise<void>;
+export declare type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
 /**
  * Props for {@link MessageThread}.
  *
@@ -211,11 +206,6 @@ export declare type MessageThreadProps = {
      * `messageRenderer` is not provided for `CustomMessage` and thus only available for `ChatMessage` and `SystemMessage`.
      */
     onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
-    /**
-     * Optional callback to render uploaded files in the message component.
-     * @beta
-     */
-    onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
     /**
      * Optional callback to edit a message.
      *
@@ -251,18 +241,6 @@ export declare type MessageThreadProps = {
      * Optional strings to override in component
      */
     strings?: Partial<MessageThreadStrings>;
-    /**
-     * @beta
-     * Optional function called when someone clicks on the file download icon.
-     * If file attachments are defined in the `message.metadata` property using the `fileSharingMetadata` key,
-     * this function will be called with the data inside `fileSharingMetadata` key.
-     */
-    fileDownloadHandler?: FileDownloadHandler;
-    /**
-     * Optional function to provide customized date format.
-     * @beta
-     */
-    onDisplayDateTimeString?: (messageDate: Date) => string;
 };
 /**
  * Props to render a single message.

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

@@ -24,13 +24,7 @@ import { isNarrowWidth, _useContainerWidth } from './utils/responsive';
 import { getParticipantsWhoHaveReadMessage } from './utils/getParticipantsWhoHaveReadMessage';
 import { useTheme } from '../theming';
 const isMessageSame = (first, second) => {
-    return (first.messageId === second.messageId &&
-        first.content === second.content &&
-        first.contentType === second.contentType &&
-        JSON.stringify(first.createdOn) === JSON.stringify(second.createdOn) &&
-        first.senderId === second.senderId &&
-        first.senderDisplayName === second.senderDisplayName &&
-        first.status === second.status);
+    return first.messageId === second.messageId && first.content === second.content && first.contentType === second.contentType && JSON.stringify(first.createdOn) === JSON.stringify(second.createdOn) && first.senderId === second.senderId && first.senderDisplayName === second.senderDisplayName && first.status === second.status;
 };
 /**
  * Get the latest message from the message array.
@@ -57,8 +51,7 @@ const isThereNewMessageNotFromCurrentUser = (userId, latestMessageFromPreviousMe
     if (latestMessageFromPreviousMessages === undefined) {
         return latestMessageFromNewMessages.senderId !== userId;
     }
-    return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
-        latestMessageFromNewMessages.senderId !== userId);
+    return !isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) && latestMessageFromNewMessages.senderId !== userId;
 };
 /**
  * Returns true if the current user sent the latest message and false otherwise. It will ignore messages that have no
@@ -73,24 +66,19 @@ const didUserSendTheLatestMessage = (userId, latestMessageFromPreviousMessages,
     if (latestMessageFromPreviousMessages === undefined) {
         return latestMessageFromNewMessages.senderId === userId;
     }
-    return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
-        latestMessageFromNewMessages.senderId === userId);
+    return !isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) && latestMessageFromNewMessages.senderId === userId;
 };
 const DefaultJumpToNewMessageButton = (props) => {
     const { text, onClick } = props;
-    return (React.createElement(PrimaryButton, { className: newMessageButtonStyle, styles: buttonWithIconStyles, text: text, onClick: onClick, onRenderIcon: () => React.createElement(Icon, { iconName: "Down", className: DownIconStyle }) }));
+    return React.createElement(PrimaryButton, { className: newMessageButtonStyle, styles: buttonWithIconStyles, text: text, onClick: onClick, onRenderIcon: () => React.createElement(Icon, { iconName: "Down", className: DownIconStyle }) });
 };
-const generateParticipantsStr = (participants, defaultName) => participants
-    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
-    .join(', ');
+const generateParticipantsStr = (participants, defaultName) => participants.map(participant => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`).join(', ');
 const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
     const { strings } = useLocale();
     const participantsStr = generateParticipantsStr(message.participants, defaultName);
-    const messageSuffix = message.systemMessageType === 'participantAdded'
-        ? strings.messageThread.participantJoined
-        : strings.messageThread.participantLeft;
+    const messageSuffix = message.systemMessageType === 'participantAdded' ? strings.messageThread.participantJoined : strings.messageThread.participantLeft;
     if (participantsStr !== '') {
-        return (React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
+        return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style });
     }
     return React.createElement(React.Fragment, null);
 };
@@ -101,10 +89,10 @@ const DefaultSystemMessage = (props) => {
         case 'system':
             switch (message.systemMessageType) {
                 case 'content':
-                    return (React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
+                    return React.createElement(SystemMessageComponent, { 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.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub }));
+                    return React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub });
             }
     }
     return React.createElement(React.Fragment, null);
@@ -121,56 +109,56 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
         disableEditing
     };
     switch (message.messageType) {
-        case 'chat': {
-            const myChatMessageStyle = message.status === 'failed'
-                ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer
-                : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultMyChatMessageContainer;
-            const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer;
-            messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
-            const chatMessageComponent = onRenderMessage === undefined
-                ? defaultChatMessageRenderer(messageProps)
-                : onRenderMessage(messageProps, defaultChatMessageRenderer);
-            const personaOptions = {
-                hidePersonaDetails: true,
-                size: PersonaSize.size32,
-                text: message.senderDisplayName,
-                showOverflowTooltip: false
-            };
-            const chatItemMessageStyle = (message.mine ? styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer : styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) ||
-                defaultChatItemMessageContainer(shouldOverlapAvatarAndMessage);
-            const chatGutterStyles = message.attached === 'top' || message.attached === false ? gutterWithAvatar : gutterWithHiddenAvatar;
-            return {
-                gutter: {
-                    styles: chatGutterStyles,
-                    content: message.mine ? ('') : onRenderAvatar ? (onRenderAvatar((_e = message.senderId) !== null && _e !== void 0 ? _e : '', personaOptions)) : (React.createElement(Persona, Object.assign({}, personaOptions)))
-                },
-                contentPosition: message.mine ? 'end' : 'start',
-                message: {
-                    styles: chatItemMessageStyle,
-                    content: (React.createElement(Flex, { hAlign: message.mine ? 'end' : undefined, vAlign: "end" },
-                        chatMessageComponent,
-                        React.createElement("div", { className: mergeStyles(messageStatusContainerStyle((_f = message.mine) !== null && _f !== void 0 ? _f : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_g = message.mine) !== null && _g !== void 0 ? _g : false) : '') }, showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: statusToRender })) : (defaultStatusRenderer(message, statusToRender, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0))) : (React.createElement("div", { className: mergeStyles(noMessageStatusStyle) })))))
-                },
-                attached: message.attached,
-                key: _messageKey
-            };
-        }
-        case 'system': {
-            messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
-            const systemMessageComponent = onRenderMessage === undefined ? (React.createElement(DefaultSystemMessage, Object.assign({}, messageProps))) : (onRenderMessage(messageProps, (props) => React.createElement(DefaultSystemMessage, Object.assign({}, props))));
-            return {
-                children: systemMessageComponent,
-                key: _messageKey
-            };
-        }
-        default: {
-            // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
-            const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(messageProps);
-            return {
-                children: customMessageComponent,
-                key: _messageKey
-            };
-        }
+        case 'chat':
+            {
+                const myChatMessageStyle = message.status === 'failed' ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultMyChatMessageContainer;
+                const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer;
+                messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
+                const chatMessageComponent = onRenderMessage === undefined ? defaultChatMessageRenderer(messageProps) : onRenderMessage(messageProps, defaultChatMessageRenderer);
+                const personaOptions = {
+                    hidePersonaDetails: true,
+                    size: PersonaSize.size32,
+                    text: message.senderDisplayName,
+                    showOverflowTooltip: false
+                };
+                const chatItemMessageStyle = (message.mine ? styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer : styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) || defaultChatItemMessageContainer(shouldOverlapAvatarAndMessage);
+                const chatGutterStyles = message.attached === 'top' || message.attached === false ? gutterWithAvatar : gutterWithHiddenAvatar;
+                return {
+                    gutter: {
+                        styles: chatGutterStyles,
+                        content: message.mine ? '' : onRenderAvatar ? onRenderAvatar((_e = message.senderId) !== null && _e !== void 0 ? _e : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions))
+                    },
+                    contentPosition: message.mine ? 'end' : 'start',
+                    message: {
+                        styles: chatItemMessageStyle,
+                        content: React.createElement(Flex, { hAlign: message.mine ? 'end' : undefined, vAlign: "end" },
+                            chatMessageComponent,
+                            React.createElement("div", { className: mergeStyles(messageStatusContainerStyle((_f = message.mine) !== null && _f !== void 0 ? _f : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_g = message.mine) !== null && _g !== void 0 ? _g : false) : '') }, showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({
+                                status: statusToRender
+                            }) : defaultStatusRenderer(message, statusToRender, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0) : React.createElement("div", { className: mergeStyles(noMessageStatusStyle) })))
+                    },
+                    attached: message.attached,
+                    key: _messageKey
+                };
+            }
+        case 'system':
+            {
+                messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
+                const systemMessageComponent = onRenderMessage === undefined ? React.createElement(DefaultSystemMessage, Object.assign({}, messageProps)) : onRenderMessage(messageProps, props => React.createElement(DefaultSystemMessage, Object.assign({}, props)));
+                return {
+                    children: systemMessageComponent,
+                    key: _messageKey
+                };
+            }
+        default:
+            {
+                // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
+                const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(messageProps);
+                return {
+                    children: customMessageComponent,
+                    key: _messageKey
+                };
+            }
     }
 });
 const getLastChatMessageIdWithStatus = (messages, status) => {
@@ -195,9 +183,7 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
  */
 export const MessageThread = (props) => {
     var _a;
-    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, 
-    /* @conditional-compile-remove(date-time-customization) */
-    onDisplayDateTimeString } = props;
+    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage } = props;
     const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
     const [messages, setMessages] = useState([]);
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
@@ -243,14 +229,10 @@ export const MessageThread = (props) => {
     };
     // we try to only send those message status if user is scrolled to the bottom.
     const sendMessageStatusIfAtBottom = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!isAtBottomOfScrollRef.current ||
-            !document.hasFocus() ||
-            !messagesRef.current ||
-            messagesRef.current.length === 0 ||
-            !showMessageStatus) {
+        if (!isAtBottomOfScrollRef.current || !document.hasFocus() || !messagesRef.current || messagesRef.current.length === 0 || !showMessageStatus) {
             return;
         }
-        const messagesWithId = messagesRef.current.filter((message) => {
+        const messagesWithId = messagesRef.current.filter(message => {
             return message.messageType === 'chat' && !message.mine && !!message.messageId;
         });
         if (messagesWithId.length === 0) {
@@ -258,10 +240,7 @@ export const MessageThread = (props) => {
         }
         const lastMessage = messagesWithId[messagesWithId.length - 1];
         try {
-            if (onMessageSeen &&
-                lastMessage &&
-                lastMessage.messageId &&
-                lastMessage.messageId !== messageIdSeenByMeRef.current) {
+            if (onMessageSeen && lastMessage && lastMessage.messageId && lastMessage.messageId !== messageIdSeenByMeRef.current) {
                 yield onMessageSeen(lastMessage.messageId);
                 messageIdSeenByMeRef.current = lastMessage.messageId;
             }
@@ -282,8 +261,7 @@ export const MessageThread = (props) => {
         if (!chatScrollDivRef.current) {
             return;
         }
-        const atBottom = Math.ceil(chatScrollDivRef.current.scrollTop) >=
-            chatScrollDivRef.current.scrollHeight - chatScrollDivRef.current.clientHeight;
+        const atBottom = Math.ceil(chatScrollDivRef.current.scrollTop) >= chatScrollDivRef.current.scrollHeight - chatScrollDivRef.current.clientHeight;
         if (atBottom) {
             sendMessageStatusIfAtBottom();
             if (!isAtBottomOfScrollRef.current) {
@@ -298,9 +276,7 @@ export const MessageThread = (props) => {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
                 // Fetch message until scrollTop reach the threshold for fetching new message
-                while (!isAllChatMessagesLoadedRef.current &&
-                    chatScrollDivRef.current &&
-                    chatScrollDivRef.current.scrollTop <= 500) {
+                while (!isAllChatMessagesLoadedRef.current && chatScrollDivRef.current && chatScrollDivRef.current.scrollTop <= 500) {
                     isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
                     yield delay(200);
                 }
@@ -323,8 +299,7 @@ export const MessageThread = (props) => {
         if (!chatScrollDivRef.current) {
             return;
         }
-        chatScrollDivRef.current.scrollTop =
-            chatScrollDivRef.current.scrollHeight - (previousHeightRef.current - previousTopRef.current);
+        chatScrollDivRef.current.scrollTop = chatScrollDivRef.current.scrollHeight - (previousHeightRef.current - previousTopRef.current);
     }, [messages]);
     // Fetch more messages to make the scroll bar appear, infinity scroll is then handled in the handleScroll function.
     useEffect(() => {
@@ -383,12 +358,10 @@ export const MessageThread = (props) => {
      */
     useEffect(() => {
         // If user just sent the latest message then we assume we can move user to bottom of scroll.
-        if (isThereNewMessageNotFromCurrentUser(userId, latestPreviousChatMessage, latestCurrentChatMessage) &&
-            !isAtBottomOfScrollRef.current) {
+        if (isThereNewMessageNotFromCurrentUser(userId, latestPreviousChatMessage, latestCurrentChatMessage) && !isAtBottomOfScrollRef.current) {
             setExistsNewChatMessage(true);
         }
-        else if (didUserSendTheLatestMessage(userId, latestPreviousChatMessage, latestCurrentChatMessage) ||
-            isAtBottomOfScrollRef.current) {
+        else if (didUserSendTheLatestMessage(userId, latestPreviousChatMessage, latestCurrentChatMessage) || isAtBottomOfScrollRef.current) {
             scrollToBottom();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -407,26 +380,10 @@ export const MessageThread = (props) => {
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp need to be regenerated)
     const defaultChatMessageRenderer = useCallback((messageProps) => {
         if (messageProps.message.messageType === 'chat') {
-            return (React.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, inlineAcceptRejectEditButtons: !isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo, 
-                /* @conditional-compile-remove(date-time-customization) */
-                onDisplayDateTimeString: onDisplayDateTimeString })));
+            return React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { onRenderFileDownloads: onRenderFileDownloads, message: messageProps.message, userId: props.userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, inlineAcceptRejectEditButtons: !isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo }));
         }
         return React.createElement(React.Fragment, null);
-    }, [
-        onRenderFileDownloads,
-        /* @conditional-compile-remove(file-sharing) */
-        strings,
-        props.userId,
-        participantCount,
-        isNarrow,
-        onRenderAvatar,
-        showMessageStatus,
-        onActionButtonClickMemo,
-        /* @conditional-compile-remove(date-time-customization) */
-        onDisplayDateTimeString
-    ]);
+    }, [onRenderFileDownloads, props.userId, participantCount, isNarrow, onRenderAvatar, showMessageStatus, onActionButtonClickMemo]);
     const defaultStatusRenderer = useCallback((message, status, participantCount, readCount) => {
         const onToggleToolTip = (isToggled) => {
             if (isToggled && readReceiptsBySenderIdRef.current) {
@@ -436,11 +393,11 @@ export const MessageThread = (props) => {
                 setReadCountForHoveredIndicator(undefined);
             }
         };
-        return (React.createElement(MessageStatusIndicator, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, 
+        return React.createElement(MessageStatusIndicator, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, 
             // -1 because participant count does not include myself
-            remoteParticipantsCount: participantCount ? participantCount - 1 : 0 }));
+            remoteParticipantsCount: participantCount ? participantCount - 1 : 0 });
     }, []);
-    const messagesToDisplay = useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
+    const messagesToDisplay = useMemo(() => memoizeAllMessages(memoizedMessageFn => {
         return messages.map((message, index) => {
             let key = message.messageId;
             let statusToRender = undefined;
@@ -450,18 +407,21 @@ export const MessageThread = (props) => {
                 }
                 if (showMessageStatus && message.mine) {
                     switch (message.messageId) {
-                        case lastSeenChatMessage: {
-                            statusToRender = 'seen';
-                            break;
-                        }
-                        case lastSendingChatMessage: {
-                            statusToRender = 'sending';
-                            break;
-                        }
-                        case lastDeliveredChatMessage: {
-                            statusToRender = 'delivered';
-                            break;
-                        }
+                        case lastSeenChatMessage:
+                            {
+                                statusToRender = 'seen';
+                                break;
+                            }
+                        case lastSendingChatMessage:
+                            {
+                                statusToRender = 'sending';
+                                break;
+                            }
+                        case lastDeliveredChatMessage:
+                            {
+                                statusToRender = 'delivered';
+                                break;
+                            }
                     }
                 }
                 if (message.mine && message.status === 'failed') {
@@ -473,42 +433,22 @@ export const MessageThread = (props) => {
             // The proper fix should be in selector.
             message.messageType === 'chat' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, props.disableEditing);
         });
-    }), [
-        messages,
-        showMessageDate,
-        showMessageStatus,
-        onRenderAvatar,
-        isNarrow,
-        styles,
-        onRenderMessageStatus,
-        defaultStatusRenderer,
-        defaultChatMessageRenderer,
-        strings,
-        participantCount,
-        readCountForHoveredIndicator,
-        onRenderMessage,
-        onUpdateMessage,
-        onDeleteMessage,
-        onSendMessage,
-        lastSeenChatMessage,
-        lastSendingChatMessage,
-        lastDeliveredChatMessage,
-        props.disableEditing
-    ]);
+    }), [messages, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage, props.disableEditing]);
     const theme = useTheme();
     const chatBody = useMemo(() => {
         var _a;
-        return (React.createElement(LiveAnnouncer, null,
-            React.createElement(Chat, { styles: mergeNorthstarThemes(chatStyle, linkStyles(theme), (_a = styles === null || styles === void 0 ? void 0 : styles.chatContainer) !== null && _a !== void 0 ? _a : {}), items: messagesToDisplay })));
+        return React.createElement(LiveAnnouncer, null,
+            React.createElement(Chat, { styles: mergeNorthstarThemes(chatStyle, linkStyles(theme), (_a = styles === null || styles === void 0 ? void 0 : styles.chatContainer) !== null && _a !== void 0 ? _a : {}), items: messagesToDisplay }));
     }, [theme, styles === null || styles === void 0 ? void 0 : styles.chatContainer, messagesToDisplay]);
-    return (React.createElement(Ref, { innerRef: chatThreadRef },
+    return React.createElement(Ref, { innerRef: chatThreadRef },
         React.createElement(Stack, { className: mergeStyles(messageThreadContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root), grow: true },
-            existsNewChatMessage && !disableJumpToNewMessageButton && (React.createElement("div", { className: mergeStyles(newMessageButtonContainerStyle, styles === null || styles === void 0 ? void 0 : styles.newMessageButtonContainer) }, onRenderJumpToNewMessageButton ? (onRenderJumpToNewMessageButton({ text: strings.newMessagesIndicator, onClick: scrollToBottom })) : (React.createElement(DefaultJumpToNewMessageButton, { text: strings.newMessagesIndicator, onClick: scrollToBottom })))),
-            React.createElement(Ref, { innerRef: chatScrollDivRef }, chatBody))));
+            existsNewChatMessage && !disableJumpToNewMessageButton && React.createElement("div", { className: mergeStyles(newMessageButtonContainerStyle, styles === null || styles === void 0 ? void 0 : styles.newMessageButtonContainer) }, onRenderJumpToNewMessageButton ? onRenderJumpToNewMessageButton({
+                text: strings.newMessagesIndicator,
+                onClick: scrollToBottom
+            }) : React.createElement(DefaultJumpToNewMessageButton, { text: strings.newMessagesIndicator, onClick: scrollToBottom })),
+            React.createElement(Ref, { innerRef: chatScrollDivRef }, chatBody)));
 };
 const onRenderFileDownloadsTrampoline = (props) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return props.onRenderFileDownloads;
     return undefined;
 };
 const linkStyles = (theme) => {