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>

templates/content/content_list.html

@@ -13,7 +13,13 @@
           {% endif %}
         </div>
         <h2 class="card-title truncate">
-          {{ text_content.text }}
+          {% if text_content.url %}
+          <a href="{{ text_content.url}}">{{text_content.url}}</a>
+          {% elif text_content.file_info %}
+          {{text_content.file_info.file_name}}
+          {% else %}
+          {{text_content.text}}
+          {% endif %}
         </h2>
       </div>
       <div class="flex items-center">

templates/icons/hamburger_icon.html

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+  class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+</svg>

templates/icons/send_icon.html

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+  class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round"
+    d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+</svg>

templates/index/signed_in/search_response.html

@@ -0,0 +1,31 @@
+<div class="mx-auto mb-6">
+  <div class="card bg-base-200 shadow">
+    <div class="card-body">
+      <h2 class="card-title">Result</h2>
+      <div class="prose !max-w-none">
+        {{ answer_content | safe}}
+      </div>
+      {% if answer_references %}
+      <div class="mt-4">
+        <h2 class="card-title mb-2">References</h2>
+        <div class="flex flex-wrap gap-2 max-w-full">
+          {% for ref in answer_references %}
+          <div class="tooltip" data-tip="More info about {{ ref }}">
+            <button class="badge truncate badge-outline cursor-pointer text-gray-500 hover:text-gray-700">
+              {{ ref }}
+            </button>
+          </div>
+          {% endfor %}
+        </div>
+      </div>{% endif %}
+      <div class="mt-4">
+        <form hx-post="/chat" hx-target="body" hx-swap="outerHTML" method="POST" class="flex items-center space-x-4">
+          <input type="hidden" name="user_query" value="{{ user_query }}">
+          <input type="hidden" name="llm_response" value="{{ answer_content }}">
+          <input type="hidden" name="references" value="{{ answer_references }}">
+          <button type="submit" class="btn btn-primary">Continue with chat</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

templates/index/signed_in/searchbar.html

@@ -1,4 +1,4 @@
-<h2>
+<h2 class="font-bold mb-2">
   Search your content
 </h2>
 <input type="text" placeholder="Search your knowledge base" class="input input-bordered w-full" name="query"

templates/knowledge/edit_knowledge_entity_modal.html

@@ -17,12 +17,13 @@ hx-swap="outerHTML"
 </div>
 
 <div class="form-control relative" style="margin-top: -1.5rem;">
-  <span class="absolute left-2.5 top-2.5 z-[100] p-0.5 bg-white text-xs text-light">Type</span>
-      <select name="entity_type" class="select select-bordered w-full">
+  <div class="absolute !left-3 !top-2.5 z-50 p-0.5 bg-white text-xs text-light">Type</div>
+      <select name="entity_type" class="select w-full">
+    <option disabled>You must select a type</option>
          {% for et in entity_types %}
           <option value="{{ et }}" {% if entity.entity_type==et %}selected{% endif %}>{{ et }}</option>
          {% endfor %}
-        </select>
+  </select>
 </div>
 
 <input type="text" name="id" value="{{ entity.id }}" class="hidden">