@azure/communication-react 1.15.0-alpha-202404090013 → 1.15.0-alpha-202404100012

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BcyLWrGT.js');
+var index = require('./index-DtankK1c.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.15.0-alpha-202404090013';
+module.exports = '1.15.0-alpha-202404100012';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.15.0-alpha-202404090013';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.15.0-alpha-202404100012';\n"]}

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

@@ -7,7 +7,8 @@ import { useMemo } from 'react';
 import { useLocale } from '../localization';
 import { _AttachmentCard } from './AttachmentCard';
 import { _AttachmentCardGroup } from './AttachmentCardGroup';
-import { _formatString } from "../../../acs-ui-common/src";
+/* @conditional-compile-remove(attachment-download) */
+import { getAttachmentCountLiveMessage } from './ChatMessage/ChatMessageContent';
 const attachmentDownloadCardsStyle = {
     marginTop: '0.25rem'
 };
@@ -38,15 +39,10 @@ export const _AttachmentDownloadCards = (props) => {
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadAttachment) !== null && _b !== void 0 ? _b : localeStrings.downloadAttachment;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadAttachment, localeStrings.downloadAttachment]);
     const attachmentCardGroupDescription = useMemo(() => () => {
-        var _a, _b, _c, _d;
-        const attachmentGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.attachmentCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.attachmentCardGroupMessage;
-        /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-        return _formatString(attachmentGroupLocaleString, {
-            attachmentCount: `${(_c = attachments === null || attachments === void 0 ? void 0 : attachments.length) !== null && _c !== void 0 ? _c : 0}`
-        });
-        return _formatString(attachmentGroupLocaleString, {
-            attachmentCount: `${(_d = attachments === null || attachments === void 0 ? void 0 : attachments.length) !== null && _d !== void 0 ? _d : 0}`
-        });
+        var _a, _b;
+        /* @conditional-compile-remove(attachment-download) */
+        return getAttachmentCountLiveMessage(attachments !== null && attachments !== void 0 ? attachments : [], (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.attachmentCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.attachmentCardGroupMessage);
+        return '';
     }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.attachmentCardGroupMessage, localeStrings.attachmentCardGroupMessage, attachments]);
     if (!attachments || attachments.length === 0 || !attachments) {
         return React.createElement(React.Fragment, null);

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/AttachmentDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, TooltipHost } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { useLocale } from '../localization';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup } from './AttachmentCardGroup';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { AttachmentMenuAction, AttachmentMetadata } from '../types/Attachment';\nimport { ChatMessage } from '../types';\n\n/**\n * Represents the type of attachment\n * @public\n */\nexport type ChatAttachmentType =\n  | 'unknown'\n  | 'image'\n  | /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ 'file';\n\n/**\n * Strings of _AttachmentDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentDownloadCardsStrings {\n  /** Aria label to notify user when focus is on attachment download button. */\n  downloadAttachment: string;\n  /** Aria label to notify user when focus is on attachment open button. */\n  openAttachment: string;\n  attachmentCardGroupMessage: string;\n}\n\n/**\n * @internal\n */\nexport interface _AttachmentDownloadCardsProps {\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  attachments?: AttachmentMetadata[];\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  message?: ChatMessage;\n  /**\n   * Optional callback to handle attachment download\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n  /**\n   * Optional callback that runs if downloadHandler returns an error.\n   */\n  onActionHandlerFailed?: (errMsg: string) => void;\n  /**\n   * Optional aria label strings for attachment download cards\n   */\n  strings?: _AttachmentDownloadCardsStrings;\n}\n\nconst attachmentDownloadCardsStyle = {\n  marginTop: '0.25rem'\n};\n\n/**\n * @internal\n */\nexport const _AttachmentDownloadCards = (props: _AttachmentDownloadCardsProps): JSX.Element => {\n  const { attachments, message } = props;\n  const localeStrings = useLocaleStringsTrampoline();\n\n  const getMenuActions = useCallback(\n    (\n      attachment: AttachmentMetadata,\n      localeStrings: _AttachmentDownloadCardsStrings,\n      message?: ChatMessage,\n      action?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]\n    ): AttachmentMenuAction[] => {\n      const defaultMenuActions = getDefaultMenuActions(localeStrings, message);\n      try {\n        const actions = action?.(attachment, message);\n        if (actions && actions.length > 0) {\n          return actions;\n        } else {\n          return defaultMenuActions;\n        }\n      } catch (error) {\n        return defaultMenuActions;\n      }\n    },\n    []\n  );\n\n  const downloadAttachmentButtonString = useMemo(\n    () => () => {\n      return props.strings?.downloadAttachment ?? localeStrings.downloadAttachment;\n    },\n    [props.strings?.downloadAttachment, localeStrings.downloadAttachment]\n  );\n\n  const attachmentCardGroupDescription = useMemo(\n    () => () => {\n      const attachmentGroupLocaleString =\n        props.strings?.attachmentCardGroupMessage ?? localeStrings.attachmentCardGroupMessage;\n      /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n      return _formatString(attachmentGroupLocaleString, {\n        attachmentCount: `${attachments?.length ?? 0}`\n      });\n      return _formatString(attachmentGroupLocaleString, {\n        attachmentCount: `${attachments?.length ?? 0}`\n      });\n    },\n    [props.strings?.attachmentCardGroupMessage, localeStrings.attachmentCardGroupMessage, attachments]\n  );\n\n  if (!attachments || attachments.length === 0 || !attachments) {\n    return <></>;\n  }\n\n  return (\n    <div style={attachmentDownloadCardsStyle} data-ui-id=\"attachment-download-card-group\">\n      <_AttachmentCardGroup ariaLabel={attachmentCardGroupDescription()}>\n        {attachments &&\n          attachments.map((attachment) => (\n            <TooltipHost content={downloadAttachmentButtonString()} key={attachment.name}>\n              <_AttachmentCard\n                attachment={attachment}\n                key={attachment.id}\n                menuActions={getMenuActions(attachment, localeStrings, message, props.actionsForAttachment)}\n                onActionHandlerFailed={props.onActionHandlerFailed}\n              />\n            </TooltipHost>\n          ))}\n      </_AttachmentCardGroup>\n    </div>\n  );\n};\n\n/**\n * @private\n */\nconst useLocaleStringsTrampoline = (): _AttachmentDownloadCardsStrings => {\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  return useLocale().strings.messageThread;\n  return { downloadAttachment: '', openAttachment: '', attachmentCardGroupMessage: '' };\n};\n\n/**\n * @private\n */\nconst getDefaultMenuActions = (\n  locale: _AttachmentDownloadCardsStrings,\n  chatMessage?: ChatMessage\n): AttachmentMenuAction[] => {\n  // if message is sent by a Teams user, we need to use a different icon (\"open\")\n  if (chatMessage?.senderId?.includes('8:orgid:')) {\n    return [\n      {\n        ...defaultAttachmentMenuAction,\n        name: locale.openAttachment,\n        icon: <Icon iconName=\"OpenAttachment\" />\n      }\n    ];\n  }\n  // otherwise, use the default icon (\"download\")\n  return [\n    {\n      ...defaultAttachmentMenuAction,\n      name: locale.downloadAttachment\n    }\n  ];\n};\n\n/**\n * @beta\n *\n * The default menu action for downloading attachments. This action will open the attachment's URL in a new tab.\n */\nexport const defaultAttachmentMenuAction: AttachmentMenuAction = {\n  /**\n   *\n   * name is used for aria-label only when there's one button. For multiple buttons, it's used as a label.\n   * by default it's an unlocalized string when this is used as a imported constant,\n   * but you can overwrite it with your own localized string.\n   *\n   * i.e. defaultAttachmentMenuAction.name = localize('Download');\n   *\n   * when no action is provided, the UI library will overwrite this name\n   * with a localized string this string when it's used in the UI.\n   */\n  name: 'Download',\n  // this is the icon shown on the right of the attachment card\n  icon: <Icon iconName=\"DownloadAttachment\" data-ui-id=\"attachment-download-card-download-icon\" />,\n  // this is the action that runs when the icon is clicked\n  onClick: (attachment: AttachmentMetadata) => {\n    return new Promise<void>((resolve) => {\n      window.open((attachment as AttachmentMetadata).url, '_blank', 'noopener,noreferrer');\n      resolve();\n    });\n  }\n};\n"]}
+{"version":3,"file":"AttachmentDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/AttachmentDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, TooltipHost } from '@fluentui/react';\nimport React, { useCallback } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\nimport { useLocale } from '../localization';\nimport { _AttachmentCard } from './AttachmentCard';\nimport { _AttachmentCardGroup } from './AttachmentCardGroup';\n/* @conditional-compile-remove(attachment-download) */\nimport { getAttachmentCountLiveMessage } from './ChatMessage/ChatMessageContent';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { AttachmentMenuAction, AttachmentMetadata } from '../types/Attachment';\nimport { ChatMessage } from '../types';\n\n/**\n * Represents the type of attachment\n * @public\n */\nexport type ChatAttachmentType =\n  | 'unknown'\n  | 'image'\n  | /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */ 'file';\n\n/**\n * Strings of _AttachmentDownloadCards that can be overridden.\n *\n * @internal\n */\nexport interface _AttachmentDownloadCardsStrings {\n  /** Aria label to notify user when focus is on attachment download button. */\n  downloadAttachment: string;\n  /** Aria label to notify user when focus is on attachment open button. */\n  openAttachment: string;\n  attachmentCardGroupMessage: string;\n}\n\n/**\n * @internal\n */\nexport interface _AttachmentDownloadCardsProps {\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  attachments?: AttachmentMetadata[];\n  /**\n   * A chat message metadata that includes attachment metadata\n   */\n  message?: ChatMessage;\n  /**\n   * Optional callback to handle attachment download\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[];\n  /**\n   * Optional callback that runs if downloadHandler returns an error.\n   */\n  onActionHandlerFailed?: (errMsg: string) => void;\n  /**\n   * Optional aria label strings for attachment download cards\n   */\n  strings?: _AttachmentDownloadCardsStrings;\n}\n\nconst attachmentDownloadCardsStyle = {\n  marginTop: '0.25rem'\n};\n\n/**\n * @internal\n */\nexport const _AttachmentDownloadCards = (props: _AttachmentDownloadCardsProps): JSX.Element => {\n  const { attachments, message } = props;\n  const localeStrings = useLocaleStringsTrampoline();\n\n  const getMenuActions = useCallback(\n    (\n      attachment: AttachmentMetadata,\n      localeStrings: _AttachmentDownloadCardsStrings,\n      message?: ChatMessage,\n      action?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]\n    ): AttachmentMenuAction[] => {\n      const defaultMenuActions = getDefaultMenuActions(localeStrings, message);\n      try {\n        const actions = action?.(attachment, message);\n        if (actions && actions.length > 0) {\n          return actions;\n        } else {\n          return defaultMenuActions;\n        }\n      } catch (error) {\n        return defaultMenuActions;\n      }\n    },\n    []\n  );\n\n  const downloadAttachmentButtonString = useMemo(\n    () => () => {\n      return props.strings?.downloadAttachment ?? localeStrings.downloadAttachment;\n    },\n    [props.strings?.downloadAttachment, localeStrings.downloadAttachment]\n  );\n\n  const attachmentCardGroupDescription = useMemo(\n    () => () => {\n      /* @conditional-compile-remove(attachment-download) */\n      return getAttachmentCountLiveMessage(\n        attachments ?? [],\n        props.strings?.attachmentCardGroupMessage ?? localeStrings.attachmentCardGroupMessage\n      );\n      return '';\n    },\n    [props.strings?.attachmentCardGroupMessage, localeStrings.attachmentCardGroupMessage, attachments]\n  );\n\n  if (!attachments || attachments.length === 0 || !attachments) {\n    return <></>;\n  }\n\n  return (\n    <div style={attachmentDownloadCardsStyle} data-ui-id=\"attachment-download-card-group\">\n      <_AttachmentCardGroup ariaLabel={attachmentCardGroupDescription()}>\n        {attachments &&\n          attachments.map((attachment) => (\n            <TooltipHost content={downloadAttachmentButtonString()} key={attachment.name}>\n              <_AttachmentCard\n                attachment={attachment}\n                key={attachment.id}\n                menuActions={getMenuActions(attachment, localeStrings, message, props.actionsForAttachment)}\n                onActionHandlerFailed={props.onActionHandlerFailed}\n              />\n            </TooltipHost>\n          ))}\n      </_AttachmentCardGroup>\n    </div>\n  );\n};\n\n/**\n * @private\n */\nconst useLocaleStringsTrampoline = (): _AttachmentDownloadCardsStrings => {\n  /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */\n  return useLocale().strings.messageThread;\n  return { downloadAttachment: '', openAttachment: '', attachmentCardGroupMessage: '' };\n};\n\n/**\n * @private\n */\nconst getDefaultMenuActions = (\n  locale: _AttachmentDownloadCardsStrings,\n  chatMessage?: ChatMessage\n): AttachmentMenuAction[] => {\n  // if message is sent by a Teams user, we need to use a different icon (\"open\")\n  if (chatMessage?.senderId?.includes('8:orgid:')) {\n    return [\n      {\n        ...defaultAttachmentMenuAction,\n        name: locale.openAttachment,\n        icon: <Icon iconName=\"OpenAttachment\" />\n      }\n    ];\n  }\n  // otherwise, use the default icon (\"download\")\n  return [\n    {\n      ...defaultAttachmentMenuAction,\n      name: locale.downloadAttachment\n    }\n  ];\n};\n\n/**\n * @beta\n *\n * The default menu action for downloading attachments. This action will open the attachment's URL in a new tab.\n */\nexport const defaultAttachmentMenuAction: AttachmentMenuAction = {\n  /**\n   *\n   * name is used for aria-label only when there's one button. For multiple buttons, it's used as a label.\n   * by default it's an unlocalized string when this is used as a imported constant,\n   * but you can overwrite it with your own localized string.\n   *\n   * i.e. defaultAttachmentMenuAction.name = localize('Download');\n   *\n   * when no action is provided, the UI library will overwrite this name\n   * with a localized string this string when it's used in the UI.\n   */\n  name: 'Download',\n  // this is the icon shown on the right of the attachment card\n  icon: <Icon iconName=\"DownloadAttachment\" data-ui-id=\"attachment-download-card-download-icon\" />,\n  // this is the action that runs when the icon is clicked\n  onClick: (attachment: AttachmentMetadata) => {\n    return new Promise<void>((resolve) => {\n      window.open((attachment as AttachmentMetadata).url, '_blank', 'noopener,noreferrer');\n      resolve();\n    });\n  }\n};\n"]}

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

