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.showThread) { const storageKey = "lastReportedMessage"; const lastMessageId = props.messages[props.messages.length - 1].id; const oldReportedId = Storage.privateGet(storageKey); if (oldReportedId != lastMessageId && lastMessageId) { props .readMessage(lastMessageId) .then(() => Storage.privateSet(storageKey, lastMessageId)); } } State.init({ showThread: false, threadId: -1, 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.showThread && ( <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Chat.Threads`} props={{ handleClosePopup: props.closeThread, message: props.messages.filter( (message) => message.id === props.threadId )[0], componentOwnerId: props.componentOwnerId, key: props.key, addMessageReaction: props.addMessageReaction, setImage: setImage, }} /> )} {!props.showThread && !message.parent_thread && props.messages.map((message, id) => ( <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Chat.UserMessage`} props={{ componentOwnerId: props.componentOwnerId, message: message, key: props.key, id: id, setThread: props.setThread, addMessageReaction: props.addMessageReaction, isThread: false, setImage: setImage, lastMessageId: lastMessageId, }} /> ))} </> ) : ( <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Chat.NoMessagesPopup`} props={{ title: "Be first to send an message!", }} /> )} </ContainerPadding> </> );