@azure/communication-react 1.14.0 → 1.14.1-alpha-202403261958

package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Mention } from '../MentionPopover';
+/**
+ * Provides the default implementation for rendering an Mention in a message thread
+ * @param mention - The mention to render
+ *
+ * @private
+ */
+export declare const defaultOnMentionRender: (mention: Mention) => JSX.Element;
+//# sourceMappingURL=MentionRenderer.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.js

@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+/**
+ * Provides the default implementation for rendering an Mention in a message thread
+ * @param mention - The mention to render
+ *
+ * @private
+ */
+export const defaultOnMentionRender = (mention) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const MsftMention = 'msft-mention';
+    return (React.createElement(MsftMention, { id: mention.id, key: Math.random().toString() }, mention.displayText));
+};
+//# sourceMappingURL=MentionRenderer.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MentionRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionRenderer.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/MentionRenderer.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAgB,EAAe,EAAE;IACtE,8DAA8D;IAC9D,MAAM,WAAW,GAAG,cAAqB,CAAC;IAC1C,OAAO,CACL,oBAAC,WAAW,IAAC,EAAE,EAAE,OAAO,CAAC,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,IACvD,OAAO,CAAC,WAAW,CACR,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\nimport { Mention } from '../MentionPopover';\n\n/**\n * Provides the default implementation for rendering an Mention in a message thread\n * @param mention - The mention to render\n *\n * @private\n */\nexport const defaultOnMentionRender = (mention: Mention): JSX.Element => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const MsftMention = 'msft-mention' as any;\n  return (\n    <MsftMention id={mention.id} key={Math.random().toString()}>\n      {mention.displayText}\n    </MsftMention>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { InlineImageOptions } from '../ChatMessageContent';
+import { ChatMessage } from '../../../types/ChatMessage';
+import { BlockedMessage } from '../../../types/ChatMessage';
+import { MessageThreadStrings } from '../../MessageThread';
+import { ComponentSlotStyle } from '../../../types';
+import { FileDownloadHandler } from '../../../types/Attachment';
+import { MentionDisplayOptions } from '../../MentionPopover';
+type ChatMessageComponentAsMessageBubbleProps = {
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
+    messageContainerStyle?: ComponentSlotStyle;
+    showDate?: boolean;
+    strings: MessageThreadStrings;
+    userId: string;
+    /**
+     * Whether to overlap avatar and message when the view is width constrained.
+     */
+    shouldOverlapAvatarAndMessage: boolean;
+    /**
+     * Optional callback to render uploaded files in the message component.
+     */
+    onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
+    /**
+     * Optional function called when someone clicks on the file download icon.
+     */
+    fileDownloadHandler?: FileDownloadHandler;
+    /**
+     * Optional function to provide customized date format.
+     * @beta
+     */
+    onDisplayDateTimeString?: (messageDate: Date) => string;
+    /**
+     * Optional props needed to display suggestions in the mention scenario.
+     * @internal
+     */
+    mentionDisplayOptions?: MentionDisplayOptions;
+    /**
+     * Optional callback called when an inline image is clicked.
+     * @beta
+     */
+    inlineImageOptions?: InlineImageOptions;
+};
+/** @private */
+export declare const ChatMessageComponentAsMessageBubble: React.MemoExoticComponent<(props: ChatMessageComponentAsMessageBubbleProps) => JSX.Element>;
+export {};
+//# sourceMappingURL=ChatMessageComponentAsMessageBubble.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.js