@@ -3,6 +3,7 @@ import { ChatMessage } from '../../types/ChatMessage';
 import { BlockedMessage } from '../../types/ChatMessage';
 import { MentionDisplayOptions } from '../MentionPopover';
 import { MessageThreadStrings } from '../MessageThread';
+import { AttachmentMetadata } from '../../types';
 type ChatMessageContentProps = {
     message: ChatMessage;
     strings: MessageThreadStrings;
@@ -41,5 +42,9 @@ export declare const ChatMessageContent: (props: ChatMessageContentProps) => JSX
  * @private
  */
 export declare const BlockedMessageContent: (props: BlockedMessageContentProps) => JSX.Element;
+/**
+ * @private
+ */
+export declare const getAttachmentCountLiveMessage: (attachments: AttachmentMetadata[], attachmentCardGroupMessage: string) => string;
 export {};
 //# sourceMappingURL=ChatMessageContent.d.ts.map

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

@@ -59,9 +59,13 @@ export const BlockedMessageContent = (props) => {
             blockedMessageLink && (React.createElement(Link, { target: '_blank', href: blockedMessageLink }, blockedMessageLinkText))) }));
 };
 const extractContentForAllyMessage = (props) => {
-    if (props.message.content) {
+    var _a;
+    let attachments = undefined;
+    /* @conditional-compile-remove(attachment-download) */
+    attachments = props.message.attachments;
+    if (props.message.content || attachments) {
         // Replace all <img> tags with 'image' for aria.
-        const parsedContent = DOMPurify.sanitize(props.message.content, {
+        const parsedContent = DOMPurify.sanitize((_a = props.message.content) !== null && _a !== void 0 ? _a : '', {
             ALLOWED_TAGS: ['img'],
             RETURN_DOM_FRAGMENT: true
         });
@@ -73,6 +77,15 @@ const extractContentForAllyMessage = (props) => {
             imageTextNode.innerHTML = 'image ';
             parsedContent.replaceChild(imageTextNode, child);
         });
+        // Inject attachment names for aria.
+        if (attachments) {
+            let attachmentList = '';
+            /* @conditional-compile-remove(attachment-download) */
+            attachmentList = attachmentCardGroupDescription(props);
+            const attachmentTextNode = document.createElement('div');
+            attachmentTextNode.innerHTML = ` ${attachmentList} `;
+            parsedContent.appendChild(attachmentTextNode);
+        }
         // Strip all html tags from the content for aria.
         const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });
         return message;
@@ -94,6 +107,24 @@ const messageContentAriaText = (props) => {
             message: message
         });
 };
