refactor: async-stream and improved reference handling

templates/chat/reference_list.html

@@ -0,0 +1,30 @@
+<div class="relative my-2">
+  <button id="references-toggle-{{user_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 class="flex flex-wrap">
+      {% for reference in references %}
+      <span class="badge badge-sm text-xs truncate max-w-[20ch] overflow-hidden text-left block tooltip"
+        hx-get="/knowledge/{{reference}}" hx-trigger="mouseenter once delay:500ms"
+        hx-target="#tooltip-content-{{loop.index}}-{{user_message_id}}" hx-swap="innerHTML">
+        {{reference}}
+        <div id="tooltip-content-{{loop.index}}-{{user_message_id}}" class="tooltip-content">
+          <!-- Loading indicator while content is fetched -->
+          <div class="animate-pulse text-gray-400 text-xs">Loading...</div>
+        </div>
+      </span>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+<script>
+  document.getElementById('references-toggle-{{user_message_id}}').addEventListener('click', function () {
+    const content = document.getElementById('references-content-{{user_message_id}}');
+    const icon = document.getElementById('toggle-icon');
+    content.classList.toggle('hidden');
+    icon.classList.toggle('rotate-180');
+  });
+</script>