minne/templates/chat/history.html

<div id="chat_container">
  {% for message in history %}
  {% if message.role == "AI" %}
  <div class="chat chat-start">
    <div class="chat-header">{{ message.role }}</div>
    <div class="chat-bubble">
      {{ message.content }}
    </div>
  </div>
  {% else %}
  <div class="chat chat-end">
    <div class="chat-header">{{ message.role }}</div>
    <div class="chat-bubble">
      {{ message.content }}
    </div>
  </div>
  {% endif %}
  {% endfor %}
</div>

<script>
  // Scroll to latest message after HTMX swap
  document.body.addEventListener('htmx:afterSwap', function (evt) {
    const chatContainer = document.getElementById('chat_container');
    if (chatContainer) {
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }
  });
</script>

<style>
  #chat_container {
    max-height: 70vh;
    /* Adjust as needed */
    overflow-y: auto;
    /* Enable scrolling */
    padding: 1rem;
  }
</style>