@azure/communication-react 1.23.0 → 1.24.0-alpha-202501282341

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

@@ -1 +1 @@
-{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStyle, mergeStyles, Theme, ITheme, ISpinnerStyles } from '@fluentui/react';\nimport { keyframes, memoizeFunction } from '@fluentui/react';\nimport { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS } from '../VideoGallery/utils/reactionUtils';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/** @private */\nexport const videoTileHighContrastStyles = (theme: ITheme): IStyle => ({\n  '@media (forced-colors: active)': {\n    border: `0.125rem solid ${theme.palette.black}`\n  }\n});\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0',\n  left: '0',\n  padding: '0.5rem',\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const pinIconStyle: IStyle = {\n  padding: '0.125rem'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle: IStyle = {\n  margin: 'auto 0.2rem',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block',\n    // Similar to text color, icon color will be inherited from parent container\n    color: 'inherit'\n  }\n};\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (theme: Theme): IStyle => {\n  return {\n    minWidth: 'max-content',\n    color: theme.palette.black,\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.1rem'\n  };\n};\n\n/**\n * @private\n */\nexport const moreButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      // To ensure that the button is clickable when there is a floating video tile\n      zIndex: 1,\n      top: '-0.125rem',\n      height: '100%',\n      padding: '0rem'\n    },\n    rootHovered: {\n      background: 'none'\n    },\n    rootPressed: {\n      background: 'none'\n    },\n    icon: {\n      color: theme.palette.neutralPrimary\n    },\n    iconExpanded: {\n      background: 'none',\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const raiseHandContainerStyles = (theme: ITheme, limitedSpace: boolean): string => mergeStyles({\n  alignItems: 'center',\n  padding: '0.2rem 0.3rem',\n  backgroundColor: theme.palette.white,\n  opacity: 0.9,\n  borderRadius: '1rem',\n  margin: '0.5rem',\n  width: 'fit-content',\n  position: 'absolute',\n  top: 0,\n  height: 'fit-content'\n}, limitedSpace && raiseHandLimitedSpaceStyles);\n\n/**\n * @private\n */\nexport const raiseHandLimitedSpaceStyles: IStyle = {\n  // position centrally\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  left: 0,\n  right: 0,\n  // position at the bottom\n  bottom: 0\n};\n\n/**\n * @private\n */\nexport const playFrames = memoizeFunction((frameHightPx: number, frameCount: number) => keyframes({\n  from: {\n    backgroundPosition: `0px 0px`\n  },\n  to: {\n    backgroundPosition: `0px ${frameCount * -frameHightPx}px`\n  }\n}));\n\n/**\n * @private\n */\nexport const reactionRenderingStyle = (args: {\n  spriteImageUrl: string;\n  emojiSize: number;\n  rawFrameSize: number;\n  frameCount: number;\n}): string => {\n  const imageUrl = `url(${args.spriteImageUrl})`;\n  const steps = args.frameCount ?? 0;\n  const frameSizePx = args.rawFrameSize;\n  return mergeStyles({\n    height: `${frameSizePx}px`,\n    width: `${frameSizePx}px`,\n    overflow: 'hidden',\n    animationName: playFrames(frameSizePx, steps),\n    backgroundImage: imageUrl,\n    animationDuration: `${REACTION_SCREEN_SHARE_ANIMATION_TIME_MS / 1000}s`,\n    animationTimingFunction: `steps(${steps})`,\n    animationPlayState: 'running',\n    animationIterationCount: 'infinite',\n    // Scale the emoji to fit the parent container\n    transform: `scale(${args.emojiSize / frameSizePx})`,\n    transformOrigin: 'top left'\n  });\n};\n\n/**\n * @private\n */\nexport const loadSpinnerStyles = (theme: ITheme, isOverLay: boolean): ISpinnerStyles => {\n  return {\n    circle: {\n      width: '2rem',\n      height: '2rem'\n    },\n    label: {\n      fontSize: '1rem',\n      color: isOverLay ? isDarkThemed(theme) ? theme.palette.black : theme.palette.white : theme.palette.themeDarkAlt\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.3)'\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStylesTransparent = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center'\n  };\n};\n\n/**\n * @private\n */\nexport const iconsGroupContainerStyle: IStyle = {\n  marginLeft: '0.2rem'\n};"]}
+{"version":3,"file":"VideoTile.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/VideoTile.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, IStyle, mergeStyles, Theme, ITheme, ISpinnerStyles } from '@fluentui/react';\nimport { keyframes, memoizeFunction } from '@fluentui/react';\nimport { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS } from '../VideoGallery/utils/reactionUtils';\nimport { isDarkThemed } from '../../theming/themeUtils';\n\n/**\n * @private\n */\nexport const rootStyles: IStyle = {\n  position: 'relative',\n  height: '100%',\n  width: '100%'\n};\n\n/** @private */\nexport const videoTileHighContrastStyles = (theme: ITheme): IStyle => ({\n  '@media (forced-colors: active)': {\n    border: `0.125rem solid ${theme.palette.black}`\n  }\n});\n\n/**\n * @private\n */\nexport const videoContainerStyles: IStyle = {\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  width: '100%',\n  height: '100%',\n  minWidth: '100%',\n  minHeight: '100%',\n  objectPosition: 'center',\n  objectFit: 'cover',\n  zIndex: 0\n};\n\n/**\n * @private\n */\nexport const overlayContainerStyles: IStyle = {\n  width: '100%',\n  height: '100%',\n  zIndex: 5\n};\n\n/**\n * @private\n */\nexport const tileInfoContainerStyle = mergeStyles({\n  position: 'absolute',\n  bottom: '0',\n  left: '0',\n  padding: '0.5rem',\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const disabledVideoHint = mergeStyles({\n  backgroundColor: 'inherit',\n  boxShadow: 'none',\n  textAlign: 'left',\n  overflow: 'hidden',\n  whiteSpace: 'nowrap',\n  alignItems: 'center',\n  padding: '0.15rem',\n  maxWidth: '100%'\n});\n\n/**\n * @private\n */\nexport const displayNameStyle: IStyle = {\n  padding: '0.1rem',\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  // Text component will take body color by default (white in Dark Mode), so forcing it to be parent container color\n  color: 'inherit',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  maxWidth: '100%'\n};\n\n/**\n * @private\n */\nexport const pinIconStyle: IStyle = {\n  padding: '0.125rem'\n};\n\n/**\n * @private\n */\nexport const iconContainerStyle: IStyle = {\n  margin: 'auto 0.2rem',\n  alignItems: 'center',\n  '& svg': {\n    display: 'block',\n    // Similar to text color, icon color will be inherited from parent container\n    color: 'inherit'\n  }\n};\n\n/**\n * @private\n */\nexport const participantStateStringStyles = (theme: Theme): IStyle => {\n  return {\n    minWidth: 'max-content',\n    color: theme.palette.black,\n    fontSize: '0.75rem',\n    lineHeight: 'normal',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    padding: '0.1rem'\n  };\n};\n\n/**\n * @private\n */\nexport const moreButtonStyles = (theme: Theme): IButtonStyles => {\n  return {\n    root: {\n      // To ensure that the button is clickable when there is a floating video tile\n      zIndex: 1,\n      top: '-0.125rem',\n      height: '100%',\n      padding: '0rem'\n    },\n    rootHovered: {\n      background: 'none'\n    },\n    rootPressed: {\n      background: 'none'\n    },\n    icon: {\n      color: theme.palette.neutralPrimary\n    },\n    iconExpanded: {\n      background: 'none',\n      color: theme.palette.themePrimary\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const raiseHandContainerStyles = (theme: ITheme, limitedSpace: boolean): string =>\n  mergeStyles(\n    {\n      alignItems: 'center',\n      padding: '0.2rem 0.3rem',\n      backgroundColor: theme.palette.white,\n      opacity: 0.9,\n      borderRadius: '1rem',\n      margin: '0.5rem',\n      width: 'fit-content',\n      position: 'absolute',\n      top: 0,\n      height: 'fit-content'\n    },\n    limitedSpace && raiseHandLimitedSpaceStyles\n  );\n\n/**\n * @private\n */\nexport const raiseHandLimitedSpaceStyles: IStyle = {\n  // position centrally\n  marginLeft: 'auto',\n  marginRight: 'auto',\n  left: 0,\n  right: 0,\n  // position at the bottom\n  bottom: 0\n};\n\n/**\n * @private\n */\nexport const playFrames = memoizeFunction((frameHightPx: number, frameCount: number) =>\n  keyframes({\n    from: {\n      backgroundPosition: `0px 0px`\n    },\n    to: {\n      backgroundPosition: `0px ${frameCount * -frameHightPx}px`\n    }\n  })\n);\n\n/**\n * @private\n */\nexport const reactionRenderingStyle = (args: {\n  spriteImageUrl: string;\n  emojiSize: number;\n  rawFrameSize: number;\n  frameCount: number;\n}): string => {\n  const imageUrl = `url(${args.spriteImageUrl})`;\n  const steps = args.frameCount ?? 0;\n  const frameSizePx = args.rawFrameSize;\n  return mergeStyles({\n    height: `${frameSizePx}px`,\n    width: `${frameSizePx}px`,\n    overflow: 'hidden',\n    animationName: playFrames(frameSizePx, steps),\n    backgroundImage: imageUrl,\n    animationDuration: `${REACTION_SCREEN_SHARE_ANIMATION_TIME_MS / 1000}s`,\n    animationTimingFunction: `steps(${steps})`,\n    animationPlayState: 'running',\n    animationIterationCount: 'infinite',\n\n    // Scale the emoji to fit the parent container\n    transform: `scale(${args.emojiSize / frameSizePx})`,\n    transformOrigin: 'top left'\n  });\n};\n\n/**\n * @private\n */\nexport const loadSpinnerStyles = (theme: ITheme, isOverLay: boolean): ISpinnerStyles => {\n  return {\n    circle: {\n      width: '2rem',\n      height: '2rem'\n    },\n    label: {\n      fontSize: '1rem',\n      color: isOverLay ? (isDarkThemed(theme) ? theme.palette.black : theme.palette.white) : theme.palette.themeDarkAlt\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStyles = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'rgba(0, 0, 0, 0.3)'\n  };\n};\n\n/**\n * @private\n */\nexport const overlayStylesTransparent = (): IStyle => {\n  return {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center'\n  };\n};\n\n/**\n * @private\n */\nexport const iconsGroupContainerStyle: IStyle = {\n  marginLeft: '0.2rem'\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"v8StyleShim.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/styles/v8StyleShim.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CAAC,OAAmD;IACxF,MAAM,MAAM,GAER,EAAE,CAAC;IACP,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,OAAO,KAAK,SAAS,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAC7G,OAAO,SAAS,CAAC;IACnB,CAAC;SAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvC,4BAA4B;QAC5B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC7B,IAAI,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC;gBACxC,yCAAyC;gBACzC,MAAM,QAAQ,GAAG,IAAI,CAAC;gBACtB,IAAI,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAChC,mFAAmF;oBACnF,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;oBACvG,MAAM,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACtC,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,MAAM,CAAC,GAAG,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IRawStyle } from '@fluentui/react';\nimport { ComponentSlotStyle } from '../../types';\n\n/**\n * Function to create a React.CSSProperties object from a v8 style object.\n * This function is still not ideal\n * as v8Style can use pseudo-class selectors that style objects can't process correctly.\n *\n * @private\n */\nexport function createStyleFromV8Style(v8Style: IRawStyle | ComponentSlotStyle | undefined): React.CSSProperties | undefined {\n  const result: {\n    [key: string]: React.CSSProperties | undefined;\n  } = {};\n  if (v8Style === undefined || v8Style === null || typeof v8Style === 'boolean' || typeof v8Style === 'string') {\n    return undefined;\n  } else if (typeof v8Style === 'object') {\n    // v8Style is a style object\n    for (const record in v8Style) {\n      if (typeof v8Style[record] === 'string') {\n        // v8Style[record] is just a simple style\n        const msSuffix = 'MS';\n        if (record.startsWith(msSuffix)) {\n          // React.CSSProperties uses camelCase for MS properties but v8Style uses PascalCase\n          const newRecord = record.substring(0, msSuffix.length).toLowerCase + record.substring(msSuffix.length);\n          result[newRecord] = v8Style[record];\n        } else {\n          result[record] = v8Style[record];\n        }\n      } else {\n        result[record] = createStyleFromV8Style(v8Style[record]);\n      }\n    }\n  }\n  return result;\n}"]}
+{"version":3,"file":"v8StyleShim.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/v8StyleShim.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CACpC,OAAmD;IAEnD,MAAM,MAAM,GAAuD,EAAE,CAAC;IACtE,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,OAAO,KAAK,SAAS,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAC7G,OAAO,SAAS,CAAC;IACnB,CAAC;SAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QACvC,4BAA4B;QAC5B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC7B,IAAI,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC;gBACxC,yCAAyC;gBACzC,MAAM,QAAQ,GAAG,IAAI,CAAC;gBACtB,IAAI,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAChC,mFAAmF;oBACnF,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;oBACvG,MAAM,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACtC,CAAC;qBAAM,CAAC;oBACN,MAAM,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,MAAM,CAAC,GAAG,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IRawStyle } from '@fluentui/react';\nimport { ComponentSlotStyle } from '../../types';\n\n/**\n * Function to create a React.CSSProperties object from a v8 style object.\n * This function is still not ideal\n * as v8Style can use pseudo-class selectors that style objects can't process correctly.\n *\n * @private\n */\nexport function createStyleFromV8Style(\n  v8Style: IRawStyle | ComponentSlotStyle | undefined\n): React.CSSProperties | undefined {\n  const result: { [key: string]: React.CSSProperties | undefined } = {};\n  if (v8Style === undefined || v8Style === null || typeof v8Style === 'boolean' || typeof v8Style === 'string') {\n    return undefined;\n  } else if (typeof v8Style === 'object') {\n    // v8Style is a style object\n    for (const record in v8Style) {\n      if (typeof v8Style[record] === 'string') {\n        // v8Style[record] is just a simple style\n        const msSuffix = 'MS';\n        if (record.startsWith(msSuffix)) {\n          // React.CSSProperties uses camelCase for MS properties but v8Style uses PascalCase\n          const newRecord = record.substring(0, msSuffix.length).toLowerCase + record.substring(msSuffix.length);\n          result[newRecord] = v8Style[record];\n        } else {\n          result[record] = v8Style[record];\n        }\n      } else {\n        result[record] = createStyleFromV8Style(v8Style[record]);\n      }\n    }\n  }\n\n  return result;\n}\n"]}

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { AttachmentMetadata } from "../../../../acs-ui-common/src";
+import { ChatMessage } from '../../types';
 /**
  * @private
  */
@@ -11,6 +13,40 @@ type MessageState = 'OK' | 'too short' | 'too long';
 /**
  * @private
  */
-export declare function getMessageState(messageText: string): MessageState;
+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 {};
 //# sourceMappingURL=ChatMessageComponentAsEditBoxUtils.d.ts.map

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

@@ -15,13 +15,51 @@ export const onRenderCancelIcon = (className) => {
 export const onRenderSubmitIcon = (className) => {
     return React.createElement(Icon, { iconName: 'EditBoxSubmit', className: className });
 };
-function isMessageEmpty(messageText) {
+function isMessageEmpty(messageText, 
+/* @conditional-compile-remove(file-sharing-acs) */
+attachmentMetadata) {
+    /* @conditional-compile-remove(file-sharing-acs) */
+    return messageText.trim().length === 0 && (attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.length) === 0;
     return messageText.trim().length === 0;
 }
 /**
  * @private
  */
-export function getMessageState(messageText) {
-    return isMessageEmpty(messageText) ? 'too short' : isMessageTooLong(messageText.length) ? 'too long' : 'OK';
+export function getMessageState(messageText, 
+/* @conditional-compile-remove(file-sharing-acs) */ attachments) {
+    return isMessageEmpty(messageText, /* @conditional-compile-remove(file-sharing-acs) */ attachments)
+        ? 'too short'
+        : isMessageTooLong(messageText.length)
+            ? 'too long'
+            : 'OK';
 }
+/* @conditional-compile-remove(file-sharing-acs) */
+/**
+ * @private
+ * @TODO: Remove when file-sharing feature becomes stable.
+ */
+export function getMessageWithAttachmentMetadata(message) {
+    return message.attachments;
+}
+/* @conditional-compile-remove(file-sharing-acs) */
+/**
+ * @internal
+ */
+export const attachmentMetadataReducer = (state, action) => {
+    switch (action.type) {
+        case 'remove':
+            return state.filter((v) => v.id !== action.id);
+        default:
+            return state;
+    }
+};
+/* @conditional-compile-remove(file-sharing-acs) */
+/**
+ * @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;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}"]}
+{"version":3,"file":"ChatMessageComponentAsEditBoxUtils.js","sourceRoot":"","sources":["../../../../../../../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;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIlD;;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;AAIF,SAAS,cAAc,CACrB,WAAmB;AACnB,mDAAmD;AACnD,kBAAyC;IAEzC,mDAAmD;IACnD,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,CAC7B,WAAmB;AACnB,mDAAmD,CAAC,WAAiC;IAErF,OAAO,cAAc,CAAC,WAAW,EAAE,mDAAmD,CAAC,WAAW,CAAC;QACjG,CAAC,CAAC,WAAW;QACb,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC,MAAM,CAAC;YACpC,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,IAAI,CAAC;AACb,CAAC;AAED,mDAAmD;AACnD;;;GAGG;AACH,MAAM,UAAU,gCAAgC,CAAC,OAAoB;IACnE,OAAO,OAAO,CAAC,WAAW,CAAC;AAC7B,CAAC;AA6BD,mDAAmD;AACnD;;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,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;QACjD;YACE,OAAO,KAAK,CAAC;IACjB,CAAC;AACH,CAAC,CAAC;AAEF,mDAAmD;AACnD;;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';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentMetadata } from '@internal/acs-ui-common';\nimport { isMessageTooLong } from './SendBoxUtils';\n/* @conditional-compile-remove(file-sharing-acs) */\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};\n\ntype MessageState = 'OK' | 'too short' | 'too long';\n\nfunction isMessageEmpty(\n  messageText: string,\n  /* @conditional-compile-remove(file-sharing-acs) */\n  attachmentMetadata?: AttachmentMetadata[]\n): boolean {\n  /* @conditional-compile-remove(file-sharing-acs) */\n  return messageText.trim().length === 0 && attachmentMetadata?.length === 0;\n  return messageText.trim().length === 0;\n}\n\n/**\n * @private\n */\nexport function getMessageState(\n  messageText: string,\n  /* @conditional-compile-remove(file-sharing-acs) */ attachments: AttachmentMetadata[]\n): MessageState {\n  return isMessageEmpty(messageText, /* @conditional-compile-remove(file-sharing-acs) */ attachments)\n    ? 'too short'\n    : isMessageTooLong(messageText.length)\n      ? 'too long'\n      : 'OK';\n}\n\n/* @conditional-compile-remove(file-sharing-acs) */\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/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @private\n */\ninterface Action {\n  type: string;\n}\n\n/* @conditional-compile-remove(file-sharing-acs) */\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/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @private\n */\ninterface RemoveAction extends Action {\n  type: 'remove';\n  id: string;\n}\n\n/* @conditional-compile-remove(file-sharing-acs) */\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/* @conditional-compile-remove(file-sharing-acs) */\n/**\n * @internal\n */\nexport const doesMessageContainMultipleAttachments = (message: ChatMessage): boolean => {\n  const length = message.attachments?.length ?? 0;\n  return length > 1;\n};\n"]}

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

@@ -1,7 +1,9 @@
 /// <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';
@@ -15,7 +17,7 @@ export declare const getFluentUIAttachedValue: (messageAttachedStatus?: MessageA
  * @private
  *  Get the message bubble content for the message.
  */
-export declare function getMessageBubbleContent(message: ChatMessage, strings: MessageThreadStrings, userId: string, inlineImageOptions: InlineImageOptions | undefined, 
+export declare function getMessageBubbleContent(message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage, strings: MessageThreadStrings, userId: string, inlineImageOptions: InlineImageOptions | undefined, mentionDisplayOptions?: MentionDisplayOptions, 
 /**
  * Optional callback to render message attachments in the message component.
  */
@@ -32,5 +34,14 @@ 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, theme: Theme, editedTag: string) => JSX.Element | undefined;
+export declare const getMessageEditedDetails: (message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage, theme: Theme, editedTag: string) => JSX.Element | undefined;
+/**
+ * Removes Fluent UI keyboard navigation styles from the given HTMLDivElement.
+ *
+ * This function removes the 'tabindex' and 'data-tabster' attributes from the provided
+ * HTMLDivElement, making it non-focusable and removing any associated keyboard navigation styles.
+ *
+ * @param node - The HTMLDivElement from which to remove the keyboard navigation styles. If null, the function does nothing.
+ */
+export declare const removeFluentUIKeyboardNavigationStyles: (node: HTMLDivElement | null) => void;
 //# sourceMappingURL=ChatMessageComponentUtils.d.ts.map

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

@@ -2,6 +2,8 @@
 // Licensed under the MIT License.
 import React from 'react';
 import { ChatMessageContent } from '../ChatMessage/ChatMessageContent';
+/* @conditional-compile-remove(data-loss-prevention) */
+import { BlockedMessageContent } from '../ChatMessage/ChatMessageContent';
 import { _AttachmentDownloadCards } from '../Attachment/AttachmentDownloadCards';
 import { formatTimeForChatMessage, formatTimestampForChatMessage } from './Datetime';
 import { chatMessageEditedTagStyle } from '../styles/ChatMessageComponent.styles';
@@ -17,6 +19,8 @@ export const getFluentUIAttachedValue = (messageAttachedStatus) => {
  *  Get the message bubble content for the message.
  */
 export function getMessageBubbleContent(message, strings, userId, inlineImageOptions, 
+/* @conditional-compile-remove(mention) */
+mentionDisplayOptions, 
 /**
  * Optional callback to render message attachments in the message component.
  */
@@ -25,9 +29,18 @@ onRenderAttachmentDownloads,
  * Optional callback to define custom actions for attachments.
  */
 actionsForAttachment) {
-    return React.createElement("div", { className: "ui-chat__message__content" },
-        React.createElement(ChatMessageContent, { message: message, strings: strings, inlineImageOptions: inlineImageOptions }),
-        onRenderAttachmentDownloads ? onRenderAttachmentDownloads(message) : defaultOnRenderAttachmentDownloads(message, strings, actionsForAttachment));
+    /* @conditional-compile-remove(data-loss-prevention) */
+    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, 
+            /* @conditional-compile-remove(mention) */
+            mentionDisplayOptions: mentionDisplayOptions, inlineImageOptions: inlineImageOptions }),
+        onRenderAttachmentDownloads
+            ? onRenderAttachmentDownloads(message)
+            : defaultOnRenderAttachmentDownloads(message, strings, actionsForAttachment)));
 }
 /**
  * Default component for rendering attachment downloads.
@@ -35,19 +48,29 @@ actionsForAttachment) {
 const defaultOnRenderAttachmentDownloads = (message, strings, actionsForAttachment) => {
     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: {
+    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: {
+            /* @conditional-compile-remove(file-sharing-acs) */
+            downloadAttachment: strings.downloadAttachment,
             openAttachment: strings.openAttachment,
             attachmentCardGroupMessage: strings.attachmentCardGroupMessage
-        } }) : React.createElement(React.Fragment, null);
+        } })) : (React.createElement(React.Fragment, null));
 };
 /** @private */
 export const generateDefaultTimestamp = (createdOn, showDate, strings) => {
-    const formattedTimestamp = showDate ? formatTimestampForChatMessage(createdOn, new Date(), strings) : formatTimeForChatMessage(createdOn);
+    const formattedTimestamp = showDate
+        ? formatTimestampForChatMessage(createdOn, new Date(), strings)
+        : formatTimeForChatMessage(createdOn);
     return formattedTimestamp;
 };
 // onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale
 /** @private */
 export const generateCustomizedTimestamp = (createdOn, locale, onDisplayDateTimeString) => {
+    /* @conditional-compile-remove(date-time-customization) */
+    return onDisplayDateTimeString
+        ? onDisplayDateTimeString(createdOn)
+        : locale.onDisplayDateTimeString
+            ? locale.onDisplayDateTimeString(createdOn)
+            : '';
     return '';
 };
 /**
@@ -61,4 +84,19 @@ export const getMessageEditedDetails = (message, theme, editedTag) => {
     }
     return undefined;
 };
+/**
+ * Removes Fluent UI keyboard navigation styles from the given HTMLDivElement.
+ *
+ * This function removes the 'tabindex' and 'data-tabster' attributes from the provided
+ * HTMLDivElement, making it non-focusable and removing any associated keyboard navigation styles.
+ *
+ * @param node - The HTMLDivElement from which to remove the keyboard navigation styles. If null, the function does nothing.
+ */
+export const removeFluentUIKeyboardNavigationStyles = (node) => {
+    if (node) {
+        // Remove tabindex to make the div element non-focusable
+        node.removeAttribute('tabindex');
+        node.removeAttribute('data-tabster');
+    }
+};
 //# sourceMappingURL=ChatMessageComponentUtils.js.map

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 { 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};"]}
+{"version":3,"file":"ChatMessageComponentUtils.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/ChatMessageComponentUtils.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAGvE,uDAAuD;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAK1E,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AAGjF,OAAO,EAAE,wBAAwB,EAAE,6BAA6B,EAAE,MAAM,YAAY,CAAC;AAErF,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAGlF;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,qBAA6C,EACJ,EAAE;IAC3C,OAAO,qBAAqB,KAAK,KAAK,IAAI,qBAAqB,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;AAC/F,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,uBAAuB,CACrC,OAA6F,EAC7F,OAA6B,EAC7B,MAAc,EACd,kBAAkD;AAClD,0CAA0C;AAC1C,qBAA6C;AAC7C;;GAEG;AACH,2BAAmE;AACnE;;GAEG;AACH,oBAAwG;IAExG,uDAAuD;IACvD,IAAI,OAAO,CAAC,WAAW,KAAK,SAAS,EAAE,CAAC;QACtC,OAAO,CACL,6BAAK,QAAQ,EAAE,CAAC;YACd,oBAAC,qBAAqB,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CACzD,CACP,CAAC;IACJ,CAAC;IACD,OAAO,CACL,6BAAK,SAAS,EAAC,2BAA2B;QACxC,oBAAC,kBAAkB,IACjB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO;YAChB,0CAA0C;YAC1C,qBAAqB,EAAE,qBAAqB,EAC5C,kBAAkB,EAAE,kBAAkB,GACtC;QACD,2BAA2B;YAC1B,CAAC,CAAC,2BAA2B,CAAC,OAAO,CAAC;YACtC,CAAC,CAAC,kCAAkC,CAChC,OAAO,EACP,OAAO,EAEP,oBAAoB,CACrB,CACD,CACP,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,kCAAkC,GAAG,CACzC,OAA6F,EAC7F,OAA6B,EAC7B,oBAAwG,EAC/E,EAAE;;IAC3B,MAAM,WAAW,GAAG,aAAa,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/E,OAAO,CAAC,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CACtC,oBAAC,wBAAwB,IACvB,OAAO,EAAE,OAAsB,EAC/B,WAAW,EAAE,WAAW,EACxB,oBAAoB,EAAE,oBAAoB,EAC1C,OAAO,EAAE;YACP,mDAAmD;YACnD,kBAAkB,EAAE,OAAO,CAAC,kBAAkB;YAC9C,cAAc,EAAE,OAAO,CAAC,cAAc;YACtC,0BAA0B,EAAE,OAAO,CAAC,0BAA0B;SAC/D,GACD,CACH,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;AACf,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,SAAe,EACf,QAA6B,EAC7B,OAA6B,EACrB,EAAE;IACV,MAAM,kBAAkB,GAAG,QAAQ;QACjC,CAAC,CAAC,6BAA6B,CAAC,SAAS,EAAE,IAAI,IAAI,EAAE,EAAE,OAAO,CAAC;QAC/D,CAAC,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IAExC,OAAO,kBAAkB,CAAC;AAC5B,CAAC,CAAC;AAEF,mFAAmF;AACnF,eAAe;AACf,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,SAAe,EACf,MAAuB,EACvB,uBAAuD,EAC/C,EAAE;IACV,0DAA0D;IAC1D,OAAO,uBAAuB;QAC5B,CAAC,CAAC,uBAAuB,CAAC,SAAS,CAAC;QACpC,CAAC,CAAC,MAAM,CAAC,uBAAuB;YAC9B,CAAC,CAAC,MAAM,CAAC,uBAAuB,CAAC,SAAS,CAAC;YAC3C,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAA6F,EAC7F,KAAY,EACZ,SAAiB,EACQ,EAAE;IAC3B,MAAM,QAAQ,GAAG,UAAU,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACtE,IAAI,OAAO,CAAC,WAAW,KAAK,MAAM,IAAI,QAAQ,EAAE,CAAC;QAC/C,OAAO,6BAAK,SAAS,EAAE,yBAAyB,CAAC,KAAK,CAAC,IAAG,SAAS,CAAO,CAAC;IAC7E,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,CAAC,IAA2B,EAAQ,EAAE;IAC1F,IAAI,IAAI,EAAE,CAAC;QACT,wDAAwD;QACxD,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACjC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC;AACH,CAAC,CAAC","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';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types/ChatMessage';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessageContent } from '../ChatMessage/ChatMessageContent';\nimport { InlineImageOptions } from '../ChatMessage/ChatMessageContent';\nimport { MessageThreadStrings } from '../MessageThread';\n/* @conditional-compile-remove(mention) */\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 = (\n  messageAttachedStatus?: MessageAttachedStatus\n): '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(\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage,\n  strings: MessageThreadStrings,\n  userId: string,\n  inlineImageOptions: InlineImageOptions | undefined,\n  /* @conditional-compile-remove(mention) */\n  mentionDisplayOptions?: MentionDisplayOptions,\n  /**\n   * Optional callback to render message attachments in the message component.\n   */\n  onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element,\n  /**\n   * Optional callback to define custom actions for attachments.\n   */\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]\n): JSX.Element {\n  /* @conditional-compile-remove(data-loss-prevention) */\n  if (message.messageType === 'blocked') {\n    return (\n      <div tabIndex={0}>\n        <BlockedMessageContent message={message} strings={strings} />\n      </div>\n    );\n  }\n  return (\n    <div className=\"ui-chat__message__content\">\n      <ChatMessageContent\n        message={message}\n        strings={strings}\n        /* @conditional-compile-remove(mention) */\n        mentionDisplayOptions={mentionDisplayOptions}\n        inlineImageOptions={inlineImageOptions}\n      />\n      {onRenderAttachmentDownloads\n        ? onRenderAttachmentDownloads(message)\n        : defaultOnRenderAttachmentDownloads(\n            message,\n            strings,\n\n            actionsForAttachment\n          )}\n    </div>\n  );\n}\n\n/**\n * Default component for rendering attachment downloads.\n */\nconst defaultOnRenderAttachmentDownloads = (\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage,\n  strings: MessageThreadStrings,\n  actionsForAttachment?: (attachment: AttachmentMetadata, message?: ChatMessage) => AttachmentMenuAction[]\n): JSX.Element | undefined => {\n  const attachments = 'attachments' in message ? message.attachments : undefined;\n  return (attachments?.length ?? 0) > 0 ? (\n    <_AttachmentDownloadCards\n      message={message as ChatMessage}\n      attachments={attachments}\n      actionsForAttachment={actionsForAttachment}\n      strings={{\n        /* @conditional-compile-remove(file-sharing-acs) */\n        downloadAttachment: strings.downloadAttachment,\n        openAttachment: strings.openAttachment,\n        attachmentCardGroupMessage: strings.attachmentCardGroupMessage\n      }}\n    />\n  ) : (\n    <></>\n  );\n};\n\n/** @private */\nexport const generateDefaultTimestamp = (\n  createdOn: Date,\n  showDate: boolean | undefined,\n  strings: MessageThreadStrings\n): string => {\n  const formattedTimestamp = showDate\n    ? formatTimestampForChatMessage(createdOn, new Date(), strings)\n    : formatTimeForChatMessage(createdOn);\n\n  return formattedTimestamp;\n};\n\n// onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale\n/** @private */\nexport const generateCustomizedTimestamp = (\n  createdOn: Date,\n  locale: ComponentLocale,\n  onDisplayDateTimeString?: (messageDate: Date) => string\n): string => {\n  /* @conditional-compile-remove(date-time-customization) */\n  return onDisplayDateTimeString\n    ? onDisplayDateTimeString(createdOn)\n    : locale.onDisplayDateTimeString\n      ? locale.onDisplayDateTimeString(createdOn)\n      : '';\n\n  return '';\n};\n\n/**\n * @private\n *  Get the edited tag for the message if it is edited.\n */\nexport const getMessageEditedDetails = (\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage,\n  theme: Theme,\n  editedTag: string\n): 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};\n"]}

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

