@azure/communication-react 1.0.0-beta.5 → 1.0.0

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

@@ -1,15 +1,26 @@
 /// <reference types="react" />
 import { IStyle } from '@fluentui/react';
 import { ComponentSlotStyle } from '@fluentui/react-northstar';
-import { BaseCustomStylesProps, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback } from '../types';
+import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message } from '../types';
 import { MessageStatusIndicatorProps } from './MessageStatusIndicator';
-export interface MessageThreadStylesProps extends BaseCustomStylesProps {
+/**
+ * Fluent styles for {@link MessageThread}.
+ *
+ * @public
+ */
+export interface MessageThreadStyles extends BaseCustomStyles {
     /** Styles for load previous messages container. */
     loadPreviousMessagesButtonContainer?: IStyle;
     /** Styles for new message container. */
     newMessageButtonContainer?: IStyle;
     /** Styles for chat container. */
     chatContainer?: ComponentSlotStyle;
+    /** styles for my chat items.  */
+    myChatItemMessageContainer?: ComponentSlotStyle;
+    /** styles for chat items.  */
+    chatItemMessageContainer?: ComponentSlotStyle;
+    /** Styles for my chat message container. */
+    myChatMessageContainer?: ComponentSlotStyle;
     /** Styles for chat message container. */
     chatMessageContainer?: ComponentSlotStyle;
     /** Styles for system message container. */
@@ -18,7 +29,9 @@ export interface MessageThreadStylesProps extends BaseCustomStylesProps {
     messageStatusContainer?: (mine: boolean) => IStyle;
 }
 /**
- * Strings of MessageThread that can be overridden
+ * Strings of {@link MessageThread} that can be overridden.
+ *
+ * @public
  */
 export interface MessageThreadStrings {
     /** String for Sunday */
@@ -41,15 +54,48 @@ export interface MessageThreadStrings {
     participantJoined: string;
     /** String for participants left */
     participantLeft: string;
+    /** Tag shown on a message that has been edited */
+    editedTag: string;
+    /** String for editing message in floating menu */
+    editMessage: string;
+    /** String for removing message in floating menu */
+    removeMessage: string;
+    /** String for LiveMessage introduction for the Chat Message */
+    liveAuthorIntro: string;
+    /** String for warning on text limit exceeded in EditBox*/
+    editBoxTextLimit: string;
+    /** String for placeholder text in EditBox when there is no user input*/
+    editBoxPlaceholderText: string;
+    /** String for new messages indicator*/
+    newMessagesIndicator: string;
+    /** String for replacing display name when there is none*/
+    noDisplayNameSub: string;
+    /** String for Cancel button in EditBox*/
+    editBoxCancelButton: string;
+    /** String for Submit in EditBox when there is no user input*/
+    editBoxSubmitButton: string;
 }
+/**
+ * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
+ *
+ * @public
+ */
 export interface JumpToNewMessageButtonProps {
+    /** String for button text */
+    text: string;
+    /** Callback for when button is clicked */
     onClick: () => void;
 }
-export declare type DefaultMessageRendererType = (props: MessageProps, ids?: {
-    messageTimestamp?: string;
-}) => JSX.Element;
 /**
- * Props for MessageThread component
+ * A component to render a single message.
+ *
+ * @public
+ */
+export declare type MessageRenderer = (props: MessageProps) => JSX.Element;
+/**
+ * Props for {@link MessageThread}.
+ *
+ * @public
  */
 export declare type MessageThreadProps = {
     /**
@@ -67,7 +113,7 @@ export declare type MessageThreadProps = {
      * <MessageThread styles={{ root: { background: 'blue' } }} />
      * ```
      */
-    styles?: MessageThreadStylesProps;
+    styles?: MessageThreadStyles;
     /**
      * Whether the new message button is disabled or not.
      *
@@ -125,13 +171,13 @@ export declare type MessageThreadProps = {
     /**
      * Optional callback to override render of a message.
      *
-     * @param messageProps - props of type MessageProps
-     * @param defaultOnRender - default render of type DefaultMessageRendererType
+     * @param messageProps - props of type {@link communication-react#MessageProps}
+     * @param defaultOnRender - default render of type {@link communication-react#MessageRenderer}
      *
      * @remarks
-     * `defaultOnRender` is not provided for `CustomMessage` and thus only available for `ChatMessage` and `SystemMessage`.
+     * `messageRenderer` is not provided for `CustomMessage` and thus only available for `ChatMessage` and `SystemMessage`.
      */
-    onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: DefaultMessageRendererType) => JSX.Element;
+    onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
     /**
      * Optional callback to edit a message.
      *
@@ -148,22 +194,31 @@ export declare type MessageThreadProps = {
      */
     onDeleteMessage?: (messageId: string) => Promise<void>;
     /**
-     * Whether disable the editing feature, false by default
+    /**
+     * Disable editing messages.
+     *
+     * @remarks This removes the action menu on messages.
+     *
+     * @defaultValue `false`
      */
-    editDisabled?: boolean;
+    disableEditing?: boolean;
     /**
      * Optional strings to override in component
      */
     strings?: Partial<MessageThreadStrings>;
 };
 /**
- * Props for MessageThread component
+ * Props to render a single message.
+ *
+ * See {@link MessageRenderer}.
+ *
+ * @public
  */
 export declare type MessageProps = {
     /**
      * Message to render. It can type `ChatMessage` or `SystemMessage` or `CustomMessage`.
      */
-    message: ChatMessage | SystemMessage | CustomMessage;
+    message: Message;
     /**
      * Strings from parent MessageThread component
      */
@@ -179,9 +234,13 @@ export declare type MessageProps = {
      */
     showDate?: boolean;
     /**
-     * Whether edit feature is disabled or not
+     * Disable editing messages.
+     *
+     * @remarks This removes the action menu on messages.
+     *
+     * @defaultValue `false`
      */
-    editDisabled?: boolean;
+    disableEditing?: boolean;
     /**
      * Optional callback to edit a message.
      *
@@ -206,6 +265,8 @@ export declare type MessageProps = {
  * Users can also customize `MessageThread` by passing in their own Avatar, `MessageStatusIndicator` icon, `JumpToNewMessageButton`, `LoadPreviousMessagesButton` and the behavior of these controls.
  *
  * `MessageThread` internally uses the `Chat` & `Chat.Message` component from `@fluentui/react-northstar`. You can checkout the details about these [two components](https://fluentsite.z22.web.core.windows.net/0.53.0/components/chat/props).
+ *
+ * @public
  */
 export declare const MessageThread: (props: MessageThreadProps) => JSX.Element;
 //# sourceMappingURL=MessageThread.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageThread.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAQ,MAAM,EAAqE,MAAM,iBAAiB,CAAC;AAClH,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG/D,OAAO,EACL,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EAGb,sBAAsB,EAEvB,MAAM,UAAU,CAAC;AAClB,OAAO,EAA0B,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAkG/F,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,mDAAmD;IACnD,mCAAmC,CAAC,EAAE,MAAM,CAAC;IAC7C,wCAAwC;IACxC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iCAAiC;IACjC,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,yCAAyC;IACzC,oBAAoB,CAAC,EAAE,kBAAkB,CAAC;IAC1C,2CAA2C;IAC3C,sBAAsB,CAAC,EAAE,kBAAkB,CAAC;IAC5C,qDAAqD;IACrD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;CACpD;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mCAAmC;IACnC,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoBD,oBAAY,0BAA0B,GAAG,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,CAAC,EAAE;IAAE,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,GAAG,CAAC,OAAO,CAAC;AAoKnH;;GAEG;AACH,oBAAY,kBAAkB,GAAG;IAC/B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,CAAC,WAAW,GAAG,aAAa,GAAG,aAAa,CAAC,EAAE,CAAC;IAC1D;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC;;;;OAIG;IACH,6BAA6B,CAAC,EAAE,OAAO,CAAC;IACxC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,2BAA2B,EAAE,2BAA2B,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACzG;;;;OAIG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC;;;;OAIG;IACH,8BAA8B,CAAC,EAAE,CAAC,qBAAqB,EAAE,2BAA2B,KAAK,GAAG,CAAC,OAAO,CAAC;IACrG;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1E;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,eAAe,CAAC,EAAE,0BAA0B,KAAK,GAAG,CAAC,OAAO,CAAC;IAE5G;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAExE;;;;;OAKG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvD;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,oBAAY,YAAY,GAAG;IACzB;;OAEG;IACH,OAAO,EAAE,WAAW,GAAG,aAAa,GAAG,aAAa,CAAC;IACrD;;OAEG;IACH,OAAO,EAAE,oBAAoB,CAAC;IAC9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,kBAAkB,CAAC;IAC3C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAExE;;;;;OAKG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACxD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,KAAG,WA0WzD,CAAC"}
+{"version":3,"file":"MessageThread.d.ts","sourceRoot":"","sources":["../../../../../../react-components/src/components/MessageThread.tsx"],"names":[],"mappings":"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"}

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

@@ -11,20 +11,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Chat, Flex, Ref } from '@fluentui/react-northstar';
-import { DownIconStyle, newMessageButtonContainerStyle, messageThreadContainerStyle, chatStyle, newMessageButtonStyle, messageStatusContainerStyle, noMessageStatusStyle } from './styles/MessageThread.styles';
+import { DownIconStyle, newMessageButtonContainerStyle, messageThreadContainerStyle, chatStyle, buttonWithIconStyles, newMessageButtonStyle, messageStatusContainerStyle, noMessageStatusStyle, defaultChatItemMessageContainer, defaultMyChatMessageContainer, defaultChatMessageContainer, gutterWithAvatar, gutterWithHiddenAvatar } from './styles/MessageThread.styles';
 import { Icon, mergeStyles, Persona, PersonaSize, PrimaryButton, Stack } from '@fluentui/react';
 import { LiveAnnouncer } from 'react-aria-live';
 import { delay } from './utils/delay';
 import { MessageStatusIndicator } from './MessageStatusIndicator';
 import { memoizeFnAll } from "../../../acs-ui-common/src";
 import { SystemMessage as SystemMessageComponent } from './SystemMessage';
-import { ChatMessageComponent } from './ChatMessageComponent';
+import { ChatMessageComponent } from './ChatMessage/ChatMessageComponent';
 import { useLocale } from '../localization/LocalizationProvider';
-const NEW_MESSAGES = 'New Messages';
+import { isNarrowWidth, useContainerWidth } from './utils/responsive';
 const isMessageSame = (first, second) => {
     return (first.messageId === second.messageId &&
         first.content === second.content &&
-        first.type === second.type &&
+        first.contentType === second.contentType &&
         JSON.stringify(first.createdOn) === JSON.stringify(second.createdOn) &&
         first.senderId === second.senderId &&
         first.senderDisplayName === second.senderDisplayName &&
@@ -36,99 +36,79 @@ const isMessageSame = (first, second) => {
  * @param messages
  */
 const getLatestChatMessage = (messages) => {
-    let latestChatMessage = undefined;
     for (let i = messages.length - 1; i >= 0; i--) {
         const message = messages[i];
-        if (message.type === 'chat') {
-            const payload = message.payload;
-            if (payload.createdOn !== undefined) {
-                latestChatMessage = payload;
-                break;
-            }
+        if (message.messageType === 'chat' && !!message.createdOn) {
+            return message;
         }
     }
-    return latestChatMessage;
+    return undefined;
 };
 /**
  * Compare latestMessageFromPreviousMessages & latestMessageFromNewMessages to see if the new message is not from
  * current user.
- *
- * @param latestMessageFromPreviousMessages
- * @param latestMessageFromNewMessages
- * @param userId
  */
-const isThereNewMessageNotFromCurrentUser = (latestMessageFromPreviousMessages, latestMessageFromNewMessages, userId) => {
+const isThereNewMessageNotFromCurrentUser = (userId, latestMessageFromPreviousMessages, latestMessageFromNewMessages) => {
     if (latestMessageFromNewMessages === undefined) {
         return false;
     }
-    else {
-        if (latestMessageFromPreviousMessages === undefined) {
-            return latestMessageFromNewMessages.senderId !== userId;
-        }
-        else {
-            return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
-                latestMessageFromNewMessages.senderId !== userId);
-        }
+    if (latestMessageFromPreviousMessages === undefined) {
+        return 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
  * sender, messages that have failed to send, and messages from the current user that is marked as SEEN. This is meant
  * as an indirect way to detect if user is at bottom of the chat when the component updates with new messages. If we
  * updated this component due to current user sending a message we want to then call scrollToBottom.
- *
- * @param latestMessageFromPreviousMessages
- * @param latestMessageFromNewMessages
  */
-const didUserSendTheLatestMessage = (latestMessageFromPreviousMessages, latestMessageFromNewMessages, userId) => {
+const didUserSendTheLatestMessage = (userId, latestMessageFromPreviousMessages, latestMessageFromNewMessages) => {
     if (latestMessageFromNewMessages === undefined) {
         return false;
     }
-    else {
-        if (latestMessageFromPreviousMessages === undefined) {
-            return latestMessageFromNewMessages.senderId === userId;
-        }
-        else {
-            return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
-                latestMessageFromNewMessages.senderId === userId);
-        }
+    if (latestMessageFromPreviousMessages === undefined) {
+        return latestMessageFromNewMessages.senderId === userId;
     }
+    return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
+        latestMessageFromNewMessages.senderId === userId);
 };
 const DefaultJumpToNewMessageButton = (props) => {
-    const { onClick } = props;
-    return (React.createElement(PrimaryButton, { className: newMessageButtonStyle, onClick: onClick },
-        React.createElement(Icon, { iconName: "Down", className: DownIconStyle }),
-        NEW_MESSAGES));
+    const { text, onClick } = props;
+    return (React.createElement(PrimaryButton, { className: newMessageButtonStyle, styles: buttonWithIconStyles, text: text, onClick: onClick, onRenderIcon: () => React.createElement(Icon, { iconName: "Down", className: DownIconStyle }) }));
 };
-const generateParticipantsStr = (participants) => participants
-    .map((participant) => `${!participant.displayName || participant.displayName === '' ? 'No name' : participant.displayName}`)
+const generateParticipantsStr = (participants, defaultName) => participants
+    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
     .join(', ');
-const ParticipantSystemMessageComponent = ({ payload, style }) => {
+const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
     var _a;
     const { strings } = useLocale();
-    const participantsStr = generateParticipantsStr(payload.participants);
-    const messageSuffix = payload.type === 'participantAdded'
+    const participantsStr = generateParticipantsStr(message.participants, defaultName);
+    const messageSuffix = message.systemMessageType === 'participantAdded'
         ? strings.messageThread.participantJoined
         : strings.messageThread.participantLeft;
     if (participantsStr !== '') {
-        return (React.createElement(SystemMessageComponent, { iconName: ((_a = payload.iconName) !== null && _a !== void 0 ? _a : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
+        return (React.createElement(SystemMessageComponent, { iconName: ((_a = message.iconName) !== null && _a !== void 0 ? _a : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
     }
     return React.createElement(React.Fragment, null);
 };
-const DefaultSystemMessageRenderer = (props) => {
+const DefaultSystemMessage = (props) => {
     var _a, _b;
-    if (props.message.type === 'system') {
-        const payload = props.message.payload;
-        if (payload.type === 'content') {
-            return (React.createElement(SystemMessageComponent, { iconName: ((_a = payload.iconName) !== null && _a !== void 0 ? _a : ''), content: (_b = payload.content) !== null && _b !== void 0 ? _b : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
-        }
-        if (payload.type === 'participantAdded' || payload.type === 'participantRemoved') {
-            return React.createElement(ParticipantSystemMessageComponent, { payload: payload, style: props.messageContainerStyle });
-        }
+    const message = props.message;
+    switch (message.messageType) {
+        case 'system':
+            switch (message.systemMessageType) {
+                case 'content':
+                    return (React.createElement(SystemMessageComponent, { iconName: ((_a = message.iconName) !== null && _a !== void 0 ? _a : ''), content: (_b = message.content) !== null && _b !== void 0 ? _b : '', 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(React.Fragment, null);
 };
-const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, onRenderMessage, onUpdateMessage, onDeleteMessage) => {
+const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, onRenderMessage, onUpdateMessage, onDeleteMessage) => {
     var _a, _b, _c;
     const messageProps = {
         message,
@@ -137,52 +117,61 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
         onUpdateMessage,
         onDeleteMessage
     };
-    if (message.type === 'chat') {
-        const payload = message.payload;
-        messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
-        const chatMessageComponent = onRenderMessage === undefined
-            ? defaultChatMessageRenderer(messageProps)
-            : onRenderMessage(messageProps, defaultChatMessageRenderer);
-        const personaOptions = {
-            text: payload.senderDisplayName,
-            hidePersonalDetails: true,
-            size: PersonaSize.size32
-        };
-        return {
-            gutter: payload.mine ? ('') : onRenderAvatar ? (onRenderAvatar((_a = payload.senderId) !== null && _a !== void 0 ? _a : '', personaOptions)) : (React.createElement(Persona, Object.assign({}, personaOptions))),
-            contentPosition: payload.mine ? 'end' : 'start',
-            message: {
-                className: mergeStyles({ width: 'calc(100% - 6.25rem)' }),
-                content: (React.createElement(Flex, { hAlign: payload.mine ? 'end' : undefined, vAlign: "end" },
-                    chatMessageComponent,
-                    React.createElement("div", { className: mergeStyles(messageStatusContainerStyle((_b = payload.mine) !== null && _b !== void 0 ? _b : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_c = payload.mine) !== null && _c !== void 0 ? _c : false) : '') }, showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: statusToRender })) : (defaultStatusRenderer(statusToRender))) : (React.createElement("div", { className: mergeStyles(noMessageStatusStyle) })))))
-            },
-            attached: payload.attached,
-            key: _messageKey
-        };
-    }
-    else if (message.type === 'system') {
-        messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
-        const systemMessageComponent = onRenderMessage === undefined ? (React.createElement(DefaultSystemMessageRenderer, Object.assign({}, messageProps))) : (onRenderMessage(messageProps, (props) => React.createElement(DefaultSystemMessageRenderer, Object.assign({}, props))));
-        return {
-            children: systemMessageComponent,
-            key: _messageKey
-        };
-    }
-    else {
-        // 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
-        };
+    switch (message.messageType) {
+        case 'chat': {
+            const myChatMessageStyle = (styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) || defaultMyChatMessageContainer;
+            const chatMessageStyle = (styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) || defaultChatMessageContainer;
+            messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
+            const chatMessageComponent = onRenderMessage === undefined
+                ? defaultChatMessageRenderer(messageProps)
+                : onRenderMessage(messageProps, defaultChatMessageRenderer);
+            const personaOptions = {
+                hidePersonalDetails: true,
+                size: PersonaSize.size32,
+                text: message.senderDisplayName
+            };
+            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((_a = message.senderId) !== null && _a !== void 0 ? _a : '', 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((_b = message.mine) !== null && _b !== void 0 ? _b : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_c = message.mine) !== null && _c !== void 0 ? _c : false) : '') }, showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: statusToRender })) : (defaultStatusRenderer(statusToRender))) : (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) => {
     for (let i = messages.length - 1; i >= 0; i--) {
         const message = messages[i];
-        if (message.type === 'chat' && message.payload.status === status && message.payload.mine) {
-            return message.payload.messageId;
+        if (message.messageType === 'chat' && message.status === status && message.mine) {
+            return message.messageId;
         }
     }
     return undefined;
@@ -195,10 +184,12 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
  * Users can also customize `MessageThread` by passing in their own Avatar, `MessageStatusIndicator` icon, `JumpToNewMessageButton`, `LoadPreviousMessagesButton` and the behavior of these controls.
  *
  * `MessageThread` internally uses the `Chat` & `Chat.Message` component from `@fluentui/react-northstar`. You can checkout the details about these [two components](https://fluentsite.z22.web.core.windows.net/0.53.0/components/chat/props).
+ *
+ * @public
  */
 export const MessageThread = (props) => {
     var _a;
-    const { messages: newMessages, userId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 0, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage } = props;
+    const { messages: newMessages, userId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage } = props;
     const [messages, setMessages] = useState([]);
     // 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.
@@ -219,6 +210,11 @@ export const MessageThread = (props) => {
     const chatScrollDivRef = useRef(null);
     const chatThreadRef = useRef(null);
     const isLoadingChatMessagesRef = useRef(false);
+    // When the chat thread is narrow, we perform space optimizations such as overlapping
+    // the avatar on top of the chat message and moving the chat accept/reject edit buttons
+    // to a new line
+    const chatThreadWidth = useContainerWidth(chatThreadRef);
+    const isNarrow = isNarrowWidth(chatThreadWidth);
     const messagesRef = useRef(messages);
     const setMessagesRef = (messagesWithAttachedValue) => {
         messagesRef.current = messagesWithAttachedValue;
@@ -244,7 +240,7 @@ export const MessageThread = (props) => {
             return;
         }
         const messagesWithId = messagesRef.current.filter((message) => {
-            return message.type === 'chat' && !message.payload.mine && !!message.payload.messageId;
+            return message.messageType === 'chat' && !message.mine && !!message.messageId;
         });
         if (messagesWithId.length === 0) {
             return;
@@ -253,10 +249,10 @@ export const MessageThread = (props) => {
         try {
             if (onMessageSeen &&
                 lastMessage &&
-                lastMessage.payload.messageId &&
-                lastMessage.payload.messageId !== messageIdSeenByMeRef.current) {
-                yield onMessageSeen(lastMessage.payload.messageId);
-                messageIdSeenByMeRef.current = lastMessage.payload.messageId;
+                lastMessage.messageId &&
+                lastMessage.messageId !== messageIdSeenByMeRef.current) {
+                yield onMessageSeen(lastMessage.messageId);
+                messageIdSeenByMeRef.current = lastMessage.messageId;
             }
         }
         catch (e) {
@@ -275,7 +271,7 @@ export const MessageThread = (props) => {
         if (!chatScrollDivRef.current) {
             return;
         }
-        const atBottom = Math.floor(chatScrollDivRef.current.scrollTop) >=
+        const atBottom = Math.ceil(chatScrollDivRef.current.scrollTop) >=
             chatScrollDivRef.current.scrollHeight - chatScrollDivRef.current.clientHeight;
         if (atBottom) {
             sendMessageStatusIfAtBottom();
@@ -311,14 +307,16 @@ export const MessageThread = (props) => {
     // we need to get previousTop before it prepend contents
     // Execute order [newMessage useEffect] => get previousTop => dom update => [messages useEffect]
     useEffect(() => {
-        if (!chatScrollDivRef.current)
+        if (!chatScrollDivRef.current) {
             return;
+        }
         previousTopRef.current = chatScrollDivRef.current.scrollTop;
         previousHeightRef.current = chatScrollDivRef.current.scrollHeight;
     }, [newMessages]);
     useEffect(() => {
-        if (!chatScrollDivRef.current)
+        if (!chatScrollDivRef.current) {
             return;
+        }
         if (previousTopRef.current === 0) {
             const currentHeight = chatScrollDivRef.current.scrollHeight;
             chatScrollDivRef.current.scrollTop =
@@ -382,11 +380,11 @@ 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(latestPreviousChatMessage, latestCurrentChatMessage, userId) &&
+        if (isThereNewMessageNotFromCurrentUser(userId, latestPreviousChatMessage, latestCurrentChatMessage) &&
             !isAtBottomOfScrollRef.current) {
             setExistsNewChatMessage(true);
         }
-        else if (didUserSendTheLatestMessage(latestPreviousChatMessage, latestCurrentChatMessage, userId) ||
+        else if (didUserSendTheLatestMessage(userId, latestPreviousChatMessage, latestCurrentChatMessage) ||
             isAtBottomOfScrollRef.current) {
             scrollToBottom();
         }
@@ -394,26 +392,26 @@ export const MessageThread = (props) => {
     }, [messages]);
     // 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.type === 'chat') {
-            return React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { message: messageProps.message }));
+        if (messageProps.message.messageType === 'chat') {
+            return (React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { message: messageProps.message, inlineAcceptRejectEditButtons: !isNarrow })));
         }
         return React.createElement(React.Fragment, null);
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [new Date().toDateString()]);
+    [new Date().toDateString(), isNarrow]);
     const localeStrings = useLocale().strings.messageThread;
     const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
     const defaultStatusRenderer = useCallback((status) => React.createElement(MessageStatusIndicator, { status: status }), []);
     const messagesToDisplay = useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
         return messages.map((message, index) => {
-            let key = message.payload.messageId;
-            if (message.type === 'chat' && (!message.payload.messageId || message.payload.messageId === '')) {
-                key = message.payload.clientMessageId;
-            }
+            let key = message.messageId;
             let statusToRender = undefined;
-            if (message.type === 'chat') {
-                if (showMessageStatus && message.payload.mine) {
-                    switch (message.payload.messageId) {
+            if (message.messageType === 'chat') {
+                if (!message.messageId || message.messageId === '') {
+                    key = message.clientMessageId;
+                }
+                if (showMessageStatus && message.mine) {
+                    switch (message.messageId) {
                         case lastSeenChatMessage: {
                             statusToRender = 'seen';
                             break;
@@ -428,20 +426,21 @@ export const MessageThread = (props) => {
                         }
                     }
                 }
-                if (message.payload.mine && message.payload.status === 'failed')
+                if (message.mine && message.status === 'failed') {
                     statusToRender = 'failed';
+                }
             }
-            console.log('function: ' + onUpdateMessage);
-            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, 
+            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, 
             // Temporary solution to make sure we re-render if attach attribute is changed.
             // The proper fix should be in selector.
-            message.type === 'chat' ? message.payload.attached : undefined, statusToRender, onRenderMessage, onUpdateMessage, onDeleteMessage);
+            message.messageType === 'chat' ? message.attached : undefined, statusToRender, onRenderMessage, onUpdateMessage, onDeleteMessage);
         });
     }), [
         messages,
         showMessageDate,
         showMessageStatus,
         onRenderAvatar,
+        isNarrow,
         styles,
         onRenderMessageStatus,
         defaultStatusRenderer,
@@ -462,6 +461,6 @@ export const MessageThread = (props) => {
     return (React.createElement(Ref, { innerRef: chatThreadRef },
         React.createElement(Stack, { className: mergeStyles(messageThreadContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root), grow: true },
             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({ onClick: scrollToBottom })) : (React.createElement(DefaultJumpToNewMessageButton, { onClick: scrollToBottom })))))));
+            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 })))))));
 };
 //# sourceMappingURL=MessageThread.js.map