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: "" }); }, []); const 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 && !message.parent_thread && props.messages.map((message, index) => ( <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} /> </> );