const ContainerPadding = styled.div` padding-left: 2.5rem; padding-right: 2.5rem; padding-bottom: 24px; overflow-y: scroll; height: calc(100vh - 241px); scroll-behavior: smooth; `; // TODO enable unread in threads once contract implements them if ( props.messages.length > 0 && !props.openThreadId ) { const storageKey = "lastReportedMessage"; let lastMessageId; for ( let i = props.messages.length - 1; i >= 0; i-- ) { if ( !props.messages[ i ]?.isTemporal || false ) { // don't report temporal messages lastMessageId = props.messages[ i ].id; break; } } const oldReportedId = Storage.privateGet( storageKey ); if ( oldReportedId != lastMessageId && lastMessageId ) { props .readMessage( lastMessageId ) .then( () => Storage.privateSet( storageKey, lastMessageId ) ); } } State.init( { imageSrc: "", showImage: false, } ); const divRef = useRef( null ); const setImage = useCallback( ( src ) => { State.update( { imageSrc: src } ); State.update( { showImage: true } ); }, [] ); const closeImagePopup = useCallback( () => { State.update( { showImage: false } ); State.update( { imageSrc: "" } ); }, [] ); let lastMessageId = 0; if ( props.message.length > 0 ) { lastMessageId = props.messages[ props.messages.length - 1 ].id; } const MessagesBox = ( { reference } ) => { const scrollChat = () => { if ( props.messages.length > 0 && reference.current && reference.current.scrollHeight > reference.current.clientHeight ) { reference.current.scrollTop = reference.current.scrollHeight; } }; setTimeout( () => { scrollChat(); }, 1000 ); return ( <ContainerPadding ref={ reference }> { props.messages.length > 0 ? ( <> { props.openThreadId && ( <Widget src={ `${ props.componentOwnerId }/widget/Calimero.Curb.Chat.Threads` } props={ { setOpenThreadId: props.setOpenThreadId, message: props.messages.find( ( message ) => message.id === props.openThreadId ), componentOwnerId: props.componentOwnerId, addMessageReaction: props.addMessageReaction, setImage: setImage, } } /> ) } { !props.openThreadId && props.messages.map( ( message, index ) => ( !message.parent_thread && <Widget src={ `${ props.componentOwnerId }/widget/Calimero.Curb.Chat.UserMessage` } props={ { componentOwnerId: props.componentOwnerId, message, setThread: props.setOpenThreadId, addMessageReaction: props.addMessageReaction, isThread: false, setImage, lastMessageId, } } key={ index } /> ) ) } </> ) : ( <Widget src={ `${ props.componentOwnerId }/widget/Calimero.Curb.Chat.NoMessagesPopup` } props={ { title: "Be first to send an message!", } } /> ) } </ContainerPadding> ); }; return ( <> { state.showImage && ( <Widget src={ `${ props.componentOwnerId }/widget/Calimero.Curb.Popups.ImagePopup` } props={ { imageSrc: state.imageSrc, handleClosePopup: closeImagePopup, } } /> ) } <MessagesBox reference={ divRef } /> </> );