const ContainerPadding = styled.div` position: relative; padding-bottom: 3rem; padding-left: 2.5rem; padding-right: 2.5rem; overflow-y: scroll; height: calc(100vh - 185px); `; // 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 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; return ( <> {state.showImage && ( <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Popups.ImagePopup`} props={{ imageSrc: state.imageSrc, handleClosePopup: closeImagePopup, }} /> )} <ContainerPadding> {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> </> );