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

package/dist/dist-esm/react-components/src/components/styles/AttachmentCardGroup.styles.d.ts

@@ -1,7 +1,7 @@
 /**
  * @private
  */
-export declare const useAttachmentCardGroupStyles: () => Record<"root" | "singleAttachment" | "multipleAttachments", string>;
+export declare const useAttachmentCardGroupStyles: () => Record<"root" | "multipleAttachments" | "singleAttachment", string>;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/Captions.style.d.ts

@@ -1,5 +1,4 @@
 import { IStackStyles, ITheme } from '@fluentui/react';
-import { IButtonStyles } from '@fluentui/react';
 /**
  * @private
  */
@@ -8,26 +7,6 @@ export declare const iconClassName: string;
  * @private
  */
 export declare const displayNameClassName: string;
-/**
- * @private
- */
-export declare const bannerTitleContainerClassName: string;
-/**
- * @private
- */
-export declare const isTypingClassName: (theme: ITheme) => string;
-/**
- * @private
- */
-export declare const rttContainerClassName: (theme: ITheme, isTyping: boolean) => string;
-/**
- * @private
- */
-export declare const rttDisclosureBannerClassName: () => string;
-/**
- * @private
- */
-export declare const expandIconClassName: (theme: ITheme) => IButtonStyles;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/Captions.style.js

@@ -16,59 +16,6 @@ export const displayNameClassName = mergeStyles({
     fontSize: _pxToRem(12),
     lineHeight: _pxToRem(16)
 });
-/**
- * @private
- */
-export const bannerTitleContainerClassName = mergeStyles({
-    paddingBottom: _pxToRem(10)
-});
-/**
- * @private
- */
-export const isTypingClassName = (theme) => {
-    return mergeStyles({
-        backgroundColor: theme.palette.themeLighter,
-        color: theme.palette.themeDarker,
-        borderRadius: _pxToRem(4),
-        marginLeft: _pxToRem(4),
-        fontWeight: 400,
-        paddingLeft: _pxToRem(4),
-        paddingRight: _pxToRem(4),
-        fontSize: _pxToRem(11),
-        lineHeight: _pxToRem(16)
-    });
-};
-/**
- * @private
- */
-export const rttContainerClassName = (theme, isTyping) => {
-    return mergeStyles({
-        borderLeft: isTyping ? `2px solid ${theme.palette.themeLighter}` : 'none'
-    });
-};
-/**
- * @private
- */
-export const rttDisclosureBannerClassName = () => {
-    return mergeStyles({
-        paddingTop: '0.5rem'
-    });
-};
-/**
- * @private
- */
-export const expandIconClassName = (theme) => {
-    return {
-        root: {
-            color: theme.palette.neutralPrimary,
-            width: '1rem',
-            height: '1rem'
-        },
-        rootHovered: {
-            color: theme.palette.neutralDark
-        }
-    };
-};
 /**
  * @private
  */

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