@@ -0,0 +1,86 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { Text, mergeStyles } from '@fluentui/react';
+import { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';
+import React, { useCallback, useMemo } from 'react';
+import { chatMessageDateStyle, chatMessageAuthorStyle } from '../../styles/ChatMessageComponent.styles';
+import { useIdentifiers } from '../../../identifiers/IdentifierProvider';
+import { useTheme } from '../../../theming';
+import { useLocale } from '../../../localization';
+import { createStyleFromV8Style } from '../../styles/v8StyleShim';
+import { mergeClasses } from '@fluentui/react-components';
+import { useChatMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';
+import { generateCustomizedTimestamp, generateDefaultTimestamp, getMessageBubbleContent, getMessageEditedDetails } from '../../utils/ChatMessageComponentUtils';
+/** @private */
+const MessageBubble = (props) => {
+    const ids = useIdentifiers();
+    const theme = useTheme();
+    const locale = useLocale();
+    const { userId, message, showDate, messageContainerStyle, strings, 
+    /* @conditional-compile-remove(file-sharing) */
+    fileDownloadHandler, inlineImageOptions, shouldOverlapAvatarAndMessage, 
+    /* @conditional-compile-remove(file-sharing) */
+    onRenderFileDownloads, 
+    /* @conditional-compile-remove(mention) */
+    mentionDisplayOptions, onDisplayDateTimeString } = props;
+    const formattedTimestamp = useMemo(() => {
+        const defaultTimeStamp = message.createdOn
+            ? generateDefaultTimestamp(message.createdOn, showDate, strings)
+            : undefined;
+        const customTimestamp = message.createdOn
+            ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)
+            : '';
+        return customTimestamp || defaultTimeStamp;
+    }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);
+    const getMessageDetails = useCallback(() => {
+        return getMessageEditedDetails(message, theme, strings.editedTag);
+    }, [strings.editedTag, theme, message]);
+    const getContent = useCallback(() => {
+        return getMessageBubbleContent(message, strings, userId, inlineImageOptions, 
+        /* @conditional-compile-remove(file-sharing) */
+        onRenderFileDownloads, 
+        /* @conditional-compile-remove(mention) */
+        mentionDisplayOptions, 
+        /* @conditional-compile-remove(file-sharing) */
+        fileDownloadHandler);
+    }, [
+        /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler,
+        inlineImageOptions,
+        /* @conditional-compile-remove(mention) */ mentionDisplayOptions,
+        message,
+        /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads,
+        strings,
+        userId
+    ]);
+    const isBlockedMessage = false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
+    const chatMessageCommonStyles = useChatMessageCommonStyles();
+    const chatMessageStyles = useChatMessageStyles();
+    const chatItemMessageContainerClassName = mergeClasses(
+    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
+    chatMessageStyles.body, 
+    // disable placeholder functionality for GA releases as it might confuse users
+    chatMessageStyles.bodyWithPlaceholderImage, isBlockedMessage
+        ? chatMessageCommonStyles.blocked
+        : props.message.status === 'failed'
+            ? chatMessageCommonStyles.failed
+            : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false
+        ? chatMessageStyles.bodyWithAvatar
+        : chatMessageStyles.bodyWithoutAvatar, mergeStyles(messageContainerStyle));
+    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
+    const chatMessage = (React.createElement(React.Fragment, null,
+        React.createElement("div", { key: props.message.messageId },
+            React.createElement(FluentChatMessage, { attached: attached, key: props.message.messageId, root: {
+                    className: chatMessageStyles.root,
+                    // make body not focusable to remove repetitions from narrators.
+                    // inner components are already focusable
+                    tabIndex: -1,
+                    role: 'none'
+                }, author: React.createElement(Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
+                    className: chatItemMessageContainerClassName,
+                    style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
+                }, "data-ui-id": "chat-composite-message", timestamp: React.createElement(Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails() }, getContent()))));
+    return chatMessage;
+};
+/** @private */
+export const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);
+//# sourceMappingURL=ChatMessageComponentAsMessageBubble.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageComponentAsMessageBubble.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MessageComponents/ChatMessageComponentAsMessageBubble.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEhF,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AACxG,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAU5C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AACrG,OAAO,EACL,2BAA2B,EAC3B,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,uCAAuC,CAAC;AAwC/C,eAAe;AACf,MAAM,aAAa,GAAG,CAAC,KAA+C,EAAe,EAAE;IACrF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,qBAAqB,EACrB,OAAO;IACP,+CAA+C;IAC/C,mBAAmB,EACnB,kBAAkB,EAClB,6BAA6B;IAC7B,+CAA+C;IAC/C,qBAAqB;IACrB,0CAA0C;IAC1C,qBAAqB,EACrB,uBAAuB,EACxB,GAAG,KAAK,CAAC;IAEV,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,MAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS;YACxC,CAAC,CAAC,wBAAwB,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC;YAChE,CAAC,CAAC,SAAS,CAAC;QAEd,MAAM,eAAe,GAAG,OAAO,CAAC,SAAS;YACvC,CAAC,CAAC,2BAA2B,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,uBAAuB,CAAC;YACjF,CAAC,CAAC,EAAE,CAAC;QAEP,OAAO,eAAe,IAAI,gBAAgB,CAAC;IAC7C,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,EAAE,uBAAuB,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5E,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,OAAO,uBAAuB,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAExC,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,OAAO,uBAAuB,CAC5B,OAAO,EACP,OAAO,EACP,MAAM,EACN,kBAAkB;QAClB,+CAA+C;QAC/C,qBAAqB;QACrB,0CAA0C;QAC1C,qBAAqB;QACrB,+CAA+C;QAC/C,mBAAmB,CACpB,CAAC;IACJ,CAAC,EAAE;QACD,+CAA+C,CAAC,mBAAmB;QACnE,kBAAkB;QAClB,0CAA0C,CAAC,qBAAqB;QAChE,OAAO;QACP,+CAA+C,CAAC,qBAAqB;QACrE,OAAO;QACP,MAAM;KACP,CAAC,CAAC;IAEH,MAAM,gBAAgB,GACpB,KAAK,IAAI,uDAAuD,CAAC,OAAO,CAAC,WAAW,KAAK,SAAS,CAAC;IACrG,MAAM,uBAAuB,GAAG,0BAA0B,EAAE,CAAC;IAE7D,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IACjD,MAAM,iCAAiC,GAAG,YAAY;IACpD,kGAAkG;IAClG,iBAAiB,CAAC,IAAI;IACtB,8EAA8E;IAC9E,iBAAiB,CAAC,wBAAwB,EAC1C,gBAAgB;QACd,CAAC,CAAC,uBAAuB,CAAC,OAAO;QACjC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,KAAK,QAAQ;YACnC,CAAC,CAAC,uBAAuB,CAAC,MAAM;YAChC,CAAC,CAAC,SAAS,EACb,6BAA6B,CAAC,CAAC,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,CAAC,eAAe,EACnG,OAAO,CAAC,QAAQ,KAAK,KAAK,IAAI,OAAO,CAAC,QAAQ,KAAK,KAAK;QACtD,CAAC,CAAC,iBAAiB,CAAC,cAAc;QAClC,CAAC,CAAC,iBAAiB,CAAC,iBAAiB,EACvC,WAAW,CAAC,qBAAqB,CAAC,CACnC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACzG,MAAM,WAAW,GAAG,CAClB;QACE,6BAAK,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS;YAC/B,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAC5B,IAAI,EAAE;oBACJ,SAAS,EAAE,iBAAiB,CAAC,IAAI;oBACjC,gEAAgE;oBAChE,yCAAyC;oBACzC,QAAQ,EAAE,CAAC,CAAC;oBACZ,IAAI,EAAE,MAAM;iBACb,EACD,MAAM,EAAE,oBAAC,IAAI,IAAC,SAAS,EAAE,sBAAsB,IAAG,OAAO,CAAC,iBAAiB,CAAQ,EACnF,IAAI,EAAE;oBACJ,SAAS,EAAE,iCAAiC;oBAC5C,KAAK,oBAAO,sBAAsB,CAAC,qBAAqB,CAAC,CAAE;iBAC5D,gBACU,wBAAwB,EACnC,SAAS,EACP,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,gBAAc,GAAG,CAAC,gBAAgB,IACpE,kBAAkB,CACd,EAET,OAAO,EAAE,iBAAiB,EAAE,IAE3B,UAAU,EAAE,CACK,CAChB,CACL,CACJ,CAAC;IACF,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,mCAAmC,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Text, mergeStyles } from '@fluentui/react';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { chatMessageDateStyle, chatMessageAuthorStyle } from '../../styles/ChatMessageComponent.styles';\nimport { useIdentifiers } from '../../../identifiers/IdentifierProvider';\nimport { useTheme } from '../../../theming';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMessage } from '../../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { ComponentSlotStyle } from '../../../types';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileDownloadHandler } from '../../../types/Attachment';\nimport { _AttachmentDownloadCards } from '../../AttachmentDownloadCards';\nimport { useLocale } from '../../../localization';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions } from '../../MentionPopover';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { useChatMessageStyles, useChatMessageCommonStyles } from '../../styles/MessageThread.styles';\nimport {\n  generateCustomizedTimestamp,\n  generateDefaultTimestamp,\n  getMessageBubbleContent,\n  getMessageEditedDetails\n} from '../../utils/ChatMessageComponentUtils';\n\ntype ChatMessageComponentAsMessageBubbleProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  strings: MessageThreadStrings;\n  userId: string;\n  /**\n   * Whether to overlap avatar and message when the view is width constrained.\n   */\n  shouldOverlapAvatarAndMessage: boolean;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to display suggestions in the mention scenario.\n   * @internal\n   */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  /**\n   * Optional callback called when an inline image is clicked.\n   * @beta\n   */\n  inlineImageOptions?: InlineImageOptions;\n};\n\n/** @private */\nconst MessageBubble = (props: ChatMessageComponentAsMessageBubbleProps): JSX.Element => {\n  const ids = useIdentifiers();\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const {\n    userId,\n    message,\n    showDate,\n    messageContainerStyle,\n    strings,\n    /* @conditional-compile-remove(file-sharing) */\n    fileDownloadHandler,\n    inlineImageOptions,\n    shouldOverlapAvatarAndMessage,\n    /* @conditional-compile-remove(file-sharing) */\n    onRenderFileDownloads,\n    /* @conditional-compile-remove(mention) */\n    mentionDisplayOptions,\n    onDisplayDateTimeString\n  } = props;\n\n  const formattedTimestamp = useMemo(() => {\n    const defaultTimeStamp = message.createdOn\n      ? generateDefaultTimestamp(message.createdOn, showDate, strings)\n      : undefined;\n\n    const customTimestamp = message.createdOn\n      ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)\n      : '';\n\n    return customTimestamp || defaultTimeStamp;\n  }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);\n\n  const getMessageDetails = useCallback(() => {\n    return getMessageEditedDetails(message, theme, strings.editedTag);\n  }, [strings.editedTag, theme, message]);\n\n  const getContent = useCallback(() => {\n    return getMessageBubbleContent(\n      message,\n      strings,\n      userId,\n      inlineImageOptions,\n      /* @conditional-compile-remove(file-sharing) */\n      onRenderFileDownloads,\n      /* @conditional-compile-remove(mention) */\n      mentionDisplayOptions,\n      /* @conditional-compile-remove(file-sharing) */\n      fileDownloadHandler\n    );\n  }, [\n    /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler,\n    inlineImageOptions,\n    /* @conditional-compile-remove(mention) */ mentionDisplayOptions,\n    message,\n    /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads,\n    strings,\n    userId\n  ]);\n\n  const isBlockedMessage =\n    false || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';\n  const chatMessageCommonStyles = useChatMessageCommonStyles();\n\n  const chatMessageStyles = useChatMessageStyles();\n  const chatItemMessageContainerClassName = mergeClasses(\n    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors\n    chatMessageStyles.body,\n    // disable placeholder functionality for GA releases as it might confuse users\n    chatMessageStyles.bodyWithPlaceholderImage,\n    isBlockedMessage\n      ? chatMessageCommonStyles.blocked\n      : props.message.status === 'failed'\n      ? chatMessageCommonStyles.failed\n      : undefined,\n    shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap,\n    message.attached === 'top' || message.attached === false\n      ? chatMessageStyles.bodyWithAvatar\n      : chatMessageStyles.bodyWithoutAvatar,\n    mergeStyles(messageContainerStyle)\n  );\n\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  const chatMessage = (\n    <>\n      <div key={props.message.messageId}>\n        <FluentChatMessage\n          attached={attached}\n          key={props.message.messageId}\n          root={{\n            className: chatMessageStyles.root,\n            // make body not focusable to remove repetitions from narrators.\n            // inner components are already focusable\n            tabIndex: -1,\n            role: 'none'\n          }}\n          author={<Text className={chatMessageAuthorStyle}>{message.senderDisplayName}</Text>}\n          body={{\n            className: chatItemMessageContainerClassName,\n            style: { ...createStyleFromV8Style(messageContainerStyle) }\n          }}\n          data-ui-id=\"chat-composite-message\"\n          timestamp={\n            <Text className={chatMessageDateStyle} data-ui-id={ids.messageTimestamp}>\n              {formattedTimestamp}\n            </Text>\n          }\n          details={getMessageDetails()}\n        >\n          {getContent()}\n        </FluentChatMessage>\n      </div>\n    </>\n  );\n  return chatMessage;\n};\n\n/** @private */\nexport const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { ChatMessageComponentWrapperProps } from '../ChatMessageComponentWrapper';
+import { BlockedMessage } from '../../../types/ChatMessage';
+import { ChatMessage } from '../../../types/ChatMessage';
+/**
+ * Props for {@link FluentChatMessageComponentWrapper}
+ *
+ * @private
+ */
+export type FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
+};
+/**
+ * The component for rendering a chat message using Fluent UI components
+ * and handling default and custom renderers.
+ * This component handles rendering for chat message body, avatar and message status.
+ * The chat message body, avatar and message status should be shown for both default and custom renderers.
+ *
+ * @private
+ */
+export declare const FluentChatMessageComponent: (props: FluentChatMessageComponentWrapperProps) => JSX.Element;
+//# sourceMappingURL=FluentChatMessageComponent.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.js

