import { mergeStyles , Stack } from '@fluentui/react' ; import { CommunicationParticipant , ErrorBar , MessageProps , MessageRenderer , MessageThread , SendBox , TypingIndicator , ParticipantMenuItemsCallback , MessageThreadStyles , SendBoxStylesProps , TypingIndicatorStylesProps } from '@internal/react-components' ; import React , { useCallback , useEffect } from 'react' ; import { AvatarPersona , AvatarPersonaDataCallback } from '../common/AvatarPersona' ; import { useAdapter } from './adapter/ChatAdapterProvider' ; import { ChatCompositeOptions } from './ChatComposite' ; import { ChatHeader , getHeaderProps } from './ChatHeader' ; import { useAdaptedSelector } from './hooks/useAdaptedSelector' ; import { usePropsFor } from './hooks/usePropsFor' ; import { chatArea , chatContainer , chatWrapper , messageThreadChatCompositeStyles , sendBoxChatCompositeStyles , typingIndicatorChatCompositeStyles , participantListContainerPadding , typingIndicatorContainerStyles } from './styles/Chat.styles' ; import { ParticipantContainer } from './ParticipantContainer' ; private export type ChatScreenProps = { options ? : ChatCompositeOptions ; onFetchAvatarPersonaData ? : AvatarPersonaDataCallback ; onRenderMessage ? : ( messageProps : MessageProps , defaultOnRender ? : MessageRenderer ) => JSX . Element ; onRenderTypingIndicator ? : ( typingUsers : CommunicationParticipant [ ] ) => JSX . Element ; onFetchParticipantMenuItems ? : ParticipantMenuItemsCallback ; styles ? : ChatScreenStyles ; hasFocusOnMount ? : 'sendBoxTextField' | false ; } ; private export type ChatScreenStyles = { messageThread ? : MessageThreadStyles ; sendBox ? : SendBoxStylesProps ; typingIndicator ? : TypingIndicatorStylesProps ; } ; private export const ChatScreen = ( props ) : JSX . Element => { const { onFetchAvatarPersonaData , onRenderMessage , onRenderTypingIndicator , options , styles } = props ; const defaultNumberOfChatMessagesToReload = 5 ; const sendBoxParentStyle = mergeStyles ( { width : '100%' } ) ; const adapter = useAdapter ( ) ; useEffect ( ( ) => { adapter . fetchInitialData ( ) ; } , [ adapter ] ) ; const messageThreadProps = usePropsFor ( MessageThread ) ; const sendBoxProps = usePropsFor ( SendBox ) ; const typingIndicatorProps = usePropsFor ( TypingIndicator ) ; const headerProps = useAdaptedSelector ( getHeaderProps ) ; const errorBarProps = usePropsFor ( ErrorBar ) ; const onRenderAvatarCallback = useCallback ( ( userId , defaultOptions ) => { return ( < AvatarPersona userId = { userId } hidePersonaDetails = { true } { ... defaultOptions } dataProvider = { onFetchAvatarPersonaData } / > ) ; } , [ onFetchAvatarPersonaData ] ) ; const sendBoxStyles = Object . assign ( { } , sendBoxChatCompositeStyles , styles ?. sendBox ) ; const messageThreadStyles = Object . assign ( { } , messageThreadChatCompositeStyles , styles ?. messageThread ) ; const typingIndicatorStyles = Object . assign ( { } , typingIndicatorChatCompositeStyles , styles ?. typingIndicator ) ; return ( < Stack className = { chatContainer } grow > { options ?. topic !== false && < ChatHeader { ... headerProps } / > } < Stack className = { chatArea } tokens = { participantListContainerPadding } horizontal grow > < Stack className = { chatWrapper } grow > { options ?. errorBar !== false && < ErrorBar { ... errorBarProps } / > } < MessageThread { ... messageThreadProps } onRenderAvatar = { onRenderAvatarCallback } onRenderMessage = { onRenderMessage } numberOfChatMessagesToReload = { defaultNumberOfChatMessagesToReload } styles = { messageThreadStyles } / > < Stack className = { sendBoxParentStyle } > < div className = { mergeStyles ( typingIndicatorContainerStyles ) } > { onRenderTypingIndicator ? ( onRenderTypingIndicator ( typingIndicatorProps . typingUsers ) ) : ( < TypingIndicator { ... typingIndicatorProps } styles = { typingIndicatorStyles } / > ) } < /div> < SendBox { ... sendBoxProps } autoFocus = { options ?. autoFocus } styles = { sendBoxStyles } / > < /Stack> < /Stack> { options ?. participantPane === true && ( < ParticipantContainer onFetchAvatarPersonaData = { onFetchAvatarPersonaData } onFetchParticipantMenuItems = { props . onFetchParticipantMenuItems } / > ) } < /Stack> < /Stack>); } ;