@azure/communication-react 1.18.0-alpha-202407060013 → 1.18.0-alpha-202407090014

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

@@ -4,6 +4,7 @@ import { mergeStyles } from '@fluentui/react';
 import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';
 import { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';
+import { ERROR_IMAGE_SVG_PATH } from './Common.style';
 // Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI
 // that can contain a message and a timestamp.
 const CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;
@@ -201,6 +202,23 @@ export const useChatMessageStyles = makeStyles({
             top: '0',
             left: '0',
             display: 'block'
+        },
+        '& .broken-image-wrapper': {
+            width: '12rem',
+            height: '12rem',
+            marginTop: '0.75rem',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            outline: `1px solid ${tokens.colorNeutralForegroundDisabled}`,
+            backgroundColor: tokens.colorNeutralBackground2
+        },
+        '& .broken-image-wrapper:after': {
+            content: `''`,
+            maskImage: `url("data:image/svg+xml,%3Csvg width='3rem' height='3rem' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='${ERROR_IMAGE_SVG_PATH}' fill='currentColor' /%3E%3C/svg%3E");`,
+            width: '3rem',
+            height: '3rem',
+            backgroundColor: `${tokens.colorNeutralForeground2}`
         }
     },
     bodyWithoutAvatar: {

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  position: 'relative'\n});\n\n/**\n * @private\n */\nexport const noMessageStatusStyle = mergeStyles({\n  // This should match the size of the message status indicator icon to ensure\n  // multiple messages sent by the user are aligned correctly.\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/**\n * @private\n */\nexport const useChatStyles = makeStyles({\n  root: {\n    // chat components sets max width value to 1056px, override it to 100%\n    maxWidth: '100%',\n    paddingTop: '0.8rem',\n    paddingBottom: '0.5rem',\n    paddingRight: '0.6rem',\n    paddingLeft: '0.6rem',\n    ...shorthands.border('none'),\n    ...shorthands.overflow('auto'),\n    // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n    // to prevent intermittent scrollbars when GIFs are present in the chat.\n    height: '100%',\n\n    '& a:link': {\n      color: tokens.colorBrandForegroundLink\n    },\n    '& a:visited': {\n      color: tokens.colorBrandForegroundLinkHover\n    },\n    '& a:hover': {\n      color: tokens.colorBrandForegroundLinkHover\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageRenderStyles = makeStyles({\n  rootCommon: {},\n  rootMessage: {\n    ...shorthands.padding('0'),\n    ...shorthands.margin('0'),\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n  },\n  rootMyMessage: {\n    gridTemplateColumns: 'auto fit-content(0)',\n    gridTemplateAreas: `\n        \"body status\"\n      `,\n    columnGap: '0',\n    gridGap: '0',\n    ...shorthands.padding('0'),\n    marginTop: '0',\n    marginRight: '0',\n    marginBottom: '0',\n    marginLeft: '50px',\n    width: `calc(100% - 50px)`\n  },\n  bodyCommon: {\n    ...shorthands.padding('0'),\n    marginRight: '0',\n    marginBottom: '0',\n    backgroundColor: 'transparent',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyMyMessage: {\n    width: '100%',\n    marginTop: '0'\n  },\n  bodyWithoutAvatar: {\n    marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n    marginTop: '0'\n  },\n  bodyHiddenAvatar: {\n    marginLeft: 0,\n    marginTop: 0\n  },\n  bodyWithAvatar: {\n    marginLeft: `0`,\n    marginTop: '0.75rem'\n  },\n  avatarNoOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n  },\n  avatarOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMyMessageStyles = makeStyles({\n  root: {\n    // The first column's width should be set to  1fr\n    // because otherwise rich text editor's width will grow indefinitely\n    gridTemplateColumns: '1fr auto',\n    gridTemplateAreas: `\n        \". actions\"\n        \"body body\"\n      `,\n    gridGap: '0',\n    columnGap: '0',\n    paddingTop: '0',\n    marginLeft: '0'\n  },\n  body: {\n    paddingBottom: '10px',\n    marginTop: '1rem',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginLeft: '0rem',\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n\n    '&:hover ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: 600\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    marginRight: '1px',\n    position: 'absolute',\n    top: '-2px',\n    right: '0',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    zIndex: 1,\n    lineHeight: tokens.lineHeightBase100,\n    visibility: 'hidden',\n\n    '&:hover, &:focus': {\n      cursor: 'pointer',\n      visibility: 'visible'\n    }\n  },\n  menuAttached: {\n    top: '-18px'\n  },\n  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  },\n  multipleAttachments: {\n    width: '100%',\n    maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const newMessageButtonContainerStyle = mergeStyles({\n  position: 'absolute',\n  zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n  bottom: 0,\n  right: '1.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const useChatMessageStyles = makeStyles({\n  root: {\n    paddingTop: '0'\n  },\n  body: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    paddingBottom: '10px',\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& > div:first-of-type': {\n      flexWrap: 'wrap'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: tokens.fontWeightSemibold\n    },\n    '& img': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& video': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem')\n    },\n    '& blockquote': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      clear: 'left',\n      minHeight: '2.25rem',\n      width: 'fit-content',\n      marginTop: '7px',\n      marginRight: '0px',\n      marginLeft: '0px',\n      marginBottom: '7px',\n      paddingTop: '7px',\n      paddingRight: '15px',\n      paddingLeft: '15px',\n      paddingBottom: '7px',\n      ...shorthands.border('solid'),\n      ...shorthands.borderRadius('4px'),\n      ...shorthands.borderWidth('1px'),\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderLeftWidth: '4px'\n    },\n    '& code': {\n      whiteSpace: 'pre-wrap'\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      display: 'block',\n      position: 'relative',\n      marginBottom: '5px'\n    },\n    '& img[src=\"\"]:after': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n      backgroundSize: 'center',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      top: '0',\n      left: '0',\n      display: 'block'\n    }\n  },\n  bodyWithoutAvatar: {\n    marginTop: '0.125rem'\n  },\n  bodyWithAvatar: {\n    marginTop: `0.375rem`\n  },\n  avatarNoOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n  },\n  avatarOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n  },\n  multipleAttachments: {\n    width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageCommonStyles = makeStyles({\n  body: {\n    '& table': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      borderCollapse: 'collapse',\n      tableLayout: 'auto',\n      width: '100%',\n\n      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  failed: {\n    //TODO: can we reuse a theme color here?\n    backgroundColor: 'rgba(168, 0, 0, 0.2)'\n  },\n  blocked: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    color: tokens.colorNeutralForeground2,\n\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& i': {\n      paddingTop: '0.25rem'\n    },\n\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem'),\n      paddingRight: '0.75rem',\n      fontStyle: 'italic'\n    },\n\n    '& a': {\n      ...shorthands.marginBlock('0.125rem'),\n      fontStyle: 'normal',\n      color: tokens.colorBrandForegroundLink,\n      ...shorthands.textDecoration('none')\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  paddingTop: '1.65rem',\n  width: `${AVATAR_WIDTH_REM}rem`,\n  position: 'relative',\n  float: 'left',\n  display: 'block',\n  visibility: 'visible',\n  zIndex: AVATAR_ZINDEX\n};\n\n/**\n * @private\n */\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n  ...gutterWithAvatar,\n  visibility: 'hidden',\n  // we use this hidden avatar just as a width placeholder\n  // the placeholder is needed for responsive bubble width\n  height: 0\n};\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': { background: 'none' },\n  '&:active': { background: 'none' }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});\n\n/** @private */\nexport const dataLossIconStyle = mergeStyles({\n  width: '1.25rem',\n  height: '1.25rem'\n});\n"]}
+{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\nimport { _ATTACHMENT_CARD_MARGIN_IN_PX, _ATTACHMENT_CARD_WIDTH_IN_REM } from './AttachmentCard.styles';\nimport { ERROR_IMAGE_SVG_PATH } from './Common.style';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  position: 'relative'\n});\n\n/**\n * @private\n */\nexport const noMessageStatusStyle = mergeStyles({\n  // This should match the size of the message status indicator icon to ensure\n  // multiple messages sent by the user are aligned correctly.\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/**\n * @private\n */\nexport const useChatStyles = makeStyles({\n  root: {\n    // chat components sets max width value to 1056px, override it to 100%\n    maxWidth: '100%',\n    paddingTop: '0.8rem',\n    paddingBottom: '0.5rem',\n    paddingRight: '0.6rem',\n    paddingLeft: '0.6rem',\n    ...shorthands.border('none'),\n    ...shorthands.overflow('auto'),\n    // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n    // to prevent intermittent scrollbars when GIFs are present in the chat.\n    height: '100%',\n\n    '& a:link': {\n      color: tokens.colorBrandForegroundLink\n    },\n    '& a:visited': {\n      color: tokens.colorBrandForegroundLinkHover\n    },\n    '& a:hover': {\n      color: tokens.colorBrandForegroundLinkHover\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageRenderStyles = makeStyles({\n  rootCommon: {},\n  rootMessage: {\n    ...shorthands.padding('0'),\n    ...shorthands.margin('0'),\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`\n  },\n  rootMyMessage: {\n    gridTemplateColumns: 'auto fit-content(0)',\n    gridTemplateAreas: `\n        \"body status\"\n      `,\n    columnGap: '0',\n    gridGap: '0',\n    ...shorthands.padding('0'),\n    marginTop: '0',\n    marginRight: '0',\n    marginBottom: '0',\n    marginLeft: '50px',\n    width: `calc(100% - 50px)`\n  },\n  bodyCommon: {\n    ...shorthands.padding('0'),\n    marginRight: '0',\n    marginBottom: '0',\n    backgroundColor: 'transparent',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyMyMessage: {\n    width: '100%',\n    marginTop: '0'\n  },\n  bodyWithoutAvatar: {\n    marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\n    marginTop: '0'\n  },\n  bodyHiddenAvatar: {\n    marginLeft: 0,\n    marginTop: 0\n  },\n  bodyWithAvatar: {\n    marginLeft: `0`,\n    marginTop: '0.75rem'\n  },\n  avatarNoOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`\n  },\n  avatarOverlap: {\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMyMessageStyles = makeStyles({\n  root: {\n    // The first column's width should be set to  1fr\n    // because otherwise rich text editor's width will grow indefinitely\n    gridTemplateColumns: '1fr auto',\n    gridTemplateAreas: `\n        \". actions\"\n        \"body body\"\n      `,\n    gridGap: '0',\n    columnGap: '0',\n    paddingTop: '0',\n    marginLeft: '0'\n  },\n  body: {\n    paddingBottom: '10px',\n    marginTop: '1rem',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginLeft: '0rem',\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n\n    '&:hover ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: 600\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    marginRight: '1px',\n    position: 'absolute',\n    top: '-2px',\n    right: '0',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    zIndex: 1,\n    lineHeight: tokens.lineHeightBase100,\n    visibility: 'hidden',\n\n    '&:hover, &:focus': {\n      cursor: 'pointer',\n      visibility: 'visible'\n    }\n  },\n  menuAttached: {\n    top: '-18px'\n  },\n  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  },\n  multipleAttachments: {\n    width: '100%',\n    maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const newMessageButtonContainerStyle = mergeStyles({\n  position: 'absolute',\n  zIndex: NEW_MESSAGE_BUTTON_ZINDEX,\n  bottom: 0,\n  right: '1.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const useChatMessageStyles = makeStyles({\n  root: {\n    paddingTop: '0'\n  },\n  body: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    paddingBottom: '10px',\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& > div:first-of-type': {\n      flexWrap: 'wrap'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: tokens.fontWeightSemibold\n    },\n    '& img': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& video': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem')\n    },\n    '& blockquote': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      clear: 'left',\n      minHeight: '2.25rem',\n      width: 'fit-content',\n      marginTop: '7px',\n      marginRight: '0px',\n      marginLeft: '0px',\n      marginBottom: '7px',\n      paddingTop: '7px',\n      paddingRight: '15px',\n      paddingLeft: '15px',\n      paddingBottom: '7px',\n      ...shorthands.border('solid'),\n      ...shorthands.borderRadius('4px'),\n      ...shorthands.borderWidth('1px'),\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderLeftWidth: '4px'\n    },\n    '& code': {\n      whiteSpace: 'pre-wrap'\n    },\n    '&:focus-visible': {\n      outlineStyle: 'auto'\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      display: 'block',\n      position: 'relative',\n      marginBottom: '5px'\n    },\n    '& img[src=\"\"]:after': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      content: `url(\"data:image/gif;base64,R0lGODlhAQABAAAAACw=\")`,\n      backgroundSize: 'center',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      top: '0',\n      left: '0',\n      display: 'block'\n    },\n    '& .broken-image-wrapper': {\n      width: '12rem',\n      height: '12rem',\n      marginTop: '0.75rem',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      outline: `1px solid ${tokens.colorNeutralForegroundDisabled}`,\n      backgroundColor: tokens.colorNeutralBackground2\n    },\n    '& .broken-image-wrapper:after': {\n      content: `''`,\n      maskImage: `url(\"data:image/svg+xml,%3Csvg width='3rem' height='3rem' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'%3E%3Cpath d='${ERROR_IMAGE_SVG_PATH}' fill='currentColor' /%3E%3C/svg%3E\");`,\n      width: '3rem',\n      height: '3rem',\n      backgroundColor: `${tokens.colorNeutralForeground2}`\n    }\n  },\n  bodyWithoutAvatar: {\n    marginTop: '0.125rem'\n  },\n  bodyWithAvatar: {\n    marginTop: `0.375rem`\n  },\n  avatarNoOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`\n  },\n  avatarOverlap: {\n    marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`\n  },\n  multipleAttachments: {\n    width: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageCommonStyles = makeStyles({\n  body: {\n    '& table': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      borderCollapse: 'collapse',\n      tableLayout: 'auto',\n      width: '100%',\n\n      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  failed: {\n    //TODO: can we reuse a theme color here?\n    backgroundColor: 'rgba(168, 0, 0, 0.2)'\n  },\n  blocked: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    color: tokens.colorNeutralForeground2,\n\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& i': {\n      paddingTop: '0.25rem'\n    },\n\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem'),\n      paddingRight: '0.75rem',\n      fontStyle: 'italic'\n    },\n\n    '& a': {\n      ...shorthands.marginBlock('0.125rem'),\n      fontStyle: 'normal',\n      color: tokens.colorBrandForegroundLink,\n      ...shorthands.textDecoration('none')\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  paddingTop: '1.65rem',\n  width: `${AVATAR_WIDTH_REM}rem`,\n  position: 'relative',\n  float: 'left',\n  display: 'block',\n  visibility: 'visible',\n  zIndex: AVATAR_ZINDEX\n};\n\n/**\n * @private\n */\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n  ...gutterWithAvatar,\n  visibility: 'hidden',\n  // we use this hidden avatar just as a width placeholder\n  // the placeholder is needed for responsive bubble width\n  height: 0\n};\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': { background: 'none' },\n  '&:active': { background: 'none' }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});\n\n/** @private */\nexport const dataLossIconStyle = mergeStyles({\n  width: '1.25rem',\n  height: '1.25rem'\n});\n"]}

package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.d.ts

@@ -1,4 +1,5 @@
 import { AttachmentMetadataInProgress } from "../../../../acs-ui-common/src";
+import { AttachmentMetadata } from "../../../../acs-ui-common/src";
 /**
  * @private
  */
@@ -12,7 +13,7 @@ export declare const hasIncompleteAttachmentUploads: (attachmentsWithProgress: A
  */
 export declare const isAttachmentUploadCompleted: (attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => boolean;
 /**
- * @private
+ * @internal
  */
 export declare const addUploadedImagesToMessage: (message: string, uploadInlineImages: AttachmentMetadataInProgress[]) => string;
 /**
@@ -38,4 +39,19 @@ export declare const isSendBoxButtonAriaDisabled: ({ hasContent, hasCompletedAtt
     hasError: boolean;
     disabled: boolean;
 }) => boolean;
+/**
+ * @internal
+ */
+export declare const cancelInlineImageUpload: (imageSrcArray: string[] | undefined, imageUploadsInProgress: AttachmentMetadataInProgress[] | undefined, onCancelInlineImageUpload?: (id: string) => void) => void;
+/**
+ * @internal
+ */
+export declare const toAttachmentMetadata: (attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined, attachmentType?: 'image') => AttachmentMetadata[] | undefined;
+/**
+ * @internal
+ */
+export declare const insertAttachmentsAndImages: (content: string, attachments: AttachmentMetadataInProgress[] | undefined, imageUploadsInProgress: AttachmentMetadataInProgress[] | undefined) => {
+    content: string;
+    attachmentArray: AttachmentMetadata[] | undefined;
+};
 //# sourceMappingURL=SendBoxUtils.d.ts.map

package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.js

@@ -24,15 +24,21 @@ export const isAttachmentUploadCompleted = (attachmentsWithProgress) => {
 };
 /* @conditional-compile-remove(rich-text-editor-image-upload) */
 /**
- * @private
+ * @internal
  */
 // Before sending the image, we need to add the image id we get back after uploading the images to the message content.
 export const addUploadedImagesToMessage = (message, uploadInlineImages) => {
+    if (message === '') {
+        return message;
+    }
     const document = new DOMParser().parseFromString(message !== null && message !== void 0 ? message : '', 'text/html');
     document.querySelectorAll('img').forEach((img) => {
-        var _a, _b;
-        img.id = (_b = (_a = uploadInlineImages.find((imageUpload) => !imageUpload.error && imageUpload.url === img.src)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
-        img.src = '';
+        var _a;
+        if (!img.id) {
+            const uploadInlineImage = uploadInlineImages.find((imageUpload) => !imageUpload.error && (imageUpload.url === img.src || imageUpload.id === img.id));
+            img.id = (_a = uploadInlineImage === null || uploadInlineImage === void 0 ? void 0 : uploadInlineImage.id) !== null && _a !== void 0 ? _a : '';
+            img.src = '';
+        }
     });
     const newMessage = document.body.innerHTML;
     return newMessage;
@@ -73,4 +79,64 @@ hasCompletedAttachmentUploads, hasError, disabled }) => {
         hasError ||
         disabled);
 };
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @internal
+ */
+export const cancelInlineImageUpload = (imageSrcArray, imageUploadsInProgress, onCancelInlineImageUpload) => {
+    if (imageSrcArray && imageUploadsInProgress && (imageUploadsInProgress === null || imageUploadsInProgress === void 0 ? void 0 : imageUploadsInProgress.length) > 0) {
+        imageUploadsInProgress === null || imageUploadsInProgress === void 0 ? void 0 : imageUploadsInProgress.map((uploadImage) => {
+            if (uploadImage.url && imageSrcArray && !(imageSrcArray === null || imageSrcArray === void 0 ? void 0 : imageSrcArray.includes(uploadImage.url))) {
+                onCancelInlineImageUpload === null || onCancelInlineImageUpload === void 0 ? void 0 : onCancelInlineImageUpload(uploadImage.id);
+            }
+        });
+    }
+};
+/* @conditional-compile-remove(file-sharing-acs) */
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @internal
+ */
+export const toAttachmentMetadata = (attachmentsWithProgress, 
+/* @conditional-compile-remove(rich-text-editor-image-upload) */ attachmentType) => {
+    return attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.filter((attachment) => {
+        var _a;
+        return !('error' in attachment) && !((_a = attachment.error) === null || _a === void 0 ? void 0 : _a.message);
+    }).map((attachment) => {
+        let url = attachment.url || '';
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        if (attachmentType === 'image') {
+            url = '';
+        }
+        return {
+            id: attachment.id,
+            name: attachment.name,
+            url,
+            /* @conditional-compile-remove(rich-text-editor-image-upload) */
+            attachmentType: attachmentType
+        };
+    });
+};
+/* @conditional-compile-remove(file-sharing-acs) */
+/* @conditional-compile-remove(rich-text-editor-image-upload) */
+/**
+ * @internal
+ */
+export const insertAttachmentsAndImages = (content, attachments, imageUploadsInProgress) => {
+    if (!attachments && !imageUploadsInProgress) {
+        return { content, attachmentArray: undefined };
+    }
+    /* @conditional-compile-remove(file-sharing-acs) */
+    let attachmentArray = toAttachmentMetadata(attachments);
+    let newContent = content;
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    if (imageUploadsInProgress) {
+        newContent = addUploadedImagesToMessage(content, imageUploadsInProgress);
+        const imageArray = toAttachmentMetadata(imageUploadsInProgress, 'image');
+        if (imageArray) {
+            attachmentArray = attachmentArray ? attachmentArray === null || attachmentArray === void 0 ? void 0 : attachmentArray.concat(imageArray) : imageArray;
+        }
+    }
+    return { content: newContent, attachmentArray };
+};
 //# sourceMappingURL=SendBoxUtils.js.map

package/dist/dist-esm/react-components/src/components/utils/SendBoxUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"SendBoxUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/SendBoxUtils.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,IAAI,CAAC;AAC9C,MAAM,mBAAmB,GAAG,OAAO,CAAC;AAEpC,mDAAmD;AACnD;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAC5C,uBAAmE,EAC1D,EAAE;IACX,OAAO,CAAC,CAAC,CACP,CAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,MAAM;QAC/B,CAAC,uBAAuB;aACrB,MAAM,CAAC,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;aACrD,KAAK,CAAC,CAAC,gBAAgB,EAAE,EAAE,CAAC,gBAAgB,CAAC,QAAQ,KAAK,CAAC,IAAI,gBAAgB,CAAC,QAAQ,KAAK,SAAS,CAAC,CAC3G,CAAC;AACJ,CAAC,CAAC;AAEF,mDAAmD;AACnD;;GAEG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,uBAAmE,EAC1D,EAAE;IACX,OAAO,CAAC,CAAC,CAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA,CAAC;AAC5E,CAAC,CAAC;AAEF,gEAAgE;AAChE;;GAEG;AACH,uHAAuH;AACvH,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,OAAe,EACf,kBAAkD,EAC1C,EAAE;IACV,MAAM,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,EAAE,WAAW,CAAC,CAAC;IAC7E,QAAQ,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;;QAC/C,GAAG,CAAC,EAAE,GAAG,MAAA,MAAA,kBAAkB,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,WAAW,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,0CAAE,EAAE,mCAAI,EAAE,CAAC;QAC/G,GAAG,CAAC,GAAG,GAAG,EAAE,CAAC;IACf,CAAC,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;IAC3C,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,WAAmB,EAAW,EAAE;IAC/D,OAAO,WAAW,GAAG,yBAAyB,CAAC;AACjD,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAe,EAAU,EAAE;IACtD,IAAI,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;QACtC,OAAO,EAAE,CAAC;IACZ,CAAC;SAAM,CAAC;QACN,OAAO,OAAO,CAAC;IACjB,CAAC;AACH,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,UAAU;AACV,mDAAmD;AACnD,6BAA6B,EAC7B,QAAQ,EACR,QAAQ,EAOT,EAAW,EAAE;IACZ,OAAO;IACL,aAAa;IACb,CAAC,CAAC,UAAU,IAAI,mDAAmD,CAAC,6BAA6B,CAAC;QAClG,sBAAsB;QACtB,QAAQ;QACR,QAAQ,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst EMPTY_MESSAGE_REGEX = /^\\s*$/;\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @private\n */\nexport const hasIncompleteAttachmentUploads = (\n  attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined\n): boolean => {\n  return !!(\n    attachmentsWithProgress?.length &&\n    !attachmentsWithProgress\n      .filter((attachmentUpload) => !attachmentUpload.error)\n      .every((attachmentUpload) => attachmentUpload.progress === 1 && attachmentUpload.progress !== undefined)\n  );\n};\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @private\n */\nexport const isAttachmentUploadCompleted = (\n  attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined\n): boolean => {\n  return !!attachmentsWithProgress?.find((attachment) => !attachment.error);\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @private\n */\n// Before sending the image, we need to add the image id we get back after uploading the images to the message content.\nexport const addUploadedImagesToMessage = (\n  message: string,\n  uploadInlineImages: AttachmentMetadataInProgress[]\n): string => {\n  const document = new DOMParser().parseFromString(message ?? '', 'text/html');\n  document.querySelectorAll('img').forEach((img) => {\n    img.id = uploadInlineImages.find((imageUpload) => !imageUpload.error && imageUpload.url === img.src)?.id ?? '';\n    img.src = '';\n  });\n  const newMessage = document.body.innerHTML;\n  return newMessage;\n};\n\n/**\n * @private\n */\nexport const isMessageTooLong = (valueLength: number): boolean => {\n  return valueLength > MAXIMUM_LENGTH_OF_MESSAGE;\n};\n\n/**\n * @private\n */\nexport const sanitizeText = (message: string): string => {\n  if (EMPTY_MESSAGE_REGEX.test(message)) {\n    return '';\n  } else {\n    return message;\n  }\n};\n\n/**\n * Determines whether the send box should be disabled for ARIA accessibility.\n *\n * @param hasContent - Indicates whether the send box has content.\n * @param hasCompletedAttachmentUploads - Indicates whether attachment uploads have completed.\n * @param hasError - Indicates whether there is an error.\n * @param disabled - Indicates whether the send box is disabled.\n * @returns A boolean value indicating whether the send box should be disabled for ARIA accessibility.\n */\nexport const isSendBoxButtonAriaDisabled = ({\n  hasContent,\n  /* @conditional-compile-remove(file-sharing-acs) */\n  hasCompletedAttachmentUploads,\n  hasError,\n  disabled\n}: {\n  hasContent: boolean;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  hasCompletedAttachmentUploads: boolean;\n  hasError: boolean;\n  disabled: boolean;\n}): boolean => {\n  return (\n    // no content\n    !(hasContent || /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads) ||\n    //error message exists\n    hasError ||\n    disabled\n  );\n};\n"]}
+{"version":3,"file":"SendBoxUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/SendBoxUtils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadataInProgress } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const MAXIMUM_LENGTH_OF_MESSAGE = 8000;\nconst EMPTY_MESSAGE_REGEX = /^\\s*$/;\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @private\n */\nexport const hasIncompleteAttachmentUploads = (\n  attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined\n): boolean => {\n  return !!(\n    attachmentsWithProgress?.length &&\n    !attachmentsWithProgress\n      .filter((attachmentUpload) => !attachmentUpload.error)\n      .every((attachmentUpload) => attachmentUpload.progress === 1 && attachmentUpload.progress !== undefined)\n  );\n};\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @private\n */\nexport const isAttachmentUploadCompleted = (\n  attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined\n): boolean => {\n  return !!attachmentsWithProgress?.find((attachment) => !attachment.error);\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\n// Before sending the image, we need to add the image id we get back after uploading the images to the message content.\nexport const addUploadedImagesToMessage = (\n  message: string,\n  uploadInlineImages: AttachmentMetadataInProgress[]\n): string => {\n  if (message === '') {\n    return message;\n  }\n  const document = new DOMParser().parseFromString(message ?? '', 'text/html');\n  document.querySelectorAll('img').forEach((img) => {\n    if (!img.id) {\n      const uploadInlineImage = uploadInlineImages.find(\n        (imageUpload) => !imageUpload.error && (imageUpload.url === img.src || imageUpload.id === img.id)\n      );\n      img.id = uploadInlineImage?.id ?? '';\n      img.src = '';\n    }\n  });\n  const newMessage = document.body.innerHTML;\n  return newMessage;\n};\n\n/**\n * @private\n */\nexport const isMessageTooLong = (valueLength: number): boolean => {\n  return valueLength > MAXIMUM_LENGTH_OF_MESSAGE;\n};\n\n/**\n * @private\n */\nexport const sanitizeText = (message: string): string => {\n  if (EMPTY_MESSAGE_REGEX.test(message)) {\n    return '';\n  } else {\n    return message;\n  }\n};\n\n/**\n * Determines whether the send box should be disabled for ARIA accessibility.\n *\n * @param hasContent - Indicates whether the send box has content.\n * @param hasCompletedAttachmentUploads - Indicates whether attachment uploads have completed.\n * @param hasError - Indicates whether there is an error.\n * @param disabled - Indicates whether the send box is disabled.\n * @returns A boolean value indicating whether the send box should be disabled for ARIA accessibility.\n */\nexport const isSendBoxButtonAriaDisabled = ({\n  hasContent,\n  /* @conditional-compile-remove(file-sharing-acs) */\n  hasCompletedAttachmentUploads,\n  hasError,\n  disabled\n}: {\n  hasContent: boolean;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  hasCompletedAttachmentUploads: boolean;\n  hasError: boolean;\n  disabled: boolean;\n}): boolean => {\n  return (\n    // no content\n    !(hasContent || /* @conditional-compile-remove(file-sharing-acs) */ hasCompletedAttachmentUploads) ||\n    //error message exists\n    hasError ||\n    disabled\n  );\n};\n\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const cancelInlineImageUpload = (\n  imageSrcArray: string[] | undefined,\n  imageUploadsInProgress: AttachmentMetadataInProgress[] | undefined,\n  onCancelInlineImageUpload?: (id: string) => void\n): void => {\n  if (imageSrcArray && imageUploadsInProgress && imageUploadsInProgress?.length > 0) {\n    imageUploadsInProgress?.map((uploadImage) => {\n      if (uploadImage.url && imageSrcArray && !imageSrcArray?.includes(uploadImage.url)) {\n        onCancelInlineImageUpload?.(uploadImage.id);\n      }\n    });\n  }\n};\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const toAttachmentMetadata = (\n  attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined,\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */ attachmentType?: 'image'\n): AttachmentMetadata[] | undefined => {\n  return attachmentsWithProgress\n    ?.filter((attachment) => {\n      return !('error' in attachment) && !attachment.error?.message;\n    })\n    .map((attachment) => {\n      let url = attachment.url || '';\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      if (attachmentType === 'image') {\n        url = '';\n      }\n      return {\n        id: attachment.id,\n        name: attachment.name,\n        url,\n        /* @conditional-compile-remove(rich-text-editor-image-upload) */\n        attachmentType: attachmentType\n      };\n    });\n};\n\n/* @conditional-compile-remove(file-sharing-acs) */\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\n/**\n * @internal\n */\nexport const insertAttachmentsAndImages = (\n  content: string,\n  attachments: AttachmentMetadataInProgress[] | undefined,\n  imageUploadsInProgress: AttachmentMetadataInProgress[] | undefined\n): { content: string; attachmentArray: AttachmentMetadata[] | undefined } => {\n  if (!attachments && !imageUploadsInProgress) {\n    return { content, attachmentArray: undefined };\n  }\n  /* @conditional-compile-remove(file-sharing-acs) */\n  let attachmentArray = toAttachmentMetadata(attachments);\n  let newContent = content;\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  if (imageUploadsInProgress) {\n    newContent = addUploadedImagesToMessage(content, imageUploadsInProgress);\n    const imageArray = toAttachmentMetadata(imageUploadsInProgress, 'image');\n    if (imageArray) {\n      attachmentArray = attachmentArray ? attachmentArray?.concat(imageArray) : imageArray;\n    }\n  }\n  return { content: newContent, attachmentArray };\n};\n"]}

package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json

@@ -220,7 +220,8 @@
         "richTextDeleteColumnMenu": "Delete column",
         "richTextDeleteRowMenu": "Delete row",
         "richTextDeleteTableMenu": "Delete table",
-        "richTextToolbarMoreButtonAriaLabel": "More options"
+        "richTextToolbarMoreButtonAriaLabel": "More options",
+        "attachmentUploadsPendingError": "Uploading... Please wait."
     },
     "errorBar": {
         "unableToReachChatService": "You are offline",

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js

@@ -324,33 +324,43 @@ export const ChatScreen = (props) => {
             });
         });
     }, [adapter, /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleInlineImageUploadAction]);