+/* @conditional-compile-remove(attachment-download) */
+const attachmentCardGroupDescription = (props) => {
+    const attachments = props.message.attachments;
+    return getAttachmentCountLiveMessage(attachments !== null && attachments !== void 0 ? attachments : [], props.strings.attachmentCardGroupMessage);
+};
+/* @conditional-compile-remove(attachment-download) */
+/**
+ * @private
+ */
+export const getAttachmentCountLiveMessage = (attachments, attachmentCardGroupMessage) => {
+    if (attachments.length === 0) {
+        return '';
+    }
+    return _formatString(attachmentCardGroupMessage, {
+        attachmentCount: `${attachments.length}`
+    });
+    return '';
+};
 const defaultOnRenderInlineImage = (inlineImage) => {
     return (React.createElement("img", Object.assign({ key: inlineImage.imageAttributes.id, tabIndex: 0, "data-ui-id": inlineImage.imageAttributes.id }, inlineImage.imageAttributes)));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD,OAAO,KAAK,EAAE,EAA0B,OAAO,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACzF,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,OAAO,MAAM,eAAe,CAAC;AAIpC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAIvC,uDAAuD;AACvD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,0CAA0C;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,SAAS,MAAM,WAAW,CAAC;AAkDlC,eAAe;AACf,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAChF,QAAQ,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QAClC,KAAK,MAAM;YACT,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;QACrC,KAAK,MAAM;YACT,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAC;QAC7C,KAAK,eAAe;YAClB,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAC;QAC7C;YACE,OAAO,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;YAC7C,OAAO,yCAAK,CAAC;IACjB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,KAAsC,EAAe,EAAE;IACzF,OAAO,CACL,+CAAqB,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,EAAC,MAAM,gBAAa,KAAK,CAAC,SAAS;QAChF,oBAAC,WAAW,IAAC,OAAO,EAAE,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAC,QAAQ,GAAG;QAC5D,KAAK,CAAC,OAAO,CACV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,4BAA4B,GAAG,CAAC,KAA8B,EAAe,EAAE;IACnF,OAAO,CACL,oBAAC,0BAA0B,IACzB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,mBAAmB,CAAC,KAAK,CAAC,EACvC,SAAS,EAAE,sBAAsB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAClC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,KAA8B,EAAe,EAAE;IAC3E,OAAO,CACL,oBAAC,0BAA0B,IACzB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,mBAAmB,CAAC,KAAK,CAAC,EACvC,SAAS,EAAE,sBAAsB,CAAC,KAAK,CAAC,EACxC,OAAO,EACL,oBAAC,OAAO,IACN,kBAAkB,EAAE,CAAC,aAAqB,EAAE,aAAqB,EAAE,GAAW,EAAE,EAAE;gBAChF,OAAO,CACL,oBAAC,IAAI,IAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,IAChD,aAAa,CACT,CACR,CAAC;YACJ,CAAC,IAEA,KAAK,CAAC,OAAO,CAAC,OAAO,CACd,GAEZ,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,uDAAuD;AACvD;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAiC,EAAe,EAAE;;IACtF,MAAM,IAAI,GAAgB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,8BAA8B,GAAI,CAAC;IACjF,MAAM,cAAc,GAClB,KAAK,CAAC,OAAO,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC;IACzG,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;IAC9C,MAAM,sBAAsB,GAAG,kBAAkB;QAC/C,CAAC,CAAC,MAAA,KAAK,CAAC,OAAO,CAAC,QAAQ,mCAAI,KAAK,CAAC,OAAO,CAAC,sBAAsB;QAChE,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,UAAU,GACd,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC;IAC7G,MAAM,sBAAsB,GAAG,GAAG,UAAU,IAAI,cAAc,IAAI,sBAAsB,EAAE,CAAC;IAC3F,OAAO,CACL,oBAAC,0BAA0B,IACzB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,sBAAsB,EACnC,SAAS,EAAE,sBAAsB,EACjC,OAAO,EACL,oBAAC,KAAK,IAAC,UAAU,QAAC,IAAI;YACnB,IAAI;YACJ,cAAc,IAAI,+BAAI,cAAc,CAAK;YACzC,kBAAkB,IAAI,CACrB,oBAAC,IAAI,IAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,IAC7C,sBAAsB,CAClB,CACR,CACK,GAEV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,4BAA4B,GAAG,CAAC,KAA8B,EAAU,EAAE;IAC9E,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;QAC1B,gDAAgD;QAChD,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE;YAC9D,YAAY,EAAE,CAAC,KAAK,CAAC;YACrB,mBAAmB,EAAE,IAAI;SAC1B,CAAC,CAAC;QAEH,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,KAAK,EAAE,CAAC;gBAC3C,OAAO;YACT,CAAC;YACD,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACpD,aAAa,CAAC,SAAS,GAAG,QAAQ,CAAC;YACnC,aAAa,CAAC,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;QACnD,CAAC,CAAC,CAAC;QAEH,iDAAiD;QACjD,MAAM,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;QACxE,OAAO,OAAO,CAAC;IACjB,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,KAA8B,EAAU,EAAE;IACrE,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;IAElH,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAC7D,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAC5B,IAAI,4BAA4B,CAAC,KAAK,CAAC,GAAG,CAAC;AAC7C,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,KAA8B,EAAsB,EAAE;IACpF,MAAM,OAAO,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;IACpD,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI;QACvB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,0BAA0B,EAAE;YACtD,OAAO,EAAE,OAAO;SACjB,CAAC;QACJ,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,sBAAsB,EAAE;YAClD,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE;YAC5C,OAAO,EAAE,OAAO;SACjB,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,WAAwB,EAAe,EAAE;IAC3E,OAAO,CACL,2CACE,GAAG,EAAE,WAAW,CAAC,eAAe,CAAC,EAAE,EACnC,QAAQ,EAAE,CAAC,gBACC,WAAW,CAAC,eAAe,CAAC,EAAE,IACtC,WAAW,CAAC,eAAe,EAC/B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAe,EAAE;;IACzE,MAAM,OAAO,GAA2B;QACtC,SAAS,CAAC,SAAS,EAAE,OAAO;;YAC1B,IAAI,OAAO,YAAY,UAAU,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACrD,yCAAyC;gBACzC,0CAA0C;gBAC1C,IAAI,OAAO,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;oBACpC,MAAM,EAAE,EAAE,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;oBAC/B,MAAM,OAAO,GAAY;wBACvB,EAAE,EAAE,EAAE;wBACN,WAAW,EAAE,MAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAqB,CAAC,SAAS,mCAAI,EAAE;qBACtE,CAAC;oBACF,IAAI,MAAA,KAAK,CAAC,qBAAqB,0CAAE,eAAe,EAAE,CAAC;wBACjD,OAAO,KAAK,CAAC,qBAAqB,CAAC,eAAe,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC;oBACtF,CAAC;oBACD,OAAO,sBAAsB,CAAC,OAAO,CAAC,CAAC;gBACzC,CAAC;gBAED,0BAA0B;gBAC1B,IAAI,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC;oBACpF,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;oBACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;oBACpD,MAAM,gBAAgB,GAAgB,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC;oBAExG,OAAO,CAAA,MAAA,KAAK,CAAC,kBAAkB,0CAAE,mBAAmB;wBAClD,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,0BAA0B,CAAC;wBAC5F,CAAC,CAAC,0BAA0B,CAAC,gBAAgB,CAAC,CAAC;oBAEjD,OAAO,2CAAK,GAAG,EAAE,QAAQ,CAAC,EAAY,IAAM,QAAQ,EAAI,CAAC;gBAC3D,CAAC;YACH,CAAC;YACD,iCAAiC;YACjC,OAAO,SAAmC,CAAC;QAC7C,CAAC;KACF,CAAC;IACF,OAAO,0CAAG,KAAK,CAAC,MAAA,KAAK,CAAC,OAAO,CAAC,OAAO,mCAAI,EAAE,EAAE,OAAO,CAAC,CAAI,CAAC;AAC5D,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  inlineImageOptions?: InlineImageOptions;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/**\n * InlineImage's state, as reflected in the UI.\n *\n * @public\n */\nexport interface InlineImage {\n  /** ID of the message that the inline image is belonged to */\n  messageId: string;\n  /** Attributes of the inline image */\n  imageAttributes: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/**\n * Options to display inline image in the inline image scenario.\n *\n * @public\n */\nexport interface InlineImageOptions {\n  /**\n   * Optional callback to render an inline image of in a message.\n   */\n  onRenderInlineImage?: (\n    inlineImage: InlineImage,\n    defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n  ) => JSX.Element;\n}\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={processHtmlToReact(props)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={\n        <Linkify\n          componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n            return (\n              <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>\n            );\n          }}\n        >\n          {props.message.content}\n        </Linkify>\n      }\n    />\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n  const blockedMessage =\n    props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink\n    ? props.message.linkText ?? props.strings.blockedWarningLinkText\n    : '';\n\n  const liveAuthor =\n    props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={liveBlockedWarningText}\n      ariaLabel={liveBlockedWarningText}\n      content={\n        <Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && (\n            <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>\n          )}\n        </Stack>\n      }\n    />\n  );\n};\n\nconst extractContentForAllyMessage = (props: ChatMessageContentProps): string => {\n  if (props.message.content) {\n    // Replace all <img> tags with 'image' for aria.\n    const parsedContent = DOMPurify.sanitize(props.message.content, {\n      ALLOWED_TAGS: ['img'],\n      RETURN_DOM_FRAGMENT: true\n    });\n\n    parsedContent.childNodes.forEach((child) => {\n      if (child.nodeName.toLowerCase() !== 'img') {\n        return;\n      }\n      const imageTextNode = document.createElement('div');\n      imageTextNode.innerHTML = 'image ';\n      parsedContent.replaceChild(imageTextNode, child);\n    });\n\n    // Strip all html tags from the content for aria.\n    const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });\n    return message;\n  }\n  return '';\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n  return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n    props.message.mine ? '' : liveAuthor\n  } ${extractContentForAllyMessage(props)} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  const message = extractContentForAllyMessage(props);\n  return props.message.mine\n    ? _formatString(props.strings.messageContentMineAriaText, {\n        message: message\n      })\n    : _formatString(props.strings.messageContentAriaText, {\n        author: `${props.message.senderDisplayName}`,\n        message: message\n      });\n};\n\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n  return (\n    <img\n      key={inlineImage.imageAttributes.id}\n      tabIndex={0}\n      data-ui-id={inlineImage.imageAttributes.id}\n      {...inlineImage.imageAttributes}\n    />\n  );\n};\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const options: HTMLReactParserOptions = {\n    transform(reactNode, domNode) {\n      if (domNode instanceof DOMElement && domNode.attribs) {\n        // Transform custom rendering of mentions\n        /* @conditional-compile-remove(mention) */\n        if (domNode.name === 'msft-mention') {\n          const { id } = domNode.attribs;\n          const mention: Mention = {\n            id: id,\n            displayText: (domNode.children[0] as unknown as Text).nodeValue ?? ''\n          };\n          if (props.mentionDisplayOptions?.onRenderMention) {\n            return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n          }\n          return defaultOnMentionRender(mention);\n        }\n\n        // Transform inline images\n        if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {\n          domNode.attribs['aria-label'] = domNode.attribs.name;\n          const imgProps = attributesToProps(domNode.attribs);\n          const inlineImageProps: InlineImage = { messageId: props.message.messageId, imageAttributes: imgProps };\n\n          return props.inlineImageOptions?.onRenderInlineImage\n            ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)\n            : defaultOnRenderInlineImage(inlineImageProps);\n\n          return <img key={imgProps.id as string} {...imgProps} />;\n        }\n      }\n      // Pass through the original node\n      return reactNode as unknown as JSX.Element;\n    }\n  };\n  return <>{parse(props.message.content ?? '', options)}</>;\n};\n"]}
+{"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/* @conditional-compile-remove(mention) */\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\n/* @conditional-compile-remove(mention) */\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\nimport { _AttachmentDownloadCardsStrings } from '../AttachmentDownloadCards';\n/* @conditional-compile-remove(attachment-download) */\nimport { AttachmentMetadata } from '../../types';\n\ntype ChatMessageContentProps = {\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /* @conditional-compile-remove(mention) */\n  mentionDisplayOptions?: MentionDisplayOptions;\n  inlineImageOptions?: InlineImageOptions;\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\ntype BlockedMessageContentProps = {\n  message: BlockedMessage;\n  strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  liveMessage: string;\n  ariaLabel?: string;\n  content: JSX.Element;\n};\n\n/**\n * InlineImage's state, as reflected in the UI.\n *\n * @public\n */\nexport interface InlineImage {\n  /** ID of the message that the inline image is belonged to */\n  messageId: string;\n  /** Attributes of the inline image */\n  imageAttributes: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/**\n * Options to display inline image in the inline image scenario.\n *\n * @public\n */\nexport interface InlineImageOptions {\n  /**\n   * Optional callback to render an inline image of in a message.\n   */\n  onRenderInlineImage?: (\n    inlineImage: InlineImage,\n    defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n  ) => JSX.Element;\n}\n\n/** @private */\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n  switch (props.message.contentType) {\n    case 'text':\n      return MessageContentAsText(props);\n    case 'html':\n      return MessageContentAsRichTextHTML(props);\n    case 'richtext/html':\n      return MessageContentAsRichTextHTML(props);\n    default:\n      console.warn('unknown message content type');\n      return <></>;\n  }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n  return (\n    <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n      <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n      {props.content}\n    </div>\n  );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={processHtmlToReact(props)}\n    />\n  );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={generateLiveMessage(props)}\n      ariaLabel={messageContentAriaText(props)}\n      content={\n        <Linkify\n          componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n            return (\n              <Link target=\"_blank\" href={decoratedHref} key={key}>\n                {decoratedText}\n              </Link>\n            );\n          }}\n        >\n          {props.message.content}\n        </Linkify>\n      }\n    />\n  );\n};\n\n/* @conditional-compile-remove(data-loss-prevention) */\n/**\n * @private\n */\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n  const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n  const blockedMessage =\n    props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n  const blockedMessageLink = props.message.link;\n  const blockedMessageLinkText = blockedMessageLink\n    ? props.message.linkText ?? props.strings.blockedWarningLinkText\n    : '';\n\n  const liveAuthor =\n    props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n  const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n  return (\n    <MessageContentWithLiveAria\n      message={props.message}\n      liveMessage={liveBlockedWarningText}\n      ariaLabel={liveBlockedWarningText}\n      content={\n        <Stack horizontal wrap>\n          {Icon}\n          {blockedMessage && <p>{blockedMessage}</p>}\n          {blockedMessageLink && (\n            <Link target={'_blank'} href={blockedMessageLink}>\n              {blockedMessageLinkText}\n            </Link>\n          )}\n        </Stack>\n      }\n    />\n  );\n};\n\nconst extractContentForAllyMessage = (props: ChatMessageContentProps): string => {\n  let attachments = undefined;\n  /* @conditional-compile-remove(attachment-download) */\n  attachments = props.message.attachments;\n  if (props.message.content || attachments) {\n    // Replace all <img> tags with 'image' for aria.\n    const parsedContent = DOMPurify.sanitize(props.message.content ?? '', {\n      ALLOWED_TAGS: ['img'],\n      RETURN_DOM_FRAGMENT: true\n    });\n\n    parsedContent.childNodes.forEach((child) => {\n      if (child.nodeName.toLowerCase() !== 'img') {\n        return;\n      }\n      const imageTextNode = document.createElement('div');\n      imageTextNode.innerHTML = 'image ';\n      parsedContent.replaceChild(imageTextNode, child);\n    });\n\n    // Inject attachment names for aria.\n    if (attachments) {\n      let attachmentList = '';\n      /* @conditional-compile-remove(attachment-download) */\n      attachmentList = attachmentCardGroupDescription(props);\n      const attachmentTextNode = document.createElement('div');\n      attachmentTextNode.innerHTML = ` ${attachmentList} `;\n      parsedContent.appendChild(attachmentTextNode);\n    }\n\n    // Strip all html tags from the content for aria.\n    const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });\n    return message;\n  }\n  return '';\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n  const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n  return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n    props.message.mine ? '' : liveAuthor\n  } ${extractContentForAllyMessage(props)} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string | undefined => {\n  const message = extractContentForAllyMessage(props);\n  return props.message.mine\n    ? _formatString(props.strings.messageContentMineAriaText, {\n        message: message\n      })\n    : _formatString(props.strings.messageContentAriaText, {\n        author: `${props.message.senderDisplayName}`,\n        message: message\n      });\n};\n\n/* @conditional-compile-remove(attachment-download) */\nconst attachmentCardGroupDescription = (props: ChatMessageContentProps): string => {\n  const attachments = props.message.attachments;\n  return getAttachmentCountLiveMessage(attachments ?? [], props.strings.attachmentCardGroupMessage);\n};\n\n/* @conditional-compile-remove(attachment-download) */\n/**\n * @private\n */\nexport const getAttachmentCountLiveMessage = (\n  attachments: AttachmentMetadata[],\n  attachmentCardGroupMessage: string\n): string => {\n  if (attachments.length === 0) {\n    return '';\n  }\n  return _formatString(attachmentCardGroupMessage, {\n    attachmentCount: `${attachments.length}`\n  });\n  return '';\n};\n\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n  return (\n    <img\n      key={inlineImage.imageAttributes.id}\n      tabIndex={0}\n      data-ui-id={inlineImage.imageAttributes.id}\n      {...inlineImage.imageAttributes}\n    />\n  );\n};\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n  const options: HTMLReactParserOptions = {\n    transform(reactNode, domNode) {\n      if (domNode instanceof DOMElement && domNode.attribs) {\n        // Transform custom rendering of mentions\n        /* @conditional-compile-remove(mention) */\n        if (domNode.name === 'msft-mention') {\n          const { id } = domNode.attribs;\n          const mention: Mention = {\n            id: id,\n            displayText: (domNode.children[0] as unknown as Text).nodeValue ?? ''\n          };\n          if (props.mentionDisplayOptions?.onRenderMention) {\n            return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n          }\n          return defaultOnMentionRender(mention);\n        }\n\n        // Transform inline images\n        if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {\n          domNode.attribs['aria-label'] = domNode.attribs.name;\n          const imgProps = attributesToProps(domNode.attribs);\n          const inlineImageProps: InlineImage = { messageId: props.message.messageId, imageAttributes: imgProps };\n\n          return props.inlineImageOptions?.onRenderInlineImage\n            ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)\n            : defaultOnRenderInlineImage(inlineImageProps);\n\n          return <img key={imgProps.id as string} {...imgProps} />;\n        }\n      }\n      // Pass through the original node\n      return reactNode as unknown as JSX.Element;\n    }\n  };\n  return <>{parse(props.message.content ?? '', options)}</>;\n};\n"]}

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

@@ -23,6 +23,7 @@ export interface RichTextEditorProps {
     strings: Partial<RichTextSendBoxStrings>;
     showRichTextEditorFormatting: boolean;
     styles: RichTextEditorStyleProps;
+    autoFocus?: 'sendBoxTextField';
 }
 /**
  * Props for {@link RichTextEditor}.

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

@@ -17,7 +17,7 @@ import CopyPastePlugin from './Plugins/CopyPastePlugin';
  * @beta
  */
 export const RichTextEditor = React.forwardRef((props, ref) => {
-    const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, content } = props;
+    const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, content, autoFocus } = props;
     const editor = useRef(null);
     const contentValue = useRef(content);
     const theme = useTheme();
@@ -114,7 +114,7 @@ export const RichTextEditor = React.forwardRef((props, ref) => {
                 // doNotAdjustEditorColor is used to fix the default background color for Rooster component
                 doNotAdjustEditorColor: true, "data-testid": 'rooster-rich-text-editor', 
                 // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught
-                onKeyDown: props.onKeyDown }))));
+                onKeyDown: props.onKeyDown, focusOnInit: autoFocus === 'sendBoxTextField' }))));
 });
 const focusAndUpdateContent = (editor, content) => {
     // focus the editor to set correct selection position

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { DefaultFormat, EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport {\n  Rooster,\n  createUpdateContentPlugin,\n  UpdateMode,\n  createRibbonPlugin,\n  Ribbon,\n  createContextMenuPlugin\n} from 'roosterjs-react';\nimport {\n  ribbonButtonStyle,\n  ribbonOverflowButtonStyle,\n  ribbonStyle,\n  richTextEditorWrapperStyle,\n  richTextEditorStyle\n} from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { ribbonButtons } from './Buttons/RichTextRibbonButtons';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport { ribbonButtonsStrings } from '../utils/RichTextEditorStringsUtils';\nimport { createTableEditMenuProvider } from './Buttons/Table/RichTextTableContextMenu';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  // the current content of the editor\n  content?: string;\n  onChange: (newValue?: string) => void;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorComponentRef {\n  focus: () => void;\n  setEmptyContent: () => void;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, content } = props;\n  const editor = useRef<IEditor | null>(null);\n  const contentValue = useRef<string | undefined>(content);\n  const theme = useTheme();\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        },\n        setEmptyContent() {\n          if (editor.current) {\n            editor.current.setContent('');\n          }\n        }\n      };\n    },\n    []\n  );\n\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n\n  const editorCreator = useCallback(\n    (div: HTMLDivElement, options: EditorOptions) => {\n      const editorValue = new Editor(div, options);\n      // this is to fix issue when editor is created or re-rendered and has existing text\n      // Content model package has a correct behavior and this fix can be deleted\n      if (contentValue.current !== undefined && contentValue.current.length > 0) {\n        // in case if initialContent is not empty, RoosterJS doesn't set caret position to the end.\n        focusAndUpdateContent(editorValue, contentValue.current);\n      } else if (initialContent !== undefined && initialContent.length > 0) {\n        // changing layout in rich text send box cause the editor to be recreated\n        // to keep the content, we need to set messageContent to the current content\n        focusAndUpdateContent(editorValue, initialContent);\n      }\n      editor.current = editorValue;\n      return editorValue;\n    },\n    // trigger force editor reset when strings are changed to update context menu strings\n    // see RosterJS documentation for 'editorCreator' for more details\n    // the editorCreator callback shouldn't be updated when the initialContent is changed\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [strings]\n  );\n\n  const placeholderPlugin = React.useMemo(() => {\n    return new Watermark('');\n  }, []);\n\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updateWatermark(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n\n  const plugins = useMemo(() => {\n    // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n    const contextPlugin = createContextMenuPlugin();\n    const tableEditMenuProvider = createTableEditMenuProvider(strings);\n    const contentEdit = new ContentEdit();\n    const updateContentPlugin = createUpdateContentPlugin(\n      UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput,\n      (content: string) => {\n        onChange && onChange(content);\n      }\n    );\n    const copyPastePlugin = new CopyPastePlugin();\n    return [\n      contentEdit,\n      placeholderPlugin,\n      updateContentPlugin,\n      ribbonPlugin,\n      contextPlugin,\n      tableEditMenuProvider,\n      copyPastePlugin\n    ];\n  }, [onChange, placeholderPlugin, ribbonPlugin, strings]);\n\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n\n    return (\n      <Ribbon\n        styles={ribbonStyle}\n        buttons={buttons}\n        plugin={ribbonPlugin}\n        overflowButtonProps={{\n          styles: ribbonButtonStyle(theme),\n          menuProps: {\n            items: [], // CommandBar will determine items rendered in overflow\n            isBeakVisible: false,\n            styles: ribbonOverflowButtonStyle(theme)\n          }\n        }}\n        strings={ribbonButtonsStrings(strings)}\n        data-testid={'rich-text-editor-ribbon'}\n      />\n    );\n  }, [strings, ribbonPlugin, theme]);\n\n  const defaultFormat: DefaultFormat = useMemo(() => {\n    // without setting any styles, text input is not handled properly for tables (when insert or paste one in the editor)\n    // because of https://github.com/microsoft/roosterjs/blob/14dbb947e3ae94580109cbd05e48ceb05327c4dc/packages/roosterjs-editor-core/lib/corePlugins/TypeInContainerPlugin.ts#L75\n    // this issue is fixed for content model package\n    return {\n      backgroundColor: 'transparent'\n    };\n  }, []);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && ribbon}\n      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>\n        <Rooster\n          defaultFormat={defaultFormat}\n          inDarkMode={isDarkThemed(theme)}\n          plugins={plugins}\n          className={richTextEditorStyle(props.styles)}\n          editorCreator={editorCreator}\n          // TODO: confirm the color during inline images implementation\n          imageSelectionBorderColor={'blue'}\n          // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n          doNotAdjustEditorColor={true}\n          data-testid={'rooster-rich-text-editor'}\n          // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught\n          onKeyDown={props.onKeyDown}\n        />\n      </div>\n    </div>\n  );\n});\n\nconst focusAndUpdateContent = (editor: Editor, content: string): void => {\n  // focus the editor to set correct selection position\n  editor.focus();\n  // set initial content\n  editor.setContent(content);\n};\n"]}
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { ContentEdit, Watermark } from 'roosterjs-editor-plugins';\nimport { Editor } from 'roosterjs-editor-core';\nimport type { DefaultFormat, EditorOptions, IEditor } from 'roosterjs-editor-types-compatible';\nimport {\n  Rooster,\n  createUpdateContentPlugin,\n  UpdateMode,\n  createRibbonPlugin,\n  Ribbon,\n  createContextMenuPlugin\n} from 'roosterjs-react';\nimport {\n  ribbonButtonStyle,\n  ribbonOverflowButtonStyle,\n  ribbonStyle,\n  richTextEditorWrapperStyle,\n  richTextEditorStyle\n} from '../styles/RichTextEditor.styles';\nimport { useTheme } from '../../theming';\nimport { ribbonButtons } from './Buttons/RichTextRibbonButtons';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { isDarkThemed } from '../../theming/themeUtils';\nimport { ribbonButtonsStrings } from '../utils/RichTextEditorStringsUtils';\nimport { createTableEditMenuProvider } from './Buttons/Table/RichTextTableContextMenu';\nimport CopyPastePlugin from './Plugins/CopyPastePlugin';\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorStyleProps {\n  minHeight: string;\n  maxHeight: string;\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @private\n */\nexport interface RichTextEditorProps {\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  // the current content of the editor\n  content?: string;\n  onChange: (newValue?: string) => void;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLElement>) => void;\n  placeholderText?: string;\n  strings: Partial<RichTextSendBoxStrings>;\n  showRichTextEditorFormatting: boolean;\n  styles: RichTextEditorStyleProps;\n  autoFocus?: 'sendBoxTextField';\n}\n\n/**\n * Props for {@link RichTextEditor}.\n *\n * @beta\n */\nexport interface RichTextEditorComponentRef {\n  focus: () => void;\n  setEmptyContent: () => void;\n}\n\n/**\n * A component to wrap RoosterJS Rich Text Editor.\n *\n * @beta\n */\nexport const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichTextEditorProps>((props, ref) => {\n  const { initialContent, onChange, placeholderText, strings, showRichTextEditorFormatting, content, autoFocus } =\n    props;\n  const editor = useRef<IEditor | null>(null);\n  const contentValue = useRef<string | undefined>(content);\n  const theme = useTheme();\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        focus() {\n          if (editor.current) {\n            editor.current.focus();\n          }\n        },\n        setEmptyContent() {\n          if (editor.current) {\n            editor.current.setContent('');\n          }\n        }\n      };\n    },\n    []\n  );\n\n  const ribbonPlugin = React.useMemo(() => {\n    return createRibbonPlugin();\n  }, []);\n\n  const editorCreator = useCallback(\n    (div: HTMLDivElement, options: EditorOptions) => {\n      const editorValue = new Editor(div, options);\n      // this is to fix issue when editor is created or re-rendered and has existing text\n      // Content model package has a correct behavior and this fix can be deleted\n      if (contentValue.current !== undefined && contentValue.current.length > 0) {\n        // in case if initialContent is not empty, RoosterJS doesn't set caret position to the end.\n        focusAndUpdateContent(editorValue, contentValue.current);\n      } else if (initialContent !== undefined && initialContent.length > 0) {\n        // changing layout in rich text send box cause the editor to be recreated\n        // to keep the content, we need to set messageContent to the current content\n        focusAndUpdateContent(editorValue, initialContent);\n      }\n      editor.current = editorValue;\n      return editorValue;\n    },\n    // trigger force editor reset when strings are changed to update context menu strings\n    // see RosterJS documentation for 'editorCreator' for more details\n    // the editorCreator callback shouldn't be updated when the initialContent is changed\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [strings]\n  );\n\n  const placeholderPlugin = React.useMemo(() => {\n    return new Watermark('');\n  }, []);\n\n  useEffect(() => {\n    if (placeholderText !== undefined) {\n      placeholderPlugin.updateWatermark(placeholderText);\n    }\n  }, [placeholderPlugin, placeholderText]);\n\n  const plugins = useMemo(() => {\n    // contextPlugin and tableEditMenuProvider allow to show insert/delete menu for the table\n    const contextPlugin = createContextMenuPlugin();\n    const tableEditMenuProvider = createTableEditMenuProvider(strings);\n    const contentEdit = new ContentEdit();\n    const updateContentPlugin = createUpdateContentPlugin(\n      UpdateMode.OnContentChangedEvent | UpdateMode.OnUserInput,\n      (content: string) => {\n        onChange && onChange(content);\n      }\n    );\n    const copyPastePlugin = new CopyPastePlugin();\n    return [\n      contentEdit,\n      placeholderPlugin,\n      updateContentPlugin,\n      ribbonPlugin,\n      contextPlugin,\n      tableEditMenuProvider,\n      copyPastePlugin\n    ];\n  }, [onChange, placeholderPlugin, ribbonPlugin, strings]);\n\n  const ribbon = useMemo(() => {\n    const buttons = ribbonButtons(theme);\n\n    return (\n      <Ribbon\n        styles={ribbonStyle}\n        buttons={buttons}\n        plugin={ribbonPlugin}\n        overflowButtonProps={{\n          styles: ribbonButtonStyle(theme),\n          menuProps: {\n            items: [], // CommandBar will determine items rendered in overflow\n            isBeakVisible: false,\n            styles: ribbonOverflowButtonStyle(theme)\n          }\n        }}\n        strings={ribbonButtonsStrings(strings)}\n        data-testid={'rich-text-editor-ribbon'}\n      />\n    );\n  }, [strings, ribbonPlugin, theme]);\n\n  const defaultFormat: DefaultFormat = useMemo(() => {\n    // without setting any styles, text input is not handled properly for tables (when insert or paste one in the editor)\n    // because of https://github.com/microsoft/roosterjs/blob/14dbb947e3ae94580109cbd05e48ceb05327c4dc/packages/roosterjs-editor-core/lib/corePlugins/TypeInContainerPlugin.ts#L75\n    // this issue is fixed for content model package\n    return {\n      backgroundColor: 'transparent'\n    };\n  }, []);\n\n  return (\n    <div data-testid={'rich-text-editor-wrapper'}>\n      {showRichTextEditorFormatting && ribbon}\n      <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>\n        <Rooster\n          defaultFormat={defaultFormat}\n          inDarkMode={isDarkThemed(theme)}\n          plugins={plugins}\n          className={richTextEditorStyle(props.styles)}\n          editorCreator={editorCreator}\n          // TODO: confirm the color during inline images implementation\n          imageSelectionBorderColor={'blue'}\n          // doNotAdjustEditorColor is used to fix the default background color for Rooster component\n          doNotAdjustEditorColor={true}\n          data-testid={'rooster-rich-text-editor'}\n          // if we don't use 'allowKeyboardEventPropagation' only the enter key is caught\n          onKeyDown={props.onKeyDown}\n          focusOnInit={autoFocus === 'sendBoxTextField'}\n        />\n      </div>\n    </div>\n  );\n});\n\nconst focusAndUpdateContent = (editor: Editor, content: string): void => {\n  // focus the editor to set correct selection position\n  editor.focus();\n  // set initial content\n  editor.setContent(content);\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.d.ts

@@ -24,6 +24,7 @@ export interface RichTextInputBoxComponentProps {
     hasAttachments?: boolean;
     richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;
     isHorizontalLayoutDisabled?: boolean;
+    autoFocus?: 'sendBoxTextField';
 }
 /**
  * @private

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.js

@@ -16,7 +16,7 @@ export const RichTextInputBoxComponent = (props) => {
     /* @conditional-compile-remove(attachment-upload) */
     onRenderAttachmentUploads, 
     /* @conditional-compile-remove(attachment-upload) */
-    hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false, content } = props;
+    hasAttachments, richTextEditorStyleProps, isHorizontalLayoutDisabled = false, content, autoFocus } = props;
     const theme = useTheme();
     const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);
     const onRenderRichTextEditorIcon = useCallback((isHover) => (React.createElement(Icon, { iconName: isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon', className: richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting)) })), [disabled, showRichTextEditorFormatting, theme]);
@@ -67,7 +67,7 @@ export const RichTextInputBoxComponent = (props) => {
         React.createElement(Stack, { grow: true, horizontal: useHorizontalLayout, horizontalAlign: useHorizontalLayout ? 'end' : 'space-between', className: inputBoxContentStackStyle, wrap: useHorizontalLayout },
             React.createElement(Stack, { grow: true, className: inputBoxRichTextStackStyle },
                 React.createElement(Stack.Item, { className: inputBoxRichTextStackItemStyle },
-                    React.createElement(RichTextEditor, { content: content, initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting, styles: richTextEditorStyle })),
+                    React.createElement(RichTextEditor, { content: content, initialContent: initialContent, placeholderText: placeholderText, onChange: onChange, onKeyDown: onKeyDown, ref: editorComponentRef, strings: strings, showRichTextEditorFormatting: showRichTextEditorFormatting, styles: richTextEditorStyle, autoFocus: autoFocus })),
                 /* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&
                     onRenderAttachmentUploads()),
             actionButtons)));

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextInputBoxComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport {\n  richTextActionButtonsDividerStyle,\n  richTextActionButtonsStackStyle,\n  richTextActionButtonsStyle,\n  richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport {\n  inputBoxContentStackStyle,\n  inputBoxRichTextStackItemStyle,\n  inputBoxRichTextStackStyle,\n  richTextBorderBoxStyle\n} from '../styles/RichTextInputBoxComponent.styles';\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentProps {\n  placeholderText?: string;\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  // the current content of the editor\n  content?: string;\n  onChange: (newValue?: string) => void;\n  onEnterKeyDown?: () => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n  strings: Partial<RichTextSendBoxStrings>;\n  disabled: boolean;\n  actionComponents: ReactNode;\n  /* @conditional-compile-remove(attachment-upload) */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(attachment-upload) */\n  hasAttachments?: boolean;\n  // props for min and max height for the rich text editor\n  // otherwise the editor will grow to fit the content\n  richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n  isHorizontalLayoutDisabled?: boolean;\n}\n\n/**\n * @private\n */\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n  const {\n    placeholderText,\n    initialContent,\n    onChange,\n    onEnterKeyDown,\n    editorComponentRef,\n    disabled,\n    strings,\n    actionComponents,\n    /* @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */\n    hasAttachments,\n    richTextEditorStyleProps,\n    isHorizontalLayoutDisabled = false,\n    content\n  } = props;\n  const theme = useTheme();\n  const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);\n\n  const onRenderRichTextEditorIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={\n          isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n        }\n        className={richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting))}\n      />\n    ),\n    [disabled, showRichTextEditorFormatting, theme]\n  );\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n        <Stack horizontal>\n          <InputBoxButton\n            onRenderIcon={onRenderRichTextEditorIcon}\n            onClick={(e) => {\n              setShowRichTextEditorFormatting(!showRichTextEditorFormatting);\n              editorComponentRef.current?.focus();\n              e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n            }}\n            ariaLabel={strings.richTextFormatButtonTooltip}\n            tooltipContent={strings.richTextFormatButtonTooltip}\n            className={richTextActionButtonsStyle}\n            data-testId={'rich-text-input-box-format-button'}\n          />\n          <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n          {actionComponents}\n        </Stack>\n      </Stack.Item>\n    );\n  }, [\n    actionComponents,\n    editorComponentRef,\n    onRenderRichTextEditorIcon,\n    showRichTextEditorFormatting,\n    strings.richTextFormatButtonTooltip,\n    theme\n  ]);\n\n  const richTextEditorStyle = useMemo(() => {\n    return richTextEditorStyleProps(showRichTextEditorFormatting);\n  }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n  const onKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n    },\n    [onEnterKeyDown, showRichTextEditorFormatting]\n  );\n\n  const useHorizontalLayout = useMemo(() => {\n    return (\n      !isHorizontalLayoutDisabled &&\n      !showRichTextEditorFormatting &&\n      /* @conditional-compile-remove(attachment-upload) */ !hasAttachments\n    );\n  }, [\n    isHorizontalLayoutDisabled,\n    showRichTextEditorFormatting,\n    /* @conditional-compile-remove(attachment-upload) */ hasAttachments\n  ]);\n\n  return (\n    <div\n      className={richTextBorderBoxStyle({\n        theme: theme,\n        disabled: !!disabled\n      })}\n    >\n      {/* This layout is used for the compact view when formatting options are not shown */}\n      <Stack\n        grow\n        horizontal={useHorizontalLayout}\n        horizontalAlign={useHorizontalLayout ? 'end' : 'space-between'}\n        className={inputBoxContentStackStyle}\n        wrap={useHorizontalLayout}\n      >\n        {/* Fixes the issue when flex box can grow to be bigger than parent */}\n        <Stack grow className={inputBoxRichTextStackStyle}>\n          <Stack.Item className={inputBoxRichTextStackItemStyle}>\n            <RichTextEditor\n              content={content}\n              initialContent={initialContent}\n              placeholderText={placeholderText}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              ref={editorComponentRef}\n              strings={strings}\n              showRichTextEditorFormatting={showRichTextEditorFormatting}\n              styles={richTextEditorStyle}\n            />\n          </Stack.Item>\n          {\n            /* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&\n              onRenderAttachmentUploads()\n          }\n        </Stack>\n        {actionButtons}\n      </Stack>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"RichTextInputBoxComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextInputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { ReactNode, useCallback, useMemo, useState } from 'react';\nimport { BaseCustomStyles } from '../../types';\nimport { RichTextEditor, RichTextEditorComponentRef, RichTextEditorStyleProps } from './RichTextEditor';\nimport { RichTextSendBoxStrings } from './RichTextSendBox';\nimport { useTheme } from '../../theming';\nimport { Icon, Stack } from '@fluentui/react';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { isEnterKeyEventFromCompositionSession } from '../utils';\nimport {\n  richTextActionButtonsDividerStyle,\n  richTextActionButtonsStackStyle,\n  richTextActionButtonsStyle,\n  richTextFormatButtonIconStyle\n} from '../styles/RichTextEditor.styles';\nimport {\n  inputBoxContentStackStyle,\n  inputBoxRichTextStackItemStyle,\n  inputBoxRichTextStackStyle,\n  richTextBorderBoxStyle\n} from '../styles/RichTextInputBoxComponent.styles';\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentStylesProps extends BaseCustomStyles {}\n\n/**\n * @private\n */\nexport interface RichTextInputBoxComponentProps {\n  placeholderText?: string;\n  // the initial content of editor that is set when editor is created (e.g. when editing a message)\n  initialContent?: string;\n  // the current content of the editor\n  content?: string;\n  onChange: (newValue?: string) => void;\n  onEnterKeyDown?: () => void;\n  editorComponentRef: React.RefObject<RichTextEditorComponentRef>;\n  strings: Partial<RichTextSendBoxStrings>;\n  disabled: boolean;\n  actionComponents: ReactNode;\n  /* @conditional-compile-remove(attachment-upload) */\n  onRenderAttachmentUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(attachment-upload) */\n  hasAttachments?: boolean;\n  // props for min and max height for the rich text editor\n  // otherwise the editor will grow to fit the content\n  richTextEditorStyleProps: (isExpanded: boolean) => RichTextEditorStyleProps;\n  isHorizontalLayoutDisabled?: boolean;\n  autoFocus?: 'sendBoxTextField';\n}\n\n/**\n * @private\n */\nexport const RichTextInputBoxComponent = (props: RichTextInputBoxComponentProps): JSX.Element => {\n  const {\n    placeholderText,\n    initialContent,\n    onChange,\n    onEnterKeyDown,\n    editorComponentRef,\n    disabled,\n    strings,\n    actionComponents,\n    /* @conditional-compile-remove(attachment-upload) */\n    onRenderAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */\n    hasAttachments,\n    richTextEditorStyleProps,\n    isHorizontalLayoutDisabled = false,\n    content,\n    autoFocus\n  } = props;\n  const theme = useTheme();\n  const [showRichTextEditorFormatting, setShowRichTextEditorFormatting] = useState(false);\n\n  const onRenderRichTextEditorIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={\n          isHover || showRichTextEditorFormatting ? 'RichTextEditorButtonIconFilled' : 'RichTextEditorButtonIcon'\n        }\n        className={richTextFormatButtonIconStyle(theme, !disabled && (isHover || showRichTextEditorFormatting))}\n      />\n    ),\n    [disabled, showRichTextEditorFormatting, theme]\n  );\n\n  const actionButtons = useMemo(() => {\n    return (\n      <Stack.Item align=\"end\" className={richTextActionButtonsStackStyle}>\n        <Stack horizontal>\n          <InputBoxButton\n            onRenderIcon={onRenderRichTextEditorIcon}\n            onClick={(e) => {\n              setShowRichTextEditorFormatting(!showRichTextEditorFormatting);\n              editorComponentRef.current?.focus();\n              e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n            }}\n            ariaLabel={strings.richTextFormatButtonTooltip}\n            tooltipContent={strings.richTextFormatButtonTooltip}\n            className={richTextActionButtonsStyle}\n            data-testId={'rich-text-input-box-format-button'}\n          />\n          <Icon iconName=\"RichTextDividerIcon\" className={richTextActionButtonsDividerStyle(theme)} />\n          {actionComponents}\n        </Stack>\n      </Stack.Item>\n    );\n  }, [\n    actionComponents,\n    editorComponentRef,\n    onRenderRichTextEditorIcon,\n    showRichTextEditorFormatting,\n    strings.richTextFormatButtonTooltip,\n    theme\n  ]);\n\n  const richTextEditorStyle = useMemo(() => {\n    return richTextEditorStyleProps(showRichTextEditorFormatting);\n  }, [richTextEditorStyleProps, showRichTextEditorFormatting]);\n\n  const onKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      if (ev.key === 'Enter' && ev.shiftKey === false && !showRichTextEditorFormatting) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n    },\n    [onEnterKeyDown, showRichTextEditorFormatting]\n  );\n\n  const useHorizontalLayout = useMemo(() => {\n    return (\n      !isHorizontalLayoutDisabled &&\n      !showRichTextEditorFormatting &&\n      /* @conditional-compile-remove(attachment-upload) */ !hasAttachments\n    );\n  }, [\n    isHorizontalLayoutDisabled,\n    showRichTextEditorFormatting,\n    /* @conditional-compile-remove(attachment-upload) */ hasAttachments\n  ]);\n\n  return (\n    <div\n      className={richTextBorderBoxStyle({\n        theme: theme,\n        disabled: !!disabled\n      })}\n    >\n      {/* This layout is used for the compact view when formatting options are not shown */}\n      <Stack\n        grow\n        horizontal={useHorizontalLayout}\n        horizontalAlign={useHorizontalLayout ? 'end' : 'space-between'}\n        className={inputBoxContentStackStyle}\n        wrap={useHorizontalLayout}\n      >\n        {/* Fixes the issue when flex box can grow to be bigger than parent */}\n        <Stack grow className={inputBoxRichTextStackStyle}>\n          <Stack.Item className={inputBoxRichTextStackItemStyle}>\n            <RichTextEditor\n              content={content}\n              initialContent={initialContent}\n              placeholderText={placeholderText}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              ref={editorComponentRef}\n              strings={strings}\n              showRichTextEditorFormatting={showRichTextEditorFormatting}\n              styles={richTextEditorStyle}\n              autoFocus={autoFocus}\n            />\n          </Stack.Item>\n          {\n            /* @conditional-compile-remove(attachment-upload) */ onRenderAttachmentUploads &&\n              onRenderAttachmentUploads()\n          }\n        </Stack>\n        {actionButtons}\n      </Stack>\n    </div>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.d.ts

@@ -109,6 +109,11 @@ export interface RichTextSendBoxProps {
      * @beta
      */
     activeAttachmentUploads?: AttachmentMetadata[];
+    /**
+     * enumerable to determine if the input box has focus on render or not.
+     * When undefined nothing has focus on render
+     */
+    autoFocus?: 'sendBoxTextField';
     /**
      * Optional callback to remove the attachment upload before sending by clicking on
      * cancel icon.

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js

@@ -24,7 +24,7 @@ import { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';
  * @beta
  */
 export const RichTextSendBox = (props) => {
-    const { disabled = false, systemMessage, onSendMessage, 
+    const { disabled = false, systemMessage, autoFocus, onSendMessage, 
     /* @conditional-compile-remove(attachment-upload) */
     activeAttachmentUploads, 
     /* @conditional-compile-remove(attachment-upload) */
@@ -163,7 +163,7 @@ export const RichTextSendBox = (props) => {
         , { 
             // in case when format bar is shown, the editor is re-rendered that causes the content to be lost
             // setting the content will ensure that the latest content is used when editor is re-rendered
-            content: contentValue, placeholderText: strings.placeholderText, onChange: setContent, onEnterKeyDown: sendMessageOnClick, editorComponentRef: editorComponentRef, strings: strings, disabled: disabled, actionComponents: sendButton, richTextEditorStyleProps: sendBoxRichTextEditorStyle, 
+            content: contentValue, placeholderText: strings.placeholderText, autoFocus: autoFocus, onChange: setContent, onEnterKeyDown: sendMessageOnClick, editorComponentRef: editorComponentRef, strings: strings, disabled: disabled, actionComponents: sendButton, richTextEditorStyleProps: sendBoxRichTextEditorStyle, 
             /* @conditional-compile-remove(attachment-upload) */
             onRenderAttachmentUploads: onRenderAttachmentUploads, 
             /* @conditional-compile-remove(attachment-upload) */

package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextSendBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, sanitizeText } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../types/Attachment';\n/* @conditional-compile-remove(attachment-upload) */\nimport { hasCompletedAttachmentUploads, hasIncompleteAttachmentUploads } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  boldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  italicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  underlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  bulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  numberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  increaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  decreaseIndentTooltip: string;\n  /**\n   * Tooltip text insert table button.\n   */\n  insertTableTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n  /**\n   * Text for the insert menu item.\n   */\n  insertRowOrColumnMenu: string;\n  /**\n   * Title for the insert table menu.\n   */\n  insertTableMenuTitle: string;\n  /**\n   * Text for the insert menu item to insert row above the current selection.\n   */\n  insertRowAboveMenu: string;\n  /**\n   * Text for the insert menu item to insert row below the current selection.\n   */\n  insertRowBelowMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the left from the current selection.\n   */\n  insertColumnLeftMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the right from the current selection.\n   */\n  insertColumnRightMenu: string;\n  /**\n   * Text for the delete row or column menu.\n   */\n  deleteRowOrColumnMenu: string;\n  /**\n   * Text for the delete column menu.\n   */\n  deleteColumnMenu: string;\n  /**\n   * Text for the delete row menu.\n   */\n  deleteRowMenu: string;\n  /**\n   * Text for the delete table menu.\n   */\n  deleteTableMenu: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional array of active attachment uploads where each object has attributes\n   * of a attachment upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeAttachmentUploads?: AttachmentMetadata[];\n  /* @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */\n    onCancelAttachmentUpload\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = useMemo(() => {\n    return { ...localeStrings, ...props.strings };\n  }, [localeStrings, props.strings]);\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(attachment-upload) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(isMessageTooLong(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all attachments have been uploaded successfully\n    /* @conditional-compile-remove(attachment-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n      editorComponentRef.current?.setEmptyContent();\n    }\n    editorComponentRef.current?.focus();\n  }, [\n    contentValue,\n    contentValueOverflow,\n    disabled,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()?.uploadError\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n        className={sendIconStyle({\n          theme,\n          hasText: !!contentValue,\n          /* @conditional-compile-remove(attachment-upload) */\n          hasAttachment: false,\n          hasErrorMessage: hasErrorMessage,\n          defaultTextColor: theme.palette.neutralSecondary,\n          disabled: disabled\n        })}\n      />\n    ),\n    [contentValue, disabled, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadError: activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()\n        ?.uploadError,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeAttachmentUploads={activeAttachmentUploads}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n            strings={{\n              removeAttachment: strings.removeAttachment,\n              uploading: strings.uploading,\n              uploadCompleted: strings.uploadCompleted,\n              attachmentMoreMenu: strings.attachmentMoreMenu\n            }}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    activeAttachmentUploads,\n    onCancelAttachmentUpload,\n    strings.removeAttachment,\n    strings.uploadCompleted,\n    strings.uploading,\n    strings.attachmentMoreMenu,\n    theme\n  ]);\n\n  const sendButton = useMemo(() => {\n    return (\n      <InputBoxButton\n        onRenderIcon={onRenderSendIcon}\n        onClick={(e) => {\n          sendMessageOnClick();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }}\n        className={richTextActionButtonsStyle}\n        ariaLabel={localeStrings.sendButtonAriaLabel}\n        tooltipContent={localeStrings.sendButtonAriaLabel}\n      />\n    );\n  }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const hasAttachmentUploads = useMemo(() => {\n    return (\n      hasCompletedAttachmentUploads(activeAttachmentUploads) || hasIncompleteAttachmentUploads(activeAttachmentUploads)\n    );\n  }, [activeAttachmentUploads]);\n\n  return (\n    <Stack>\n      <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n      <RichTextInputBoxComponent\n        // in case when format bar is shown, the editor is re-rendered that causes the content to be lost\n        // setting the content will ensure that the latest content is used when editor is re-rendered\n        content={contentValue}\n        placeholderText={strings.placeholderText}\n        onChange={setContent}\n        onEnterKeyDown={sendMessageOnClick}\n        editorComponentRef={editorComponentRef}\n        strings={strings}\n        disabled={disabled}\n        actionComponents={sendButton}\n        richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n        /* @conditional-compile-remove(attachment-upload) */\n        onRenderAttachmentUploads={onRenderAttachmentUploads}\n        /* @conditional-compile-remove(attachment-upload) */\n        hasAttachments={hasAttachmentUploads}\n      />\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"RichTextSendBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/RichTextEditor/RichTextSendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { RichTextInputBoxComponent } from './RichTextInputBoxComponent';\nimport { Icon, Stack } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { SendBoxStrings } from '../SendBox';\nimport { sendIconStyle } from '../styles/SendBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { RichTextSendBoxErrors, RichTextSendBoxErrorsProps } from './RichTextSendBoxErrors';\nimport { isMessageTooLong, sanitizeText } from '../utils/SendBoxUtils';\nimport { RichTextEditorComponentRef } from './RichTextEditor';\nimport { useTheme } from '../../theming';\nimport { richTextActionButtonsStyle, sendBoxRichTextEditorStyle } from '../styles/RichTextEditor.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { _AttachmentUploadCards } from '../AttachmentUploadCards';\n/* @conditional-compile-remove(attachment-upload) */\nimport { AttachmentMetadata } from '../../types/Attachment';\n/* @conditional-compile-remove(attachment-upload) */\nimport { hasCompletedAttachmentUploads, hasIncompleteAttachmentUploads } from '../utils/SendBoxUtils';\n/* @conditional-compile-remove(attachment-upload) */\nimport { SendBoxErrorBarError } from '../SendBoxErrorBar';\n/* @conditional-compile-remove(attachment-upload) */\nimport { attachmentUploadCardsStyles } from '../styles/SendBox.styles';\n/* @conditional-compile-remove(attachment-upload) */\nimport { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';\n\n/**\n * Strings of {@link RichTextSendBox} that can be overridden.\n *\n * @beta\n */\nexport interface RichTextSendBoxStrings extends SendBoxStrings {\n  /**\n   * Tooltip text for the bold button.\n   */\n  boldTooltip: string;\n  /**\n   * Tooltip text for the italic button.\n   */\n  italicTooltip: string;\n  /**\n   * Tooltip text for the underline button.\n   */\n  underlineTooltip: string;\n  /**\n   * Tooltip text for the bullet list button.\n   */\n  bulletListTooltip: string;\n  /**\n   * Tooltip text for the number list button.\n   */\n  numberListTooltip: string;\n  /**\n   * Tooltip text for the increase indent button.\n   */\n  increaseIndentTooltip: string;\n  /**\n   * Tooltip text for the decrease indent button.\n   */\n  decreaseIndentTooltip: string;\n  /**\n   * Tooltip text insert table button.\n   */\n  insertTableTooltip: string;\n  /**\n   * Tooltip text for the rich text format button button.\n   */\n  richTextFormatButtonTooltip: string;\n  /**\n   * Text for the insert menu item.\n   */\n  insertRowOrColumnMenu: string;\n  /**\n   * Title for the insert table menu.\n   */\n  insertTableMenuTitle: string;\n  /**\n   * Text for the insert menu item to insert row above the current selection.\n   */\n  insertRowAboveMenu: string;\n  /**\n   * Text for the insert menu item to insert row below the current selection.\n   */\n  insertRowBelowMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the left from the current selection.\n   */\n  insertColumnLeftMenu: string;\n  /**\n   * Text for the insert menu item to insert column to the right from the current selection.\n   */\n  insertColumnRightMenu: string;\n  /**\n   * Text for the delete row or column menu.\n   */\n  deleteRowOrColumnMenu: string;\n  /**\n   * Text for the delete column menu.\n   */\n  deleteColumnMenu: string;\n  /**\n   * Text for the delete row menu.\n   */\n  deleteRowMenu: string;\n  /**\n   * Text for the delete table menu.\n   */\n  deleteTableMenu: string;\n}\n\n/**\n * Props for {@link RichTextSendBox}.\n *\n * @beta\n */\nexport interface RichTextSendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<RichTextSendBoxStrings>;\n  /**\n   * Optional text for system message above the text box\n   */\n  systemMessage?: string;\n  /* @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional array of active attachment uploads where each object has attributes\n   * of a attachment upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeAttachmentUploads?: AttachmentMetadata[];\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(attachment-upload) */\n  /**\n   * Optional callback to remove the attachment upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelAttachmentUpload?: (attachmentId: string) => void;\n  /**\n   * Callback function used when the send button is clicked.\n   */\n  onSendMessage: (content: string) => Promise<void>;\n}\n\n/**\n * A component to render SendBox with Rich Text Editor support.\n *\n * @beta\n */\nexport const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {\n  const {\n    disabled = false,\n    systemMessage,\n    autoFocus,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */\n    onCancelAttachmentUpload\n  } = props;\n\n  const theme = useTheme();\n  const locale = useLocale();\n\n  const localeStrings = useMemo(() => {\n    /* @conditional-compile-remove(rich-text-editor) */\n    return locale.strings.richTextSendBox;\n    return locale.strings.sendBox;\n  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.strings.richTextSendBox, locale.strings.sendBox]);\n\n  const strings = useMemo(() => {\n    return { ...localeStrings, ...props.strings };\n  }, [localeStrings, props.strings]);\n\n  const [contentValue, setContentValue] = useState('');\n  const [contentValueOverflow, setContentValueOverflow] = useState(false);\n  /* @conditional-compile-remove(attachment-upload) */\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(\n    undefined\n  );\n  const editorComponentRef = useRef<RichTextEditorComponentRef>(null);\n\n  const contentTooLongMessage = useMemo(\n    () => (contentValueOverflow ? strings.textTooLong : undefined),\n    [contentValueOverflow, strings.textTooLong]\n  );\n\n  const setContent = useCallback((newValue?: string): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    setContentValueOverflow(isMessageTooLong(newValue.length));\n    setContentValue(newValue);\n  }, []);\n\n  const sendMessageOnClick = useCallback((): void => {\n    if (disabled || contentValueOverflow) {\n      return;\n    }\n    // Don't send message until all attachments have been uploaded successfully\n    /* @conditional-compile-remove(attachment-upload) */\n    setAttachmentUploadsPendingError(undefined);\n\n    /* @conditional-compile-remove(attachment-upload) */\n    if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {\n      setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = contentValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid attachment upload\n    if (\n      sanitizeText(message).length > 0 ||\n      /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)\n    ) {\n      onSendMessage(message);\n      setContentValue('');\n      editorComponentRef.current?.setEmptyContent();\n    }\n    editorComponentRef.current?.focus();\n  }, [\n    contentValue,\n    contentValueOverflow,\n    disabled,\n    onSendMessage,\n    /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,\n    /* @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError\n  ]);\n\n  const hasErrorMessage = useMemo(() => {\n    return (\n      !!systemMessage ||\n      !!contentTooLongMessage ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!attachmentUploadsPendingError ||\n      /* @conditional-compile-remove(attachment-upload) */\n      !!activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()?.uploadError\n    );\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) => (\n      <Icon\n        iconName={isHover && contentValue ? 'SendBoxSendHovered' : 'SendBoxSend'}\n        className={sendIconStyle({\n          theme,\n          hasText: !!contentValue,\n          /* @conditional-compile-remove(attachment-upload) */\n          hasAttachment: false,\n          hasErrorMessage: hasErrorMessage,\n          defaultTextColor: theme.palette.neutralSecondary,\n          disabled: disabled\n        })}\n      />\n    ),\n    [contentValue, disabled, hasErrorMessage, theme]\n  );\n\n  const sendBoxErrorsProps: RichTextSendBoxErrorsProps = useMemo(() => {\n    return {\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadsPendingError: attachmentUploadsPendingError,\n      /* @conditional-compile-remove(attachment-upload) */\n      attachmentUploadError: activeAttachmentUploads?.filter((attachmentUpload) => attachmentUpload.uploadError).pop()\n        ?.uploadError,\n      systemMessage: systemMessage,\n      textTooLongMessage: contentTooLongMessage\n    };\n  }, [\n    /* @conditional-compile-remove(attachment-upload) */\n    activeAttachmentUploads,\n    contentTooLongMessage,\n    /* @conditional-compile-remove(attachment-upload) */\n    attachmentUploadsPendingError,\n    systemMessage\n  ]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const onRenderAttachmentUploads = useCallback(() => {\n    return (\n      <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards\n            activeAttachmentUploads={activeAttachmentUploads}\n            onCancelAttachmentUpload={onCancelAttachmentUpload}\n            strings={{\n              removeAttachment: strings.removeAttachment,\n              uploading: strings.uploading,\n              uploadCompleted: strings.uploadCompleted,\n              attachmentMoreMenu: strings.attachmentMoreMenu\n            }}\n          />\n        </FluentV9ThemeProvider>\n      </Stack>\n    );\n  }, [\n    activeAttachmentUploads,\n    onCancelAttachmentUpload,\n    strings.removeAttachment,\n    strings.uploadCompleted,\n    strings.uploading,\n    strings.attachmentMoreMenu,\n    theme\n  ]);\n\n  const sendButton = useMemo(() => {\n    return (\n      <InputBoxButton\n        onRenderIcon={onRenderSendIcon}\n        onClick={(e) => {\n          sendMessageOnClick();\n          e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.\n        }}\n        className={richTextActionButtonsStyle}\n        ariaLabel={localeStrings.sendButtonAriaLabel}\n        tooltipContent={localeStrings.sendButtonAriaLabel}\n      />\n    );\n  }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);\n\n  /* @conditional-compile-remove(attachment-upload) */\n  const hasAttachmentUploads = useMemo(() => {\n    return (\n      hasCompletedAttachmentUploads(activeAttachmentUploads) || hasIncompleteAttachmentUploads(activeAttachmentUploads)\n    );\n  }, [activeAttachmentUploads]);\n\n  return (\n    <Stack>\n      <RichTextSendBoxErrors {...sendBoxErrorsProps} />\n      <RichTextInputBoxComponent\n        // in case when format bar is shown, the editor is re-rendered that causes the content to be lost\n        // setting the content will ensure that the latest content is used when editor is re-rendered\n        content={contentValue}\n        placeholderText={strings.placeholderText}\n        autoFocus={autoFocus}\n        onChange={setContent}\n        onEnterKeyDown={sendMessageOnClick}\n        editorComponentRef={editorComponentRef}\n        strings={strings}\n        disabled={disabled}\n        actionComponents={sendButton}\n        richTextEditorStyleProps={sendBoxRichTextEditorStyle}\n        /* @conditional-compile-remove(attachment-upload) */\n        onRenderAttachmentUploads={onRenderAttachmentUploads}\n        /* @conditional-compile-remove(attachment-upload) */\n        hasAttachments={hasAttachmentUploads}\n      />\n    </Stack>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.15.0-alpha-202404090013",
+  "version": "1.15.0-alpha-202404100012",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [