@azure/communication-react 1.8.1-alpha-202309300012 → 1.8.1-alpha-202310050013

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

@@ -1,4 +1,4 @@
-import { IButtonStyles, Theme } from '@fluentui/react';
+import { IButtonStyles } from '@fluentui/react';
 import { CSSProperties } from 'react';
 import { ComponentSlotStyle } from '../../types';
 /**
@@ -8,44 +8,39 @@ export declare const messageThreadContainerStyle: string;
 /**
  * @private
  */
-export declare const noMessageStatusStyle: string;
-/**
- * @private
- */
-export declare const chatStyle: ComponentSlotStyle;
+export declare const messageThreadWrapperContainerStyle: string;
 /**
  * @private
  */
-export declare const newMessageButtonContainerStyle: string;
+export declare const noMessageStatusStyle: string;
 /**
  * @private
  */
-export declare const chatMessageStyle: CSSProperties;
+export declare const useChatStyles: () => Record<"root", string>;
 /**
  * @private
  */
-export declare const chatMessageDateStyle: CSSProperties;
+export declare const useChatMessageRenderStyles: () => Record<"rootCommon" | "rootMessage" | "rootMyMessage" | "bodyCommon" | "bodyMyMessage" | "bodyWithoutAvatar" | "bodyWithAvatar" | "avatarNoOverlap" | "avatarOverlap", string>;
 /**
  * @private
  */
-export declare const defaultChatItemMessageContainer: (overlapAvatarAndMessage: boolean) => ComponentSlotStyle;
+export declare const useChatMyMessageStyles: () => Record<"root" | "body" | "menu" | "menuHidden" | "bodyAttached" | "menuAttached" | "menuVisible", string>;
 /**
  * @private
  */
-export declare const defaultMyChatMessageContainer: ComponentSlotStyle;
+export declare const newMessageButtonContainerStyle: string;
 /**
  * @private
  */
-export declare const FailedMyChatMessageContainer: ComponentSlotStyle;
+export declare const chatMessageDateStyle: CSSProperties;
 /**
  * @private
  */
-export declare const defaultChatMessageContainer: (theme: Theme) => ComponentSlotStyle;
+export declare const useChatMessageStyles: () => Record<"root" | "body" | "bodyWithoutAvatar" | "bodyWithAvatar" | "avatarNoOverlap" | "avatarOverlap", string>;
 /**
  * @private
- * @conditional-compile-remove(data-loss-prevention)
  */
-export declare const defaultBlockedMessageStyleContainer: (theme: Theme) => ComponentSlotStyle;
+export declare const useChatMessageCommonStyles: () => Record<"failed" | "blocked", string>;
 /**
  * @private
  */
@@ -54,10 +49,6 @@ export declare const gutterWithAvatar: ComponentSlotStyle;
  * @private
  */
 export declare const gutterWithHiddenAvatar: ComponentSlotStyle;
