import { useSelector , getChatSelector , ChatClientState , useChatThreadClient } from '@azure/communication-react' ; import { Message } from '@azure/communication-react' ; import { MessageThread } from '@azure/communication-react' ; import React , { useEffect } from 'react' ; const customMessageContainerStyle = { height : '4rem' , OverflowY : 'scroll' , border : 'solid 2px' } ; const CustomChatThread = ( { messages } ) : JSX . Element => { return ( < > { messages . map ( ( message ) => message . messageType === 'chat' ? ( < div > { message . senderDisplayName } : { message . content } < /div>) : undefined)} < />); } ; const topicSelector = ( state , props ) : string | undefined => state . threads [ props . threadId ] . properties ?. topic ; export const UseSelectorExample = ( ) : JSX . Element => { const chatThreadClient = useChatThreadClient ( ) ; const threadId = chatThreadClient . threadId ; useEffect ( ( ) => { ( async ( ) => { for await ( const _ of chatThreadClient . listMessages ( ) ) ; chatThreadClient . getProperties ( ) ; } ) ( ) ; } , [ chatThreadClient ] ) ; const topic = useSelector ( topicSelector , { threadId } ) ?? '' ; const messageThreadProps = useSelector ( getChatSelector ( MessageThread ) ) ; return ( < > < h5 > Customized Message Component : < /h5> < div > Topic Name : { topic } < /div> < div style = { customMessageContainerStyle } > < CustomChatThread messages = { messageThreadProps . messages } /> < /div> < />); } ;