import { CSSProperties } from 'react' ; import { ComponentSlotStyle } from '@fluentui/react-northstar' ; import { IButtonStyles , mergeStyles } from '@fluentui/react' ; import { MESSAGE_STATUS_INDICATOR_SIZE_REM } from './MessageStatusIndicator.styles' ; const CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM = 6.25 ; const AVATAR_WIDTH_REM = 2 ; const AVATAR_MESSAGE_GAP_REM = 0.5 ; const MESSAGE_AMOUNT_OUT_FROM_EDGE_REM = 2 ; const MESSAGE_AVATAR_OVERLAP_REM = 0.425 ; const CHAT_MESSAGE_ZINDEX = 1 ; const AVATAR_ZINDEX = 2 ; private export const messageThreadContainerStyle = mergeStyles ( { height : '100%' , width : '100%' , maxHeight : '100%' , overflow : 'auto' , position : 'relative' , alignSelf : 'center' } ) ; private export const noMessageStatusStyle = mergeStyles ( { width : `${ MESSAGE_STATUS_INDICATOR_SIZE_REM }rem` } ) ; private export const chatStyle = { paddingBottom : '0.5rem' , paddingTop : '0.8rem' , border : 'none' , overflow : 'auto' } ; private export const newMessageButtonContainerStyle = mergeStyles ( { position : 'absolute' , zIndex : 1 , bottom : 0 , right : '1.5rem' } ) ; private export const chatMessageStyle = { overflowY : 'hidden' } ; private export const chatMessageDateStyle = { fontWeight : 600 } ; private export const defaultChatItemMessageContainer = ( overlapAvatarAndMessage ) : ComponentSlotStyle => { 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 } ; } ; private export const defaultMyChatMessageContainer = { maxWidth : '100%' , minWidth : `${ CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM }rem` , marginLeft : '0rem' } ; private export const defaultChatMessageContainer = { maxWidth : '100%' , minWidth : `${ CHAT_MESSAGE_CONTAINER_MIN_WIDTH_REM }rem` , marginRight : '0rem' } ; private export const gutterWithAvatar = { width : `${ AVATAR_WIDTH_REM }` , position : 'relative' , float : 'left' , display : 'block' , visibility : 'visible' , zIndex : AVATAR_ZINDEX } ; private export const gutterWithHiddenAvatar = { ... gutterWithAvatar , visibility : 'hidden' , height : 0 } ; private export const messageStatusContainerStyle = ( mine ) : string => mergeStyles ( { marginLeft : mine ? '0.25rem' : '0rem' } ) ; private export const newMessageButtonStyle = mergeStyles ( { float : 'right' , width : 'fit-content' } ) ; private export const buttonWithIconStyles = { textContainer : { display : 'contents' } } ; private export const loadPreviousMessageButtonStyle = mergeStyles ( { border : 'none' , minHeight : '1.5rem' , '&:hover' : { background : 'none' } , '&:active' : { background : 'none' } } ) ; private export const DownIconStyle = mergeStyles ( { marginRight : '0.5em' } ) ;