@fluentui/react-northstar
Version:
A themable React component library.
174 lines (173 loc) • 6.43 kB
JavaScript
import _isNil from "lodash/isNil";
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { chatMessageSlotClassNames } from '../../../../components/Chat/ChatMessage';
import { pxToRem } from '../../../../utils';
import { screenReaderContainerStyles } from '../../../../utils/accessibility/Styles/accessibilityStyles';
var displayActionMenu = function displayActionMenu(overlayZIndex) {
return {
zIndex: overlayZIndex,
overflow: 'visible',
opacity: 1,
width: 'auto'
};
};
export var chatMessageStylesComfyRefresh = {
root: function root(_ref) {
var _ref2;
var p = _ref.props,
v = _ref.variables,
theme = _ref.theme;
var borderFocusStyles = getBorderFocusStyles({
borderRadius: 'inherit',
variables: theme.siteVariables,
// Fixes the bubble focus border rendering on top of the user avatar
zIndex: 'initial'
});
return _ref2 = {
display: 'flex',
flexDirection: 'column',
alignItems: p.mine ? 'flex-end' : 'flex-start',
outline: 'none'
}, _ref2["&:focus-visible ." + chatMessageSlotClassNames.timestamp] = {
opacity: 1
}, _ref2["&:focus-visible ." + chatMessageSlotClassNames.bubble] = borderFocusStyles[':focus-visible'], _ref2;
},
header: function header(_ref3) {
var p = _ref3.props,
theme = _ref3.theme;
return {
display: 'flex',
width: '100%',
justifyContent: p.mine ? 'flex-end' : 'start',
gap: pxToRem(8),
'& > div': {
paddingTop: pxToRem(8)
},
color: theme.siteVariables.colorScheme.default.foreground2
};
},
author: function author(_ref4) {
var p = _ref4.props;
return Object.assign({}, (p.mine || p.attached === 'bottom' || p.attached === true) && screenReaderContainerStyles, {
fontWeight: 400,
marginBottom: pxToRem(2),
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
});
},
timestamp: function timestamp(_ref5) {
var v = _ref5.variables;
return Object.assign({
display: 'inline-block',
alignSelf: 'self-start',
whiteSpace: 'nowrap',
opacity: 0
}, v.hasReducedHorizontalSpace && {
fontSize: '1rem',
margin: pxToRem(3) + " " + pxToRem(2.5) + " 0"
});
},
body: function body(_ref6) {
var p = _ref6.props,
v = _ref6.variables;
return Object.assign({
display: 'flex',
flexDirection: p.mine ? 'row-reverse' : 'row',
position: 'relative',
maxWidth: '100%'
}, !p.mine && v.hasReducedHorizontalSpace && {
marginRight: pxToRem(16)
});
},
bubble: function bubble(_ref7) {
var _ref8, _hover, _ref9, _Object$assign, _ref10, _ref11, _ref12;
var p = _ref7.props,
v = _ref7.variables,
theme = _ref7.theme;
return Object.assign({
position: 'relative',
border: v.border,
borderRadius: pxToRem(6),
paddingLeft: pxToRem(16),
paddingRight: pxToRem(16),
paddingTop: pxToRem(8),
paddingBottom: p.hasReactions ? pxToRem(10) : pxToRem(8),
backgroundColor: p.mine ? v.backgroundColorMine : v.backgroundColor,
backgroundAttachment: 'fixed'
}, p.failed && {
backgroundImage: 'none',
backgroundColor: theme.siteVariables.colorScheme.red.background1,
border: "1px solid " + theme.siteVariables.colorScheme.red.border
}, (v.hasMention || v.isImportant) && (_ref8 = {}, _ref8["& ." + chatMessageSlotClassNames.bar] = {
backgroundColor: v.hasMention ? v.hasMentionColor : v.isImportantColor,
position: 'absolute',
borderBottomLeftRadius: 'inherit',
borderTopLeftRadius: 'inherit',
height: '100%',
left: '0',
top: '0',
width: pxToRem(3)
}, _ref8), _isNil(v.showActionMenu) && p.hasActionMenu && Object.assign({
':hover': (_hover = {}, _hover["& > ." + chatMessageSlotClassNames.actionMenu] = displayActionMenu(v.overlayZIndex), _hover)
}, p.showActionMenu && (_ref9 = {}, _ref9["& ." + chatMessageSlotClassNames.actionMenu] = displayActionMenu(v.overlayZIndex), _ref9)), (_Object$assign = {}, _Object$assign["&:hover + ." + chatMessageSlotClassNames.bubbleInset + " ." + chatMessageSlotClassNames.timestamp] = {
opacity: 1
}, _Object$assign), p.attached === true && !v.isImportant && (_ref10 = {}, _ref10[p.mine ? 'borderTopRightRadius' : 'borderTopLeftRadius'] = 0, _ref10[p.mine ? 'borderBottomRightRadius' : 'borderBottomLeftRadius'] = 0, _ref10), p.attached === 'top' && !v.isImportant && (_ref11 = {}, _ref11[p.mine ? 'borderBottomRightRadius' : 'borderBottomLeftRadius'] = 0, _ref11), p.attached === 'bottom' && !v.isImportant && (_ref12 = {}, _ref12[p.mine ? 'borderTopRightRadius' : 'borderTopLeftRadius'] = 0, _ref12));
},
bubbleInset: function bubbleInset(_ref13) {
var _Object$assign2;
var p = _ref13.props,
v = _ref13.variables;
return Object.assign({
display: 'flex',
paddingTop: pxToRem(10),
paddingBottom: 0,
// use padding instead of margin so that the bubble container's :hover
// styles still apply when mousing over the gap between the container
// and bubble-inset.
paddingLeft: v.hasReducedHorizontalSpace ? pxToRem(2.5) : pxToRem(5),
paddingRight: v.hasReducedHorizontalSpace ? pxToRem(2.5) : pxToRem(5)
}, p.mine ? {
right: '100%',
flexDirection: 'row-reverse'
} : {
left: '100%'
}, (_Object$assign2 = {}, _Object$assign2["&:hover ." + chatMessageSlotClassNames.timestamp] = {
opacity: 1
}, _Object$assign2));
},
badge: function badge(_ref14) {
var p = _ref14.props,
v = _ref14.variables;
return Object.assign({
position: 'relative',
top: pxToRem(-5),
width: pxToRem(25),
height: pxToRem(25),
backgroundColor: 'none',
color: v.isImportantColor,
zIndex: v.zIndex,
'& > :first-child': {
display: 'inline-flex',
margin: '0 auto'
}
}, p.mine ? {
marginRight: pxToRem(-5)
} : {
marginLeft: pxToRem(-5)
});
},
reactionGroup: function reactionGroup(_ref15) {
var p = _ref15.props;
return Object.assign({
position: 'relative',
display: 'flex',
float: 'left',
zIndex: 1
}, p.mine && {
float: 'right',
marginRight: pxToRem(-4)
});
}
};
//# sourceMappingURL=chatMessageStylesComfyRefresh.js.map