@@ -0,0 +1,117 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useCallback, useMemo } from 'react';
+import { gutterWithAvatar, gutterWithHiddenAvatar, useChatMessageRenderStyles } from '../../styles/MessageThread.styles';
+import { PersonaSize, mergeStyles, Persona } from '@fluentui/react';
+import { mergeClasses } from '@fluentui/react-components';
+import { createStyleFromV8Style } from '../../styles/v8StyleShim';
+import { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';
+import { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';
+import { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';
+/**
+ * The component for rendering a chat message using Fluent UI components
+ * and handling default and custom renderers.
+ * This component handles rendering for chat message body, avatar and message status.
+ * The chat message body, avatar and message status should be shown for both default and custom renderers.
+ *
+ * @private
+ */
+export const FluentChatMessageComponent = (props) => {
+    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, 
+    /* @conditional-compile-remove(date-time-customization) */
+    onDisplayDateTimeString, inlineImageOptions, 
+    /* @conditional-compile-remove(file-sharing) */
+    fileDownloadHandler, userId, 
+    /* @conditional-compile-remove(file-sharing) */
+    onRenderFileDownloads, 
+    /* @conditional-compile-remove(mention) */
+    mentionOptions } = props;
+    const chatMessageRenderStyles = useChatMessageRenderStyles();
+    const onRenderFileDownloadsMemo = useMemo(() => {
+        /* @conditional-compile-remove(file-sharing) */
+        return onRenderFileDownloads;
+        return undefined;
+    }, [/* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads]);
+    // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
+    // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
+    const defaultChatMessageRenderer = useCallback((messageProps) => {
+        if (messageProps.message.messageType === 'chat' ||
+            /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
+            return (React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, messageProps, { 
+                /* @conditional-compile-remove(file-sharing) */
+                onRenderFileDownloads: onRenderFileDownloadsMemo, 
+                /* @conditional-compile-remove(file-sharing) */
+                strings: messageProps.strings, message: messageProps.message, userId: userId, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, 
+                /* @conditional-compile-remove(date-time-customization) */
+                onDisplayDateTimeString: onDisplayDateTimeString, inlineImageOptions: inlineImageOptions, 
+                /* @conditional-compile-remove(file-sharing) */
+                fileDownloadHandler: fileDownloadHandler, 
+                /* @conditional-compile-remove(mention) */
+                mentionDisplayOptions: mentionOptions === null || mentionOptions === void 0 ? void 0 : mentionOptions.displayOptions })));
+        }
+        return React.createElement(React.Fragment, null);
+    }, [
+        onRenderFileDownloadsMemo,
+        shouldOverlapAvatarAndMessage,
+        userId,
+        /* @conditional-compile-remove(date-time-customization) */
+        onDisplayDateTimeString,
+        inlineImageOptions,
+        /* @conditional-compile-remove(file-sharing) */
+        fileDownloadHandler,
+        /* @conditional-compile-remove(mention) */
+        mentionOptions,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        new Date().toDateString()
+    ]);
+    const messageRenderer = useCallback((messageProps) => {
+        return onRenderMessage === undefined
+            ? defaultChatMessageRenderer(Object.assign({}, messageProps))
+            : onRenderMessage(messageProps, defaultChatMessageRenderer);
+    }, [defaultChatMessageRenderer, onRenderMessage]);
+    const shouldShowAvatar = useMemo(() => {
+        return message.attached === 'top' || message.attached === false;
+    }, [message.attached]);
+    const attached = useMemo(() => {
+        return getFluentUIAttachedValue(message.attached);
+    }, [message.attached]);
+    const messageRootProps = useMemo(() => {
+        return { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };
+    }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);
+    const messageBodyProps = useMemo(() => {
+        return {
+            // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
+            className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
+            style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) : {},
+            // make body not focusable to remove repetitions from narrators.
+            // inner components are already focusable
+            tabIndex: -1,
+            role: 'none'
+        };
+    }, [
+        chatMessageRenderStyles.avatarNoOverlap,
+        chatMessageRenderStyles.avatarOverlap,
+        chatMessageRenderStyles.bodyCommon,
+        chatMessageRenderStyles.bodyWithAvatar,
+        chatMessageRenderStyles.bodyWithoutAvatar,
+        shouldOverlapAvatarAndMessage,
+        shouldShowAvatar,
+        styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer
+    ]);
+    const avatar = useMemo(() => {
+        const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
+        const personaOptions = {
+            hidePersonaDetails: true,
+            size: PersonaSize.size32,
+            text: message.senderDisplayName,
+            showOverflowTooltip: false
+        };
+        return (React.createElement("div", { className: mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions))));
+    }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);
+    // Fluent UI message components are used here as for default message renderer,
+    // timestamp and author name should be shown but they aren't shown for custom renderer.
+    // More investigations are needed to check if this can be simplified with states.
+    // Avatar should be shown for both custom and default renderers.
+    return (React.createElement(FluentChatMessage, { attached: attached, root: messageRootProps, body: messageBodyProps, avatar: avatar }, messageRenderer(Object.assign({}, props))));
+};
+//# sourceMappingURL=FluentChatMessageComponent.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluentChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MessageComponents/FluentChatMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAGlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,0BAA0B,EAC3B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAY,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AAKjF,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;AAW5F;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,KAA6C,EAAe,EAAE;IACvG,MAAM,EACJ,OAAO,EACP,MAAM,EACN,6BAA6B,EAC7B,eAAe,EACf,cAAc;IACd,0DAA0D;IAC1D,uBAAuB,EACvB,kBAAkB;IAClB,+CAA+C;IAC/C,mBAAmB,EACnB,MAAM;IACN,+CAA+C;IAC/C,qBAAqB;IACrB,0CAA0C;IAC1C,cAAc,EACf,GAAG,KAAK,CAAC;IACV,MAAM,uBAAuB,GAAG,0BAA0B,EAAE,CAAC;IAE7D,MAAM,yBAAyB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7C,+CAA+C;QAC/C,OAAO,qBAAqB,CAAC;QAC7B,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,+CAA+C,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5E,sGAAsG;IACtG,qFAAqF;IACrF,MAAM,0BAA0B,GAAG,WAAW,CAC5C,CAAC,YAA0B,EAAE,EAAE;QAC7B,IACE,YAAY,CAAC,OAAO,CAAC,WAAW,KAAK,MAAM;YAC3C,uDAAuD,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,KAAK,SAAS,EACtG,CAAC;YACD,OAAO,CACL,oBAAC,mCAAmC,oBAC9B,YAAY;gBAChB,+CAA+C;gBAC/C,qBAAqB,EAAE,yBAAyB;gBAChD,+CAA+C;gBAC/C,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,MAAM,EAAE,MAAM,EACd,6BAA6B,EAAE,6BAA6B;gBAC5D,0DAA0D;gBAC1D,uBAAuB,EAAE,uBAAuB,EAChD,kBAAkB,EAAE,kBAAkB;gBACtC,+CAA+C;gBAC/C,mBAAmB,EAAE,mBAAmB;gBACxC,0CAA0C;gBAC1C,qBAAqB,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,cAAc,IACrD,CACH,CAAC;QACJ,CAAC;QACD,OAAO,yCAAK,CAAC;IACf,CAAC,EACD;QACE,yBAAyB;QACzB,6BAA6B;QAC7B,MAAM;QACN,0DAA0D;QAC1D,uBAAuB;QACvB,kBAAkB;QAClB,+CAA+C;QAC/C,mBAAmB;QACnB,0CAA0C;QAC1C,cAAc;QACd,uDAAuD;QACvD,IAAI,IAAI,EAAE,CAAC,YAAY,EAAE;KAC1B,CACF,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,YAA0B,EAAE,EAAE;QAC7B,OAAO,eAAe,KAAK,SAAS;YAClC,CAAC,CAAC,0BAA0B,mBAAM,YAAY,EAAG;YACjD,CAAC,CAAC,eAAe,CAAC,YAAY,EAAE,0BAA0B,CAAC,CAAC;IAChE,CAAC,EACD,CAAC,0BAA0B,EAAE,eAAe,CAAC,CAC9C,CAAC;IAEF,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,OAAO,CAAC,QAAQ,KAAK,KAAK,IAAI,OAAO,CAAC,QAAQ,KAAK,KAAK,CAAC;IAClE,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,wBAAwB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,uBAAuB,CAAC,WAAW,EAAE,uBAAuB,CAAC,UAAU,CAAC,EAAE,CAAC;IAC9G,CAAC,EAAE,CAAC,uBAAuB,CAAC,UAAU,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9E,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO;YACL,qGAAqG;YACrG,SAAS,EAAE,YAAY,CACrB,uBAAuB,CAAC,UAAU,EAClC,CAAC,gBAAgB,CAAC,CAAC,CAAC,uBAAuB,CAAC,iBAAiB,CAAC,CAAC,CAAC,uBAAuB,CAAC,cAAc,EACtG,6BAA6B,CAAC,CAAC,CAAC,uBAAuB,CAAC,aAAa,CAAC,CAAC,CAAC,uBAAuB,CAAC,eAAe,EAC/G,WAAW,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,wBAAwB,CAAC,CAC9C;YACD,KAAK,EACH,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,wBAAwB,MAAK,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,wBAAwB,CAAC,CAAC,CAAC,CAAC,EAAE;YAChH,gEAAgE;YAChE,yCAAyC;YACzC,QAAQ,EAAE,CAAC,CAAC;YACZ,IAAI,EAAE,MAAM;SACb,CAAC;IACJ,CAAC,EAAE;QACD,uBAAuB,CAAC,eAAe;QACvC,uBAAuB,CAAC,aAAa;QACrC,uBAAuB,CAAC,UAAU;QAClC,uBAAuB,CAAC,cAAc;QACtC,uBAAuB,CAAC,iBAAiB;QACzC,6BAA6B;QAC7B,gBAAgB;QAChB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,wBAAwB;KACjC,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,MAAM,eAAe,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,sBAAsB,CAAC;QACrF,MAAM,cAAc,GAAa;YAC/B,kBAAkB,EAAE,IAAI;YACxB,IAAI,EAAE,WAAW,CAAC,MAAM;YACxB,IAAI,EAAE,OAAO,CAAC,iBAAiB;YAC/B,mBAAmB,EAAE,KAAK;SAC3B,CAAC;QACF,OAAO,CACL,6BAAK,SAAS,EAAE,WAAW,CAAC,eAAe,CAAC,IACzC,cAAc,CAAC,CAAC,CAAC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,OAAO,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAClG,CACP,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,QAAQ,EAAE,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEpF,8EAA8E;IAC9E,uFAAuF;IACvF,iFAAiF;IACjF,gEAAgE;IAChE,OAAO,CACL,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,IAClG,eAAe,mBAAM,KAAK,EAAG,CACZ,CACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useMemo } from 'react';\nimport { MessageProps, _ChatMessageProps } from '../../MessageThread';\nimport {\n  gutterWithAvatar,\n  gutterWithHiddenAvatar,\n  useChatMessageRenderStyles\n} from '../../styles/MessageThread.styles';\nimport { IPersona, PersonaSize, mergeStyles, Persona } from '@fluentui/react';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { createStyleFromV8Style } from '../../styles/v8StyleShim';\nimport { ChatMessage as FluentChatMessage } from '@fluentui-contrib/react-chat';\nimport { getFluentUIAttachedValue } from '../../utils/ChatMessageComponentUtils';\nimport { ChatMessageComponentWrapperProps } from '../ChatMessageComponentWrapper';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types/ChatMessage';\nimport { ChatMessage } from '../../../types/ChatMessage';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\n\n/**\n * Props for {@link FluentChatMessageComponentWrapper}\n *\n * @private\n */\nexport type FluentChatMessageComponentWrapperProps = ChatMessageComponentWrapperProps & {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n};\n\n/**\n * The component for rendering a chat message using Fluent UI components\n * and handling default and custom renderers.\n * This component handles rendering for chat message body, avatar and message status.\n * The chat message body, avatar and message status should be shown for both default and custom renderers.\n *\n * @private\n */\nexport const FluentChatMessageComponent = (props: FluentChatMessageComponentWrapperProps): JSX.Element => {\n  const {\n    message,\n    styles,\n    shouldOverlapAvatarAndMessage,\n    onRenderMessage,\n    onRenderAvatar,\n    /* @conditional-compile-remove(date-time-customization) */\n    onDisplayDateTimeString,\n    inlineImageOptions,\n    /* @conditional-compile-remove(file-sharing) */\n    fileDownloadHandler,\n    userId,\n    /* @conditional-compile-remove(file-sharing) */\n    onRenderFileDownloads,\n    /* @conditional-compile-remove(mention) */\n    mentionOptions\n  } = props;\n  const chatMessageRenderStyles = useChatMessageRenderStyles();\n\n  const onRenderFileDownloadsMemo = useMemo(() => {\n    /* @conditional-compile-remove(file-sharing) */\n    return onRenderFileDownloads;\n    return undefined;\n  }, [/* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads]);\n\n  // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp\n  // needs to be regenerated), the dependency on \"new Date().toDateString()\"\" is added.\n  const defaultChatMessageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      if (\n        messageProps.message.messageType === 'chat' ||\n        /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked'\n      ) {\n        return (\n          <ChatMessageComponentAsMessageBubble\n            {...messageProps}\n            /* @conditional-compile-remove(file-sharing) */\n            onRenderFileDownloads={onRenderFileDownloadsMemo}\n            /* @conditional-compile-remove(file-sharing) */\n            strings={messageProps.strings}\n            message={messageProps.message}\n            userId={userId}\n            shouldOverlapAvatarAndMessage={shouldOverlapAvatarAndMessage}\n            /* @conditional-compile-remove(date-time-customization) */\n            onDisplayDateTimeString={onDisplayDateTimeString}\n            inlineImageOptions={inlineImageOptions}\n            /* @conditional-compile-remove(file-sharing) */\n            fileDownloadHandler={fileDownloadHandler}\n            /* @conditional-compile-remove(mention) */\n            mentionDisplayOptions={mentionOptions?.displayOptions}\n          />\n        );\n      }\n      return <></>;\n    },\n    [\n      onRenderFileDownloadsMemo,\n      shouldOverlapAvatarAndMessage,\n      userId,\n      /* @conditional-compile-remove(date-time-customization) */\n      onDisplayDateTimeString,\n      inlineImageOptions,\n      /* @conditional-compile-remove(file-sharing) */\n      fileDownloadHandler,\n      /* @conditional-compile-remove(mention) */\n      mentionOptions,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      new Date().toDateString()\n    ]\n  );\n\n  const messageRenderer = useCallback(\n    (messageProps: MessageProps) => {\n      return onRenderMessage === undefined\n        ? defaultChatMessageRenderer({ ...messageProps })\n        : onRenderMessage(messageProps, defaultChatMessageRenderer);\n    },\n    [defaultChatMessageRenderer, onRenderMessage]\n  );\n\n  const shouldShowAvatar = useMemo(() => {\n    return message.attached === 'top' || message.attached === false;\n  }, [message.attached]);\n\n  const attached = useMemo(() => {\n    return getFluentUIAttachedValue(message.attached);\n  }, [message.attached]);\n\n  const messageRootProps = useMemo(() => {\n    return { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };\n  }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);\n\n  const messageBodyProps = useMemo(() => {\n    return {\n      // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors\n      className: mergeClasses(\n        chatMessageRenderStyles.bodyCommon,\n        !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar,\n        shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap,\n        mergeStyles(styles?.chatItemMessageContainer)\n      ),\n      style:\n        styles?.chatItemMessageContainer !== undefined ? createStyleFromV8Style(styles?.chatItemMessageContainer) : {},\n      // make body not focusable to remove repetitions from narrators.\n      // inner components are already focusable\n      tabIndex: -1,\n      role: 'none'\n    };\n  }, [\n    chatMessageRenderStyles.avatarNoOverlap,\n    chatMessageRenderStyles.avatarOverlap,\n    chatMessageRenderStyles.bodyCommon,\n    chatMessageRenderStyles.bodyWithAvatar,\n    chatMessageRenderStyles.bodyWithoutAvatar,\n    shouldOverlapAvatarAndMessage,\n    shouldShowAvatar,\n    styles?.chatItemMessageContainer\n  ]);\n\n  const avatar = useMemo(() => {\n    const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;\n    const personaOptions: IPersona = {\n      hidePersonaDetails: true,\n      size: PersonaSize.size32,\n      text: message.senderDisplayName,\n      showOverflowTooltip: false\n    };\n    return (\n      <div className={mergeStyles(chatAvatarStyle)}>\n        {onRenderAvatar ? onRenderAvatar?.(message.senderId, personaOptions) : <Persona {...personaOptions} />}\n      </div>\n    );\n  }, [message.senderDisplayName, message.senderId, onRenderAvatar, shouldShowAvatar]);\n\n  // Fluent UI message components are used here as for default message renderer,\n  // timestamp and author name should be shown but they aren't shown for custom renderer.\n  // More investigations are needed to check if this can be simplified with states.\n  // Avatar should be shown for both custom and default renderers.\n  return (\n    <FluentChatMessage attached={attached} root={messageRootProps} body={messageBodyProps} avatar={avatar}>\n      {messageRenderer({ ...props })}\n    </FluentChatMessage>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/{ChatMessageComponent.d.ts → MyMessageComponents/ChatMyMessageComponent.d.ts}

