uniform template for references, mvp chat interface

templates/chat/base.html

@@ -1,10 +1,10 @@
 {% extends 'body_base.html' %}
 {% block main %}
-<div class="drawer xl:drawer-open">
+<div class="drawer xl:drawer-open h-[calc(100vh-65px)] overflow-auto">
   <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
 
   <!-- Drawer Content -->
-  <div class="drawer-content flex justify-center">
+  <div class="drawer-content flex justify-center ">
     <main class="flex justify-center grow mt-2 sm:mt-4 gap-6 mb-10 max-w-3xl w-full absolute left-0 right-0 mx-auto">
       <div class="relative w-full">
         {% include "chat/history.html" %}

templates/chat/drawer.html

@@ -1,6 +1,6 @@
 <div class="drawer-side z-50">
   <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
-  <ul class="menu bg-base-200 text-base-content min-h-full w-72">
+  <ul class="menu bg-base-200 text-base-content w-72">
     <!-- Sidebar content here -->
     <li class="mt-4 cursor-pointer "><a href="/chat" hx-boost="true" class="flex justify-between">Create new
         chat<span>{% include
@@ -11,6 +11,5 @@
     <li><a href="/chat/{{conversation.id}}" hx-boost="true">{{conversation.title}} - {{conversation.created_at}}</a>
     </li>
     {% endfor %}
-    {{conversation_archive}}
   </ul>
 </div>

templates/chat/history.html

@@ -1,4 +1,4 @@
-<div id="chat_container" class="pl-3 overflow-y-auto h-[calc(100vh-160px)] pb-32">
+<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">
@@ -31,11 +31,24 @@
     }
   });
 
-  // Also scroll when page loads
   window.addEventListener('load', function () {
     const chatContainer = document.getElementById('chat_container');
     if (chatContainer) {
       chatContainer.scrollTop = chatContainer.scrollHeight;
     }
   });
-</script>
+</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>

templates/chat/new_message_form.html

@@ -1,4 +1,4 @@
-<div class="fixed w-full mx-auto max-w-3xl p-4 pb-0 sm:pb-4 left-0 right-0 bottom-0 bg-base-100 z-10">
+<div class="fixed w-full mx-auto max-w-3xl p-0 pb-0 sm:pb-4 left-0 right-0 bottom-0 bg-base-100 z-10">
   <form hx-post="{% if conversation %} /chat/{{conversation.id}} {% else %} /chat {% endif %}"
     hx-target="#chat_container" hx-swap="beforeend" class="relative flex gap-2" id="chat-form">
     <textarea autofocus required name="content" placeholder="Type your message..." rows="2"

templates/chat/reference_list.html

@@ -1,13 +1,13 @@
 <div class="relative my-2">
-  <button id="references-toggle-{{user_message_id}}"
+  <button id="references-toggle-{{message.id}}"
     class="text-xs text-blue-500 hover:text-blue-700 hover:underline focus:outline-none flex items-center">
     References
     {% include "icons/chevron_icon.html" %}
   </button>
-  <div id="references-content-{{user_message_id}}" class="hidden max-w-full mt-1">
+  <div id="references-content-{{message.id}}" class="hidden max-w-full mt-1">
     <div class="flex flex-wrap gap-1">
-      {% for reference in references %}
-      <div class="reference-badge-container" data-reference="{{reference}}" data-message-id="{{user_message_id}}"
+      {% for reference in message.references %}
+      <div class="reference-badge-container" data-reference="{{reference}}" data-message-id="{{message.id}}"
         data-index="{{loop.index}}">
         <span class="badge badge-xs badge-neutral truncate max-w-[20ch] overflow-hidden text-left block cursor-pointer">
           {{reference}}
@@ -19,8 +19,8 @@
 </div>
 
 <script>
-  document.getElementById('references-toggle-{{user_message_id}}').addEventListener('click', function () {
-    const content = document.getElementById('references-content-{{user_message_id}}');
+  document.getElementById('references-toggle-{{message.id}}').addEventListener('click', function () {
+    const content = document.getElementById('references-content-{{message.id}}');
     const icon = document.getElementById('toggle-icon');
     content.classList.toggle('hidden');
     icon.classList.toggle('rotate-180');