refactor: better separation of dependencies to crates

node stuff to html crate only

html-router/templates/chat/base.html

@@ -0,0 +1,42 @@
+{% extends 'body_base.html' %}
+{% block main %}
+<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 ">
+    <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" %}
+
+        {% include "chat/new_message_form.html" %}
+      </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 %}

html-router/templates/chat/drawer.html

@@ -0,0 +1,15 @@
+<div class="drawer-side z-50 max-h-[calc(100vh-65px)]">
+  <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
+  <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
+          "icons/edit_icon.html" %}
+        </span></a></li>
+    <div class="divider"></div>
+    {% for conversation in conversation_archive %}
+    <li><a href="/chat/{{conversation.id}}" hx-boost="true">{{conversation.title}} - {{conversation.created_at}}</a>
+    </li>
+    {% endfor %}
+  </ul>
+</div>

html-router/templates/chat/history.html

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

html-router/templates/chat/new_chat_first_response.html

@@ -0,0 +1,29 @@
+{% include "chat/streaming_response.html" %}
+
+<!-- OOB swap targeting the form element directly -->
+<form id="chat-form" hx-post="/chat/{{conversation.id}}" hx-target="#chat_container" hx-swap="beforeend"
+  class="relative flex gap-2" hx-swap-oob="true">
+  <textarea autofocus required name="content" placeholder="Type your message..." rows="2"
+    class="textarea textarea-ghost rounded-2xl rounded-b-none h-24 sm:rounded-b-2xl pr-8 bg-base-200 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-1">
+    {% include "icons/send_icon.html" %}
+  </button>
+  <label for="my-drawer-2" class="absolute cursor-pointer top-9 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) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      htmx.trigger('#chat-form', 'submit');
+    }
+  });
+  // Clear textarea after successful submission
+  document.getElementById('chat-form').addEventListener('htmx:afterRequest', function (e) {
+    if (e.detail.successful) { // Check if the request was successful
+      document.getElementById('chat-input').value = ''; // Clear the textarea
+    }
+  });
+</script>

html-router/templates/chat/new_message_form.html

@@ -0,0 +1,29 @@
+<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"
+      class="textarea textarea-ghost rounded-2xl rounded-b-none h-24 sm:rounded-b-2xl pr-8 bg-base-200 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-1">{% include
+      "icons/send_icon.html" %}
+    </button>
+    <label for="my-drawer-2" class="absolute cursor-pointer top-9 right-0.5 p-2 drawer-button xl:hidden z-20 ">
+      {% include "icons/hamburger_icon.html" %}
+    </label>
+  </form>
+</div>
+
+<script>
+  document.getElementById('chat-input').addEventListener('keydown', function (e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      htmx.trigger('#chat-form', 'submit');
+    }
+  });
+  // Clear textarea after successful submission
+  document.getElementById('chat-form').addEventListener('htmx:afterRequest', function (e) {
+    if (e.detail.successful) { // Check if the request was successful
+      document.getElementById('chat-input').value = ''; // Clear the textarea
+    }
+  });
+</script>

html-router/templates/chat/reference_list.html

@@ -0,0 +1,90 @@
+<div class="relative my-2">
+  <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-{{message.id}}" class="hidden max-w-full mt-1">
+    <div class="flex flex-wrap gap-1">
+      {% 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}}
+        </span>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<script>
+  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');
+  });
+
+  // Initialize portal tooltips
+  document.querySelectorAll('.reference-badge-container').forEach(container => {
+    const reference = container.dataset.reference;
+    const messageId = container.dataset.messageId;
+    const index = container.dataset.index;
+    let tooltipId = `tooltip-${messageId}-${index}`;
+    let tooltipContent = null;
+    let tooltipTimeout;
+
+    // Create tooltip element (initially hidden)
+    function createTooltip() {
+      const tooltip = document.createElement('div');
+      tooltip.id = tooltipId;
+      tooltip.className = 'fixed z-[9999] bg-neutral-800 text-white p-3 rounded-md shadow-lg text-sm w-72 max-w-xs border border-neutral-700 hidden';
+      tooltip.innerHTML = '<div class="animate-pulse">Loading...</div>';
+      document.body.appendChild(tooltip);
+      return tooltip;
+    }
+
+    container.addEventListener('mouseenter', function () {
+      // Clear any existing timeout
+      if (tooltipTimeout) clearTimeout(tooltipTimeout);
+
+      // Get or create tooltip
+      let tooltip = document.getElementById(tooltipId);
+      if (!tooltip) tooltip = createTooltip();
+
+      // Position tooltip
+      const rect = container.getBoundingClientRect();
+      tooltip.style.top = `${rect.bottom + window.scrollY + 5}px`;
+      tooltip.style.left = `${rect.left + window.scrollX}px`;
+
+      // Adjust position if it would overflow viewport
+      const tooltipRect = tooltip.getBoundingClientRect();
+      if (rect.left + tooltipRect.width > window.innerWidth - 20) {
+        tooltip.style.left = `${window.innerWidth - tooltipRect.width - 20 + window.scrollX}px`;
+      }
+
+      // Show tooltip
+      tooltip.classList.remove('hidden');
+
+      // Load content if needed
+      if (!tooltipContent) {
+        fetch(`/chat/reference/${encodeURIComponent(reference)}`)
+          .then(response => response.text())
+          .then(html => {
+            tooltipContent = html;
+            if (document.getElementById(tooltipId)) {
+              document.getElementById(tooltipId).innerHTML = html;
+            }
+          });
+      }
+    });
+
+    container.addEventListener('mouseleave', function () {
+      tooltipTimeout = setTimeout(() => {
+        const tooltip = document.getElementById(tooltipId);
+        if (tooltip) tooltip.classList.add('hidden');
+      }, 200);
+    });
+  });
+</script>

html-router/templates/chat/reference_tooltip.html

@@ -0,0 +1,3 @@
+<div>{{entity.name}}</div>
+<div>{{entity.description}}</div>
+<div>{{entity.updated_at|datetimeformat(format="short", tz=user.timezone)}} </div>

html-router/templates/chat/streaming_response.html

@@ -0,0 +1,27 @@
+<div class="chat chat-end">
+  <div class="chat-bubble">
+    {{user_message.content}}
+  </div>
+</div>
+<div class="chat chat-start">
+  <div hx-ext="sse" sse-connect="/chat/response-stream?message_id={{user_message.id}}" sse-close="close_stream"
+    hx-swap="beforeend">
+    <div class="chat-bubble" sse-swap="chat_message">
+      <span class="loading loading-dots loading-sm loading-id-{{user_message.id}}"></span>
+    </div>
+    <div class="chat-footer opacity-50 max-w-[90%] flex-wrap" sse-swap="references">
+    </div>
+  </div>
+</div>
+<script>
+  document.body.addEventListener('htmx:sseBeforeMessage', (e) => {
+    const targetElement = e.detail.elt;
+    const loadingSpinner = targetElement.querySelector('.loading-id-{{user_message.id}}');
+
+    // Hiding the loading spinner before data is swapped in
+    if (loadingSpinner) {
+      loadingSpinner.style.display = 'none';
+    }
+  }
+  )
+</script>