@@ -1,10 +1,12 @@
 /// <reference types="react" />
-import { MessageThreadStrings } from '../MessageThread';
-import { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../types';
-import { FileDownloadHandler, AttachmentMetadata } from '../FileDownloadCards';
-import { InlineImageOptions } from './ChatMessageContent';
-type ChatMessageComponentProps = {
-    message: ChatMessage;
+import { MessageThreadStrings } from '../../MessageThread';
+import { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';
+import { BlockedMessage } from '../../../types';
+import { FileDownloadHandler, AttachmentMetadata } from '../../../types/Attachment';
+import { MentionOptions } from '../../MentionPopover';
+import { InlineImageOptions } from '../ChatMessageContent';
+type ChatMyMessageComponentProps = {
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
     userId: string;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
@@ -56,6 +58,16 @@ type ChatMessageComponentProps = {
      * @param userId - user Id
      */
     onRenderAvatar?: OnRenderAvatarCallback;
+    /**
+     * Optional function to provide customized date format.
+     * @beta
+     */
+    onDisplayDateTimeString?: (messageDate: Date) => string;
+    /**
+     * Optional props needed to lookup suggestions and display mentions in the mention scenario.
+     * @beta
+     */
+    mentionOptions?: MentionOptions;
     /**
      * Optional callback called when an inline image is clicked.
      * @beta
@@ -65,6 +77,6 @@ type ChatMessageComponentProps = {
 /**
  * @private
  */
-export declare const ChatMessageComponent: (props: ChatMessageComponentProps) => JSX.Element;
+export declare const ChatMyMessageComponent: (props: ChatMyMessageComponentProps) => JSX.Element;
 export {};
-//# sourceMappingURL=ChatMessageComponent.d.ts.map
+//# sourceMappingURL=ChatMyMessageComponent.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/{ChatMessageComponent.js → MyMessageComponents/ChatMyMessageComponent.js}

@@ -10,12 +10,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useCallback, useState } from 'react';
-import { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';
-import { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';
+import { ChatMessageComponentAsEditBox } from '../ChatMessageComponentAsEditBox';
+import { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';
 /**
  * @private
  */
-export const ChatMessageComponent = (props) => {
+export const ChatMyMessageComponent = (props) => {
+    var _a, _b;
     const { onDeleteMessage, onSendMessage, message } = props;
     const [isEditing, setIsEditing] = useState(false);
     const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);
@@ -35,17 +36,24 @@ export const ChatMessageComponent = (props) => {
         onSendMessage && onSendMessage(content !== undefined ? content : '');
     }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
     if (isEditing && message.messageType === 'chat') {
-        return React.createElement(ChatMessageComponentAsEditBox, { message: message, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter(void 0, void 0, void 0, function* () {
-                props.onUpdateMessage && message.messageId && (yield props.onUpdateMessage(message.messageId, text, metadata, options));
+        return (React.createElement(ChatMessageComponentAsEditBox, { message: message, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter(void 0, void 0, void 0, function* () {
+                props.onUpdateMessage &&
+                    message.messageId &&
+                    (yield props.onUpdateMessage(message.messageId, text, metadata, options));
                 setIsEditing(false);
-            }), onCancel: messageId => {
+            }), onCancel: (messageId) => {
                 props.onCancelEditMessage && props.onCancelEditMessage(messageId);
                 setIsEditing(false);
-            } });
+            }, 
+            /* @conditional-compile-remove(mention) */
+            mentionLookupOptions: (_a = props.mentionOptions) === null || _a === void 0 ? void 0 : _a.lookupOptions }));
     }
     else {
-        return React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, strings: props.strings, 
-            /* @conditional-compile-remove(image-overlay) */ inlineImageOptions: props.inlineImageOptions }));
+        return (React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, 
+            /* @conditional-compile-remove(date-time-customization) */
+            onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, inlineImageOptions: props.inlineImageOptions, 
+            /* @conditional-compile-remove(mention) */
+            mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions })));
     }
 };
-//# sourceMappingURL=ChatMessageComponent.js.map
+//# sourceMappingURL=ChatMyMessageComponent.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMyMessageComponent.js","sourceRoot":"","sources":["../../../../../../../../react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from '../ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { ChatMessage, ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../../types';\nimport { FileDownloadHandler, AttachmentMetadata } from '../../../types/Attachment';\n/* @conditional-compile-remove(mention) */\nimport { MentionOptions } from '../../MentionPopover';\nimport { InlineImageOptions } from '../ChatMessageContent';\nimport { ChatMyMessageComponentAsMessageBubble } from './ChatMyMessageComponentAsMessageBubble';\n\ntype ChatMyMessageComponentProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  userId: string;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onUpdateMessage?: (\n    messageId: string,\n    content: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachmentMetadata?: AttachmentMetadata[];\n    }\n  ) => Promise<void>;\n  onCancelEditMessage?: (messageId: string) => void;\n  /**\n   * Callback to delete a message. Also called before resending a message that failed to send.\n   * @param messageId ID of the message to delete\n   */\n  onDeleteMessage?: (messageId: string) => Promise<void>;\n  /**\n   * Callback to send a message\n   * @param content The message content to send\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  strings: MessageThreadStrings;\n  messageStatus?: string;\n  /**\n   * Optional text to display when the message status is 'failed'.\n   */\n  failureReason?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Whether to overlap avatar and message when the view is width constrained.\n   */\n  shouldOverlapAvatarAndMessage: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /* @conditional-compile-remove(date-time-customization) */\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions and display mentions in the mention scenario.\n   * @beta\n   */\n  mentionOptions?: MentionOptions;\n  /**\n   * Optional callback called when an inline image is clicked.\n   * @beta\n   */\n  inlineImageOptions?: InlineImageOptions;\n};\n\n/**\n * @private\n */\nexport const ChatMyMessageComponent = (props: ChatMyMessageComponentProps): JSX.Element => {\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n  const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n  const content = 'content' in message ? message.content : undefined;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientMessageId\n    else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n      onDeleteMessage(clientMessageId);\n    }\n  }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n    onSendMessage && onSendMessage(content !== undefined ? content : '');\n  }, [clientMessageId, content, onSendMessage, onDeleteMessage]);\n\n  if (isEditing && message.messageType === 'chat') {\n    return (\n      <ChatMessageComponentAsEditBox\n        message={message}\n        strings={props.strings}\n        onSubmit={async (text, metadata, options) => {\n          props.onUpdateMessage &&\n            message.messageId &&\n            (await props.onUpdateMessage(message.messageId, text, metadata, options));\n          setIsEditing(false);\n        }}\n        onCancel={(messageId) => {\n          props.onCancelEditMessage && props.onCancelEditMessage(messageId);\n          setIsEditing(false);\n        }}\n        /* @conditional-compile-remove(mention) */\n        mentionLookupOptions={props.mentionOptions?.lookupOptions}\n      />\n    );\n  } else {\n    return (\n      <ChatMyMessageComponentAsMessageBubble\n        {...props}\n        onRemoveClick={onRemoveClick}\n        onEditClick={onEditClick}\n        onResendClick={onResendClick}\n        onRenderAvatar={props.onRenderAvatar}\n        /* @conditional-compile-remove(date-time-customization) */\n        onDisplayDateTimeString={props.onDisplayDateTimeString}\n        strings={props.strings}\n        inlineImageOptions={props.inlineImageOptions}\n        /* @conditional-compile-remove(mention) */\n        mentionDisplayOptions={props.mentionOptions?.displayOptions}\n      />\n    );\n  }\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/MyMessageComponents/ChatMyMessageComponentAsMessageBubble.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import { InlineImageOptions } from '../ChatMessageContent';
+import { ChatMessage } from '../../../types/ChatMessage';
+import { BlockedMessage } from '../../../types/ChatMessage';
+import { MessageThreadStrings } from '../../MessageThread';
+import { ComponentSlotStyle, OnRenderAvatarCallback } from '../../../types';
+import { FileDownloadHandler } from '../../../types/Attachment';
+import { MentionDisplayOptions } from '../../MentionPopover';
+type ChatMyMessageComponentAsMessageBubbleProps = {
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
+    messageContainerStyle?: ComponentSlotStyle;
+    showDate?: boolean;
+    disableEditing?: boolean;
+    onEditClick: () => void;
+    onRemoveClick?: () => void;
+    onResendClick?: () => void;
+    strings: MessageThreadStrings;
+    userId: string;
+    messageStatus?: string;
+    /**
+     * Whether the status indicator for each message is displayed or not.
+     */
+    showMessageStatus?: boolean;
+    /**
+     * Optional callback to render uploaded files in the message component.
+     */
+    onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
+    /**
+     * Optional function called when someone clicks on the file download icon.
+     */
+    fileDownloadHandler?: FileDownloadHandler;
+    remoteParticipantsCount?: number;
+    onActionButtonClick: (message: ChatMessage, setMessageReadBy: (readBy: {
+        id: string;
+        displayName: string;
+    }[]) => void) => void;
+    /**
+     * Optional callback to override render of the avatar.
+     *
+     * @param userId - user Id
+     */
+    onRenderAvatar?: OnRenderAvatarCallback;
+    /**
+     * Optional function to provide customized date format.
+     * @beta
+     */
+    onDisplayDateTimeString?: (messageDate: Date) => string;
+    /**
+     * Optional props needed to display suggestions in the mention scenario.
+     * @internal
+     */
+    mentionDisplayOptions?: MentionDisplayOptions;
+    /**
+     * Optional callback called when an inline image is clicked.
+     * @beta
+     */
+    inlineImageOptions?: InlineImageOptions;
+};
+/** @private */
+export declare const ChatMyMessageComponentAsMessageBubble: React.MemoExoticComponent<(props: ChatMyMessageComponentAsMessageBubbleProps) => JSX.Element>;
+export {};
+//# sourceMappingURL=ChatMyMessageComponentAsMessageBubble.d.ts.map