@azure/communication-react 1.24.0-beta.1 → 1.24.0

package/dist/dist-esm/chat-component-bindings/src/utils/getImageAttachmentsFromHTMLContent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getImageAttachmentsFromHTMLContent.js","sourceRoot":"","sources":["../../../../../preprocess-dist/chat-component-bindings/src/utils/getImageAttachmentsFromHTMLContent.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,OAAe,EAAgC,EAAE;IAClG,IAAI,gBAA8C,CAAC;IACnD,sCAAsC;IACtC,2GAA2G;IAC3G,MAAM,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IACvE,QAAQ,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QAC7C,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;YACnC,gBAAgB,GAAG,EAAE,CAAC;QACxB,CAAC;QACD,gBAAgB,CAAC,IAAI,CAAC;YACpB,EAAE,EAAE,GAAG,CAAC,EAAE;YACV,cAAc,EAAE,OAAO;SACxB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { ChatAttachment } from '@azure/communication-chat';\n/**\n * @private\n */\nexport const getImageAttachmentsFromHTMLContent = (content: string): ChatAttachment[] | undefined => {\n  let imageAttachments: ChatAttachment[] | undefined;\n  // get image attachments from content,\n  // for the editing scenario, this includes the ones before editing and the newly added ones during editing.\n  const document = new DOMParser().parseFromString(content, 'text/html');\n  document.querySelectorAll('img').forEach(img => {\n    if (imageAttachments === undefined) {\n      imageAttachments = [];\n    }\n    imageAttachments.push({\n      id: img.id,\n      attachmentType: 'image'\n    });\n  });\n  return imageAttachments;\n};"]}

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

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

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

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

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

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

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

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import { AttachmentMetadataInProgress } from "../../../../../acs-ui-common/src";
-import { MessageThreadStrings } from '../../MessageThread';
-import { ChatMessage } from '../../../types';
-import { AttachmentMetadata } from "../../../../../acs-ui-common/src";
-/** @private */
-export type ChatMessageComponentAsRichTextEditBoxProps = {
-    onCancel?: (messageId: string) => void;
-    onSubmit: (text: string, attachmentMetadata?: AttachmentMetadata[]) => void;
-    message: ChatMessage;
-    strings: MessageThreadStrings;
-    onPaste?: (event: {
-        content: DocumentFragment;
-    }) => void;
-    onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
-    onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
-    inlineImagesWithProgress?: AttachmentMetadataInProgress[];
-};
-/**
- * @private
- */
-export declare const ChatMessageComponentAsRichTextEditBox: (props: ChatMessageComponentAsRichTextEditBoxProps) => JSX.Element;
-export default ChatMessageComponentAsRichTextEditBox;
-//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox.d.ts.map

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

@@ -1,196 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import { mergeStyles, Stack } from '@fluentui/react';
-import { ChatMyMessage } from '@fluentui-contrib/react-chat';
-import { mergeClasses } from '@fluentui/react-components';
-import { _formatString } from "../../../../../acs-ui-common/src";
-import { useTheme } from '../../../theming';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useReducer } from 'react';
-import { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';
-import { InputBoxButton } from '../../InputBoxButton';
-import { useChatMyMessageStyles } from '../../styles/MessageThread.styles';
-import { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';
-import { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';
-import { MAXIMUM_LENGTH_OF_MESSAGE, modifyInlineImagesInContentString } from '../../utils/SendBoxUtils';
-import { hasIncompleteAttachmentUploads, removeBrokenImageContentAndClearImageSizeStyles, getContentWithUpdatedInlineImagesInfo, isMessageTooLong } from '../../utils/SendBoxUtils';
-import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';
-import { attachmentMetadataReducer, getMessageWithAttachmentMetadata, doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';
-import { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';
-import { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';
-import { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';
-import { useLocale } from '../../../localization';
-import { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';
-import { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';
-import { SendBoxErrorBarType } from '../../SendBoxErrorBar';
-import { BROKEN_IMAGE_SVG_DATA } from '../../styles/Common.style';
-import { getPreviousInlineImages } from '../../utils/RichTextEditorUtils';
-/**
- * @private
- */
-export const ChatMessageComponentAsRichTextEditBox = (props) => {
-    var _a;
-    const { onCancel, onSubmit, strings, message, onPaste, onInsertInlineImage, inlineImagesWithProgress, onRemoveInlineImage } = props;
-    const [initialInlineImages, setInitialInlineImages] = useState([]);
-    const initialContent = useMemo(() => {
-        const content = message.content;
-        setInitialInlineImages(getPreviousInlineImages(content));
-        const document = new DOMParser().parseFromString(content !== null && content !== void 0 ? content : '', 'text/html');
-        // The broken image element is a div element with all the attributes of the original image element.
-        // We need to convert it to a img element so the Rooster knows how to render it.
-        // And we need to copy over all the attributes such as id, width, etc.
-        // which is needed for sending the message with the images correctly.
-        document.querySelectorAll('.broken-image-wrapper').forEach(brokenImage => {
-            var _a;
-            const imageElement = document.createElement('img');
-            const attributes = brokenImage.attributes;
-            for (const attribute of attributes) {
-                imageElement.setAttribute(attribute.name, attribute.value);
-            }
-            imageElement.src = BROKEN_IMAGE_SVG_DATA;
-            imageElement.style.width = '3rem';
-            imageElement.style.height = '3rem';
-            (_a = brokenImage.parentElement) === null || _a === void 0 ? void 0 : _a.replaceChild(imageElement, brokenImage);
-        });
-        return document.body.innerHTML;
-        return message.content;
-    }, [message]);
-    const [contentValue, setContentValue] = useState(initialContent || '');
-    const [contentValueWithInlineImagesOverflow, setContentValueWithInlineImagesOverflow] = useState(false);
-    const [attachmentMetadata, handleAttachmentAction] = useReducer(attachmentMetadataReducer, (_a = getMessageWithAttachmentMetadata(message)) !== null && _a !== void 0 ? _a : []);
-    const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState(undefined);
-    const editTextFieldRef = React.useRef(null);
-    const theme = useTheme();
-    const messageState = useMemo(() => {
-        var _a, _b;
-        // get plain text content from the editor to check if the message is empty
-        // as the content may contain tags even when the content is empty
-        const plainTextContent = (_b = (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.getPlainContent()) !== null && _b !== void 0 ? _b : contentValue;
-        return getMessageState(plainTextContent, attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
-    }, [attachmentMetadata, contentValue]);
-    const imageUploadErrorMessage = useMemo(() => {
-        var _a, _b;
-        return (_b = (_a = inlineImagesWithProgress === null || inlineImagesWithProgress === void 0 ? void 0 : inlineImagesWithProgress.filter(image => image.error).pop()) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message;
-    }, [inlineImagesWithProgress]);
-    const submitEnabled = messageState === 'OK';
-    const editContainerStyles = useChatMessageRichTextEditContainerStyles();
-    const chatMyMessageStyles = useChatMyMessageStyles();
-    const locale = useLocale().strings;
-    const setContent = useCallback((newValue) => {
-        setContentValue(newValue !== null && newValue !== void 0 ? newValue : '');
-    }, []);
-    useEffect(() => {
-        var _a;
-        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    const textTooLongMessage = useMemo(() => {
-        return messageState === 'too long' || contentValueWithInlineImagesOverflow ? _formatString(strings.editBoxTextLimit, {
-            limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`
-        }) : undefined;
-    }, [messageState, strings.editBoxTextLimit, contentValueWithInlineImagesOverflow]);
-    const iconClassName = useCallback((isHover) => {
-        const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;
-        return mergeStyles(richTextEditBoxActionButtonIcon, {
-            color
-        });
-    }, [theme.palette.accent, theme.palette.neutralSecondary]);
-    const onRenderThemedCancelIcon = useCallback((isHover) => {
-        return onRenderCancelIcon(iconClassName(isHover));
-    }, [iconClassName]);
-    const onRenderThemedSubmitIcon = useCallback((isHover) => {
-        return onRenderSubmitIcon(iconClassName(isHover));
-    }, [iconClassName]);
-    const hasMultipleAttachments = useMemo(() => {
-        return doesMessageContainMultipleAttachments(message);
-    }, [message]);
-    const onSubmitHandler = useCallback(() => {
-        if (!submitEnabled) {
-            return;
-        }
-        if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {
-            const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(contentValue, inlineImagesWithProgress);
-            const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);
-            // Set contentValueWithInlineImagesOverflow state to display the error bar
-            setContentValueWithInlineImagesOverflow(messageTooLong);
-            // The change from the setContentValueOverflow in the previous line will not kick in yet.
-            // We need to rely on the local value of messageTooLong to return early if the message is too long.
-            if (messageTooLong) {
-                return;
-            }
-        }
-        // Don't send message until all attachments have been uploaded successfully
-        setAttachmentUploadsPendingError(undefined);
-        if (hasIncompleteAttachmentUploads(inlineImagesWithProgress)) {
-            setAttachmentUploadsPendingError({
-                message: strings.imageUploadsPendingError,
-                timestamp: Date.now(),
-                errorBarType: SendBoxErrorBarType.info
-            });
-            return;
-        }
-        let content = contentValue;
-        content = removeBrokenImageContentAndClearImageSizeStyles(content);
-        let initInlineImages = [];
-        initInlineImages = initialInlineImages !== null && initialInlineImages !== void 0 ? initialInlineImages : [];
-        modifyInlineImagesInContentString(content, initInlineImages, (content) => {
-            // it's very important to pass an empty attachment here
-            // so when user removes all attachments, UI can reflect it instantly
-            // if you set it to undefined, the attachments pre-edited would still be there
-            // until edit message event is received
-            onSubmit(content, attachmentMetadata || []);
-        });
-    }, [submitEnabled, inlineImagesWithProgress, initialInlineImages, contentValue, strings.imageUploadsPendingError, onSubmit, attachmentMetadata]);
-    const actionButtons = useMemo(() => {
-        return React.createElement(Stack, { horizontal: true },
-            React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                    onCancel && onCancel(message.messageId);
-                }, id: 'dismissIconWrapper', "data-testId": 'chat-message-rich-text-edit-box-cancel-button' }),
-            React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: e => {
-                    onSubmitHandler();
-                    e.stopPropagation();
-                }, id: 'submitIconWrapper', "data-testId": 'chat-message-rich-text-edit-box-submit-button' }));
-    }, [message.messageId, onCancel, onRenderThemedCancelIcon, onRenderThemedSubmitIcon, strings.editBoxCancelButton, strings.editBoxSubmitButton, onSubmitHandler]);
-    const richTextLocaleStrings = useMemo(() => {
-        return Object.assign(Object.assign({}, locale.richTextSendBox), strings);
-        return locale.sendBox;
-    }, [locale.richTextSendBox, strings, locale.sendBox]);
-    const onCancelAttachmentUpload = useCallback((attachmentId) => {
-        // edit box only capable of removing attachments
-        // we need to expand attachment actions
-        // if we want to support more actions e.g. add
-        handleAttachmentAction({
-            type: 'remove',
-            id: attachmentId
-        });
-    }, []);
-    const onRenderAttachmentUploads = useCallback(() => {
-        return React.createElement(Stack, { className: attachmentUploadCardsStyles },
-            React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
-                React.createElement(_AttachmentUploadCards, { attachments: attachmentMetadata, onCancelAttachmentUpload: onCancelAttachmentUpload })));
-    }, [attachmentMetadata, onCancelAttachmentUpload, theme]);
-    const onChangeHandler = useCallback((content, removedInlineImages) => {
-        removedInlineImages === null || removedInlineImages === void 0 ? void 0 : removedInlineImages.forEach((removedInlineImage) => {
-            onRemoveInlineImage && onRemoveInlineImage(removedInlineImage, message.messageId);
-        });
-        setContent(content);
-    }, [setContent, onRemoveInlineImage, message.messageId]);
-    const getContent = () => {
-        return React.createElement(Stack, { className: mergeStyles(editBoxWidthStyles) },
-            React.createElement(RichTextSendBoxErrors, { textTooLongMessage: textTooLongMessage, systemMessage: message.failureReason, attachmentUploadsPendingError: attachmentUploadsPendingError, attachmentProgressError: imageUploadErrorMessage ? {
-                    message: imageUploadErrorMessage,
-                    timestamp: Date.now(),
-                    errorBarType: SendBoxErrorBarType.error
-                } : undefined }),
-            React.createElement(RichTextInputBoxComponent, { placeholderText: strings.editBoxPlaceholderText, onChange: onChangeHandler, onEnterKeyDown: onSubmitHandler, editorComponentRef: editTextFieldRef, initialContent: initialContent, strings: richTextLocaleStrings, disabled: false, actionComponents: actionButtons, richTextEditorStyleProps: editBoxRichTextEditorStyle, isHorizontalLayoutDisabled: true, onRenderAttachmentUploads: onRenderAttachmentUploads, onPaste: onPaste, onInsertInlineImage: onInsertInlineImage ? (imageAttributes) => {
-                    onInsertInlineImage(imageAttributes, message.messageId);
-                } : undefined }));
-    };
-    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
-    return React.createElement(ChatMyMessage, { attached: attached, root: {
-            className: mergeClasses(chatMyMessageStyles.root, hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined)
-        }, body: {
-            className: mergeClasses(editContainerStyles.body, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
-        } }, getContent());
-};
-export default ChatMessageComponentAsRichTextEditBox;
-//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,yCAAgC;AAExD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAC;AAClG,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAEhF,OAAO,EAAE,yCAAyC,EAAE,MAAM,0CAA0C,CAAC;AACrG,OAAO,EAAE,yBAAyB,EAAE,iCAAiC,EAAE,MAAM,0BAA0B,CAAC;AACxG,OAAO,EAAE,8BAA8B,EAAE,+CAA+C,EAAE,qCAAqC,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACpL,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AACzH,OAAO,EAAE,yBAAyB,EAAE,gCAAgC,EAAE,qCAAqC,EAAE,MAAM,gDAAgD,CAAC;AAEpK,OAAO,EAAE,yBAAyB,EAAE,MAAM,gDAAgD,CAAC;AAC3F,OAAO,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAC5G,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAwB,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAgB1E;;GAEG;AACH,MAAM,CAAC,MAAM,qCAAqC,GAAG,CAAC,KAAiD,EAAe,EAAE;;IACtH,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,mBAAmB,EACnB,wBAAwB,EACxB,mBAAmB,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAA2B,EAAE,CAAC,CAAC;IAC7F,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QAChC,sBAAsB,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC,CAAC;QACzD,MAAM,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EAAE,WAAW,CAAC,CAAC;QAC7E,mGAAmG;QACnG,gFAAgF;QAChF,sEAAsE;QACtE,qEAAqE;QACrE,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;;YACvE,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACnD,MAAM,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC;YAC1C,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;gBACnC,YAAY,CAAC,YAAY,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;YAC7D,CAAC;YACD,YAAY,CAAC,GAAG,GAAG,qBAAqB,CAAC;YACzC,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YAClC,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YACnC,MAAA,WAAW,CAAC,aAAa,0CAAE,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;QACrE,CAAC,CAAC,CAAC;QACH,OAAO,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;QAC/B,OAAO,OAAO,CAAC,OAAO,CAAC;IACzB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,cAAc,IAAI,EAAE,CAAC,CAAC;IAC/E,MAAM,CAAC,oCAAoC,EAAE,uCAAuC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxG,MAAM,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,GAAG,UAAU,CAAC,yBAAyB,EAAE,MAAA,gCAAgC,CAAC,OAAO,CAAC,mCAAI,EAAE,CAAC,CAAC;IAC5I,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAAmC,SAAS,CAAC,CAAC;IAChI,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAA6B,IAAI,CAAC,CAAC;IACxE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;;QAChC,0EAA0E;QAC1E,iEAAiE;QACjE,MAAM,gBAAgB,GAAG,MAAA,MAAA,gBAAgB,CAAC,OAAO,0CAAE,eAAe,EAAE,mCAAI,YAAY,CAAC;QACrF,OAAO,eAAe,CAAC,gBAAgB,EAAE,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,EAAE,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC,CAAC;IACvC,MAAM,uBAAuB,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC3C,OAAO,MAAA,MAAA,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,0CAAE,KAAK,0CAAE,OAAO,CAAC;IACtF,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAC/B,MAAM,aAAa,GAAG,YAAY,KAAK,IAAI,CAAC;IAC5C,MAAM,mBAAmB,GAAG,yCAAyC,EAAE,CAAC;IACxE,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IACrD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,QAAiB,EAAQ,EAAE;QACzD,eAAe,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO,YAAY,KAAK,UAAU,IAAI,oCAAoC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,EAAE;YACnH,WAAW,EAAE,GAAG,yBAAyB,EAAE;SAC5C,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACjB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,gBAAgB,EAAE,oCAAoC,CAAC,CAAC,CAAC;IACnF,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE;QACrD,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;QAC9E,OAAO,WAAW,CAAC,+BAA+B,EAAE;YAClD,KAAK;SACN,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC3D,MAAM,wBAAwB,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE;QAChE,OAAO,kBAAkB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,MAAM,wBAAwB,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE;QAChE,OAAO,kBAAkB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,qCAAqC,CAAC,OAAO,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,MAAM,eAAe,GAAG,WAAW,CAAC,GAAS,EAAE;QAC7C,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QACD,IAAI,wBAAwB,IAAI,wBAAwB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpE,MAAM,kCAAkC,GAAG,qCAAqC,CAAC,YAAY,EAAE,wBAAwB,CAAC,CAAC;YACzH,MAAM,cAAc,GAAG,gBAAgB,CAAC,kCAAkC,CAAC,MAAM,CAAC,CAAC;YACnF,0EAA0E;YAC1E,uCAAuC,CAAC,cAAc,CAAC,CAAC;YACxD,yFAAyF;YACzF,mGAAmG;YACnG,IAAI,cAAc,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;QACH,CAAC;QAED,2EAA2E;QAC3E,gCAAgC,CAAC,SAAS,CAAC,CAAC;QAC5C,IAAI,8BAA8B,CAAC,wBAAwB,CAAC,EAAE,CAAC;YAC7D,gCAAgC,CAAC;gBAC/B,OAAO,EAAE,OAAO,CAAC,wBAAwB;gBACzC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;gBACrB,YAAY,EAAE,mBAAmB,CAAC,IAAI;aACvC,CAAC,CAAC;YACH,OAAO;QACT,CAAC;QACD,IAAI,OAAO,GAAG,YAAY,CAAC;QAC3B,OAAO,GAAG,+CAA+C,CAAC,OAAO,CAAC,CAAC;QACnE,IAAI,gBAAgB,GAA6B,EAAE,CAAC;QACpD,gBAAgB,GAAG,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,EAAE,CAAC;QAC7C,iCAAiC,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,OAAe,EAAE,EAAE;YAC/E,uDAAuD;YACvD,oEAAoE;YACpE,8EAA8E;YAC9E,uCAAuC;YACvC,QAAQ,CAAC,OAAO,EAAE,kBAAkB,IAAI,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,YAAY,EAAE,OAAO,CAAC,wBAAwB,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC;IACjJ,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,oBAAC,KAAK,IAAC,UAAU;YACpB,oBAAC,cAAc,IAAC,SAAS,EAAE,0BAA0B,EAAE,SAAS,EAAE,OAAO,CAAC,mBAAmB,EAAE,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAAE,YAAY,EAAE,wBAAwB,EAAE,OAAO,EAAE,GAAG,EAAE;oBAClM,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;gBAC1C,CAAC,EAAE,EAAE,EAAE,oBAAoB,iBAAe,+CAA+C,GAAI;YAC3F,oBAAC,cAAc,IAAC,SAAS,EAAE,0BAA0B,EAAE,SAAS,EAAE,OAAO,CAAC,mBAAmB,EAAE,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAAE,YAAY,EAAE,wBAAwB,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;oBACjM,eAAe,EAAE,CAAC;oBAClB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACtB,CAAC,EAAE,EAAE,EAAE,mBAAmB,iBAAe,+CAA+C,GAAI,CACpF,CAAC;IACb,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,OAAO,CAAC,mBAAmB,EAAE,OAAO,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,CAAC;IACjK,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,uCACK,MAAM,CAAC,eAAe,GACtB,OAAO,EACV;QACF,OAAO,MAAM,CAAC,OAAO,CAAC;IACxB,CAAC,EAAE,CAAC,MAAM,CAAC,eAAe,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IACtD,MAAM,wBAAwB,GAAG,WAAW,CAAC,CAAC,YAAoB,EAAE,EAAE;QACpE,gDAAgD;QAChD,uCAAuC;QACvC,8CAA8C;QAC9C,sBAAsB,CAAC;YACrB,IAAI,EAAE,QAAQ;YACd,EAAE,EAAE,YAAY;SACjB,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,yBAAyB,GAAG,WAAW,CAAC,GAAG,EAAE;QACjD,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,2BAA2B;YAChD,oBAAC,qBAAqB,IAAC,OAAO,EAAE,KAAK;gBACnC,oBAAC,sBAAsB,IAAC,WAAW,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,wBAAwB,GAAI,CACzF,CAClB,CAAC;IACb,CAAC,EAAE,CAAC,kBAAkB,EAAE,wBAAwB,EAAE,KAAK,CAAC,CAAC,CAAC;IAC1D,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,OAA2B,EAAE,mBAA8C,EAAE,EAAE;QAClH,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,CAAC,CAAC,kBAA0C,EAAE,EAAE;YAC1E,mBAAmB,IAAI,mBAAmB,CAAC,kBAAkB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;QACpF,CAAC,CAAC,CAAC;QACH,UAAU,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,UAAU,EAAE,mBAAmB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,MAAM,UAAU,GAAG,GAAgB,EAAE;QACnC,OAAO,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,kBAAkB,CAAC;YACpD,oBAAC,qBAAqB,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,aAAa,EAAE,OAAO,CAAC,aAAa,EAAE,6BAA6B,EAAE,6BAA6B,EAAE,uBAAuB,EAAE,uBAAuB,CAAC,CAAC,CAAC;oBACtN,OAAO,EAAE,uBAAuB;oBAChC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;oBACrB,YAAY,EAAE,mBAAmB,CAAC,KAAK;iBACxC,CAAC,CAAC,CAAC,SAAS,GAAI;YACf,oBAAC,yBAAyB,IAAC,eAAe,EAAE,OAAO,CAAC,sBAAsB,EAAE,QAAQ,EAAE,eAAe,EAAE,cAAc,EAAE,eAAe,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,wBAAwB,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,IAAI,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,eAAuC,EAAE,EAAE;oBACvhB,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;gBAC1D,CAAC,CAAC,CAAC,CAAC,SAAS,GAAI,CACT,CAAC;IACb,CAAC,CAAC;IACF,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACzG,OAAO,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9C,SAAS,EAAE,YAAY,CAAC,mBAAmB,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,CAAC,CAAC,SAAS,CAAC;SACzI,EAAE,IAAI,EAAE;YACP,SAAS,EAAE,YAAY,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;SACrH,IACI,UAAU,EAAE,CACC,CAAC;AACrB,CAAC,CAAC;AACF,eAAe,qCAAqC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\nimport { useTheme } from '../../../theming';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useReducer } from 'react';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../../styles/EditBox.styles';\nimport { InputBoxButton } from '../../InputBoxButton';\nimport { MessageThreadStrings } from '../../MessageThread';\nimport { useChatMyMessageStyles } from '../../styles/MessageThread.styles';\nimport { ChatMessage } from '../../../types';\nimport { _AttachmentUploadCards } from '../../Attachment/AttachmentUploadCards';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { useChatMessageRichTextEditContainerStyles } from '../../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE, modifyInlineImagesInContentString } from '../../utils/SendBoxUtils';\nimport { hasIncompleteAttachmentUploads, removeBrokenImageContentAndClearImageSizeStyles, getContentWithUpdatedInlineImagesInfo, isMessageTooLong } from '../../utils/SendBoxUtils';\nimport { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { attachmentMetadataReducer, getMessageWithAttachmentMetadata, doesMessageContainMultipleAttachments } from '../../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../../localization';\nimport { FluentV9ThemeProvider } from '../../../theming/FluentV9ThemeProvider';\nimport { attachmentUploadCardsStyles } from '../../styles/SendBox.styles';\nimport { SendBoxErrorBarError, SendBoxErrorBarType } from '../../SendBoxErrorBar';\nimport { BROKEN_IMAGE_SVG_DATA } from '../../styles/Common.style';\nimport { getPreviousInlineImages } from '../../utils/RichTextEditorUtils';\n\n/** @private */\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (text: string, attachmentMetadata?: AttachmentMetadata[]) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  onPaste?: (event: {\n    content: DocumentFragment;\n  }) => void;\n  onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n  onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;\n  inlineImagesWithProgress?: AttachmentMetadataInProgress[];\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsRichTextEditBox = (props: ChatMessageComponentAsRichTextEditBoxProps): JSX.Element => {\n  const {\n    onCancel,\n    onSubmit,\n    strings,\n    message,\n    onPaste,\n    onInsertInlineImage,\n    inlineImagesWithProgress,\n    onRemoveInlineImage\n  } = props;\n  const [initialInlineImages, setInitialInlineImages] = useState<Record<string, string>[]>([]);\n  const initialContent = useMemo(() => {\n    const content = message.content;\n    setInitialInlineImages(getPreviousInlineImages(content));\n    const document = new DOMParser().parseFromString(content ?? '', 'text/html');\n    // The broken image element is a div element with all the attributes of the original image element.\n    // We need to convert it to a img element so the Rooster knows how to render it.\n    // And we need to copy over all the attributes such as id, width, etc.\n    // which is needed for sending the message with the images correctly.\n    document.querySelectorAll('.broken-image-wrapper').forEach(brokenImage => {\n      const imageElement = document.createElement('img');\n      const attributes = brokenImage.attributes;\n      for (const attribute of attributes) {\n        imageElement.setAttribute(attribute.name, attribute.value);\n      }\n      imageElement.src = BROKEN_IMAGE_SVG_DATA;\n      imageElement.style.width = '3rem';\n      imageElement.style.height = '3rem';\n      brokenImage.parentElement?.replaceChild(imageElement, brokenImage);\n    });\n    return document.body.innerHTML;\n    return message.content;\n  }, [message]);\n  const [contentValue, setContentValue] = useState<string>(initialContent || '');\n  const [contentValueWithInlineImagesOverflow, setContentValueWithInlineImagesOverflow] = useState(false);\n  const [attachmentMetadata, handleAttachmentAction] = useReducer(attachmentMetadataReducer, getMessageWithAttachmentMetadata(message) ?? []);\n  const [attachmentUploadsPendingError, setAttachmentUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n  const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n  const theme = useTheme();\n  const messageState = useMemo(() => {\n    // get plain text content from the editor to check if the message is empty\n    // as the content may contain tags even when the content is empty\n    const plainTextContent = editTextFieldRef.current?.getPlainContent() ?? contentValue;\n    return getMessageState(plainTextContent, attachmentMetadata ?? []);\n  }, [attachmentMetadata, contentValue]);\n  const imageUploadErrorMessage = useMemo(() => {\n    return inlineImagesWithProgress?.filter(image => image.error).pop()?.error?.message;\n  }, [inlineImagesWithProgress]);\n  const submitEnabled = messageState === 'OK';\n  const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n  const locale = useLocale().strings;\n  const setContent = useCallback((newValue?: string): void => {\n    setContentValue(newValue ?? '');\n  }, []);\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n  const textTooLongMessage = useMemo(() => {\n    return messageState === 'too long' || contentValueWithInlineImagesOverflow ? _formatString(strings.editBoxTextLimit, {\n      limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}`\n    }) : undefined;\n  }, [messageState, strings.editBoxTextLimit, contentValueWithInlineImagesOverflow]);\n  const iconClassName = useCallback((isHover: boolean) => {\n    const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n    return mergeStyles(richTextEditBoxActionButtonIcon, {\n      color\n    });\n  }, [theme.palette.accent, theme.palette.neutralSecondary]);\n  const onRenderThemedCancelIcon = useCallback((isHover: boolean) => {\n    return onRenderCancelIcon(iconClassName(isHover));\n  }, [iconClassName]);\n  const onRenderThemedSubmitIcon = useCallback((isHover: boolean) => {\n    return onRenderSubmitIcon(iconClassName(isHover));\n  }, [iconClassName]);\n  const hasMultipleAttachments = useMemo(() => {\n    return doesMessageContainMultipleAttachments(message);\n  }, [message]);\n  const onSubmitHandler = useCallback((): void => {\n    if (!submitEnabled) {\n      return;\n    }\n    if (inlineImagesWithProgress && inlineImagesWithProgress.length > 0) {\n      const contentWithUpdatedInlineImagesInfo = getContentWithUpdatedInlineImagesInfo(contentValue, inlineImagesWithProgress);\n      const messageTooLong = isMessageTooLong(contentWithUpdatedInlineImagesInfo.length);\n      // Set contentValueWithInlineImagesOverflow state to display the error bar\n      setContentValueWithInlineImagesOverflow(messageTooLong);\n      // The change from the setContentValueOverflow in the previous line will not kick in yet.\n      // We need to rely on the local value of messageTooLong to return early if the message is too long.\n      if (messageTooLong) {\n        return;\n      }\n    }\n\n    // Don't send message until all attachments have been uploaded successfully\n    setAttachmentUploadsPendingError(undefined);\n    if (hasIncompleteAttachmentUploads(inlineImagesWithProgress)) {\n      setAttachmentUploadsPendingError({\n        message: strings.imageUploadsPendingError,\n        timestamp: Date.now(),\n        errorBarType: SendBoxErrorBarType.info\n      });\n      return;\n    }\n    let content = contentValue;\n    content = removeBrokenImageContentAndClearImageSizeStyles(content);\n    let initInlineImages: Record<string, string>[] = [];\n    initInlineImages = initialInlineImages ?? [];\n    modifyInlineImagesInContentString(content, initInlineImages, (content: string) => {\n      // it's very important to pass an empty attachment here\n      // so when user removes all attachments, UI can reflect it instantly\n      // if you set it to undefined, the attachments pre-edited would still be there\n      // until edit message event is received\n      onSubmit(content, attachmentMetadata || []);\n    });\n  }, [submitEnabled, inlineImagesWithProgress, initialInlineImages, contentValue, strings.imageUploadsPendingError, onSubmit, attachmentMetadata]);\n  const actionButtons = useMemo(() => {\n    return <Stack horizontal>\n        <InputBoxButton className={richTextActionButtonsStyle} ariaLabel={strings.editBoxCancelButton} tooltipContent={strings.editBoxCancelButton} onRenderIcon={onRenderThemedCancelIcon} onClick={() => {\n        onCancel && onCancel(message.messageId);\n      }} id={'dismissIconWrapper'} data-testId={'chat-message-rich-text-edit-box-cancel-button'} />\n        <InputBoxButton className={richTextActionButtonsStyle} ariaLabel={strings.editBoxSubmitButton} tooltipContent={strings.editBoxSubmitButton} onRenderIcon={onRenderThemedSubmitIcon} onClick={e => {\n        onSubmitHandler();\n        e.stopPropagation();\n      }} id={'submitIconWrapper'} data-testId={'chat-message-rich-text-edit-box-submit-button'} />\n      </Stack>;\n  }, [message.messageId, onCancel, onRenderThemedCancelIcon, onRenderThemedSubmitIcon, strings.editBoxCancelButton, strings.editBoxSubmitButton, onSubmitHandler]);\n  const richTextLocaleStrings = useMemo(() => {\n    return {\n      ...locale.richTextSendBox,\n      ...strings\n    };\n    return locale.sendBox;\n  }, [locale.richTextSendBox, strings, locale.sendBox]);\n  const onCancelAttachmentUpload = useCallback((attachmentId: string) => {\n    // edit box only capable of removing attachments\n    // we need to expand attachment actions\n    // if we want to support more actions e.g. add\n    handleAttachmentAction({\n      type: 'remove',\n      id: attachmentId\n    });\n  }, []);\n  const onRenderAttachmentUploads = useCallback(() => {\n    return <Stack className={attachmentUploadCardsStyles}>\n        <FluentV9ThemeProvider v8Theme={theme}>\n          <_AttachmentUploadCards attachments={attachmentMetadata} onCancelAttachmentUpload={onCancelAttachmentUpload} />\n        </FluentV9ThemeProvider>\n      </Stack>;\n  }, [attachmentMetadata, onCancelAttachmentUpload, theme]);\n  const onChangeHandler = useCallback((content: string | undefined, removedInlineImages?: Record<string, string>[]) => {\n    removedInlineImages?.forEach((removedInlineImage: Record<string, string>) => {\n      onRemoveInlineImage && onRemoveInlineImage(removedInlineImage, message.messageId);\n    });\n    setContent(content);\n  }, [setContent, onRemoveInlineImage, message.messageId]);\n  const getContent = (): JSX.Element => {\n    return <Stack className={mergeStyles(editBoxWidthStyles)}>\n        <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} attachmentUploadsPendingError={attachmentUploadsPendingError} attachmentProgressError={imageUploadErrorMessage ? {\n        message: imageUploadErrorMessage,\n        timestamp: Date.now(),\n        errorBarType: SendBoxErrorBarType.error\n      } : undefined} />\n        <RichTextInputBoxComponent placeholderText={strings.editBoxPlaceholderText} onChange={onChangeHandler} onEnterKeyDown={onSubmitHandler} editorComponentRef={editTextFieldRef} initialContent={initialContent} strings={richTextLocaleStrings} disabled={false} actionComponents={actionButtons} richTextEditorStyleProps={editBoxRichTextEditorStyle} isHorizontalLayoutDisabled={true} onRenderAttachmentUploads={onRenderAttachmentUploads} onPaste={onPaste} onInsertInlineImage={onInsertInlineImage ? (imageAttributes: Record<string, string>) => {\n        onInsertInlineImage(imageAttributes, message.messageId);\n      } : undefined} />\n      </Stack>;\n  };\n  const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n  return <ChatMyMessage attached={attached} root={{\n    className: mergeClasses(chatMyMessageStyles.root, hasMultipleAttachments ? chatMyMessageStyles.multipleAttachmentsInEditing : undefined)\n  }} body={{\n    className: mergeClasses(editContainerStyles.body, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)\n  }}>\n      {getContent()}\n    </ChatMyMessage>;\n};\nexport default ChatMessageComponentAsRichTextEditBox;"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.d.ts

@@ -1,69 +0,0 @@
-/// <reference types="react" />
-import { IButtonStyles, ILinkStyles } from '@fluentui/react';
-import { BaseCustomStyles } from '../../types';
-/**
- * @beta
- * Props for BrowserPermissionDenied component.
- */
-export interface BrowserPermissionDeniedProps {
-    /**
-     * Action to be taken by the more help link. Possible to send to external page or show other modal.
-     */
-    onTroubleshootingClick?: () => void;
-    /**
-     * Action to be taken by the try again primary button.
-     */
-    onTryAgainClick?: () => void;
-    /**
-     * Localization strings for BrowserPermissionDenied component.
-     */
-    strings?: BrowserPermissionDeniedStrings;
-    /**
-     * Allows users to pass in an object contains custom CSS styles.
-     * @Example
-     * ```
-     * <BrowserPermissionDenied styles={{ primaryButton: { root: {backgroundColor: 'blue' }}}} />
-     * ```
-     */
-    styles?: BrowserPermissionDeniedStyles;
-}
-/**
- * @beta
- * Strings for BrowserPermissionDenied component
- */
-export interface BrowserPermissionDeniedStrings {
-    /**
-     * Main button text string.
-     */
-    primaryButtonText: string;
-    /**
-     * Main text string.
-     */
-    primaryText: string;
-    /**
-     * Subtext string.
-     */
-    secondaryText: string;
-    /**
-     * More help link string.
-     */
-    linkText: string;
-}
-/**
- * Fluent styles for {@link BrowserPermissionDenied}.
- *
- * @beta
- */
-export interface BrowserPermissionDeniedStyles extends BaseCustomStyles {
-    /** Styles for the primary button. */
-    primaryButton?: IButtonStyles;
-    /** Styles for the help troubleshooting link text. */
-    troubleshootingLink?: ILinkStyles;
-}
-/**
- * @beta
- *
- * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
- */
-export declare const BrowserPermissionDenied: (props: BrowserPermissionDeniedProps) => JSX.Element;
-//# sourceMappingURL=BrowserPermissionDenied.d.ts.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.js

@@ -1,36 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React from 'react';
-import { Stack, Text, Link, Icon, PrimaryButton, mergeStyleSets } from '@fluentui/react';
-import { useLocale } from '../../localization';
-import { iconContainerStyles, iconPrimaryStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, textContainerStyles } from './../styles/BrowserPermissionDenied.styles';
-import { isValidString } from '../utils';
-const BrowserPermissionDeniedContainer = (props) => {
-    const { onTroubleshootingClick, onTryAgainClick, strings, styles } = props;
-    return React.createElement(Stack, { style: {
-            padding: '2rem',
-            paddingTop: '2.5rem',
-            maxWidth: '25.375rem'
-        } },
-        React.createElement(Stack, { horizontal: true, style: {
-                paddingBottom: '1.5rem'
-            }, horizontalAlign: 'space-between' },
-            React.createElement(Stack, { styles: iconContainerStyles, horizontalAlign: 'center' },
-                React.createElement(Icon, { styles: iconPrimaryStyles, iconName: 'BrowserPermissionDeniedError' }))),
-        React.createElement(Stack, { styles: textContainerStyles },
-            isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && React.createElement(Text, { styles: primaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
-            isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText),
-            onTryAgainClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, styles === null || styles === void 0 ? void 0 : styles.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onTryAgainClick }),
-            onTroubleshootingClick && isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, styles === null || styles === void 0 ? void 0 : styles.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText)));
-};
-/**
- * @beta
- *
- * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
- */
-export const BrowserPermissionDenied = (props) => {
-    const locale = useLocale().strings.BrowserPermissionDenied;
-    return React.createElement(BrowserPermissionDeniedContainer, Object.assign({}, props, { strings: props.strings ? props.strings : locale }));
-    return React.createElement(React.Fragment, null);
-};
-//# sourceMappingURL=BrowserPermissionDenied.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDenied.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BrowserPermissionDenied.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/DevicePermissions/BrowserPermissionDenied.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,cAAc,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAC;AAEtM,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA+DzC,MAAM,gCAAgC,GAAG,CAAC,KAAmC,EAAe,EAAE;IAC5F,MAAM,EACJ,sBAAsB,EACtB,eAAe,EACf,OAAO,EACP,MAAM,EACP,GAAG,KAAK,CAAC;IACV,OAAO,oBAAC,KAAK,IAAC,KAAK,EAAE;YACnB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,WAAW;SACtB;QACG,oBAAC,KAAK,IAAC,UAAU,QAAC,KAAK,EAAE;gBACzB,aAAa,EAAE,QAAQ;aACxB,EAAE,eAAe,EAAE,eAAe;YAC/B,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB,EAAE,eAAe,EAAE,QAAQ;gBAC3D,oBAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,EAAE,QAAQ,EAAE,8BAA8B,GAAS,CAC5E,CACF;QACR,oBAAC,KAAK,IAAC,MAAM,EAAE,mBAAmB;YAC/B,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAC,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,iBAAiB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAQ;YACrG,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAC,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,mBAAmB,IAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAQ;YAE3G,eAAe,IAAI,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,CAAC,IAAI,oBAAC,aAAa,IAAC,MAAM,EAAE,cAAc,CAAC,mBAAmB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,EAAE,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,EAAE,OAAO,EAAE,eAAe,GAAI;YAEjN,sBAAsB,IAAI,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,cAAc,CAAC,cAAc,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CAAC,EAAE,OAAO,EAAE,sBAAsB,IACpK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CACb,CACH,CACF,CAAC;AACb,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAe,EAAE;IAC1F,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,uBAAuB,CAAC;IAC3D,OAAO,oBAAC,gCAAgC,oBAAK,KAAK,IAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC;IACxG,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { IButtonStyles, ILinkStyles } from '@fluentui/react';\nimport { Stack, Text, Link, Icon, PrimaryButton, mergeStyleSets } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport { iconContainerStyles, iconPrimaryStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, textContainerStyles } from './../styles/BrowserPermissionDenied.styles';\nimport { BaseCustomStyles } from '../../types';\nimport { isValidString } from '../utils';\n\n/**\n * @beta\n * Props for BrowserPermissionDenied component.\n */\nexport interface BrowserPermissionDeniedProps {\n  /**\n   * Action to be taken by the more help link. Possible to send to external page or show other modal.\n   */\n  onTroubleshootingClick?: () => void;\n  /**\n   * Action to be taken by the try again primary button.\n   */\n  onTryAgainClick?: () => void;\n  /**\n   * Localization strings for BrowserPermissionDenied component.\n   */\n  strings?: BrowserPermissionDeniedStrings;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <BrowserPermissionDenied styles={{ primaryButton: { root: {backgroundColor: 'blue' }}}} />\n   * ```\n   */\n  styles?: BrowserPermissionDeniedStyles;\n}\n\n/**\n * @beta\n * Strings for BrowserPermissionDenied component\n */\nexport interface BrowserPermissionDeniedStrings {\n  /**\n   * Main button text string.\n   */\n  primaryButtonText: string;\n  /**\n   * Main text string.\n   */\n  primaryText: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText: string;\n  /**\n   * More help link string.\n   */\n  linkText: string;\n}\n\n/**\n * Fluent styles for {@link BrowserPermissionDenied}.\n *\n * @beta\n */\nexport interface BrowserPermissionDeniedStyles extends BaseCustomStyles {\n  /** Styles for the primary button. */\n  primaryButton?: IButtonStyles;\n  /** Styles for the help troubleshooting link text. */\n  troubleshootingLink?: ILinkStyles;\n}\nconst BrowserPermissionDeniedContainer = (props: BrowserPermissionDeniedProps): JSX.Element => {\n  const {\n    onTroubleshootingClick,\n    onTryAgainClick,\n    strings,\n    styles\n  } = props;\n  return <Stack style={{\n    padding: '2rem',\n    paddingTop: '2.5rem',\n    maxWidth: '25.375rem'\n  }}>\n      <Stack horizontal style={{\n      paddingBottom: '1.5rem'\n    }} horizontalAlign={'space-between'}>\n        <Stack styles={iconContainerStyles} horizontalAlign={'center'}>\n          <Icon styles={iconPrimaryStyles} iconName={'BrowserPermissionDeniedError'}></Icon>\n        </Stack>\n      </Stack>\n      <Stack styles={textContainerStyles}>\n        {isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>{strings?.primaryText}</Text>}\n        {isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n\n        {onTryAgainClick && isValidString(strings?.primaryButtonText) && <PrimaryButton styles={mergeStyleSets(primaryButtonStyles, styles?.primaryButton)} text={strings?.primaryButtonText} onClick={onTryAgainClick} />}\n\n        {onTroubleshootingClick && isValidString(strings?.linkText) && <Link styles={mergeStyleSets(linkTextStyles, styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n            {strings?.linkText}\n          </Link>}\n      </Stack>\n    </Stack>;\n};\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.\n */\nexport const BrowserPermissionDenied = (props: BrowserPermissionDeniedProps): JSX.Element => {\n  const locale = useLocale().strings.BrowserPermissionDenied;\n  return <BrowserPermissionDeniedContainer {...props} strings={props.strings ? props.strings : locale} />;\n  return <></>;\n};"]}

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.d.ts

@@ -1,75 +0,0 @@
-/// <reference types="react" />
-import { BrowserPermissionDeniedProps, BrowserPermissionDeniedStrings } from './BrowserPermissionDenied';
-/**
- * @beta
- * Props for BrowserPermissionDeniedIOS component.
- */
-export interface BrowserPermissionDeniedIOSProps extends BrowserPermissionDeniedProps {
-    /**
-     * Localization strings for BrowserPermissionDeniedIOS component.
-     */
-    strings?: BrowserPermissionDeniedIOSStrings;
-    /**
-     * Link to image source.
-     *
-     * Image is inserted into the top of the component.
-     */
-    imageSource?: string;
-}
-/**
- * @beta
- * Strings for BrowserPermissionDeniedIOS component
- */
-export interface BrowserPermissionDeniedIOSStrings extends BrowserPermissionDeniedStrings {
-    /**
-     * Image alt text
-     */
-    imageAltText: string;
-    /**
-     * Main text string.
-     */
-    primaryText: string;
-    /**
-     * Subtext string.
-     */
-    secondaryText: string;
-    /**
-     * Step 1 string
-     */
-    step1Text: string;
-    /**
-     * Step 1 digit string
-     */
-    step1DigitText: string;
-    /**
-     * Step 2 string
-     */
-    step2Text: string;
-    /**
-     * Step 2 digit string
-     */
-    step2DigitText: string;
-    /**
-     * Step 3 string
-     */
-    step3Text: string;
-    /**
-     * Step 3 digit string
-     */
-    step3DigitText: string;
-    /**
-     * Step 4 string
-     */
-    step4Text: string;
-    /**
-     * Step 4 digit string
-     */
-    step4DigitText: string;
-}
-/**
- * @beta
- *
- * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
- */
-export declare const BrowserPermissionDeniedIOS: (props: BrowserPermissionDeniedIOSProps) => JSX.Element;
-//# sourceMappingURL=BrowserPermissionDeniedIOS.d.ts.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.js

@@ -1,67 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-import React from 'react';
-import { useMemo } from 'react';
-import { Stack, Text, Link, PrimaryButton, mergeStyleSets, useTheme, Image, ImageFit } from '@fluentui/react';
-import { useLocale } from '../../localization';
-import { browserPermissionContainerStyles, iOSImageContainer, iOSStepsCircleStyles, iOSStepsContainerStyles, iOSStepsDigitTextStyles, iOSStepsTextStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, textContainerStyles } from './../styles/BrowserPermissionDenied.styles';
-import { isValidString } from '../utils';
-const BrowserPermissionDeniedIOSContainer = (props) => {
-    const { imageSource, onTroubleshootingClick, onTryAgainClick, strings, styles } = props;
-    const theme = useTheme();
-    const stepsCircleStyle = useMemo(() => {
-        return mergeStyleSets(iOSStepsCircleStyles, {
-            root: {
-                background: theme.palette.neutralLighter
-            }
-        });
-    }, [theme]);
-    return React.createElement(Stack, { styles: browserPermissionContainerStyles },
-        imageSource && React.createElement(Stack, { styles: mergeStyleSets(iOSImageContainer, {
-                root: {
-                    background: theme.palette.neutralLighter
-                }
-            }) }, isValidString(strings === null || strings === void 0 ? void 0 : strings.imageAltText) && React.createElement(Image, { src: imageSource !== null && imageSource !== void 0 ? imageSource : '', alt: strings === null || strings === void 0 ? void 0 : strings.imageAltText, imageFit: ImageFit.centerContain, style: {
-                padding: '1.5rem'
-            } })),
-        React.createElement(Stack, { style: {
-                padding: '1rem',
-                paddingBottom: '1.25rem'
-            } },
-            React.createElement(Stack, { styles: textContainerStyles },
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && React.createElement(Text, { styles: primaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.step1Text) && React.createElement(Stack, { styles: iOSStepsContainerStyles },
-                    React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
-                        React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step1DigitText)),
-                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step1Text)),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.step2Text) && React.createElement(Stack, { styles: iOSStepsContainerStyles },
-                    React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
-                        React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step2DigitText)),
-                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step2Text)),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.step3Text) && React.createElement(Stack, { styles: iOSStepsContainerStyles },
-                    React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
-                        React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step3DigitText)),
-                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step3Text)),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.step4Text) && React.createElement(Stack, { styles: mergeStyleSets(iOSStepsContainerStyles, {
-                        root: {
-                            paddingBottom: '1.5rem'
-                        }
-                    }) },
-                    React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
-                        React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step4DigitText)),
-                    React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step4Text)),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, styles === null || styles === void 0 ? void 0 : styles.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onTryAgainClick }),
-                isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, styles === null || styles === void 0 ? void 0 : styles.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText))));
-};
-/**
- * @beta
- *
- * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
- */
-export const BrowserPermissionDeniedIOS = (props) => {
-    const locale = useLocale().strings.BrowserPermissionDeniedIOS;
-    return React.createElement(BrowserPermissionDeniedIOSContainer, Object.assign({}, props, { strings: props.strings ? props.strings : locale }));
-    return React.createElement(React.Fragment, null);
-};
-//# sourceMappingURL=BrowserPermissionDeniedIOS.js.map

