refactor: better separation of dependencies to crates

node stuff to html crate only
2026-04-20 16:01:22 +02:00 · 2025-04-04 12:50:38 +02:00
parent 20fc43638b
commit 5bc48fb30b
160 changed files with 231 additions and 337 deletions
--- a/html-router/templates/chat/reference_list.html
+++ b/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>