const ContainerPadding = styled.div` padding-bottom: 6rem; padding-left: 2.5rem; padding-right: 2.5rem; overflow-y: scroll; height: calc(100vh - 185px); `; return ( <> <ContainerPadding> {props.messages.length > 0 ? ( <> {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, addMessageReaction: (params) => props.addMessageReaction(params), }} /> ))} </> ) : ( <Widget src={`${props.componentOwnerId}/widget/Calimero.Curb.Chat.NoMessagesPopup`} props={{ title: "Be first to send an message!", }} /> )} </ContainerPadding> </> );