@@ -4,10 +4,7 @@
  * @private
  */
 export const formatTimeForChatMessage = (messageDate) => {
-    return messageDate.toLocaleTimeString([], {
-        hour: 'numeric',
-        minute: '2-digit'
-    });
+    return messageDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
 };
 /**
  * @private

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

@@ -1 +1 @@
-{"version":3,"file":"Datetime.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/utils/Datetime.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAiB,EAAU,EAAE;IACpE,OAAO,WAAW,CAAC,kBAAkB,CAAC,EAAE,EAAE;QACxC,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;KAClB,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAiB,EAAU,EAAE;IACpE,OAAO,WAAW,CAAC,kBAAkB,EAAE,CAAC;AAC1C,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,WAAiB,EAAE,SAAe,EAAE,WAAiC,EAAU,EAAE;IAC7H,qFAAqF;IACrF,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC;IAChG,IAAI,WAAW,GAAG,UAAU,EAAE,CAAC;QAC7B,OAAO,wBAAwB,CAAC,WAAW,CAAC,CAAC;IAC/C,CAAC;IAED,qFAAqF;IACrF,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IACvG,IAAI,WAAW,GAAG,aAAa,EAAE,CAAC;QAChC,OAAO,WAAW,CAAC,SAAS,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;IAC7E,CAAC;IAED,iGAAiG;IACjG,0BAA0B;IAC1B,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC;IACnC,IAAI,OAAO,KAAK,CAAC,EAAE,CAAC;QAClB,OAAO,wBAAwB,CAAC,WAAW,CAAC,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;IAC7F,CAAC;IAED,6FAA6F;IAC7F,MAAM,qBAAqB,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,CAAC;IACrH,IAAI,WAAW,GAAG,qBAAqB,EAAE,CAAC;QACxC,OAAO,YAAY,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,WAAW,CAAC,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;IACvG,CAAC;IAED,mGAAmG;IACnG,OAAO,wBAAwB,CAAC,WAAW,CAAC,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;AAC7F,CAAC,CAAC;AACF,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,WAAiC,EAAU,EAAE;IAC9E,QAAQ,GAAG,EAAE,CAAC;QACZ,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,MAAM,CAAC;QAC5B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,MAAM,CAAC;QAC5B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,OAAO,CAAC;QAC7B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,SAAS,CAAC;QAC/B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,QAAQ,CAAC;QAC9B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,MAAM,CAAC;QAC5B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,QAAQ,CAAC;QAC9B;YACE,MAAM,IAAI,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,CAAC;IACnD,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageThreadStrings } from '../MessageThread';\n\n/**\n * @private\n */\nexport const formatTimeForChatMessage = (messageDate: Date): string => {\n  return messageDate.toLocaleTimeString([], {\n    hour: 'numeric',\n    minute: '2-digit'\n  });\n};\n\n/**\n * @private\n */\nexport const formatDateForChatMessage = (messageDate: Date): string => {\n  return messageDate.toLocaleDateString();\n};\n\n/**\n * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text\n * using the system locale.\n * <time in locale format>.\n * Yesterday <time in locale format>.\n * <dateStrings day of week> <time in locale format>.\n * <date in locale format> <time in locale format>.\n *\n * If message is after yesterday, then only show the time.\n * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.\n * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.\n *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.\n * If message is in previous or older weeks, then show date string plus the time.\n *\n * @param messageDate - date of message\n * @param currentDate - date used as offset to create the user friendly timestamp (e.g. to create 'Yesterday' instead of an absolute date)\n *\n * @private\n */\nexport const formatTimestampForChatMessage = (messageDate: Date, todayDate: Date, dateStrings: MessageThreadStrings): string => {\n  // If message was in the same day timestamp string is just the time like '1:30 p.m.'.\n  const startOfDay = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());\n  if (messageDate > startOfDay) {\n    return formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was yesterday then timestamp string is like this 'Yesterday 1:30 p.m.'.\n  const yesterdayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - 1);\n  if (messageDate > yesterdayDate) {\n    return dateStrings.yesterday + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was before Sunday and today is Sunday (start of week) then timestamp string is like\n  // '2021-01-10 1:30 p.m.'.\n  const weekDay = todayDate.getDay();\n  if (weekDay === 0) {\n    return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was before first day of the week then timestamp string is like Monday 1:30 p.m.\n  const firstDayOfTheWeekDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - weekDay);\n  if (messageDate > firstDayOfTheWeekDate) {\n    return dayToDayName(messageDate.getDay(), dateStrings) + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message date is in previous or older weeks then timestamp string is like 2021-01-10 1:30 p.m.\n  return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);\n};\nconst dayToDayName = (day: number, dateStrings: MessageThreadStrings): string => {\n  switch (day) {\n    case 0:\n      return dateStrings.sunday;\n    case 1:\n      return dateStrings.monday;\n    case 2:\n      return dateStrings.tuesday;\n    case 3:\n      return dateStrings.wednesday;\n    case 4:\n      return dateStrings.thursday;\n    case 5:\n      return dateStrings.friday;\n    case 6:\n      return dateStrings.saturday;\n    default:\n      throw new Error(`Invalid day [${day}] passed`);\n  }\n};"]}
+{"version":3,"file":"Datetime.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/Datetime.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAIlC;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAiB,EAAU,EAAE;IACpE,OAAO,WAAW,CAAC,kBAAkB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;AACpF,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAiB,EAAU,EAAE;IACpE,OAAO,WAAW,CAAC,kBAAkB,EAAE,CAAC;AAC1C,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,WAAiB,EACjB,SAAe,EACf,WAAiC,EACzB,EAAE;IACV,qFAAqF;IACrF,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC;IAChG,IAAI,WAAW,GAAG,UAAU,EAAE,CAAC;QAC7B,OAAO,wBAAwB,CAAC,WAAW,CAAC,CAAC;IAC/C,CAAC;IAED,qFAAqF;IACrF,MAAM,aAAa,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IACvG,IAAI,WAAW,GAAG,aAAa,EAAE,CAAC;QAChC,OAAO,WAAW,CAAC,SAAS,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;IAC7E,CAAC;IAED,iGAAiG;IACjG,0BAA0B;IAC1B,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC;IACnC,IAAI,OAAO,KAAK,CAAC,EAAE,CAAC;QAClB,OAAO,wBAAwB,CAAC,WAAW,CAAC,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;IAC7F,CAAC;IAED,6FAA6F;IAC7F,MAAM,qBAAqB,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,CAAC;IACrH,IAAI,WAAW,GAAG,qBAAqB,EAAE,CAAC;QACxC,OAAO,YAAY,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,WAAW,CAAC,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;IACvG,CAAC;IAED,mGAAmG;IACnG,OAAO,wBAAwB,CAAC,WAAW,CAAC,GAAG,GAAG,GAAG,wBAAwB,CAAC,WAAW,CAAC,CAAC;AAC7F,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,WAAiC,EAAU,EAAE;IAC9E,QAAQ,GAAG,EAAE,CAAC;QACZ,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,MAAM,CAAC;QAC5B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,MAAM,CAAC;QAC5B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,OAAO,CAAC;QAC7B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,SAAS,CAAC;QAC/B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,QAAQ,CAAC;QAC9B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,MAAM,CAAC;QAC5B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,QAAQ,CAAC;QAC9B;YACE,MAAM,IAAI,KAAK,CAAC,gBAAgB,GAAG,UAAU,CAAC,CAAC;IACnD,CAAC;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { MessageThreadStrings } from '../MessageThread';\n\n/**\n * @private\n */\nexport const formatTimeForChatMessage = (messageDate: Date): string => {\n  return messageDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });\n};\n\n/**\n * @private\n */\nexport const formatDateForChatMessage = (messageDate: Date): string => {\n  return messageDate.toLocaleDateString();\n};\n\n/**\n * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text\n * using the system locale.\n * <time in locale format>.\n * Yesterday <time in locale format>.\n * <dateStrings day of week> <time in locale format>.\n * <date in locale format> <time in locale format>.\n *\n * If message is after yesterday, then only show the time.\n * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.\n * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.\n *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.\n * If message is in previous or older weeks, then show date string plus the time.\n *\n * @param messageDate - date of message\n * @param currentDate - date used as offset to create the user friendly timestamp (e.g. to create 'Yesterday' instead of an absolute date)\n *\n * @private\n */\nexport const formatTimestampForChatMessage = (\n  messageDate: Date,\n  todayDate: Date,\n  dateStrings: MessageThreadStrings\n): string => {\n  // If message was in the same day timestamp string is just the time like '1:30 p.m.'.\n  const startOfDay = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());\n  if (messageDate > startOfDay) {\n    return formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was yesterday then timestamp string is like this 'Yesterday 1:30 p.m.'.\n  const yesterdayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - 1);\n  if (messageDate > yesterdayDate) {\n    return dateStrings.yesterday + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was before Sunday and today is Sunday (start of week) then timestamp string is like\n  // '2021-01-10 1:30 p.m.'.\n  const weekDay = todayDate.getDay();\n  if (weekDay === 0) {\n    return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message was before first day of the week then timestamp string is like Monday 1:30 p.m.\n  const firstDayOfTheWeekDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - weekDay);\n  if (messageDate > firstDayOfTheWeekDate) {\n    return dayToDayName(messageDate.getDay(), dateStrings) + ' ' + formatTimeForChatMessage(messageDate);\n  }\n\n  // If message date is in previous or older weeks then timestamp string is like 2021-01-10 1:30 p.m.\n  return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);\n};\n\nconst dayToDayName = (day: number, dateStrings: MessageThreadStrings): string => {\n  switch (day) {\n    case 0:\n      return dateStrings.sunday;\n    case 1:\n      return dateStrings.monday;\n    case 2:\n      return dateStrings.tuesday;\n    case 3:\n      return dateStrings.wednesday;\n    case 4:\n      return dateStrings.thursday;\n    case 5:\n      return dateStrings.friday;\n    case 6:\n      return dateStrings.saturday;\n    default:\n      throw new Error(`Invalid day [${day}] passed`);\n  }\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Logger.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-components/src/components/utils/Logger.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,uCAAuC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { createClientLogger } from '@azure/logger';\n\n/**\n * @private\n */\nexport const callingComponentLogger = createClientLogger('communication-react:calling-component');"]}
+{"version":3,"file":"Logger.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/utils/Logger.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,uCAAuC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { createClientLogger } from '@azure/logger';\n\n/**\n * @private\n */\nexport const callingComponentLogger = createClientLogger('communication-react:calling-component');\n"]}

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