@@ -1 +1 @@
-{"version":3,"file":"Captions.style.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/Captions.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, ITheme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { IButtonStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const iconClassName = mergeStyles({\n  marginRight: _pxToRem(8)\n});\n\n/**\n * @private\n */\nexport const displayNameClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(12),\n  lineHeight: _pxToRem(16)\n});\n/**\n * @private\n */\nexport const bannerTitleContainerClassName = mergeStyles({\n  paddingBottom: _pxToRem(10)\n});\n/**\n * @private\n */\nexport const isTypingClassName = (theme: ITheme): string => {\n  return mergeStyles({\n    backgroundColor: theme.palette.themeLighter,\n    color: theme.palette.themeDarker,\n    borderRadius: _pxToRem(4),\n    marginLeft: _pxToRem(4),\n    fontWeight: 400,\n    paddingLeft: _pxToRem(4),\n    paddingRight: _pxToRem(4),\n    fontSize: _pxToRem(11),\n    lineHeight: _pxToRem(16)\n  });\n};\n/**\n * @private\n */\nexport const rttContainerClassName = (theme: ITheme, isTyping: boolean): string => {\n  return mergeStyles({\n    borderLeft: isTyping ? `2px solid ${theme.palette.themeLighter}` : 'none'\n  });\n};\n/**\n * @private\n */\nexport const rttDisclosureBannerClassName = (): string => {\n  return mergeStyles({\n    paddingTop: '0.5rem'\n  });\n};\n/**\n * @private\n */\nexport const expandIconClassName = (theme: ITheme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralPrimary,\n      width: '1rem',\n      height: '1rem'\n    },\n    rootHovered: {\n      color: theme.palette.neutralDark\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const captionClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(16),\n  lineHeight: _pxToRem(22),\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const captionsContainerClassName = mergeStyles({\n  height: '100%',\n  margin: 0,\n  overflow: 'auto',\n  padding: 0,\n  overflowX: 'hidden'\n});\n\n/**\n * @private\n */\nexport const captionContainerClassName = mergeStyles({\n  marginTop: _pxToRem(6),\n  marginBottom: _pxToRem(6),\n  textAlign: 'unset',\n  // ensure RTL spoken language captions are appropriately aligned to the right\n  overflowAnchor: 'auto'\n});\n\n/** Reset styling set by the `ul` element */\nconst resetUlStyling = {\n  listStyleType: 'none',\n  padding: 0,\n  margin: 0\n};\n\n/**\n * @private\n */\nexport const captionsBannerClassName = (formFactor: 'default' | 'compact', isExpanded?: boolean): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    height: formFactor === 'compact' ? isExpanded ? '40vh' : '4.5rem' : '8.75rem',\n    overflowY: 'auto'\n  });\n};\n\n/**\n * @private\n */\nexport const captionsBannerFullHeightClassName = (theme: ITheme): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    height: '100%',\n    width: '100%',\n    position: 'absolute',\n    backgroundColor: theme.palette.white,\n    left: 0\n  });\n};\n\n/**\n * @private\n */\nexport const loadingBannerStyles = (formFactor: 'default' | 'compact'): IStackStyles => {\n  return {\n    root: {\n      height: formFactor === 'compact' ? '4.5rem' : '8.75rem'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const loadingBannerFullHeightStyles = (theme: ITheme): IStackStyles => {\n  return {\n    root: {\n      height: '100%',\n      width: '100%',\n      position: 'absolute',\n      left: 0,\n      backgroundColor: theme.palette.white\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const captionsContentContainerClassName = mergeStyles({\n  width: '100%',\n  paddingInlineEnd: _pxToRem(4)\n});\n\n/**\n * @private\n */\nexport const displayNameContainerClassName = mergeStyles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis'\n});"]}
+{"version":3,"file":"Captions.style.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/Captions.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, ITheme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n/**\n * @private\n */\nexport const iconClassName = mergeStyles({\n  marginRight: _pxToRem(8)\n});\n\n/**\n * @private\n */\nexport const displayNameClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(12),\n  lineHeight: _pxToRem(16)\n});\n/**\n * @private\n */\nexport const captionClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(16),\n  lineHeight: _pxToRem(22),\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const captionsContainerClassName = mergeStyles({\n  height: '100%',\n  margin: 0,\n  overflow: 'auto',\n  padding: 0,\n  overflowX: 'hidden'\n});\n\n/**\n * @private\n */\nexport const captionContainerClassName = mergeStyles({\n  marginTop: _pxToRem(6),\n  marginBottom: _pxToRem(6),\n  textAlign: 'unset',\n  // ensure RTL spoken language captions are appropriately aligned to the right\n  overflowAnchor: 'auto'\n});\n\n/** Reset styling set by the `ul` element */\nconst resetUlStyling = {\n  listStyleType: 'none',\n  padding: 0,\n  margin: 0\n};\n\n/**\n * @private\n */\nexport const captionsBannerClassName = (formFactor: 'default' | 'compact', isExpanded?: boolean): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    height: formFactor === 'compact' ? isExpanded ? '40vh' : '4.5rem' : '8.75rem',\n    overflowY: 'auto'\n  });\n};\n\n/**\n * @private\n */\nexport const captionsBannerFullHeightClassName = (theme: ITheme): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    height: '100%',\n    width: '100%',\n    position: 'absolute',\n    backgroundColor: theme.palette.white,\n    left: 0\n  });\n};\n\n/**\n * @private\n */\nexport const loadingBannerStyles = (formFactor: 'default' | 'compact'): IStackStyles => {\n  return {\n    root: {\n      height: formFactor === 'compact' ? '4.5rem' : '8.75rem'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const loadingBannerFullHeightStyles = (theme: ITheme): IStackStyles => {\n  return {\n    root: {\n      height: '100%',\n      width: '100%',\n      position: 'absolute',\n      left: 0,\n      backgroundColor: theme.palette.white\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const captionsContentContainerClassName = mergeStyles({\n  width: '100%',\n  paddingInlineEnd: _pxToRem(4)\n});\n\n/**\n * @private\n */\nexport const displayNameContainerClassName = mergeStyles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis'\n});"]}

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

@@ -28,7 +28,7 @@ export declare const useChatMessageRenderStyles: () => Record<"rootCommon" | "ro
 /**
  * @private
  */
-export declare const useChatMyMessageStyles: () => Record<"body" | "menu" | "root" | "menuHidden" | "bodyWithPlaceholderImage" | "bodyAttached" | "menuVisible" | "multipleAttachmentsInViewing" | "multipleAttachmentsInEditing", string>;
+export declare const useChatMyMessageStyles: () => Record<"body" | "menu" | "root" | "bodyAttached" | "menuHidden" | "menuVisible" | "multipleAttachmentsInViewing" | "multipleAttachmentsInEditing", string>;
 /**
  * @private
  */
@@ -40,11 +40,11 @@ export declare const chatMessageDateStyle: CSSProperties;
 /**
  * @private
  */
