wip: chat interface

templates/chat/base.html

@@ -0,0 +1,44 @@
+{% extends 'body_base.html' %}
+{% block main %}
+<div class="drawer xl:drawer-open">
+  <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
+
+  <!-- Drawer Content -->
+  <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" %}
+
+        <div class="fixed w-full mx-auto max-w-3xl left-0 right-0 bottom-0">
+          {% include "chat/input_field.html" %}
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- Drawer Sidebar -->
+  {% include "chat/drawer.html" %}
+</div>
+
+<style>
+  /* Custom styles to override DaisyUI defaults */
+  .drawer-content {
+    width: 100%;
+    padding: 0;
+  }
+
+  .drawer-side {
+    z-index: 20;
+    /* Ensure drawer is above content */
+  }
+
+  @media (min-width: 1280px) {
+
+    /* xl breakpoint */
+    .drawer-open .drawer-content {
+      margin-left: 0;
+      /* Prevent content shift */
+    }
+  }
+</style>
+{% endblock %}

templates/chat/drawer.html

@@ -0,0 +1,13 @@
+<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">
+    <!-- Sidebar content here -->
+    <li class="mt-4 cursor-pointer "><a href="/chat" hx-boost="true" class="flex justify-between">Create new
+        chat<span>{% include
+          "icons/edit_icon.html" %}
+        </span></a></li>
+    <div class="divider"></div>
+    <li><a>Sidebar Item 1</a></li>
+    <li><a>Sidebar Item 2</a></li>
+  </ul>
+</div>

templates/chat/history.html

@@ -0,0 +1,19 @@
+<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>

templates/chat/input_field.html

@@ -0,0 +1,22 @@
+<form hx-post="/chat/{{conversation_id}}" hx-target="#chat_container" hx-swap="afterend" class="relative flex gap-2"
+  id="chat-form">
+  <textarea name="content" placeholder="Type your message..." rows="2"
+    class="textarea rounded-t-2xl rounded-b-none border-2 flex-grow resize-none" id="chat-input"></textarea>
+  <button type="submit" class="absolute p-2 cursor-pointer right-0.5 btn-ghost btn-sm top-2">{% include
+    "icons/send_icon.html" %}
+  </button>
+  <label for="my-drawer-2" class="absolute cursor-pointer top-10 right-0.5 p-2 drawer-button xl:hidden z-20 ">
+    {% include "icons/hamburger_icon.html" %}
+  </label>
+</form>
+
+<script>
+  document.getElementById('chat-input').addEventListener('keydown', function (e) {
+    // Check if Enter is pressed without Shift
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault(); // Prevent default Enter behavior (new line)
+      document.getElementById('chat-form').submit(); // Submit the form
+    }
+    // Shift + Enter will naturally create a new line due to browser default behavior
+  });
+</script>