<div id="message-list" hx-swap-oob="beforeend">
    <div class="mb-4 {% if is_system %}flex justify-start{% else %}flex justify-end{% endif %}">
        <div class="rounded-lg px-4 py-2 max-w-3/4 shadow-sm {% if is_system %}bg-indigo-100 text-indigo-800{% else %}bg-indigo-600 text-white{% endif %}"
             {% if message_id %}id="{{ message_id }}"{% endif %}>
            {{ message_text|linebreaksbr }}
        </div>
    </div>
</div>