-export declare const useChatMessageStyles: () => Record<"body" | "root" | "multipleAttachments" | "bodyWithoutAvatar" | "bodyWithAvatar" | "avatarNoOverlap" | "avatarOverlap", string>;
+export declare const useChatMessageStyles: () => Record<"body" | "root" | "bodyWithoutAvatar" | "bodyWithAvatar" | "avatarNoOverlap" | "avatarOverlap" | "multipleAttachments", string>;
 /**
  * @private
  */
-export declare const useChatMessageCommonStyles: () => Record<"body" | "failed" | "blocked" | "bodyWithPlaceholderImage", string>;
+export declare const useChatMessageCommonStyles: () => Record<"failed" | "body" | "bodyWithPlaceholderImage" | "blocked", string>;
 /**
  * @private
  */

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

@@ -130,14 +130,6 @@ export const useChatMyMessageStyles = makeStyles({
             maxWidth: '100%',
             height: 'auto'
         } }),
-    bodyWithPlaceholderImage: {
-        // Adding width and height to the placeholder image only for myMessages
-        // because inline images sent from ACS doesn't have width and height in the image tag
-        '& img[src=""]': {
-            width: '12rem',
-            height: '12rem'
-        }
-    },
     bodyAttached: {
         marginTop: '0.125rem'
     },

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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 { BROKEN_IMAGE_SVG_DATA } 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 chatMyMessageActionMenuClassName = 'ChatMyMessage__actions';\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    '& 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    gridTemplateColumns: 'auto',\n    gridTemplateAreas: `\n        \"body\"\n      `,\n    gridGap: '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    '&:hover .ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus .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    '& img': {\n      maxWidth: '100%',\n      height: 'auto'\n    }\n  },\n  bodyWithPlaceholderImage: {\n    // Adding width and height to the placeholder image only for myMessages\n    // because inline images sent from ACS doesn't have width and height in the image tag\n    '& img[src=\"\"]': {\n      width: '12rem',\n      height: '12rem'\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    position: 'absolute',\n    top: '-19px',\n    right: '0',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    zIndex: 1,\n    lineHeight: tokens.lineHeightBase100,\n    visibility: 'hidden',\n    '&:hover, &:focus': {\n      cursor: 'pointer',\n      visibility: 'visible'\n    }\n  },\n  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  },\n  multipleAttachmentsInViewing: {\n    width: '100%',\n    maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  },\n  multipleAttachmentsInEditing: {\n    // when in editing state, the chat message width should not be\n    // limited by content length but occupying the full width instead\n    width: '100%',\n    float: 'right'\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',\n      // 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',\n      // 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  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      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      // this ensures safari won't have default rendering when image source\n      // becomes invalid such as empty string in this case\n      fontSize: '0',\n      position: 'relative',\n      clipPath: 'inset(0.3px)',\n      display: 'flex'\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      ...shorthands.outline('1px', 'solid', tokens.colorNeutralForegroundDisabled),\n      backgroundColor: tokens.colorNeutralBackground2\n    },\n    '& .broken-image-wrapper:after': {\n      content: `''`,\n      maskImage: `url(\"${BROKEN_IMAGE_SVG_DATA}\");`,\n      width: '3rem',\n      height: '3rem',\n      backgroundColor: `${tokens.colorNeutralForeground2}`\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    // 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    '& 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    '& 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': {\n    background: 'none'\n  },\n  '&:active': {\n    background: 'none'\n  }\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\n/** @private */\nexport const messageTextContentStyles = mergeStyles({\n  whiteSpace: 'pre-wrap'\n});"]}
+{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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 { BROKEN_IMAGE_SVG_DATA } 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 chatMyMessageActionMenuClassName = 'ChatMyMessage__actions';\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    '& 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    gridTemplateColumns: 'auto',\n    gridTemplateAreas: `\n        \"body\"\n      `,\n    gridGap: '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    '&:hover .ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus .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    '& img': {\n      maxWidth: '100%',\n      height: 'auto'\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    position: 'absolute',\n    top: '-19px',\n    right: '0',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    zIndex: 1,\n    lineHeight: tokens.lineHeightBase100,\n    visibility: 'hidden',\n    '&:hover, &:focus': {\n      cursor: 'pointer',\n      visibility: 'visible'\n    }\n  },\n  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  },\n  multipleAttachmentsInViewing: {\n    width: '100%',\n    maxWidth: `${(_ATTACHMENT_CARD_WIDTH_IN_REM + _ATTACHMENT_CARD_MARGIN_IN_PX) * 2}rem`\n  },\n  multipleAttachmentsInEditing: {\n    // when in editing state, the chat message width should not be\n    // limited by content length but occupying the full width instead\n    width: '100%',\n    float: 'right'\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',\n      // 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',\n      // 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  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      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStrokeAccessible}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\n    }\n  },\n  bodyWithPlaceholderImage: {\n    '& img[src=\"\"]': {\n      backgroundColor: tokens.colorNeutralBackground1Selected,\n      // this ensures safari won't have default rendering when image source\n      // becomes invalid such as empty string in this case\n      fontSize: '0',\n      position: 'relative',\n      clipPath: 'inset(0.3px)',\n      display: 'flex'\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      ...shorthands.outline('1px', 'solid', tokens.colorNeutralForegroundDisabled),\n      backgroundColor: tokens.colorNeutralBackground2\n    },\n    '& .broken-image-wrapper:after': {\n      content: `''`,\n      maskImage: `url(\"${BROKEN_IMAGE_SVG_DATA}\");`,\n      width: '3rem',\n      height: '3rem',\n      backgroundColor: `${tokens.colorNeutralForeground2}`\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    // 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    '& 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    '& 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': {\n    background: 'none'\n  },\n  '&:active': {\n    background: 'none'\n  }\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\n/** @private */\nexport const messageTextContentStyles = mergeStyles({\n  whiteSpace: 'pre-wrap'\n});"]}

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

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-import { AttachmentMetadata } from "../../../../acs-ui-common/src";
-import { ChatMessage } from '../../types';
 /**
  * @private
  */
@@ -13,40 +11,6 @@ type MessageState = 'OK' | 'too short' | 'too long';
 /**
  * @private
  */
-export declare function getMessageState(messageText: string, attachments: AttachmentMetadata[]): MessageState;
-/**
- * @private
- * @TODO: Remove when file-sharing feature becomes stable.
- */
-export declare function getMessageWithAttachmentMetadata(message: ChatMessage): AttachmentMetadata[] | undefined;
-/**
- * @private
- */
-interface Action {
-    type: string;
-}
-/**
- * Currently `Actions` only have one action which is to remove.
- * But in the future, we may have more actions like `add`, `update`, etc.
- * And this action would be a uinon of all those actions.
- * i.e. `type Actions = RemoveAction | AddAction | UpdateAction;`
- * @private
- */
-type Actions = RemoveAction;
-/**
- * @private
- */
-interface RemoveAction extends Action {
-    type: 'remove';
-    id: string;
-}
-/**
- * @internal
- */
-export declare const attachmentMetadataReducer: (state: AttachmentMetadata[], action: Actions) => AttachmentMetadata[];
-/**
- * @internal
- */
-export declare const doesMessageContainMultipleAttachments: (message: ChatMessage) => boolean;
+export declare function getMessageState(messageText: string): MessageState;
 export {};
 //# sourceMappingURL=ChatMessageComponentAsEditBoxUtils.d.ts.map

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

@@ -15,40 +15,13 @@ export const onRenderCancelIcon = (className) => {
 export const onRenderSubmitIcon = (className) => {
     return React.createElement(Icon, { iconName: 'EditBoxSubmit', className: className });
 };
-function isMessageEmpty(messageText, attachmentMetadata) {
-    return messageText.trim().length === 0 && (attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.length) === 0;
+function isMessageEmpty(messageText) {
     return messageText.trim().length === 0;
 }
 /**
  * @private
  */
-export function getMessageState(messageText, attachments) {
-    return isMessageEmpty(messageText, attachments) ? 'too short' : isMessageTooLong(messageText.length) ? 'too long' : 'OK';
+export function getMessageState(messageText) {
+    return isMessageEmpty(messageText) ? 'too short' : isMessageTooLong(messageText.length) ? 'too long' : 'OK';
 }
-/**
- * @private
- * @TODO: Remove when file-sharing feature becomes stable.
- */
-export function getMessageWithAttachmentMetadata(message) {
-    return message.attachments;
-}
-/**
- * @internal
- */
-export const attachmentMetadataReducer = (state, action) => {
-    switch (action.type) {
-        case 'remove':
-            return state.filter(v => v.id !== action.id);
-        default:
-            return state;
-    }
-};
-/**
- * @internal
- */
-export const doesMessageContainMultipleAttachments = (message) => {
-    var _a, _b;
-    const length = (_b = (_a = message.attachments) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-    return length > 1;
-};
 //# sourceMappingURL=ChatMessageComponentAsEditBoxUtils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsEditBoxUtils.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/utils/ChatMessageComponentAsEditBoxUtils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAe,EAAE;IACnE,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AACnE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAe,EAAE;IACnE,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AACnE,CAAC,CAAC;AAEF,SAAS,cAAc,CAAC,WAAmB,EAAE,kBAAyC;IACpF,OAAO,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,IAAI,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,MAAK,CAAC,CAAC;IAC3E,OAAO,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;AACzC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,WAAmB,EAAE,WAAiC;IACpF,OAAO,cAAc,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;AAC3H,CAAC;AACD;;;GAGG;AACH,MAAM,UAAU,gCAAgC,CAAC,OAAoB;IACnE,OAAO,OAAO,CAAC,WAAW,CAAC;AAC7B,CAAC;AAsBD;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAA2B,EAAE,MAAe,EAAwB,EAAE;IAC9G,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;QACpB,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;QAC/C;YACE,OAAO,KAAK,CAAC;IACjB,CAAC;AACH,CAAC,CAAC;AACF;;GAEG;AACH,MAAM,CAAC,MAAM,qCAAqC,GAAG,CAAC,OAAoB,EAAW,EAAE;;IACrF,MAAM,MAAM,GAAG,MAAA,MAAA,OAAO,CAAC,WAAW,0CAAE,MAAM,mCAAI,CAAC,CAAC;IAChD,OAAO,MAAM,GAAG,CAAC,CAAC;AACpB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { Icon } from '@fluentui/react';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { isMessageTooLong } from './SendBoxUtils';\nimport { ChatMessage } from '../../types';\n\n/**\n * @private\n */\nexport const onRenderCancelIcon = (className: string): JSX.Element => {\n  return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\n\n/**\n * @private\n */\nexport const onRenderSubmitIcon = (className: string): JSX.Element => {\n  return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\ntype MessageState = 'OK' | 'too short' | 'too long';\nfunction isMessageEmpty(messageText: string, attachmentMetadata?: AttachmentMetadata[]): boolean {\n  return messageText.trim().length === 0 && attachmentMetadata?.length === 0;\n  return messageText.trim().length === 0;\n}\n\n/**\n * @private\n */\nexport function getMessageState(messageText: string, attachments: AttachmentMetadata[]): MessageState {\n  return isMessageEmpty(messageText, attachments) ? 'too short' : isMessageTooLong(messageText.length) ? 'too long' : 'OK';\n}\n/**\n * @private\n * @TODO: Remove when file-sharing feature becomes stable.\n */\nexport function getMessageWithAttachmentMetadata(message: ChatMessage): AttachmentMetadata[] | undefined {\n  return message.attachments;\n}\n/**\n * @private\n */\ninterface Action {\n  type: string;\n}\n/**\n * Currently `Actions` only have one action which is to remove.\n * But in the future, we may have more actions like `add`, `update`, etc.\n * And this action would be a uinon of all those actions.\n * i.e. `type Actions = RemoveAction | AddAction | UpdateAction;`\n * @private\n */\ntype Actions = RemoveAction;\n/**\n * @private\n */\ninterface RemoveAction extends Action {\n  type: 'remove';\n  id: string;\n}\n/**\n * @internal\n */\nexport const attachmentMetadataReducer = (state: AttachmentMetadata[], action: Actions): AttachmentMetadata[] => {\n  switch (action.type) {\n    case 'remove':\n      return state.filter(v => v.id !== action.id);\n    default:\n      return state;\n  }\n};\n/**\n * @internal\n */\nexport const doesMessageContainMultipleAttachments = (message: ChatMessage): boolean => {\n  const length = message.attachments?.length ?? 0;\n  return length > 1;\n};"]}
+{"version":3,"file":"ChatMessageComponentAsEditBoxUtils.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/utils/ChatMessageComponentAsEditBoxUtils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAe,EAAE;IACnE,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AACnE,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAe,EAAE;IACnE,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AACnE,CAAC,CAAC;AAEF,SAAS,cAAc,CAAC,WAAmB;IACzC,OAAO,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;AACzC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,WAAmB;IACjD,OAAO,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;AAC9G,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { Icon } from '@fluentui/react';\nimport { isMessageTooLong } from './SendBoxUtils';\n/**\n * @private\n */\nexport const onRenderCancelIcon = (className: string): JSX.Element => {\n  return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\n\n/**\n * @private\n */\nexport const onRenderSubmitIcon = (className: string): JSX.Element => {\n  return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\ntype MessageState = 'OK' | 'too short' | 'too long';\nfunction isMessageEmpty(messageText: string): boolean {\n  return messageText.trim().length === 0;\n}\n\n/**\n * @private\n */\nexport function getMessageState(messageText: string): MessageState {\n  return isMessageEmpty(messageText) ? 'too short' : isMessageTooLong(messageText.length) ? 'too long' : 'OK';\n}"]}

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

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 import { ChatMessage, MessageAttachedStatus } from '../../types/ChatMessage';
-import { BlockedMessage } from '../../types/ChatMessage';
 import { InlineImageOptions } from '../ChatMessage/ChatMessageContent';
 import { MessageThreadStrings } from '../MessageThread';
-import { MentionDisplayOptions } from '../MentionPopover';
 import { AttachmentMenuAction } from '../../types/Attachment';
 import { AttachmentMetadata } from "../../../../acs-ui-common/src";
 import { ComponentLocale } from '../../localization/LocalizationProvider';
@@ -17,7 +15,7 @@ export declare const getFluentUIAttachedValue: (messageAttachedStatus?: MessageA
  * @private
  *  Get the message bubble content for the message.
  */
-export declare function getMessageBubbleContent(message: ChatMessage | BlockedMessage, strings: MessageThreadStrings, userId: string, inlineImageOptions: InlineImageOptions | undefined, mentionDisplayOptions?: MentionDisplayOptions, 
+export declare function getMessageBubbleContent(message: ChatMessage, strings: MessageThreadStrings, userId: string, inlineImageOptions: InlineImageOptions | undefined, 
 /**
  * Optional callback to render message attachments in the message component.
  */
@@ -34,7 +32,7 @@ export declare const generateCustomizedTimestamp: (createdOn: Date, locale: Comp
  * @private
  *  Get the edited tag for the message if it is edited.
  */
-export declare const getMessageEditedDetails: (message: ChatMessage | BlockedMessage, theme: Theme, editedTag: string) => JSX.Element | undefined;
+export declare const getMessageEditedDetails: (message: ChatMessage, theme: Theme, editedTag: string) => JSX.Element | undefined;
 /**
  * Removes Fluent UI keyboard navigation styles from the given HTMLDivElement.
  *

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

@@ -2,7 +2,6 @@
 // Licensed under the MIT License.
 import React from 'react';
 import { ChatMessageContent } from '../ChatMessage/ChatMessageContent';
-import { BlockedMessageContent } from '../ChatMessage/ChatMessageContent';
 import { _AttachmentDownloadCards } from '../Attachment/AttachmentDownloadCards';
 import { formatTimeForChatMessage, formatTimestampForChatMessage } from './Datetime';
 import { chatMessageEditedTagStyle } from '../styles/ChatMessageComponent.styles';
@@ -17,7 +16,7 @@ export const getFluentUIAttachedValue = (messageAttachedStatus) => {
  * @private
  *  Get the message bubble content for the message.
  */
-export function getMessageBubbleContent(message, strings, userId, inlineImageOptions, mentionDisplayOptions, 
+export function getMessageBubbleContent(message, strings, userId, inlineImageOptions, 
 /**
  * Optional callback to render message attachments in the message component.
  */
@@ -26,12 +25,8 @@ onRenderAttachmentDownloads,
  * Optional callback to define custom actions for attachments.
  */
 actionsForAttachment) {
-    if (message.messageType === 'blocked') {
-        return React.createElement("div", { tabIndex: 0 },
-            React.createElement(BlockedMessageContent, { message: message, strings: strings }));
-    }
     return React.createElement("div", { className: "ui-chat__message__content" },
-        React.createElement(ChatMessageContent, { message: message, strings: strings, mentionDisplayOptions: mentionDisplayOptions, inlineImageOptions: inlineImageOptions }),
+        React.createElement(ChatMessageContent, { message: message, strings: strings, inlineImageOptions: inlineImageOptions }),
         onRenderAttachmentDownloads ? onRenderAttachmentDownloads(message) : defaultOnRenderAttachmentDownloads(message, strings, actionsForAttachment));
 }
 /**
@@ -41,7 +36,6 @@ const defaultOnRenderAttachmentDownloads = (message, strings, actionsForAttachme
     var _a;
     const attachments = 'attachments' in message ? message.attachments : undefined;
     return ((_a = attachments === null || attachments === void 0 ? void 0 : attachments.length) !== null && _a !== void 0 ? _a : 0) > 0 ? React.createElement(_AttachmentDownloadCards, { message: message, attachments: attachments, actionsForAttachment: actionsForAttachment, strings: {
-            downloadAttachment: strings.downloadAttachment,
             openAttachment: strings.openAttachment,
             attachmentCardGroupMessage: strings.attachmentCardGroupMessage
         } }) : React.createElement(React.Fragment, null);
@@ -54,7 +48,6 @@ export const generateDefaultTimestamp = (createdOn, showDate, strings) => {
 // onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale
 /** @private */
 export const generateCustomizedTimestamp = (createdOn, locale, onDisplayDateTimeString) => {
-    return onDisplayDateTimeString ? onDisplayDateTimeString(createdOn) : locale.onDisplayDateTimeString ? locale.onDisplayDateTimeString(createdOn) : '';
     return '';
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentUtils.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/utils/ChatMessageComponentUtils.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { ChatMessage, MessageAttachedStatus } from '../../types/ChatMessage';\nimport { ChatMessageContent } from '../ChatMessage/ChatMessageContent';\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { BlockedMessageContent } from '../ChatMessage/ChatMessageContent';\nimport { InlineImageOptions } from '../ChatMessage/ChatMessageContent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { MentionDisplayOptions } from '../MentionPopover';\nimport { _AttachmentDownloadCards } from '../Attachment/AttachmentDownloadCards';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from './Datetime';\nimport { ComponentLocale } from '../../localization/LocalizationProvider';\nimport { chatMessageEditedTagStyle } from '../styles/ChatMessageComponent.styles';\nimport { Theme } from '@fluentui/react';\n\n/** @private\n * Return the string value for the FluentUI message attached prop based on the message's attached status.\n * @param attached - The message's attached status.\n */\nexport const getFluentUIAttachedValue = (messageAttachedStatus?: MessageAttachedStatus): 'bottom' | 'top' | 'center' | undefined => {\n  return messageAttachedStatus === 'top' || messageAttachedStatus === false ? 'top' : 'center';\n};\n\n/**\n * @private\n *  Get the message bubble content for the message.\n */\nexport function getMessageBubbleContent(message: ChatMessage | BlockedMessage, strings: MessageThreadStrings, userId: string, inlineImageOptions: InlineImageOptions | undefined, mentionDisplayOptions?: MentionDisplayOptions,\n/**\n * Optional callback to render message attachments in the message component.\n */\nonRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element,\n/**\n * Optional callback to define custom actions for attachments.\n */\nactionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]): JSX.Element {\n  if (message.messageType === 'blocked') {\n    return <div tabIndex={0}>\n        <BlockedMessageContent message={message} strings={strings} />\n      </div>;\n  }\n  return <div className=\"ui-chat__message__content\">\n      <ChatMessageContent message={message} strings={strings} mentionDisplayOptions={mentionDisplayOptions} inlineImageOptions={inlineImageOptions} />\n      {onRenderAttachmentDownloads ? onRenderAttachmentDownloads(message) : defaultOnRenderAttachmentDownloads(message, strings, actionsForAttachment)}\n    </div>;\n}\n\n/**\n * Default component for rendering attachment downloads.\n */\nconst defaultOnRenderAttachmentDownloads = (message: ChatMessage | BlockedMessage, strings: MessageThreadStrings, actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]): JSX.Element | undefined => {\n  const attachments = 'attachments' in message ? message.attachments : undefined;\n  return (attachments?.length ?? 0) > 0 ? <_AttachmentDownloadCards message={message as ChatMessage} attachments={attachments} actionsForAttachment={actionsForAttachment} strings={{\n    downloadAttachment: strings.downloadAttachment,\n    openAttachment: strings.openAttachment,\n    attachmentCardGroupMessage: strings.attachmentCardGroupMessage\n  }} /> : <></>;\n};\n\n/** @private */\nexport const generateDefaultTimestamp = (createdOn: Date, showDate: boolean | undefined, strings: MessageThreadStrings): string => {\n  const formattedTimestamp = showDate ? formatTimestampForChatMessage(createdOn, new Date(), strings) : formatTimeForChatMessage(createdOn);\n  return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\n/** @private */\nexport const generateCustomizedTimestamp = (createdOn: Date, locale: ComponentLocale, onDisplayDateTimeString?: (messageDate: Date) => string): string => {\n  return onDisplayDateTimeString ? onDisplayDateTimeString(createdOn) : locale.onDisplayDateTimeString ? locale.onDisplayDateTimeString(createdOn) : '';\n  return '';\n};\n\n/**\n * @private\n *  Get the edited tag for the message if it is edited.\n */\nexport const getMessageEditedDetails = (message: ChatMessage | BlockedMessage, theme: Theme, editedTag: string): JSX.Element | undefined => {\n  const editedOn = 'editedOn' in message ? message.editedOn : undefined;\n  if (message.messageType === 'chat' && editedOn) {\n    return <div className={chatMessageEditedTagStyle(theme)}>{editedTag}</div>;\n  }\n  return undefined;\n};\n\n/**\n * Removes Fluent UI keyboard navigation styles from the given HTMLDivElement.\n *\n * This function removes the 'tabindex' and 'data-tabster' attributes from the provided\n * HTMLDivElement, making it non-focusable and removing any associated keyboard navigation styles.\n *\n * @param node - The HTMLDivElement from which to remove the keyboard navigation styles. If null, the function does nothing.\n */\nexport const removeFluentUIKeyboardNavigationStyles = (node: HTMLDivElement | null): void => {\n  if (node) {\n    // Remove tabindex to make the div element non-focusable\n    node.removeAttribute('tabindex');\n    node.removeAttribute('data-tabster');\n  }\n};"]}
+{"version":3,"file":"ChatMessageComponentUtils.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/utils/ChatMessageComponentUtils.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { ChatMessage, MessageAttachedStatus } from '../../types/ChatMessage';\nimport { ChatMessageContent } from '../ChatMessage/ChatMessageContent';\nimport { InlineImageOptions } from '../ChatMessage/ChatMessageContent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { _AttachmentDownloadCards } from '../Attachment/AttachmentDownloadCards';\nimport { AttachmentMenuAction } from '../../types/Attachment';\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { formatTimeForChatMessage, formatTimestampForChatMessage } from './Datetime';\nimport { ComponentLocale } from '../../localization/LocalizationProvider';\nimport { chatMessageEditedTagStyle } from '../styles/ChatMessageComponent.styles';\nimport { Theme } from '@fluentui/react';\n\n/** @private\n * Return the string value for the FluentUI message attached prop based on the message's attached status.\n * @param attached - The message's attached status.\n */\nexport const getFluentUIAttachedValue = (messageAttachedStatus?: MessageAttachedStatus): 'bottom' | 'top' | 'center' | undefined => {\n  return messageAttachedStatus === 'top' || messageAttachedStatus === false ? 'top' : 'center';\n};\n\n/**\n * @private\n *  Get the message bubble content for the message.\n */\nexport function getMessageBubbleContent(message: ChatMessage, strings: MessageThreadStrings, userId: string, inlineImageOptions: InlineImageOptions | undefined,\n/**\n * Optional callback to render message attachments in the message component.\n */\nonRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element,\n/**\n * Optional callback to define custom actions for attachments.\n */\nactionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]): JSX.Element {\n  return <div className=\"ui-chat__message__content\">\n      <ChatMessageContent message={message} strings={strings} inlineImageOptions={inlineImageOptions} />\n      {onRenderAttachmentDownloads ? onRenderAttachmentDownloads(message) : defaultOnRenderAttachmentDownloads(message, strings, actionsForAttachment)}\n    </div>;\n}\n\n/**\n * Default component for rendering attachment downloads.\n */\nconst defaultOnRenderAttachmentDownloads = (message: ChatMessage, strings: MessageThreadStrings, actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]): JSX.Element | undefined => {\n  const attachments = 'attachments' in message ? message.attachments : undefined;\n  return (attachments?.length ?? 0) > 0 ? <_AttachmentDownloadCards message={message as ChatMessage} attachments={attachments} actionsForAttachment={actionsForAttachment} strings={{\n    openAttachment: strings.openAttachment,\n    attachmentCardGroupMessage: strings.attachmentCardGroupMessage\n  }} /> : <></>;\n};\n\n/** @private */\nexport const generateDefaultTimestamp = (createdOn: Date, showDate: boolean | undefined, strings: MessageThreadStrings): string => {\n  const formattedTimestamp = showDate ? formatTimestampForChatMessage(createdOn, new Date(), strings) : formatTimeForChatMessage(createdOn);\n  return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\n/** @private */\nexport const generateCustomizedTimestamp = (createdOn: Date, locale: ComponentLocale, onDisplayDateTimeString?: (messageDate: Date) => string): string => {\n  return '';\n};\n\n/**\n * @private\n *  Get the edited tag for the message if it is edited.\n */\nexport const getMessageEditedDetails = (message: ChatMessage, theme: Theme, editedTag: string): JSX.Element | undefined => {\n  const editedOn = 'editedOn' in message ? message.editedOn : undefined;\n  if (message.messageType === 'chat' && editedOn) {\n    return <div className={chatMessageEditedTagStyle(theme)}>{editedTag}</div>;\n  }\n  return undefined;\n};\n\n/**\n * Removes Fluent UI keyboard navigation styles from the given HTMLDivElement.\n *\n * This function removes the 'tabindex' and 'data-tabster' attributes from the provided\n * HTMLDivElement, making it non-focusable and removing any associated keyboard navigation styles.\n *\n * @param node - The HTMLDivElement from which to remove the keyboard navigation styles. If null, the function does nothing.\n */\nexport const removeFluentUIKeyboardNavigationStyles = (node: HTMLDivElement | null): void => {\n  if (node) {\n    // Remove tabindex to make the div element non-focusable\n    node.removeAttribute('tabindex');\n    node.removeAttribute('data-tabster');\n  }\n};"]}

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

@@ -1,31 +1,7 @@
-import { AttachmentMetadataInProgress } from "../../../../acs-ui-common/src";
-import { AttachmentMetadata } from "../../../../acs-ui-common/src";
 /**
  * @private
  */
 export declare const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
-/**
- * @private
- */
-export declare const hasIncompleteAttachmentUploads: (attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => boolean;
-/**
- * @private
- */
-export declare const isAttachmentUploadCompleted: (attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => boolean;
-/**
- * Check if the content has inline image.
- * @internal
- */
-export declare const hasInlineImageContent: (content: string) => boolean;
-/**
- * @internal
- *
- * @param message - The message content to update.
- * @param initialInlineImages - The initial inline images that comes with the message before editing.
- *
- * @returns The updated message content.
- */
-export declare const updateStylesOfInlineImages: (message: string, initialInlineImages: Record<string, string>[]) => Promise<string>;
 /**
  * @private
  */
@@ -43,26 +19,13 @@ export declare const sanitizeText: (message: string) => string;
  * @param disabled - Indicates whether the send box is disabled.
  * @returns A boolean value indicating whether the send box should be disabled.
  */
-export declare const isSendBoxButtonDisabled: ({ hasContent, hasCompletedAttachmentUploads, hasError, disabled }: {
+export declare const isSendBoxButtonDisabled: ({ hasContent, hasError, disabled }: {
     hasContent: boolean;
-    hasCompletedAttachmentUploads: boolean;
     hasError: boolean;
     disabled: boolean;
 }) => boolean;
-/**
- * @internal
- */
-export declare const toAttachmentMetadata: (attachmentsWithProgress: AttachmentMetadataInProgress[] | undefined) => AttachmentMetadata[] | undefined;
 /**
  * @internal
  */
 export declare const modifyInlineImagesInContentString: (content: string, initialInlineImages: Record<string, string>[], onCompleted?: (content: string) => void) => Promise<void>;
-/**
- * @internal
- */
-export declare const removeBrokenImageContentAndClearImageSizeStyles: (content: string) => string;
-/**
- * @internal
- */
-export declare const getContentWithUpdatedInlineImagesInfo: (content: string, inlineImageWithProgress: AttachmentMetadataInProgress[]) => string;
 //# sourceMappingURL=SendBoxUtils.d.ts.map