minne/templates/chat/history.html

<div id="chat_container" class="pl-3 overflow-y-auto h-[calc(100vh-175px)] hide-scrollbar">
  {% 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);
    }
  });

  window.addEventListener('load', function () {
    const chatContainer = document.getElementById('chat_container');
    if (chatContainer) {
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }
  });
</script>
<style>
  /* Hide scrollbar but keep functionality */
  .hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
  }
</style>