@@ -0,0 +1,73 @@
+import type { BorderFormat, DatasetFormat, ModelToDomContext } from 'roosterjs-content-model-types';
+/**
+ * Plugin event type for RoosterJS plugins
+ * @private
+ */
+export declare enum PluginEventType {
+    EditorReady = "editorReady",
+    BeforeDispose = "beforeDispose",
+    ContentChanged = "contentChanged",
+    BeforeSetContent = "beforeSetContent",
+    Input = "input",
+    KeyDown = "keyDown",
+    BeforeCutCopy = "beforeCutCopy",
+    BeforePaste = "beforePaste",
+    ZoomChanged = "zoomChanged",
+    MouseUp = "mouseUp",
+    CompositionEnd = "compositionEnd"
+}
+/**
+ * ContentChanged event source for RoosterJS
+ * @private
+ */
+export declare enum ContentChangedEventSource {
+    Paste = "Paste"
+}
+/**
+ * Applies the border format to the specified element.
+ * If the element is an HTMLTableCellElement, it skips setting editing info
+ * and to use classes instead of inline styles.
+ * For all other cases, the default format applier is used.
+ */
+export declare const borderApplier: (format: BorderFormat, element: HTMLElement, context: ModelToDomContext) => void;
+/**
+ * Applies the dataset format to the given HTML element.
+ * If the element is an HTMLTableElement, it skips setting editing info
+ * and to use classes instead of inline styles.
+ * For all other cases, it applies the default formats.
+ */
+export declare const dataSetApplier: (format: DatasetFormat, element: HTMLElement, context: ModelToDomContext) => void;
+/**
+ * @internal
+ */
+export declare const getPreviousInlineImages: (content?: string) => Record<string, string>[];
+/**
+ * @internal
+ */
+export declare const getRemovedInlineImages: (content: string, previousInlineImages: Record<string, string>[]) => Record<string, string>[];
+/**
+ * @internal
+ */
+export declare const getInsertedInlineImages: (content: string, previousInlineImages: NodeListOf<HTMLImageElement>) => HTMLImageElement[];
+/**
+ * @internal
+ */
+export declare const getInlineImageAttributes: (image: HTMLImageElement) => Record<string, string>;
+/**
+ * @internal
+ */
+/**
+ * Update the scroll position of the editor to ensure the content is visible.
+ */
+export declare const scrollToBottomRichTextEditor: () => void;
+/**
+ * Revoke the blob urls in the removedInlineImages and remove them from the currentLocalBlobMap
+ * @internal
+ */
+export declare const removeLocalBlobs: (currentLocalBlobMap: Record<string, string>, removedInlineImages: Record<string, string>[]) => void;
+/**
+ * Revoke all the blob urls in the currentLocalBlobMap and clean up the currentLocalBlobMap
+ * @internal
+ */
+export declare const cleanAllLocalBlobs: (currentLocalBlobMap: Record<string, string>) => void;
+//# sourceMappingURL=RichTextEditorUtils.d.ts.map