minne/templates/chat/history.html

<div id="chat_container" class="pl-3 overflow-y-auto h-[calc(100vh-160px)] pb-32">
  {% for message in history %}
  {% if message.role == "AI" %}
  <div class="chat chat-start">
    <div>
      <div class="chat-bubble">
        {{ message.content }}
      </div>
      {% if message.references %}
      {% include "chat/reference_list.html" %}
      {% endif %}
    </div>
  </div>
  {% else %}
  <div class="chat chat-end">
    <div class="chat-bubble">
      {{ message.content }}
    </div>
  </div>
  {% endif %}
  {% endfor %}
</div>

<script>
  document.body.addEventListener('htmx:afterSwap', function (evt) {
    const chatContainer = document.getElementById('chat_container');
    if (chatContainer) {
      setTimeout(() => {
        chatContainer.scrollTop = chatContainer.scrollHeight;
      }, 0);
    }
  });

  // Also scroll when page loads
  window.addEventListener('load', function () {
    const chatContainer = document.getElementById('chat_container');
    if (chatContainer) {
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }
  });
</script>