-/**
- * @private
- */
-export declare const messageStatusContainerStyle: (mine: boolean) => string;
 /**
  * @private
  */

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

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { mergeStyles } from '@fluentui/react';
+import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
 import { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';
 // Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI
 // that can contain a message and a timestamp.
@@ -9,10 +10,11 @@ const CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;
 // When calculating the width of a message we also must take into account
 // the width of the avatar/gutter and the gap between the message and avatar/gutter.
 const AVATAR_WIDTH_REM = 2;
-const AVATAR_MESSAGE_GAP_REM = 0.5;
+const AVATAR_MARGIN_LEFT = 2.5;
+const AVATAR_MESSAGE_GAP_REM = 0.125;
 const MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;
 // Avatars should display on top of chat messages when the chat thread is narrow
-const MESSAGE_AVATAR_OVERLAP_REM = 0.425;
+const MESSAGE_AVATAR_OVERLAP_REM = 0.925;
 const CHAT_MESSAGE_ZINDEX = 1;
 const AVATAR_ZINDEX = 2;
 // new message button should be on top of chat message
@@ -28,6 +30,14 @@ export const messageThreadContainerStyle = mergeStyles({
     position: 'relative',
     alignSelf: 'center'
 });
+/**
+ * @private
+ */
+export const messageThreadWrapperContainerStyle = mergeStyles({
+    height: '100%',
+    width: '100%',
+    position: 'relative'
+});
 /**
  * @private
  */
@@ -39,15 +49,90 @@ export const noMessageStatusStyle = mergeStyles({
 /**
  * @private
  */
-export const chatStyle = {
-    paddingBottom: '0.5rem',
-    paddingTop: '0.8rem',
-    border: 'none',
-    overflow: 'auto',
-    // `height: 100%` ensures that the Chat component covers 100% of it's parents height
-    // to prevent intermittent scrollbars when gifs are present in the chat.
-    height: '100%'
-};
+export const useChatStyles = makeStyles({
+    root: Object.assign(Object.assign(Object.assign({ paddingTop: '0.8rem', paddingBottom: '0.5rem', paddingRight: '0.6rem', paddingLeft: '0.6rem' }, shorthands.border('none')), shorthands.overflow('auto')), { 
+        // `height: 100%` ensures that the Chat component covers 100% of it's parents height
+        // to prevent intermittent scrollbars when GIFs are present in the chat.
+        height: '100%', '& a:link': {
+            color: tokens.colorBrandForegroundLink
+        }, '& a:visited': {
+            color: tokens.colorBrandForegroundLinkHover
+        }, '& a:hover': {
+            color: tokens.colorBrandForegroundLinkHover
+        } })
+});
+/**
+ * @private
+ */
+export const useChatMessageRenderStyles = makeStyles({
+    rootCommon: {
+        '&:focus-visible': Object.assign({}, shorthands.outline('0'))
+    },
+    rootMessage: Object.assign(Object.assign(Object.assign({}, shorthands.padding('0')), shorthands.margin('0')), { maxWidth: '100%', minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem` }),
+    rootMyMessage: Object.assign(Object.assign({ gridTemplateColumns: 'auto fit-content(0)', gridTemplateAreas: `
+        "body status"
+      `, columnGap: '0', gridGap: '0' }, shorthands.padding('0')), { marginTop: '0', marginRight: '0', marginBottom: '0', marginLeft: '50px', width: `calc(100% - 50px)` }),
+    bodyCommon: Object.assign(Object.assign({}, shorthands.padding('0')), { marginRight: '0', marginBottom: '0', backgroundColor: 'transparent', maxWidth: '100%', minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem` }),
+    bodyMyMessage: {
+        width: '100%',
+        marginTop: '0'
+    },
+    bodyWithoutAvatar: {
+        marginLeft: `${AVATAR_MARGIN_LEFT}rem`,
+        marginTop: '0'
+    },
+    bodyWithAvatar: {
+        marginLeft: `0`,
+        marginTop: '0.75rem'
+    },
+    avatarNoOverlap: {
+        width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + AVATAR_MESSAGE_GAP_REM}rem)`
+    },
+    avatarOverlap: {
+        width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM - MESSAGE_AVATAR_OVERLAP_REM}rem)`
+    }
+});
+/**
+ * @private
+ */
+export const useChatMyMessageStyles = makeStyles({
+    root: {
+        gridTemplateColumns: 'auto auto',
+        gridTemplateAreas: `
+        ". actions"
+        "body body"
+      `,
+        gridGap: '0',
+        columnGap: '0',
+        paddingTop: '0',
+        marginLeft: '0',
+        '&:focus-visible': Object.assign({}, shorthands.outline('0'))
+    },
+    body: Object.assign(Object.assign({ paddingBottom: '10px', marginTop: '1rem', maxWidth: '100%', minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`, marginLeft: '0rem' }, shorthands.border('1px', 'solid', 'transparent')), { '&:hover ~ .fui-ChatMyMessage__actions': {
+            visibility: 'visible'
+        }, '&:focus ~ .fui-ChatMyMessage__actions': {
+            visibility: 'visible'
+        }, '& msft-mention': {
+            color: tokens.colorStatusWarningBackground3,
+            fontWeight: 600
+        } }),
+    bodyAttached: {
+        marginTop: '0.125rem'
+    },
+    menu: Object.assign(Object.assign({ boxShadow: tokens.shadow4, backgroundColor: tokens.colorNeutralBackground1, marginRight: '1px', position: 'absolute', top: '-2px', right: '0' }, shorthands.borderRadius(tokens.borderRadiusMedium)), { zIndex: 1, lineHeight: tokens.lineHeightBase100, visibility: 'hidden', '&:hover, &:focus': {
+            cursor: 'pointer',
+            visibility: 'visible'
+        } }),
+    menuAttached: {
+        top: '-18px'
+    },
+    menuHidden: {
+        visibility: 'hidden'
+    },
+    menuVisible: {
+        visibility: 'visible'
+    }
+});
 /**
  * @private
  */
@@ -57,12 +142,6 @@ export const newMessageButtonContainerStyle = mergeStyles({
     bottom: 0,
     right: '1.5rem'
 });
-/**
- * @private
- */
-export const chatMessageStyle = {
-    overflowY: 'hidden'
-};
 /**
  * @private
  */
@@ -72,116 +151,53 @@ export const chatMessageDateStyle = {
 /**
  * @private
  */
-export const defaultChatItemMessageContainer = (overlapAvatarAndMessage) => {
-    const messageAvatarGap = overlapAvatarAndMessage ? -MESSAGE_AVATAR_OVERLAP_REM : AVATAR_MESSAGE_GAP_REM;
-    return {
-        marginRight: '0rem',
-        marginLeft: `${messageAvatarGap}rem`,
-        width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + messageAvatarGap}rem)`,
-        zIndex: CHAT_MESSAGE_ZINDEX,
-        '& msft-mention': {
-            color: '#D83B01',
-            fontWeight: 600
-        }
-    };
-};
-/**
- * @private
- */
-export const defaultMyChatMessageContainer = {
-    maxWidth: '100%',
-    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,
-    marginLeft: '0rem',
-    // This makes message bubble show border in high contrast mode making each message distinguishable
-    border: '1px solid transparent'
-};
-/**
- * @private
- */
-export const FailedMyChatMessageContainer = Object.assign(Object.assign({}, defaultChatItemMessageContainer), { backgroundColor: 'rgba(168, 0, 0, 0.2)' });
-/**
- * @private
- */
-export const defaultChatMessageContainer = (theme) => ({
-    maxWidth: '100%',
-    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,
-    marginRight: '0rem',
-    '& img': {
-        maxWidth: '100% !important',
-        height: 'auto !important'
-    },
-    '& video': {
-        maxWidth: '100% !important',
-        height: 'auto !important'
+export const useChatMessageStyles = makeStyles({
+    root: {
+        paddingTop: '0',
+        '&:focus-visible': Object.assign({}, shorthands.outline('0'))
     },
-    '& p': {
-        // Deal with awkward padding seen in messages from Teams.
-        // For more info see https://github.com/Azure/communication-ui-library/pull/1507
-        marginBlock: '0.125rem'
+    body: Object.assign(Object.assign({ maxWidth: '100%', minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`, marginRight: '0rem', paddingBottom: '10px', zIndex: CHAT_MESSAGE_ZINDEX }, shorthands.border('1px', 'solid', 'transparent')), { '& > div:first-of-type': {
+            flexWrap: 'wrap'
+        }, '& msft-mention': {
+            color: tokens.colorStatusWarningBackground3,
+            fontWeight: tokens.fontWeightSemibold
+        }, '& img': {
+            maxWidth: '100% !important',
+            height: 'auto !important'
+        }, '& video': {
+            maxWidth: '100% !important',
+            height: 'auto !important'
+        }, '& p': Object.assign({}, shorthands.marginBlock('0.125rem')), '& blockquote': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ backgroundColor: tokens.colorBrandBackgroundInverted, clear: 'left', minHeight: '2.25rem', width: 'fit-content', marginTop: '7px', marginRight: '0px', marginLeft: '0px', marginBottom: '7px', paddingTop: '7px', paddingRight: '15px', paddingLeft: '15px', paddingBottom: '7px' }, shorthands.border('solid')), shorthands.borderRadius('4px')), shorthands.borderWidth('1px')), shorthands.borderColor(tokens.colorNeutralStroke1Selected)), { borderLeftWidth: '4px' }), '& table': Object.assign(Object.assign({ backgroundColor: tokens.colorBrandBackgroundInverted }, shorthands.borderColor(tokens.colorNeutralStroke1Selected)), { borderCollapse: 'collapse', tableLayout: 'auto', width: '100%', '& tr': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`)), { '& td': Object.assign(Object.assign({}, shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) }) }) }),
+    bodyWithoutAvatar: {
+        marginTop: '0.125rem'
     },
-    '& blockquote': {
-        backgroundColor: theme.palette.white,
-        clear: 'left',
-        minHeight: '2.25rem',
-        width: 'fit-content',
-        margin: '7px 0px',
-        padding: '7px 15px',
-        border: 'solid',
-        borderRadius: '4px',
-        borderWidth: '1px',
-        borderColor: theme.palette.neutralQuaternary,
-        borderLeftWidth: '4px'
+    bodyWithAvatar: {
+        marginTop: `0.375rem`
     },
-    '& table': {
-        backgroundColor: theme.palette.white,
-        border: theme.palette.neutralQuaternary,
-        borderCollapse: 'collapse',
-        tableLayout: 'auto',
-        width: '100%',
-        '& tr': {
-            border: `1px solid ${theme.palette.neutralQuaternary}`,
-            '& td': {
-                border: `1px solid ${theme.palette.neutralQuaternary}`,
-                wordBreak: 'normal',
-                padding: '0px 5px'
-            }
-        }
+    avatarNoOverlap: {
+        marginLeft: `${-AVATAR_MARGIN_LEFT + AVATAR_MESSAGE_GAP_REM}rem`
     },
-    // This makes message bubble show border in high contrast mode making each message distinguishable
-    border: '1px solid transparent'
+    avatarOverlap: {
+        marginLeft: `${-AVATAR_MARGIN_LEFT - MESSAGE_AVATAR_OVERLAP_REM}rem`
+    }
 });
 /**
  * @private
- * @conditional-compile-remove(data-loss-prevention)
  */
-export const defaultBlockedMessageStyleContainer = (theme) => ({
-    maxWidth: '100%',
-    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,
-    marginRight: '0rem',
-    color: theme.palette.neutralSecondary,
-    '& i': {
-        paddingTop: '0.25rem'
-    },
-    '& p': {
-        // Deal with awkward padding seen in messages from Teams.
-        // For more info see https://github.com/Azure/communication-ui-library/pull/1507
-        marginBlock: '0.125rem',
-        paddingRight: '0.75rem',
-        fontStyle: 'italic'
+export const useChatMessageCommonStyles = makeStyles({
+    failed: {
+        //TODO: can we reuse a theme color here?
+        backgroundColor: 'rgba(168, 0, 0, 0.2)'
     },
-    '& a': {
-        marginBlock: '0.125rem',
-        fontStyle: 'normal',
-        color: theme.palette.themePrimary,
-        textDecoration: 'none'
-    },
-    // This makes message bubble show border in high contrast mode making each message distinguishable
-    border: '1px solid transparent'
+    blocked: Object.assign(Object.assign({ maxWidth: '100%', minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`, marginRight: '0rem', color: tokens.colorNeutralForeground2 }, shorthands.border('1px', 'solid', 'transparent')), { '& i': {
+            paddingTop: '0.25rem'
+        }, '& p': Object.assign(Object.assign({}, shorthands.marginBlock('0.125rem')), { paddingRight: '0.75rem', fontStyle: 'italic' }), '& a': Object.assign(Object.assign(Object.assign({}, shorthands.marginBlock('0.125rem')), { fontStyle: 'normal', color: tokens.colorBrandForegroundLink }), shorthands.textDecoration('none')) })
 });
 /**
  * @private
  */
 export const gutterWithAvatar = {
+    paddingTop: '1.65rem',
     width: `${AVATAR_WIDTH_REM}rem`,
     position: 'relative',
     float: 'left',
@@ -196,12 +212,6 @@ export const gutterWithHiddenAvatar = Object.assign(Object.assign({}, gutterWith
     // we use this hidden avatar just as a width placeholder
     // the placeholder is needed for responsive bubble width
     height: 0 });
-/**
- * @private
- */
-export const messageStatusContainerStyle = (mine) => mergeStyles({
-    marginLeft: mine ? '0.25rem' : '0rem'
-});
 /**
  * @private
  */

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

@@ -1 +1 @@
-{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles, Theme } from '@fluentui/react';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\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_MESSAGE_GAP_REM = 0.5;\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.425;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const 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 chatStyle: ComponentSlotStyle = {\n  paddingBottom: '0.5rem',\n  paddingTop: '0.8rem',\n  border: 'none',\n  overflow: 'auto',\n  // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n  // to prevent intermittent scrollbars when gifs are present in the chat.\n  height: '100%'\n};\n\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 chatMessageStyle: CSSProperties = {\n  overflowY: 'hidden'\n};\n\n/**\n * @private\n */\nexport const chatMessageDateStyle: CSSProperties = {\n  fontWeight: 600\n};\n\n/**\n * @private\n */\nexport const defaultChatItemMessageContainer = (overlapAvatarAndMessage: boolean): ComponentSlotStyle => {\n  const messageAvatarGap = overlapAvatarAndMessage ? -MESSAGE_AVATAR_OVERLAP_REM : AVATAR_MESSAGE_GAP_REM;\n  return {\n    marginRight: '0rem',\n    marginLeft: `${messageAvatarGap}rem`,\n    width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + messageAvatarGap}rem)`,\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    '& msft-mention': {\n      color: '#D83B01',\n      fontWeight: 600\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const defaultMyChatMessageContainer: ComponentSlotStyle = {\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  border: '1px solid transparent'\n};\n\n/**\n * @private\n */\nexport const FailedMyChatMessageContainer: ComponentSlotStyle = {\n  ...defaultChatItemMessageContainer,\n  backgroundColor: 'rgba(168, 0, 0, 0.2)'\n};\n\n/**\n * @private\n */\nexport const defaultChatMessageContainer = (theme: Theme): ComponentSlotStyle => ({\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginRight: '0rem',\n  '& img': {\n    maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n    height: 'auto !important'\n  },\n  '& video': {\n    maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n    height: 'auto !important'\n  },\n  '& p': {\n    // Deal with awkward padding seen in messages from Teams.\n    // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n    marginBlock: '0.125rem'\n  },\n  '& blockquote': {\n    backgroundColor: theme.palette.white,\n    clear: 'left',\n    minHeight: '2.25rem',\n    width: 'fit-content',\n    margin: '7px 0px',\n    padding: '7px 15px',\n    border: 'solid',\n    borderRadius: '4px',\n    borderWidth: '1px',\n    borderColor: theme.palette.neutralQuaternary,\n    borderLeftWidth: '4px'\n  },\n  '& table': {\n    backgroundColor: theme.palette.white,\n    border: theme.palette.neutralQuaternary,\n    borderCollapse: 'collapse',\n    tableLayout: 'auto',\n    width: '100%',\n\n    '& tr': {\n      border: `1px solid ${theme.palette.neutralQuaternary}`,\n\n      '& td': {\n        border: `1px solid ${theme.palette.neutralQuaternary}`,\n        wordBreak: 'normal',\n        padding: '0px 5px'\n      }\n    }\n  },\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n});\n\n/**\n * @private\n * @conditional-compile-remove(data-loss-prevention)\n */\nexport const defaultBlockedMessageStyleContainer = (theme: Theme): ComponentSlotStyle => ({\n  maxWidth: '100%',\n  minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n  marginRight: '0rem',\n  color: theme.palette.neutralSecondary,\n\n  '& i': {\n    paddingTop: '0.25rem'\n  },\n\n  '& p': {\n    // Deal with awkward padding seen in messages from Teams.\n    // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n    marginBlock: '0.125rem',\n    paddingRight: '0.75rem',\n    fontStyle: 'italic'\n  },\n\n  '& a': {\n    marginBlock: '0.125rem',\n    fontStyle: 'normal',\n    color: theme.palette.themePrimary,\n    textDecoration: 'none'\n  },\n  // This makes message bubble show border in high contrast mode making each message distinguishable\n  border: '1px solid transparent'\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\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 messageStatusContainerStyle = (mine: boolean): string =>\n  mergeStyles({\n    marginLeft: mine ? '0.25rem' : '0rem'\n  });\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': { background: 'none' },\n  '&:active': { background: 'none' }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});\n"]}
+{"version":3,"file":"MessageThread.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/MessageThread.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IButtonStyles, mergeStyles } from '@fluentui/react';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport { CSSProperties } from 'react';\nimport { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles';\nimport { ComponentSlotStyle } from '../../types';\n\n// Minimum chat bubble width. This matches the minimum chat bubble width from FluentUI\n// that can contain a message and a timestamp.\nconst CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25;\n\n// Chat messages should span just short of the width of the container.\n// When calculating the width of a message we also must take into account\n// the width of the avatar/gutter and the gap between the message and avatar/gutter.\nconst AVATAR_WIDTH_REM = 2;\nconst AVATAR_MARGIN_LEFT = 2.5;\nconst AVATAR_MESSAGE_GAP_REM = 0.125;\nconst MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2;\n\n// Avatars should display on top of chat messages when the chat thread is narrow\nconst MESSAGE_AVATAR_OVERLAP_REM = 0.925;\nconst CHAT_MESSAGE_ZINDEX = 1;\nconst AVATAR_ZINDEX = 2;\n// new message button should be on top of chat message\nconst NEW_MESSAGE_BUTTON_ZINDEX = 2;\n\n/**\n * @private\n */\nexport const messageThreadContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  maxHeight: '100%',\n  overflow: 'auto',\n  position: 'relative',\n  alignSelf: 'center'\n});\n\n/**\n * @private\n */\nexport const messageThreadWrapperContainerStyle = mergeStyles({\n  height: '100%',\n  width: '100%',\n  position: 'relative'\n});\n\n/**\n * @private\n */\nexport const noMessageStatusStyle = mergeStyles({\n  // This should match the size of the message status indicator icon to ensure\n  // multiple messages sent by the user are aligned correctly.\n  width: `${MESSAGE_STATUS_INDICATOR_SIZE_REM}rem`\n});\n\n/**\n * @private\n */\nexport const useChatStyles = makeStyles({\n  root: {\n    paddingTop: '0.8rem',\n    paddingBottom: '0.5rem',\n    paddingRight: '0.6rem',\n    paddingLeft: '0.6rem',\n    ...shorthands.border('none'),\n    ...shorthands.overflow('auto'),\n    // `height: 100%` ensures that the Chat component covers 100% of it's parents height\n    // to prevent intermittent scrollbars when GIFs are present in the chat.\n    height: '100%',\n\n    '& a:link': {\n      color: tokens.colorBrandForegroundLink\n    },\n    '& a:visited': {\n      color: tokens.colorBrandForegroundLinkHover\n    },\n    '& a:hover': {\n      color: tokens.colorBrandForegroundLinkHover\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const useChatMessageRenderStyles = makeStyles({\n  rootCommon: {\n    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\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  },\n  bodyMyMessage: {\n    width: '100%',\n    marginTop: '0'\n  },\n  bodyWithoutAvatar: {\n    marginLeft: `${AVATAR_MARGIN_LEFT}rem`,\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 auto',\n    gridTemplateAreas: `\n        \". actions\"\n        \"body body\"\n      `,\n    gridGap: '0',\n    columnGap: '0',\n    paddingTop: '0',\n    marginLeft: '0',\n    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\n  body: {\n    paddingBottom: '10px',\n    marginTop: '1rem',\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginLeft: '0rem',\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n\n    '&:hover ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '&:focus ~ .fui-ChatMyMessage__actions': {\n      visibility: 'visible'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: 600\n    }\n  },\n  bodyAttached: {\n    marginTop: '0.125rem'\n  },\n  menu: {\n    boxShadow: tokens.shadow4,\n    backgroundColor: tokens.colorNeutralBackground1,\n    marginRight: '1px',\n    position: 'absolute',\n    top: '-2px',\n    right: '0',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    zIndex: 1,\n    lineHeight: tokens.lineHeightBase100,\n    visibility: 'hidden',\n\n    '&:hover, &:focus': {\n      cursor: 'pointer',\n      visibility: 'visible'\n    }\n  },\n  menuAttached: {\n    top: '-18px'\n  },\n  menuHidden: {\n    visibility: 'hidden'\n  },\n  menuVisible: {\n    visibility: 'visible'\n  }\n});\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    '&:focus-visible': {\n      ...shorthands.outline('0')\n    }\n  },\n  body: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    paddingBottom: '10px',\n    zIndex: CHAT_MESSAGE_ZINDEX,\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& > div:first-of-type': {\n      flexWrap: 'wrap'\n    },\n    '& msft-mention': {\n      color: tokens.colorStatusWarningBackground3,\n      fontWeight: tokens.fontWeightSemibold\n    },\n    '& img': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& video': {\n      maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element\n      height: 'auto !important'\n    },\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem')\n    },\n    '& blockquote': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      clear: 'left',\n      minHeight: '2.25rem',\n      width: 'fit-content',\n      marginTop: '7px',\n      marginRight: '0px',\n      marginLeft: '0px',\n      marginBottom: '7px',\n      paddingTop: '7px',\n      paddingRight: '15px',\n      paddingLeft: '15px',\n      paddingBottom: '7px',\n      ...shorthands.border('solid'),\n      ...shorthands.borderRadius('4px'),\n      ...shorthands.borderWidth('1px'),\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderLeftWidth: '4px'\n    },\n    '& table': {\n      backgroundColor: tokens.colorBrandBackgroundInverted,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n      borderCollapse: 'collapse',\n      tableLayout: 'auto',\n      width: '100%',\n\n      '& tr': {\n        ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`),\n\n        '& td': {\n          ...shorthands.border('1px', 'solid', `${tokens.colorNeutralStroke1Selected}`),\n          wordBreak: 'normal',\n          paddingTop: '0px',\n          paddingRight: '5px'\n        }\n      }\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});\n\n/**\n * @private\n */\nexport const useChatMessageCommonStyles = makeStyles({\n  failed: {\n    //TODO: can we reuse a theme color here?\n    backgroundColor: 'rgba(168, 0, 0, 0.2)'\n  },\n  blocked: {\n    maxWidth: '100%',\n    minWidth: `${CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM}rem`,\n    marginRight: '0rem',\n    color: tokens.colorNeutralForeground2,\n\n    // This makes message bubble show border in high contrast mode making each message distinguishable\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    '& i': {\n      paddingTop: '0.25rem'\n    },\n\n    '& p': {\n      // Deal with awkward padding seen in messages from Teams.\n      // For more info see https://github.com/Azure/communication-ui-library/pull/1507\n      ...shorthands.marginBlock('0.125rem'),\n      paddingRight: '0.75rem',\n      fontStyle: 'italic'\n    },\n\n    '& a': {\n      ...shorthands.marginBlock('0.125rem'),\n      fontStyle: 'normal',\n      color: tokens.colorBrandForegroundLink,\n      ...shorthands.textDecoration('none')\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const gutterWithAvatar: ComponentSlotStyle = {\n  paddingTop: '1.65rem',\n  width: `${AVATAR_WIDTH_REM}rem`,\n  position: 'relative',\n  float: 'left',\n  display: 'block',\n  visibility: 'visible',\n  zIndex: AVATAR_ZINDEX\n};\n\n/**\n * @private\n */\nexport const gutterWithHiddenAvatar: ComponentSlotStyle = {\n  ...gutterWithAvatar,\n  visibility: 'hidden',\n  // we use this hidden avatar just as a width placeholder\n  // the placeholder is needed for responsive bubble width\n  height: 0\n};\n\n/**\n * @private\n */\nexport const newMessageButtonStyle = mergeStyles({\n  float: 'right',\n  width: 'fit-content'\n});\n\n/**\n * @private\n */\nexport const buttonWithIconStyles: IButtonStyles = {\n  textContainer: {\n    display: 'contents'\n  }\n};\n\n/**\n * @private\n */\nexport const loadPreviousMessageButtonStyle = mergeStyles({\n  border: 'none',\n  minHeight: '1.5rem',\n  '&:hover': { background: 'none' },\n  '&:active': { background: 'none' }\n});\n\n/**\n * @private\n */\nexport const DownIconStyle = mergeStyles({\n  marginRight: '0.5em'\n});\n"]}

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

@@ -34,6 +34,14 @@ export declare const fileUploadCardsStyles: string;
  * @private
  */
 export declare const fileCardBoxStyle: string;
+/**
+ * @private
+ */
+export declare const defaultSendBoxInactiveBorderThicknessREM = 0.0625;
+/**
+ * @private
+ */
+export declare const defaultSendBoxActiveBorderThicknessREM = 0.125;
 /**
  * @private
  */

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

@@ -51,8 +51,14 @@ export const fileCardBoxStyle = mergeStyles({
     width: '100%',
     padding: '0.50rem'
 });
-const defaultSendBoxInactiveBorderThicknessREM = 0.0625;
-const defaultSendBoxActiveBorderThicknessREM = 0.125;
+/**
+ * @private
+ */
+export const defaultSendBoxInactiveBorderThicknessREM = 0.0625;
+/**
+ * @private
+ */
+export const defaultSendBoxActiveBorderThicknessREM = 0.125;
 /**
  * @private
  */

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

@@ -1 +1 @@
-{"version":3,"file":"SendBox.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/SendBox.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAiB,MAAM,iBAAiB,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IACtF,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,QAAQ;IAClB;;OAEG;IACH,oBAAoB,EAAE;QACpB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC;IACzC,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC;IAC/C,MAAM,EAAE,2BAA2B;IACnC,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,SAAS;CACnB,CAAC,CAAC;AAEH,MAAM,wCAAwC,GAAG,MAAM,CAAC;AACxD,MAAM,sCAAsC,GAAG,KAAK,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAIvC,EAAU,EAAE;IACX,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;IACtG,MAAM,iBAAiB,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;IAExG,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,wCAAwC,CAAC;IAChF,MAAM,qBAAqB,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,sCAAsC,CAAC;IAEpF,OAAO;QACL,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,MAAM,EAAE,GAAG,eAAe,aAAa,WAAW,EAAE;QAEpD,mHAAmH;QACnH,uHAAuH;QACvH,MAAM,EAAE,GAAG,sCAAsC,GAAG,eAAe,KAAK;QAExE,wCAAwC,EAAE;YACxC,MAAM,EAAE,GAAG,qBAAqB,aAAa,iBAAiB,EAAE;YAChE,MAAM,EAAE,GAAG,sCAAsC,GAAG,qBAAqB,KAAK;SAC/E;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, IStyle, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const suppressIconStyle = {\n  iconContainer: { minHeight: '0', minWidth: '0', height: '0', width: '0', margin: '0' },\n  icon: { display: 'none' }\n};\n\n/**\n * @private\n */\nexport const sendBoxWrapperStyles = mergeStyles({\n  margin: '0.25rem',\n  overflow: 'hidden',\n  /**\n   * margin-top set for all the child components of sendbox except first\n   */\n  ':not(:first-child)': {\n    marginTop: '0.25rem'\n  }\n});\n\n/**\n * @private\n */\nexport const sendButtonStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem'\n});\n\n/**\n * @private\n */\nexport const sendIconStyle = mergeStyles({\n  width: '1.25rem',\n  height: '1.25rem',\n  margin: 'auto'\n});\n\n/**\n * @private\n */\nexport const fileUploadCardsStyles = mergeStyles({\n  margin: '0 0.25rem 0.25rem 0.25rem',\n  maxHeight: '12.5rem',\n  overflow: 'auto'\n});\n\n/**\n * @private\n */\nexport const fileCardBoxStyle = mergeStyles({\n  width: '100%',\n  padding: '0.50rem'\n});\n\nconst defaultSendBoxInactiveBorderThicknessREM = 0.0625;\nconst defaultSendBoxActiveBorderThicknessREM = 0.125;\n\n/**\n * @private\n */\nexport const borderAndBoxShadowStyle = (props: {\n  theme: Theme;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): IStyle => {\n  const { theme, hasErrorMessage, disabled } = props;\n  const borderColor = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.neutralSecondary;\n  const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;\n\n  const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;\n  const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;\n\n  return {\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${borderThickness}rem solid ${borderColor}`,\n\n    // The border thickness of the sendbox wrapper changes on hover, to prevent the border thickness change causing the\n    // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.\n    margin: `${defaultSendBoxActiveBorderThicknessREM - borderThickness}rem`,\n\n    ':hover, :active, :focus, :focus-within': {\n      border: `${borderActiveThickness}rem solid ${borderColorActive}`,\n      margin: `${defaultSendBoxActiveBorderThicknessREM - borderActiveThickness}rem`\n    }\n  };\n};\n"]}
+{"version":3,"file":"SendBox.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/SendBox.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAiB,MAAM,iBAAiB,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IACtF,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,QAAQ;IAClB;;OAEG;IACH,oBAAoB,EAAE;QACpB,SAAS,EAAE,SAAS;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC;IACzC,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,MAAM;CACf,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC;IAC/C,MAAM,EAAE,2BAA2B;IACnC,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,SAAS;CACnB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,wCAAwC,GAAG,MAAM,CAAC;AAC/D;;GAEG;AACH,MAAM,CAAC,MAAM,sCAAsC,GAAG,KAAK,CAAC;AAE5D;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAIvC,EAAU,EAAE;IACX,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;IACtG,MAAM,iBAAiB,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;IAExG,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,wCAAwC,CAAC;IAChF,MAAM,qBAAqB,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,sCAAsC,CAAC;IAEpF,OAAO;QACL,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,MAAM,EAAE,GAAG,eAAe,aAAa,WAAW,EAAE;QAEpD,mHAAmH;QACnH,uHAAuH;QACvH,MAAM,EAAE,GAAG,sCAAsC,GAAG,eAAe,KAAK;QAExE,wCAAwC,EAAE;YACxC,MAAM,EAAE,GAAG,qBAAqB,aAAa,iBAAiB,EAAE;YAChE,MAAM,EAAE,GAAG,sCAAsC,GAAG,qBAAqB,KAAK;SAC/E;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, IStyle, Theme } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const suppressIconStyle = {\n  iconContainer: { minHeight: '0', minWidth: '0', height: '0', width: '0', margin: '0' },\n  icon: { display: 'none' }\n};\n\n/**\n * @private\n */\nexport const sendBoxWrapperStyles = mergeStyles({\n  margin: '0.25rem',\n  overflow: 'hidden',\n  /**\n   * margin-top set for all the child components of sendbox except first\n   */\n  ':not(:first-child)': {\n    marginTop: '0.25rem'\n  }\n});\n\n/**\n * @private\n */\nexport const sendButtonStyle = mergeStyles({\n  height: '2.25rem',\n  width: '2.25rem'\n});\n\n/**\n * @private\n */\nexport const sendIconStyle = mergeStyles({\n  width: '1.25rem',\n  height: '1.25rem',\n  margin: 'auto'\n});\n\n/**\n * @private\n */\nexport const fileUploadCardsStyles = mergeStyles({\n  margin: '0 0.25rem 0.25rem 0.25rem',\n  maxHeight: '12.5rem',\n  overflow: 'auto'\n});\n\n/**\n * @private\n */\nexport const fileCardBoxStyle = mergeStyles({\n  width: '100%',\n  padding: '0.50rem'\n});\n\n/**\n * @private\n */\nexport const defaultSendBoxInactiveBorderThicknessREM = 0.0625;\n/**\n * @private\n */\nexport const defaultSendBoxActiveBorderThicknessREM = 0.125;\n\n/**\n * @private\n */\nexport const borderAndBoxShadowStyle = (props: {\n  theme: Theme;\n  hasErrorMessage: boolean;\n  disabled: boolean;\n}): IStyle => {\n  const { theme, hasErrorMessage, disabled } = props;\n  const borderColor = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.neutralSecondary;\n  const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;\n\n  const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;\n  const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;\n\n  return {\n    borderRadius: theme.effects.roundedCorner4,\n    border: `${borderThickness}rem solid ${borderColor}`,\n\n    // The border thickness of the sendbox wrapper changes on hover, to prevent the border thickness change causing the\n    // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.\n    margin: `${defaultSendBoxActiveBorderThicknessREM - borderThickness}rem`,\n\n    ':hover, :active, :focus, :focus-within': {\n      border: `${borderActiveThickness}rem solid ${borderColorActive}`,\n      margin: `${defaultSendBoxActiveBorderThicknessREM - borderActiveThickness}rem`\n    }\n  };\n};\n"]}

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

@@ -5,6 +5,6 @@ import { mergeStyles } from '@fluentui/react';
  * @private
  */
 export const systemMessageIconStyle = mergeStyles({
-    margin: '0 0.688rem 0 0'
+    marginInlineEnd: '0.688rem'
 });
 //# sourceMappingURL=SystemMessage.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/SystemMessage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAChD,MAAM,EAAE,gBAAgB;CACzB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const systemMessageIconStyle = mergeStyles({\n  margin: '0 0.688rem 0 0'\n});\n"]}
+{"version":3,"file":"SystemMessage.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/SystemMessage.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAChD,eAAe,EAAE,UAAU;CAC5B,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const systemMessageIconStyle = mergeStyles({\n  marginInlineEnd: '0.688rem'\n});\n"]}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IStyle } from '@fluentui/react';
+import { ComponentSlotStyle } from '../../types';
+/**
+ * Function to create a React.CSSProperties object from a v8 style object.
+ * This function is still not ideal
+ * as v8Style can use pseudo-class selectors that style objects can't process correctly.
+ *
+ * @private
+ */
+export declare function createStyleFromV8Style(v8Style: IStyle | ComponentSlotStyle): React.CSSProperties | undefined;
+//# sourceMappingURL=v8StyleShim.d.ts.map

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

@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * Function to create a React.CSSProperties object from a v8 style object.
+ * This function is still not ideal
+ * as v8Style can use pseudo-class selectors that style objects can't process correctly.
+ *
+ * @private
+ */
+export function createStyleFromV8Style(v8Style) {
+    const result = {};
+    if (v8Style === undefined || v8Style === null || typeof v8Style === 'boolean' || typeof v8Style === 'string') {
+        return undefined;
+    }
+    else if (typeof v8Style === 'object') {
+        // v8Style is a style object
+        for (const record in v8Style) {
+            if (typeof v8Style[record] === 'string') {
+                // v8Style[record] is just a simple style
+                const msSuffix = 'MS';
+                if (record.startsWith(msSuffix)) {
+                    // React.CSSProperties uses camelCase for MS properties but v8Style uses PascalCase
+                    const newRecord = record.substring(0, msSuffix.length).toLowerCase + record.substring(msSuffix.length);
+                    result[newRecord] = v8Style[record];
+                }
+                else {
+                    result[record] = v8Style[record];
+                }
+            }
+            else {
+                result[record] = createStyleFromV8Style(v8Style[record]);
+            }
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=v8StyleShim.js.map

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

@@ -0,0 +1 @@
+{"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,CAAC,OAAoC;IACzE,MAAM,MAAM,GAAG,EAAE,CAAC;IAClB,IAAI,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,OAAO,KAAK,SAAS,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QAC5G,OAAO,SAAS,CAAC;KAClB;SAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;QACtC,4BAA4B;QAC5B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;YAC5B,IAAI,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;gBACvC,yCAAyC;gBACzC,MAAM,QAAQ,GAAG,IAAI,CAAC;gBACtB,IAAI,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;oBAC/B,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;iBACrC;qBAAM;oBACL,MAAM,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;iBAClC;aACF;iBAAM;gBACL,MAAM,CAAC,MAAM,CAAC,GAAG,sBAAsB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;aAC1D;SACF;KACF;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStyle } 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: IStyle | ComponentSlotStyle): React.CSSProperties | undefined {\n  const result = {};\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/Datetime.d.ts

@@ -8,16 +8,15 @@ export declare const formatTimeForChatMessage: (messageDate: Date) => string;
  */
 export declare const formatDateForChatMessage: (messageDate: Date) => string;
 /**
- * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text like the
- * following:
- *
- * 1:30 p.m.
- * Yesterday 1:30 p.m.
- * Monday 1:30 p.m.
- * 2021-01-10 1:30 p.m.
+ * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text
+ * using the system locale.
+ * <time in locale format>.
+ * Yesterday <time in locale format>.
+ * <dateStrings day of week> <time in locale format>.
+ * <date in locale format> <time in locale format>.
  *
  * If message is after yesterday, then only show the time.
- * If message is before yesteray and after day before yesterday, then show 'Yesterday' plus the time.
+ * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.
  * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.
  *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.
  * If message is in previous or older weeks, then show date string plus the time.