<div class="d-flex align-items-end justify-content-start mb-4 flex-wrap">
    <div class="avatar avatar-xs me-3 flex-shrink-0">
        <picture>
            <img class="f-w-10 rounded-circle" src="{{webRoot}}/assets/images/profile-small-4.jpeg"
            alt="{{ config.defaultImgAlt }}">
        </picture>
        <span class="avatar-dot bg-success"></span>
    </div>
    <div class="d-flex justify-content-start flex-column align-items-start col">
        <small class="text-muted fs-xs fw-bolder"><span class="fw-bold">{{ sender }}</span> &middot; {{ time }}</small>
        <div class="bg-light p-3 mt-2 rounded-t-s-4 rounded-t-e-4 rounded-b-e-4">
            {{ message }}
        </div>
    </div>
</div>