File-Upload: Attachments-Tabelle, Base64-Speicherung, Frontend mit Drag&Drop/Paste/Preview, Error-Handling Fix

wwwroot/js/ui.js

@@ -39,9 +39,10 @@ function addAssistantBubble(text) {
   return div;
 }
 
-function addErrorBubble(text) {
+function addErrorBubble(text, streamed = false) {
   const div = document.createElement('div');
   div.className = 'msg system-info';
+  if (streamed) div.classList.add('streamed');
   div.style.color = '#ff6b6b';
   div.textContent = text;
   chatEl().appendChild(div);
@@ -121,6 +122,59 @@ function removeStreamedElements() {
   chatEl().querySelectorAll('.streamed').forEach(el => el.remove());
 }
 
+// ── Attachment Indicator ──
+
+function addAttachmentIndicator(messageId, count) {
+  const chat = chatEl();
+  const lastMsg = chat.lastElementChild;
+  if (!lastMsg) return;
+
+  const indicator = document.createElement('div');
+  indicator.className = 'attachment-indicator';
+  indicator.textContent = `📎 ${count} Datei${count > 1 ? 'en' : ''}`;
+  indicator.style.cursor = 'pointer';
+  indicator.addEventListener('click', () => loadAndShowAttachments(messageId, indicator));
+  lastMsg.appendChild(indicator);
+}
+
+async function loadAndShowAttachments(messageId, indicator) {
+  if (indicator.dataset.loaded) return;
+  indicator.dataset.loaded = '1';
+  indicator.textContent = '📎 Laden...';
+
+  try {
+    const resp = await fetch(`/api/attachments/${messageId}`);
+    const attachments = await resp.json();
+
+    const container = document.createElement('div');
+    container.className = 'attachment-container';
+
+    for (const att of attachments) {
+      if (att.type === 'image') {
+        const img = document.createElement('img');
+        img.src = `data:${att.mediaType};base64,${att.data}`;
+        img.className = 'attachment-image';
+        img.title = att.fileName || 'Bild';
+        container.appendChild(img);
+      } else {
+        const link = document.createElement('a');
+        link.href = `data:${att.mediaType};base64,${att.data}`;
+        link.download = att.fileName || 'datei';
+        link.className = 'attachment-file';
+        link.textContent = `📄 ${att.fileName || 'Dokument'}`;
+        container.appendChild(link);
+      }
+    }
+
+    indicator.textContent = `📎 ${attachments.length} Datei${attachments.length > 1 ? 'en' : ''}`;
+    indicator.parentElement.appendChild(container);
+    scrollDown();
+  } catch (e) {
+    indicator.textContent = '📎 Fehler beim Laden';
+    indicator.dataset.loaded = '';
+  }
+}
+
 // ── Meta Bar ──
 
 function setMeta(text) {