+    const onUpdateMessageHandler = useCallback((messageId, content) => __awaiter(void 0, void 0, void 0, function* () {
+        yield messageThreadProps.onUpdateMessage(messageId, content);
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        handleInlineImageUploadAction({ type: AttachmentUploadActionType.Clear });
+    }), [/* @conditional-compile-remove(rich-text-editor-image-upload) */ handleInlineImageUploadAction, messageThreadProps]);
+    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+    const onCancelEditMessageHandler = useCallback(() => {
+        handleInlineImageUploadAction({ type: AttachmentUploadActionType.Clear });
+    }, [handleInlineImageUploadAction]);
     /* @conditional-compile-remove(file-sharing-acs) */
     const onCancelUploadHandler = useCallback((id) => {
         var _a, _b;
         handleUploadAction({ type: AttachmentUploadActionType.Remove, id });
         (_b = (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentRemoval) === null || _b === void 0 ? void 0 : _b.call(_a, id);
     }, [attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions]);
-    /* @conditional-compile-remove(rich-text-editor-image-upload) */
-    const removeImageTags = useCallback((event) => {
-        event.content.querySelectorAll('img').forEach((image) => {
-            // If the image is the only child of its parent, remove all the parents of this img element.
-            let parentNode = image.parentElement;
-            let currentNode = image;
-            while ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.childNodes.length) === 1) {
-                currentNode = parentNode;
-                parentNode = parentNode.parentElement;
-            }
-            currentNode === null || currentNode === void 0 ? void 0 : currentNode.remove();
-        });
-    }, []);
     /* @conditional-compile-remove(rich-text-editor-composite-support) */
     const richTextEditorOptions = useMemo(() => {
         return (options === null || options === void 0 ? void 0 : options.richTextEditor)
             ? {
-                /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste: removeImageTags
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste: undefined,
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                onUploadInlineImage: onUploadInlineImage,
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                imageUploadsInProgress: imageUploadsInProgress,
+                /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                onCancelInlineImageUpload: onCancelInlineImageUploadHandler
             }
             : undefined;
-    }, [options === null || options === void 0 ? void 0 : options.richTextEditor, removeImageTags]);
+    }, [
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        imageUploadsInProgress,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        onCancelInlineImageUploadHandler,
+        /* @conditional-compile-remove(rich-text-editor-image-upload) */
+        onUploadInlineImage,
+        options === null || options === void 0 ? void 0 : options.richTextEditor
+    ]);
     return (React.createElement(Stack, { className: chatContainer, grow: true },
         (options === null || options === void 0 ? void 0 : options.topic) !== false && React.createElement(ChatHeader, Object.assign({}, headerProps)),
         React.createElement(Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
@@ -360,7 +370,9 @@ export const ChatScreen = (props) => {
                 React.createElement(AttachmentDownloadErrorBar, { onDismissDownloadErrorMessage: useCallback(() => {
                         setDownloadErrorMessage('');
                     }, []), attachmentDownloadErrorMessage: downloadErrorMessage || '' }),
-                React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
+                React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onUpdateMessage: onUpdateMessageHandler, 
+                    /* @conditional-compile-remove(rich-text-editor-image-upload) */
+                    onCancelEditMessage: onCancelEditMessageHandler, onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
                     /* @conditional-compile-remove(file-sharing-acs) */
                     onRenderAttachmentDownloads: onRenderAttachmentDownloads, inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles, 
                     /* @conditional-compile-remove(rich-text-editor-composite-support) */

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatScreen.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { isIOS } from '@fluentui/react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { PersonaSize } from '@fluentui/react';\nimport {\n  CommunicationParticipant,\n  ErrorBar,\n  MessageProps,\n  MessageRenderer,\n  MessageThread,\n  MessageThreadStyles,\n  ParticipantMenuItemsCallback,\n  SendBoxStylesProps,\n  TypingIndicator,\n  TypingIndicatorStylesProps,\n  useTheme\n} from '@internal/react-components';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { ChatMessage } from '@internal/react-components';\nimport React, { useCallback, useEffect, useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { useReducer } from 'react';\nimport { useState } from 'react';\nimport { AvatarPersona, AvatarPersonaDataCallback, AvatarPersonaProps } from '../common/AvatarPersona';\nimport { useAdapter } from './adapter/ChatAdapterProvider';\nimport { ChatCompositeOptions } from './ChatComposite';\nimport { ChatHeader, getHeaderProps } from './ChatHeader';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentUploadButtonWrapper as AttachmentUploadButton } from './file-sharing';\nimport { useAdaptedSelector } from './hooks/useAdaptedSelector';\nimport { usePropsFor } from './hooks/usePropsFor';\n\nimport {\n  chatArea,\n  chatContainer,\n  chatWrapper,\n  messageThreadChatCompositeStyles,\n  sendboxContainerStyles,\n  typingIndicatorContainerStyles\n} from './styles/Chat.styles';\nimport { participantListContainerPadding } from '../common/styles/ParticipantContainer.styles';\n/* @conditional-compile-remove(chat-composite-participant-pane) */\nimport { ChatScreenPeoplePane } from './ChatScreenPeoplePane';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentDownloadErrorBar } from './AttachmentDownloadErrorBar';\nimport { _AttachmentDownloadCards } from '@internal/react-components';\nimport { ImageOverlay } from '@internal/react-components';\nimport { InlineImage } from '@internal/react-components';\nimport { ResourceFetchResult } from '@internal/chat-stateful-client';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentOptions } from '@internal/react-components';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { nanoid } from 'nanoid';\n/* @conditional-compile-remove(file-sharing-acs) */\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { AttachmentUploadActionType, AttachmentUpload, AttachmentUploadReducer } from './file-sharing/AttachmentUpload';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { MessageOptions } from '@internal/acs-ui-common';\nimport { SendBoxPicker } from '../common/SendBoxPicker';\n/* @conditional-compile-remove(rich-text-editor-composite-support) */\nimport { loadRichTextSendBox } from '../common/SendBoxPicker';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { useImageUpload } from './image-upload/useImageUpload';\n\n/**\n * @private\n */\nexport type ChatScreenProps = {\n  options?: ChatCompositeOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;\n  onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  styles?: ChatScreenStyles;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  attachmentOptions?: AttachmentOptions;\n  formFactor?: 'desktop' | 'mobile';\n};\n\n/**\n * @private\n */\nexport type ChatScreenStyles = {\n  messageThread?: MessageThreadStyles;\n  sendBox?: SendBoxStylesProps;\n  typingIndicator?: TypingIndicatorStylesProps;\n};\n\n/**\n * @private\n */\ninterface OverlayImageItem {\n  imageSrc: string;\n  title: string;\n  titleIcon: JSX.Element;\n  attachmentId: string;\n  messageId: string;\n  imageUrl: string;\n}\n\n/**\n * @private\n */\nexport const ChatScreen = (props: ChatScreenProps): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onRenderMessage,\n    onRenderTypingIndicator,\n    options,\n    styles,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachmentOptions,\n    formFactor\n  } = props;\n\n  const defaultNumberOfChatMessagesToReload = 5;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');\n  const [overlayImageItem, setOverlayImageItem] = useState<OverlayImageItem>();\n  const [isImageOverlayOpen, setIsImageOverlayOpen] = useState<boolean>(false);\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const [uploads, handleUploadAction] = useReducer(AttachmentUploadReducer, []);\n  const adapter = useAdapter();\n  const theme = useTheme();\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  const [inlineImageUploads, handleInlineImageUploadAction, onUploadInlineImage, onCancelInlineImageUploadHandler] =\n    useImageUpload();\n\n  useEffect(() => {\n    // Initial data should be always fetched by the composite(or external caller) instead of the adapter\n    const fetchData: () => Promise<void> = async () => {\n      // Fetch initial data for adapter\n      await adapter.fetchInitialData();\n      // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.\n      await adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);\n    };\n    fetchData();\n  }, [adapter]);\n\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  useEffect(() => {\n    // if rich text editor is enabled, the rich text editor component should be loaded early for good UX\n    if (options?.richTextEditor) {\n      // this line is needed to load the Rooster JS dependencies early in the lifecycle\n      // when the rich text editor is enabled\n      loadRichTextSendBox();\n    }\n  }, [options?.richTextEditor]);\n\n  const messageThreadProps = usePropsFor(MessageThread);\n  const typingIndicatorProps = usePropsFor(TypingIndicator);\n  const headerProps = useAdaptedSelector(getHeaderProps);\n  const errorBarProps = usePropsFor(ErrorBar);\n\n  useEffect(() => {\n    if (overlayImageItem === undefined) {\n      return;\n    }\n    const message = adapter.getState().thread.chatMessages[overlayImageItem.messageId];\n    if (message === undefined) {\n      return;\n    }\n    const resourceCache = message.resourceCache;\n    if (overlayImageItem.imageSrc === '' && resourceCache && resourceCache[overlayImageItem.imageUrl]) {\n      const fullSizeImageSrc = getResourceSourceUrl(resourceCache[overlayImageItem.imageUrl]);\n      if (fullSizeImageSrc === undefined || fullSizeImageSrc === '' || overlayImageItem.imageSrc === fullSizeImageSrc) {\n        return;\n      }\n      setOverlayImageItem({\n        ...overlayImageItem,\n        imageSrc: fullSizeImageSrc\n      });\n    }\n    // Disable eslint because we are using the overlayImageItem in this effect but don't want to have it as a dependency, as it will cause an infinite loop.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [messageThreadProps.messages]);\n\n  const getResourceSourceUrl = (result: ResourceFetchResult): string => {\n    let src = '';\n    if (result.error || !result.sourceUrl) {\n      src = 'blob://';\n    } else {\n      src = result.sourceUrl;\n    }\n\n    return src;\n  };\n\n  const onRenderAvatarCallback = useCallback(\n    (userId?: string, defaultOptions?: AvatarPersonaProps) => {\n      return (\n        <AvatarPersona\n          userId={userId}\n          hidePersonaDetails={true}\n          {...defaultOptions}\n          dataProvider={onFetchAvatarPersonaData}\n        />\n      );\n    },\n    [onFetchAvatarPersonaData]\n  );\n\n  const messageThreadStyles = useMemo(() => {\n    return Object.assign(\n      {},\n      messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground),\n      styles?.messageThread\n    );\n  }, [styles?.messageThread, theme.semanticColors.bodyBackground]);\n\n  const typingIndicatorStyles = useMemo(() => {\n    return Object.assign({}, styles?.typingIndicator);\n  }, [styles?.typingIndicator]);\n\n  const sendBoxStyles = useMemo(() => {\n    return Object.assign({}, styles?.sendBox);\n  }, [styles?.sendBox]);\n\n  const userId = toFlatCommunicationIdentifier(adapter.getState().userId);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const setKeyboardFocusAfterFileSelection = useCallback(() => {\n    // look up sendbox by ID for now, we will use `useRef`\n    // once attachment button is moved inside of send box component\n    // see ADO workitem #3764245\n    /* @conditional-compile-remove(rich-text-editor-composite-support) */\n    if (props.options?.richTextEditor) {\n      const richTextSendBox = document?.querySelector(`[id=\"richTextSendBox\"]`) as HTMLDivElement;\n      richTextSendBox?.focus();\n      return;\n    }\n    const sendBox = document?.querySelector(`[id=\"sendbox\"]`) as HTMLTextAreaElement;\n    // set send box on focus after file selection per A11y requirement\n    sendBox?.focus();\n  }, [\n    /* @conditional-compile-remove(rich-text-editor-composite-support) */\n    props.options?.richTextEditor\n  ]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const attachmentUploadButtonOnChange = useCallback(\n    (files: FileList | null): void => {\n      setKeyboardFocusAfterFileSelection();\n\n      if (!files) {\n        return;\n      }\n\n      // Get files, change to tasks, store locally and pass back to Contoso\n      const newUploads = Array.from(files).map((file): AttachmentUpload => {\n        const taskId = nanoid();\n        return {\n          file,\n          taskId,\n          metadata: {\n            id: taskId,\n            name: file.name,\n            progress: 0\n          },\n          notifyUploadProgressChanged: (value: number) => {\n            handleUploadAction({ type: AttachmentUploadActionType.Progress, taskId, progress: value });\n          },\n          notifyUploadCompleted: (id: string, url: string) => {\n            handleUploadAction({ type: AttachmentUploadActionType.Completed, taskId, id, url });\n          },\n          notifyUploadFailed: (message: string) => {\n            handleUploadAction({ type: AttachmentUploadActionType.Failed, taskId, message });\n            // remove the failed upload task when error banner is auto dismissed after 10 seconds\n            // so the banner won't be shown again on UI re-rendering.\n            setTimeout(() => {\n              handleUploadAction({ type: AttachmentUploadActionType.Remove, id: taskId });\n            }, 10 * 1000);\n          }\n        };\n      });\n\n      handleUploadAction({ type: AttachmentUploadActionType.Set, newUploads });\n      attachmentOptions?.uploadOptions?.handleAttachmentSelection(newUploads);\n    },\n    [attachmentOptions?.uploadOptions, setKeyboardFocusAfterFileSelection]\n  );\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const onRenderAttachmentDownloads = useCallback(\n    (message: ChatMessage) =>\n      message?.attachments?.length ?? 0 > 0 ? (\n        <_AttachmentDownloadCards\n          attachments={message.attachments}\n          message={message}\n          actionsForAttachment={attachmentOptions?.downloadOptions?.actionsForAttachment}\n          onActionHandlerFailed={(errorMessage: string) => {\n            setDownloadErrorMessage(errorMessage);\n          }}\n        />\n      ) : (\n        <></>\n      ),\n    [attachmentOptions?.downloadOptions?.actionsForAttachment]\n  );\n\n  const onInlineImageClicked = useCallback(\n    (attachmentId: string, messageId: string) => {\n      const message = adapter.getState().thread.chatMessages[messageId];\n      const inlinedImages = message.content?.attachments?.filter((attachment) => {\n        return attachment.attachmentType === 'image' && attachment.id === attachmentId;\n      });\n\n      if (!inlinedImages || inlinedImages.length <= 0) {\n        return;\n      }\n\n      const attachment = inlinedImages[0];\n\n      const resourceCache = message.resourceCache;\n      let imageSrc = '';\n\n      if (attachment.url) {\n        if (resourceCache && resourceCache[attachment.url]) {\n          imageSrc = getResourceSourceUrl(resourceCache[attachment.url]);\n        } else {\n          adapter.downloadResourceToCache({\n            threadId: adapter.getState().thread.threadId,\n            messageId: messageId,\n            resourceUrl: attachment.url\n          });\n        }\n      }\n\n      const titleIconRenderOptions = {\n        text: message.senderDisplayName,\n        size: PersonaSize.size32,\n        showOverflowTooltip: false,\n        imageAlt: message.senderDisplayName\n      };\n\n      const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;\n      const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(messageSenderId, titleIconRenderOptions);\n      const overlayImage: OverlayImageItem = {\n        title: message.senderDisplayName || '',\n        titleIcon: titleIcon,\n        attachmentId: attachment.id,\n        imageSrc: imageSrc,\n        messageId: messageId,\n        imageUrl: attachment.url || ''\n      };\n\n      setIsImageOverlayOpen(true);\n      setOverlayImageItem(overlayImage);\n    },\n    [adapter, onRenderAvatarCallback, userId]\n  );\n\n  const onRenderInlineImage = useCallback(\n    (inlineImage: InlineImage, defaultOnRender: (inlineImage: InlineImage) => JSX.Element): JSX.Element => {\n      const message = adapter.getState().thread.chatMessages[inlineImage.messageId];\n      const attachment = message?.content?.attachments?.find(\n        (attachment) => attachment.id === inlineImage.imageAttributes.id\n      );\n\n      if (attachment === undefined) {\n        return defaultOnRender(inlineImage);\n      }\n\n      let pointerEvents: 'none' | 'auto' = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';\n      const resourceCache = message.resourceCache;\n      if (\n        resourceCache &&\n        attachment.previewUrl &&\n        resourceCache[attachment.previewUrl] &&\n        resourceCache[attachment.previewUrl].error\n      ) {\n        pointerEvents = 'none';\n      }\n\n      return (\n        <span\n          key={inlineImage.imageAttributes.id}\n          onClick={() => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId)}\n          tabIndex={0}\n          role=\"button\"\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId);\n            }\n          }}\n          style={{ cursor: 'pointer', pointerEvents }}\n        >\n          {defaultOnRender(inlineImage)}\n        </span>\n      );\n    },\n    [adapter, onInlineImageClicked]\n  );\n\n  const inlineImageOptions = useMemo(() => {\n    return { onRenderInlineImage: onRenderInlineImage };\n  }, [onRenderInlineImage]);\n\n  const onDownloadButtonClicked = useCallback(\n    (imageSrc: string): void => {\n      if (imageSrc === '') {\n        return;\n      }\n      if (isIOS()) {\n        window.open(imageSrc, '_blank');\n      } else {\n        // Create a new anchor element\n        const a = document.createElement('a');\n        // Set the href and download attributes for the anchor element\n        a.href = imageSrc;\n        a.download = overlayImageItem?.attachmentId || '';\n        a.rel = 'noopener noreferrer';\n        a.target = '_blank';\n\n        // Programmatically click the anchor element to trigger the download\n        document.body.appendChild(a);\n        a.click();\n        document.body.removeChild(a);\n      }\n    },\n    [overlayImageItem?.attachmentId]\n  );\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const AttachmentButton = useCallback(() => {\n    if (!attachmentOptions?.uploadOptions?.handleAttachmentSelection) {\n      return null;\n    }\n    return (\n      <AttachmentUploadButton\n        supportedMediaTypes={attachmentOptions?.uploadOptions?.supportedMediaTypes}\n        disableMultipleUploads={attachmentOptions?.uploadOptions?.disableMultipleUploads}\n        onChange={attachmentUploadButtonOnChange}\n      />\n    );\n    return <></>;\n  }, [\n    attachmentOptions?.uploadOptions?.handleAttachmentSelection,\n    attachmentOptions?.uploadOptions?.supportedMediaTypes,\n    attachmentOptions?.uploadOptions?.disableMultipleUploads,\n    attachmentUploadButtonOnChange\n  ]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const attachments = useMemo(() => {\n    return uploads?.map((v) => v.metadata);\n  }, [uploads]);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  const imageUploadsInProgress = useMemo(() => {\n    return inlineImageUploads?.map((v) => v.metadata);\n  }, [inlineImageUploads]);\n\n  const onSendMessageHandler = useCallback(\n    async function (\n      content: string,\n      /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */ options?: MessageOptions\n    ) {\n      /* @conditional-compile-remove(file-sharing-acs) */\n      const attachments = options?.attachments ?? [];\n      /* @conditional-compile-remove(file-sharing-acs) */\n      handleUploadAction({ type: AttachmentUploadActionType.Clear });\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      handleInlineImageUploadAction({ type: AttachmentUploadActionType.Clear });\n\n      /* @conditional-compile-remove(file-sharing-acs) */\n      await adapter.sendMessage(content, {\n        attachments: attachments,\n        /* @conditional-compile-remove(rich-text-editor-composite-support) */\n        type: options?.type\n      });\n      /* @conditional-compile-remove(file-sharing-acs) */\n      return;\n      await adapter.sendMessage(content, {\n        /* @conditional-compile-remove(rich-text-editor-composite-support) */\n        type: options?.type\n      });\n    },\n    [adapter, /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleInlineImageUploadAction]\n  );\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const onCancelUploadHandler = useCallback(\n    (id: string) => {\n      handleUploadAction({ type: AttachmentUploadActionType.Remove, id });\n      attachmentOptions?.uploadOptions?.handleAttachmentRemoval?.(id);\n    },\n    [attachmentOptions?.uploadOptions]\n  );\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  const removeImageTags = useCallback((event: { content: DocumentFragment }) => {\n    event.content.querySelectorAll('img').forEach((image) => {\n      // If the image is the only child of its parent, remove all the parents of this img element.\n      let parentNode: HTMLElement | null = image.parentElement;\n      let currentNode: HTMLElement = image;\n      while (parentNode?.childNodes.length === 1) {\n        currentNode = parentNode;\n        parentNode = parentNode.parentElement;\n      }\n      currentNode?.remove();\n    });\n  }, []);\n\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  const richTextEditorOptions = useMemo(() => {\n    return options?.richTextEditor\n      ? {\n          /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste: removeImageTags\n        }\n      : undefined;\n  }, [options?.richTextEditor, removeImageTags]);\n\n  return (\n    <Stack className={chatContainer} grow>\n      {options?.topic !== false && <ChatHeader {...headerProps} />}\n      <Stack className={chatArea} tokens={participantListContainerPadding} horizontal grow>\n        <Stack className={chatWrapper} grow>\n          {options?.errorBar !== false && <ErrorBar {...errorBarProps} />}\n          {\n            /* @conditional-compile-remove(file-sharing-acs) */\n            <AttachmentDownloadErrorBar\n              onDismissDownloadErrorMessage={useCallback(() => {\n                setDownloadErrorMessage('');\n              }, [])}\n              attachmentDownloadErrorMessage={downloadErrorMessage || ''}\n            />\n          }\n          <MessageThread\n            {...messageThreadProps}\n            onRenderAvatar={onRenderAvatarCallback}\n            onRenderMessage={onRenderMessage}\n            /* @conditional-compile-remove(file-sharing-acs) */\n            onRenderAttachmentDownloads={onRenderAttachmentDownloads}\n            inlineImageOptions={inlineImageOptions}\n            numberOfChatMessagesToReload={defaultNumberOfChatMessagesToReload}\n            styles={messageThreadStyles}\n            /* @conditional-compile-remove(rich-text-editor-composite-support) */\n            richTextEditorOptions={richTextEditorOptions}\n          />\n          <Stack className={mergeStyles(sendboxContainerStyles)}>\n            <div className={mergeStyles(typingIndicatorContainerStyles)}>\n              {onRenderTypingIndicator ? (\n                onRenderTypingIndicator(typingIndicatorProps.typingUsers)\n              ) : (\n                <TypingIndicator {...typingIndicatorProps} styles={typingIndicatorStyles} />\n              )}\n            </div>\n            <Stack horizontal={formFactor === 'mobile'}>\n              {formFactor === 'mobile' && (\n                /* @conditional-compile-remove(file-sharing-acs) */\n                <Stack verticalAlign=\"center\">\n                  <AttachmentButton />\n                </Stack>\n              )}\n              <Stack grow>\n                <SendBoxPicker\n                  styles={sendBoxStyles}\n                  autoFocus={options?.autoFocus}\n                  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n                  richTextEditorOptions={richTextEditorOptions}\n                  /* @conditional-compile-remove(file-sharing-acs) */\n                  attachments={attachments}\n                  /* @conditional-compile-remove(file-sharing-acs) */\n                  onCancelAttachmentUpload={onCancelUploadHandler}\n                  // we need to overwrite onSendMessage for SendBox because we need to clear attachment state\n                  // when submit button is clicked\n                  onSendMessage={onSendMessageHandler}\n                  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n                  onUploadInlineImage={onUploadInlineImage}\n                  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n                  imageUploadsInProgress={imageUploadsInProgress}\n                  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n                  onCancelInlineImageUpload={onCancelInlineImageUploadHandler}\n                />\n              </Stack>\n              {formFactor !== 'mobile' && (\n                /* @conditional-compile-remove(file-sharing-acs) */\n                <AttachmentButton />\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n        {\n          /* @conditional-compile-remove(chat-composite-participant-pane) */\n          options?.participantPane === true && (\n            <ChatScreenPeoplePane\n              onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n              onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n              isMobile={formFactor === 'mobile'}\n            />\n          )\n        }\n      </Stack>\n      {overlayImageItem && (\n        <ImageOverlay\n          {...overlayImageItem}\n          isOpen={isImageOverlayOpen}\n          onDismiss={() => {\n            setOverlayImageItem(undefined);\n            setIsImageOverlayOpen(false);\n            adapter.removeResourceFromCache({\n              threadId: adapter.getState().thread.threadId,\n              messageId: overlayImageItem.messageId,\n              resourceUrl: overlayImageItem.imageUrl\n            });\n          }}\n          onDownloadButtonClicked={onDownloadButtonClicked}\n        />\n      )}\n    </Stack>\n  );\n};\n"]}
+{"version":3,"file":"ChatScreen.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/ChatComposite/ChatScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { isIOS } from '@fluentui/react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { PersonaSize } from '@fluentui/react';\nimport {\n  CommunicationParticipant,\n  ErrorBar,\n  MessageProps,\n  MessageRenderer,\n  MessageThread,\n  MessageThreadStyles,\n  ParticipantMenuItemsCallback,\n  SendBoxStylesProps,\n  TypingIndicator,\n  TypingIndicatorStylesProps,\n  useTheme\n} from '@internal/react-components';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { ChatMessage } from '@internal/react-components';\nimport React, { useCallback, useEffect, useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { useReducer } from 'react';\nimport { useState } from 'react';\nimport { AvatarPersona, AvatarPersonaDataCallback, AvatarPersonaProps } from '../common/AvatarPersona';\nimport { useAdapter } from './adapter/ChatAdapterProvider';\nimport { ChatCompositeOptions } from './ChatComposite';\nimport { ChatHeader, getHeaderProps } from './ChatHeader';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentUploadButtonWrapper as AttachmentUploadButton } from './file-sharing';\nimport { useAdaptedSelector } from './hooks/useAdaptedSelector';\nimport { usePropsFor } from './hooks/usePropsFor';\n\nimport {\n  chatArea,\n  chatContainer,\n  chatWrapper,\n  messageThreadChatCompositeStyles,\n  sendboxContainerStyles,\n  typingIndicatorContainerStyles\n} from './styles/Chat.styles';\nimport { participantListContainerPadding } from '../common/styles/ParticipantContainer.styles';\n/* @conditional-compile-remove(chat-composite-participant-pane) */\nimport { ChatScreenPeoplePane } from './ChatScreenPeoplePane';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentDownloadErrorBar } from './AttachmentDownloadErrorBar';\nimport { _AttachmentDownloadCards } from '@internal/react-components';\nimport { ImageOverlay } from '@internal/react-components';\nimport { InlineImage } from '@internal/react-components';\nimport { ResourceFetchResult } from '@internal/chat-stateful-client';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentOptions } from '@internal/react-components';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { nanoid } from 'nanoid';\n/* @conditional-compile-remove(file-sharing-acs) */\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { AttachmentUploadActionType, AttachmentUpload, AttachmentUploadReducer } from './file-sharing/AttachmentUpload';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { MessageOptions } from '@internal/acs-ui-common';\nimport { SendBoxPicker } from '../common/SendBoxPicker';\n/* @conditional-compile-remove(rich-text-editor-composite-support) */\nimport { loadRichTextSendBox } from '../common/SendBoxPicker';\n/* @conditional-compile-remove(rich-text-editor-image-upload) */\nimport { useImageUpload } from './image-upload/useImageUpload';\n\n/**\n * @private\n */\nexport type ChatScreenProps = {\n  options?: ChatCompositeOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;\n  onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  styles?: ChatScreenStyles;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  attachmentOptions?: AttachmentOptions;\n  formFactor?: 'desktop' | 'mobile';\n};\n\n/**\n * @private\n */\nexport type ChatScreenStyles = {\n  messageThread?: MessageThreadStyles;\n  sendBox?: SendBoxStylesProps;\n  typingIndicator?: TypingIndicatorStylesProps;\n};\n\n/**\n * @private\n */\ninterface OverlayImageItem {\n  imageSrc: string;\n  title: string;\n  titleIcon: JSX.Element;\n  attachmentId: string;\n  messageId: string;\n  imageUrl: string;\n}\n\n/**\n * @private\n */\nexport const ChatScreen = (props: ChatScreenProps): JSX.Element => {\n  const {\n    onFetchAvatarPersonaData,\n    onRenderMessage,\n    onRenderTypingIndicator,\n    options,\n    styles,\n    /* @conditional-compile-remove(file-sharing-acs) */\n    attachmentOptions,\n    formFactor\n  } = props;\n\n  const defaultNumberOfChatMessagesToReload = 5;\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');\n  const [overlayImageItem, setOverlayImageItem] = useState<OverlayImageItem>();\n  const [isImageOverlayOpen, setIsImageOverlayOpen] = useState<boolean>(false);\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const [uploads, handleUploadAction] = useReducer(AttachmentUploadReducer, []);\n  const adapter = useAdapter();\n  const theme = useTheme();\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  const [inlineImageUploads, handleInlineImageUploadAction, onUploadInlineImage, onCancelInlineImageUploadHandler] =\n    useImageUpload();\n\n  useEffect(() => {\n    // Initial data should be always fetched by the composite(or external caller) instead of the adapter\n    const fetchData: () => Promise<void> = async () => {\n      // Fetch initial data for adapter\n      await adapter.fetchInitialData();\n      // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.\n      await adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);\n    };\n    fetchData();\n  }, [adapter]);\n\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  useEffect(() => {\n    // if rich text editor is enabled, the rich text editor component should be loaded early for good UX\n    if (options?.richTextEditor) {\n      // this line is needed to load the Rooster JS dependencies early in the lifecycle\n      // when the rich text editor is enabled\n      loadRichTextSendBox();\n    }\n  }, [options?.richTextEditor]);\n\n  const messageThreadProps = usePropsFor(MessageThread);\n  const typingIndicatorProps = usePropsFor(TypingIndicator);\n  const headerProps = useAdaptedSelector(getHeaderProps);\n  const errorBarProps = usePropsFor(ErrorBar);\n\n  useEffect(() => {\n    if (overlayImageItem === undefined) {\n      return;\n    }\n    const message = adapter.getState().thread.chatMessages[overlayImageItem.messageId];\n    if (message === undefined) {\n      return;\n    }\n    const resourceCache = message.resourceCache;\n    if (overlayImageItem.imageSrc === '' && resourceCache && resourceCache[overlayImageItem.imageUrl]) {\n      const fullSizeImageSrc = getResourceSourceUrl(resourceCache[overlayImageItem.imageUrl]);\n      if (fullSizeImageSrc === undefined || fullSizeImageSrc === '' || overlayImageItem.imageSrc === fullSizeImageSrc) {\n        return;\n      }\n      setOverlayImageItem({\n        ...overlayImageItem,\n        imageSrc: fullSizeImageSrc\n      });\n    }\n    // Disable eslint because we are using the overlayImageItem in this effect but don't want to have it as a dependency, as it will cause an infinite loop.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [messageThreadProps.messages]);\n\n  const getResourceSourceUrl = (result: ResourceFetchResult): string => {\n    let src = '';\n    if (result.error || !result.sourceUrl) {\n      src = 'blob://';\n    } else {\n      src = result.sourceUrl;\n    }\n\n    return src;\n  };\n\n  const onRenderAvatarCallback = useCallback(\n    (userId?: string, defaultOptions?: AvatarPersonaProps) => {\n      return (\n        <AvatarPersona\n          userId={userId}\n          hidePersonaDetails={true}\n          {...defaultOptions}\n          dataProvider={onFetchAvatarPersonaData}\n        />\n      );\n    },\n    [onFetchAvatarPersonaData]\n  );\n\n  const messageThreadStyles = useMemo(() => {\n    return Object.assign(\n      {},\n      messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground),\n      styles?.messageThread\n    );\n  }, [styles?.messageThread, theme.semanticColors.bodyBackground]);\n\n  const typingIndicatorStyles = useMemo(() => {\n    return Object.assign({}, styles?.typingIndicator);\n  }, [styles?.typingIndicator]);\n\n  const sendBoxStyles = useMemo(() => {\n    return Object.assign({}, styles?.sendBox);\n  }, [styles?.sendBox]);\n\n  const userId = toFlatCommunicationIdentifier(adapter.getState().userId);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const setKeyboardFocusAfterFileSelection = useCallback(() => {\n    // look up sendbox by ID for now, we will use `useRef`\n    // once attachment button is moved inside of send box component\n    // see ADO workitem #3764245\n    /* @conditional-compile-remove(rich-text-editor-composite-support) */\n    if (props.options?.richTextEditor) {\n      const richTextSendBox = document?.querySelector(`[id=\"richTextSendBox\"]`) as HTMLDivElement;\n      richTextSendBox?.focus();\n      return;\n    }\n    const sendBox = document?.querySelector(`[id=\"sendbox\"]`) as HTMLTextAreaElement;\n    // set send box on focus after file selection per A11y requirement\n    sendBox?.focus();\n  }, [\n    /* @conditional-compile-remove(rich-text-editor-composite-support) */\n    props.options?.richTextEditor\n  ]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const attachmentUploadButtonOnChange = useCallback(\n    (files: FileList | null): void => {\n      setKeyboardFocusAfterFileSelection();\n\n      if (!files) {\n        return;\n      }\n\n      // Get files, change to tasks, store locally and pass back to Contoso\n      const newUploads = Array.from(files).map((file): AttachmentUpload => {\n        const taskId = nanoid();\n        return {\n          file,\n          taskId,\n          metadata: {\n            id: taskId,\n            name: file.name,\n            progress: 0\n          },\n          notifyUploadProgressChanged: (value: number) => {\n            handleUploadAction({ type: AttachmentUploadActionType.Progress, taskId, progress: value });\n          },\n          notifyUploadCompleted: (id: string, url: string) => {\n            handleUploadAction({ type: AttachmentUploadActionType.Completed, taskId, id, url });\n          },\n          notifyUploadFailed: (message: string) => {\n            handleUploadAction({ type: AttachmentUploadActionType.Failed, taskId, message });\n            // remove the failed upload task when error banner is auto dismissed after 10 seconds\n            // so the banner won't be shown again on UI re-rendering.\n            setTimeout(() => {\n              handleUploadAction({ type: AttachmentUploadActionType.Remove, id: taskId });\n            }, 10 * 1000);\n          }\n        };\n      });\n\n      handleUploadAction({ type: AttachmentUploadActionType.Set, newUploads });\n      attachmentOptions?.uploadOptions?.handleAttachmentSelection(newUploads);\n    },\n    [attachmentOptions?.uploadOptions, setKeyboardFocusAfterFileSelection]\n  );\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const onRenderAttachmentDownloads = useCallback(\n    (message: ChatMessage) =>\n      message?.attachments?.length ?? 0 > 0 ? (\n        <_AttachmentDownloadCards\n          attachments={message.attachments}\n          message={message}\n          actionsForAttachment={attachmentOptions?.downloadOptions?.actionsForAttachment}\n          onActionHandlerFailed={(errorMessage: string) => {\n            setDownloadErrorMessage(errorMessage);\n          }}\n        />\n      ) : (\n        <></>\n      ),\n    [attachmentOptions?.downloadOptions?.actionsForAttachment]\n  );\n\n  const onInlineImageClicked = useCallback(\n    (attachmentId: string, messageId: string) => {\n      const message = adapter.getState().thread.chatMessages[messageId];\n      const inlinedImages = message.content?.attachments?.filter((attachment) => {\n        return attachment.attachmentType === 'image' && attachment.id === attachmentId;\n      });\n\n      if (!inlinedImages || inlinedImages.length <= 0) {\n        return;\n      }\n\n      const attachment = inlinedImages[0];\n\n      const resourceCache = message.resourceCache;\n      let imageSrc = '';\n\n      if (attachment.url) {\n        if (resourceCache && resourceCache[attachment.url]) {\n          imageSrc = getResourceSourceUrl(resourceCache[attachment.url]);\n        } else {\n          adapter.downloadResourceToCache({\n            threadId: adapter.getState().thread.threadId,\n            messageId: messageId,\n            resourceUrl: attachment.url\n          });\n        }\n      }\n\n      const titleIconRenderOptions = {\n        text: message.senderDisplayName,\n        size: PersonaSize.size32,\n        showOverflowTooltip: false,\n        imageAlt: message.senderDisplayName\n      };\n\n      const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;\n      const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(messageSenderId, titleIconRenderOptions);\n      const overlayImage: OverlayImageItem = {\n        title: message.senderDisplayName || '',\n        titleIcon: titleIcon,\n        attachmentId: attachment.id,\n        imageSrc: imageSrc,\n        messageId: messageId,\n        imageUrl: attachment.url || ''\n      };\n\n      setIsImageOverlayOpen(true);\n      setOverlayImageItem(overlayImage);\n    },\n    [adapter, onRenderAvatarCallback, userId]\n  );\n\n  const onRenderInlineImage = useCallback(\n    (inlineImage: InlineImage, defaultOnRender: (inlineImage: InlineImage) => JSX.Element): JSX.Element => {\n      const message = adapter.getState().thread.chatMessages[inlineImage.messageId];\n      const attachment = message?.content?.attachments?.find(\n        (attachment) => attachment.id === inlineImage.imageAttributes.id\n      );\n\n      if (attachment === undefined) {\n        return defaultOnRender(inlineImage);\n      }\n\n      let pointerEvents: 'none' | 'auto' = inlineImage.imageAttributes.src === '' ? 'none' : 'auto';\n      const resourceCache = message.resourceCache;\n      if (\n        resourceCache &&\n        attachment.previewUrl &&\n        resourceCache[attachment.previewUrl] &&\n        resourceCache[attachment.previewUrl].error\n      ) {\n        pointerEvents = 'none';\n      }\n\n      return (\n        <span\n          key={inlineImage.imageAttributes.id}\n          onClick={() => onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId)}\n          tabIndex={0}\n          role=\"button\"\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              onInlineImageClicked(inlineImage.imageAttributes.id || '', inlineImage.messageId);\n            }\n          }}\n          style={{ cursor: 'pointer', pointerEvents }}\n        >\n          {defaultOnRender(inlineImage)}\n        </span>\n      );\n    },\n    [adapter, onInlineImageClicked]\n  );\n\n  const inlineImageOptions = useMemo(() => {\n    return { onRenderInlineImage: onRenderInlineImage };\n  }, [onRenderInlineImage]);\n\n  const onDownloadButtonClicked = useCallback(\n    (imageSrc: string): void => {\n      if (imageSrc === '') {\n        return;\n      }\n      if (isIOS()) {\n        window.open(imageSrc, '_blank');\n      } else {\n        // Create a new anchor element\n        const a = document.createElement('a');\n        // Set the href and download attributes for the anchor element\n        a.href = imageSrc;\n        a.download = overlayImageItem?.attachmentId || '';\n        a.rel = 'noopener noreferrer';\n        a.target = '_blank';\n\n        // Programmatically click the anchor element to trigger the download\n        document.body.appendChild(a);\n        a.click();\n        document.body.removeChild(a);\n      }\n    },\n    [overlayImageItem?.attachmentId]\n  );\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const AttachmentButton = useCallback(() => {\n    if (!attachmentOptions?.uploadOptions?.handleAttachmentSelection) {\n      return null;\n    }\n    return (\n      <AttachmentUploadButton\n        supportedMediaTypes={attachmentOptions?.uploadOptions?.supportedMediaTypes}\n        disableMultipleUploads={attachmentOptions?.uploadOptions?.disableMultipleUploads}\n        onChange={attachmentUploadButtonOnChange}\n      />\n    );\n    return <></>;\n  }, [\n    attachmentOptions?.uploadOptions?.handleAttachmentSelection,\n    attachmentOptions?.uploadOptions?.supportedMediaTypes,\n    attachmentOptions?.uploadOptions?.disableMultipleUploads,\n    attachmentUploadButtonOnChange\n  ]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const attachments = useMemo(() => {\n    return uploads?.map((v) => v.metadata);\n  }, [uploads]);\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  const imageUploadsInProgress = useMemo(() => {\n    return inlineImageUploads?.map((v) => v.metadata);\n  }, [inlineImageUploads]);\n\n  const onSendMessageHandler = useCallback(\n    async function (\n      content: string,\n      /* @conditional-compile-remove(file-sharing-acs) */ /* @conditional-compile-remove(rich-text-editor-composite-support) */ options?: MessageOptions\n    ) {\n      /* @conditional-compile-remove(file-sharing-acs) */\n      const attachments = options?.attachments ?? [];\n      /* @conditional-compile-remove(file-sharing-acs) */\n      handleUploadAction({ type: AttachmentUploadActionType.Clear });\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      handleInlineImageUploadAction({ type: AttachmentUploadActionType.Clear });\n\n      /* @conditional-compile-remove(file-sharing-acs) */\n      await adapter.sendMessage(content, {\n        attachments: attachments,\n        /* @conditional-compile-remove(rich-text-editor-composite-support) */\n        type: options?.type\n      });\n      /* @conditional-compile-remove(file-sharing-acs) */\n      return;\n      await adapter.sendMessage(content, {\n        /* @conditional-compile-remove(rich-text-editor-composite-support) */\n        type: options?.type\n      });\n    },\n    [adapter, /* @conditional-compile-remove(rich-text-editor-image-upload) */ handleInlineImageUploadAction]\n  );\n\n  const onUpdateMessageHandler = useCallback(\n    async (messageId: string, content: string) => {\n      await messageThreadProps.onUpdateMessage(messageId, content);\n      /* @conditional-compile-remove(rich-text-editor-image-upload) */\n      handleInlineImageUploadAction({ type: AttachmentUploadActionType.Clear });\n    },\n    [/* @conditional-compile-remove(rich-text-editor-image-upload) */ handleInlineImageUploadAction, messageThreadProps]\n  );\n\n  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n  const onCancelEditMessageHandler = useCallback(() => {\n    handleInlineImageUploadAction({ type: AttachmentUploadActionType.Clear });\n  }, [handleInlineImageUploadAction]);\n\n  /* @conditional-compile-remove(file-sharing-acs) */\n  const onCancelUploadHandler = useCallback(\n    (id: string) => {\n      handleUploadAction({ type: AttachmentUploadActionType.Remove, id });\n      attachmentOptions?.uploadOptions?.handleAttachmentRemoval?.(id);\n    },\n    [attachmentOptions?.uploadOptions]\n  );\n\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  const richTextEditorOptions = useMemo(() => {\n    return options?.richTextEditor\n      ? {\n          /* @conditional-compile-remove(rich-text-editor-image-upload) */ onPaste: undefined,\n          /* @conditional-compile-remove(rich-text-editor-image-upload) */\n          onUploadInlineImage: onUploadInlineImage,\n          /* @conditional-compile-remove(rich-text-editor-image-upload) */\n          imageUploadsInProgress: imageUploadsInProgress,\n          /* @conditional-compile-remove(rich-text-editor-image-upload) */\n          onCancelInlineImageUpload: onCancelInlineImageUploadHandler\n        }\n      : undefined;\n  }, [\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    imageUploadsInProgress,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onCancelInlineImageUploadHandler,\n    /* @conditional-compile-remove(rich-text-editor-image-upload) */\n    onUploadInlineImage,\n    options?.richTextEditor\n  ]);\n\n  return (\n    <Stack className={chatContainer} grow>\n      {options?.topic !== false && <ChatHeader {...headerProps} />}\n      <Stack className={chatArea} tokens={participantListContainerPadding} horizontal grow>\n        <Stack className={chatWrapper} grow>\n          {options?.errorBar !== false && <ErrorBar {...errorBarProps} />}\n          {\n            /* @conditional-compile-remove(file-sharing-acs) */\n            <AttachmentDownloadErrorBar\n              onDismissDownloadErrorMessage={useCallback(() => {\n                setDownloadErrorMessage('');\n              }, [])}\n              attachmentDownloadErrorMessage={downloadErrorMessage || ''}\n            />\n          }\n          <MessageThread\n            {...messageThreadProps}\n            onUpdateMessage={onUpdateMessageHandler}\n            /* @conditional-compile-remove(rich-text-editor-image-upload) */\n            onCancelEditMessage={onCancelEditMessageHandler}\n            onRenderAvatar={onRenderAvatarCallback}\n            onRenderMessage={onRenderMessage}\n            /* @conditional-compile-remove(file-sharing-acs) */\n            onRenderAttachmentDownloads={onRenderAttachmentDownloads}\n            inlineImageOptions={inlineImageOptions}\n            numberOfChatMessagesToReload={defaultNumberOfChatMessagesToReload}\n            styles={messageThreadStyles}\n            /* @conditional-compile-remove(rich-text-editor-composite-support) */\n            richTextEditorOptions={richTextEditorOptions}\n          />\n          <Stack className={mergeStyles(sendboxContainerStyles)}>\n            <div className={mergeStyles(typingIndicatorContainerStyles)}>\n              {onRenderTypingIndicator ? (\n                onRenderTypingIndicator(typingIndicatorProps.typingUsers)\n              ) : (\n                <TypingIndicator {...typingIndicatorProps} styles={typingIndicatorStyles} />\n              )}\n            </div>\n            <Stack horizontal={formFactor === 'mobile'}>\n              {formFactor === 'mobile' && (\n                /* @conditional-compile-remove(file-sharing-acs) */\n                <Stack verticalAlign=\"center\">\n                  <AttachmentButton />\n                </Stack>\n              )}\n              <Stack grow>\n                <SendBoxPicker\n                  styles={sendBoxStyles}\n                  autoFocus={options?.autoFocus}\n                  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n                  richTextEditorOptions={richTextEditorOptions}\n                  /* @conditional-compile-remove(file-sharing-acs) */\n                  attachments={attachments}\n                  /* @conditional-compile-remove(file-sharing-acs) */\n                  onCancelAttachmentUpload={onCancelUploadHandler}\n                  // we need to overwrite onSendMessage for SendBox because we need to clear attachment state\n                  // when submit button is clicked\n                  onSendMessage={onSendMessageHandler}\n                  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n                  onUploadInlineImage={onUploadInlineImage}\n                  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n                  imageUploadsInProgress={imageUploadsInProgress}\n                  /* @conditional-compile-remove(rich-text-editor-image-upload) */\n                  onCancelInlineImageUpload={onCancelInlineImageUploadHandler}\n                />\n              </Stack>\n              {formFactor !== 'mobile' && (\n                /* @conditional-compile-remove(file-sharing-acs) */\n                <AttachmentButton />\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n        {\n          /* @conditional-compile-remove(chat-composite-participant-pane) */\n          options?.participantPane === true && (\n            <ChatScreenPeoplePane\n              onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n              onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n              isMobile={formFactor === 'mobile'}\n            />\n          )\n        }\n      </Stack>\n      {overlayImageItem && (\n        <ImageOverlay\n          {...overlayImageItem}\n          isOpen={isImageOverlayOpen}\n          onDismiss={() => {\n            setOverlayImageItem(undefined);\n            setIsImageOverlayOpen(false);\n            adapter.removeResourceFromCache({\n              threadId: adapter.getState().thread.threadId,\n              messageId: overlayImageItem.messageId,\n              resourceUrl: overlayImageItem.imageUrl\n            });\n          }}\n          onDownloadButtonClicked={onDownloadButtonClicked}\n        />\n      )}\n    </Stack>\n  );\n};\n"]}