package/dist/dist-esm/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BrowserPermissionDeniedIOS.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/DevicePermissions/BrowserPermissionDeniedIOS.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useMemo } from 'react';\nimport { Stack, Text, Link, PrimaryButton, mergeStyleSets, useTheme, Image, ImageFit } from '@fluentui/react';\nimport { useLocale } from '../../localization';\nimport { _formatString, _pxToRem } from '@internal/acs-ui-common';\nimport { browserPermissionContainerStyles, iOSImageContainer, iOSStepsCircleStyles, iOSStepsContainerStyles, iOSStepsDigitTextStyles, iOSStepsTextStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, textContainerStyles } from './../styles/BrowserPermissionDenied.styles';\nimport { BrowserPermissionDeniedProps, BrowserPermissionDeniedStrings } from './BrowserPermissionDenied';\nimport { isValidString } from '../utils';\n\n/**\n * @beta\n * Props for BrowserPermissionDeniedIOS component.\n */\nexport interface BrowserPermissionDeniedIOSProps extends BrowserPermissionDeniedProps {\n  /**\n   * Localization strings for BrowserPermissionDeniedIOS component.\n   */\n  strings?: BrowserPermissionDeniedIOSStrings;\n  /**\n   * Link to image source.\n   *\n   * Image is inserted into the top of the component.\n   */\n  imageSource?: string;\n}\n\n/**\n * @beta\n * Strings for BrowserPermissionDeniedIOS component\n */\nexport interface BrowserPermissionDeniedIOSStrings extends BrowserPermissionDeniedStrings {\n  /**\n   * Image alt text\n   */\n  imageAltText: string;\n  /**\n   * Main text string.\n   */\n  primaryText: string;\n  /**\n   * Subtext string.\n   */\n  secondaryText: string;\n  /**\n   * Step 1 string\n   */\n  step1Text: string;\n  /**\n   * Step 1 digit string\n   */\n  step1DigitText: string;\n  /**\n   * Step 2 string\n   */\n  step2Text: string;\n  /**\n   * Step 2 digit string\n   */\n  step2DigitText: string;\n  /**\n   * Step 3 string\n   */\n  step3Text: string;\n  /**\n   * Step 3 digit string\n   */\n  step3DigitText: string;\n  /**\n   * Step 4 string\n   */\n  step4Text: string;\n  /**\n   * Step 4 digit string\n   */\n  step4DigitText: string;\n}\nconst BrowserPermissionDeniedIOSContainer = (props: BrowserPermissionDeniedIOSProps): JSX.Element => {\n  const {\n    imageSource,\n    onTroubleshootingClick,\n    onTryAgainClick,\n    strings,\n    styles\n  } = props;\n  const theme = useTheme();\n  const stepsCircleStyle = useMemo(() => {\n    return mergeStyleSets(iOSStepsCircleStyles, {\n      root: {\n        background: theme.palette.neutralLighter\n      }\n    });\n  }, [theme]);\n  return <Stack styles={browserPermissionContainerStyles}>\n      {imageSource && <Stack styles={mergeStyleSets(iOSImageContainer, {\n      root: {\n        background: theme.palette.neutralLighter\n      }\n    })}>\n          {isValidString(strings?.imageAltText) && <Image src={imageSource ?? ''} alt={strings?.imageAltText} imageFit={ImageFit.centerContain} style={{\n        padding: '1.5rem'\n      }} />}\n        </Stack>}\n      <Stack style={{\n      padding: '1rem',\n      paddingBottom: '1.25rem'\n    }}>\n        <Stack styles={textContainerStyles}>\n          {isValidString(strings?.primaryText) && <Text styles={primaryTextStyles}>{strings?.primaryText}</Text>}\n          {isValidString(strings?.secondaryText) && <Text styles={secondaryTextStyles}>{strings?.secondaryText}</Text>}\n          {isValidString(strings?.step1Text) && <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step1DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step1Text}</Text>\n            </Stack>}\n          {isValidString(strings?.step2Text) && <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step2DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step2Text}</Text>\n            </Stack>}\n          {isValidString(strings?.step3Text) && <Stack styles={iOSStepsContainerStyles}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step3DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step3Text}</Text>\n            </Stack>}\n          {isValidString(strings?.step4Text) && <Stack styles={mergeStyleSets(iOSStepsContainerStyles, {\n          root: {\n            paddingBottom: '1.5rem'\n          }\n        })}>\n              <Stack horizontalAlign={'center'} styles={stepsCircleStyle}>\n                <Text styles={iOSStepsDigitTextStyles}>{strings?.step4DigitText}</Text>\n              </Stack>\n              <Text styles={iOSStepsTextStyles}>{strings?.step4Text}</Text>\n            </Stack>}\n          {isValidString(strings?.primaryButtonText) && <PrimaryButton styles={mergeStyleSets(primaryButtonStyles, styles?.primaryButton)} text={strings?.primaryButtonText} onClick={onTryAgainClick} />}\n          {isValidString(strings?.linkText) && <Link styles={mergeStyleSets(linkTextStyles, styles?.troubleshootingLink)} onClick={onTroubleshootingClick}>\n              {strings?.linkText}\n            </Link>}\n        </Stack>\n      </Stack>\n    </Stack>;\n};\n\n/**\n * @beta\n *\n * Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.\n */\nexport const BrowserPermissionDeniedIOS = (props: BrowserPermissionDeniedIOSProps): JSX.Element => {\n  const locale = useLocale().strings.BrowserPermissionDeniedIOS;\n  return <BrowserPermissionDeniedIOSContainer {...props} strings={props.strings ? props.strings : locale} />;\n  return <></>;\n};"]}