const ContainerPadding = styled.div` position: relative; padding-bottom: 3rem; padding-left: 2.5rem; padding-right: 2.5rem; overflow-y: scroll; height: calc(100vh - 185px); `; if (props.messages.length > 0) { const storageKey = "lastReportedMessage"; const lastMessageId = props.messages[props.messages.length - 1].id; console.log(lastMessageId); const oldReportedId = Storage.privateGet(storageKey); if (oldReportedId != lastMessageId) { props .readMessage(lastMessageId) .then(() => Storage.privateSet(storageKey, lastMessageId)); } } State.init({ showThread: false, threadId: -1, imageSrc: "", showImage: false, }); const setImage = (src) => { State.update({ imageSrc: src }); State.update({ showImage: true }); }; const closeImagePopup = () => { 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: (params) => { props.addMessageReaction(params); }, setImage: (src) => setImage(src), }} /> )} {!props.showThread && 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: (messageId) => props.setThread(messageId), addMessageReaction: (params) => props.addMessageReaction(params), isThread: false, setImage: (src) => setImage(src), lastMessageId: lastMessageId, }} /> ))} </> ) : ( <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Chat.NoMessagesPopup`} props={{ title: "Be first to send an message!", }} /> )} </ContainerPadding> </> );