Multi-File Upload, Dateinamen in History, kein Auto-Scroll bei Attachment-Klick

wwwroot/index.html

@@ -124,7 +124,7 @@
     <div id="chat"></div>
     <div id="filePreview" class="file-preview" hidden></div>
     <div class="input-area">
-      <input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" hidden>
+      <input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" multiple hidden>
       <button id="fileBtn" class="file-btn" title="Datei anhängen">📎</button>
       <textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
       <button id="send">Senden</button>

wwwroot/js/chat.js

@@ -2,7 +2,7 @@
 
 const messages = [];
 let isStreaming = false;
-let pendingFile = null; // { name, type, base64 }
+let pendingFiles = []; // [{ name, type, base64 }]
 
 async function clearChat() {
   const archive = await apiArchive(getCurrentSessionId());
@@ -23,23 +23,27 @@ async function sendMessage() {
   const input = $('#input');
   const btn = $('#send');
   const text = input.value.trim();
-  if (!text && !pendingFile) return;
+  if (!text && pendingFiles.length === 0) return;
 
   // Content bauen: string oder array mit file-blocks
   let content;
   let bubbleText = text;
 
-  if (pendingFile) {
+  if (pendingFiles.length > 0) {
     content = [];
-    const blockType = pendingFile.type.startsWith('image/') ? 'image' : 'document';
-    content.push({
-      type: blockType,
-      source: { type: 'base64', media_type: pendingFile.type, data: pendingFile.base64 },
-      _file_name: pendingFile.name
-    });
+    const labels = [];
+    for (const f of pendingFiles) {
+      const blockType = f.type.startsWith('image/') ? 'image' : 'document';
+      content.push({
+        type: blockType,
+        source: { type: 'base64', media_type: f.type, data: f.base64 },
+        _file_name: f.name
+      });
+      labels.push((blockType === 'image' ? '📷 ' : '📄 ') + f.name);
+    }
     if (text) content.push({ type: 'text', text });
-    bubbleText = (blockType === 'image' ? '📷 ' : '📄 ') + pendingFile.name + (text ? '\n' + text : '');
-    clearPendingFile();
+    bubbleText = labels.join('\n') + (text ? '\n' + text : '');
+    clearPendingFiles();
   } else {
     content = text;
   }
@@ -160,34 +164,43 @@ function handleFileSelect(file) {
   const reader = new FileReader();
   reader.onload = () => {
     const base64 = reader.result.split(',')[1];
-    pendingFile = { name: file.name, type: file.type, base64 };
-    showFilePreview();
+    pendingFiles.push({ name: file.name, type: file.type, base64 });
+    renderFilePreview();
   };
   reader.readAsDataURL(file);
 }
 
-function showFilePreview() {
-  const preview = $('#filePreview');
-  if (!preview || !pendingFile) return;
+function handleMultipleFiles(files) {
+  for (const file of files) handleFileSelect(file);
+}
 
-  const isImage = pendingFile.type.startsWith('image/');
-  preview.innerHTML = `
-    <div class="file-preview-inner">
-      ${isImage ? '<img src="data:' + pendingFile.type + ';base64,' + pendingFile.base64 + '" class="file-thumb">' : '<span class="file-icon">📄</span>'}
-      <span class="file-name">${esc(pendingFile.name)}</span>
-      <button class="file-remove" onclick="clearPendingFile()">✕</button>
-    </div>
-  `;
+function renderFilePreview() {
+  const preview = $('#filePreview');
+  if (!preview || pendingFiles.length === 0) {
+    if (preview) { preview.innerHTML = ''; preview.hidden = true; }
+    return;
+  }
+
+  preview.innerHTML = pendingFiles.map((f, i) => {
+    const isImage = f.type.startsWith('image/');
+    return `<div class="file-preview-inner">
+      ${isImage ? '<img src="data:' + f.type + ';base64,' + f.base64 + '" class="file-thumb">' : '<span class="file-icon">📄</span>'}
+      <span class="file-name">${esc(f.name)}</span>
+      <button class="file-remove" onclick="removePendingFile(${i})">✕</button>
+    </div>`;
+  }).join('');
   preview.hidden = false;
 }
 
-function clearPendingFile() {
-  pendingFile = null;
+function removePendingFile(index) {
+  pendingFiles.splice(index, 1);
+  renderFilePreview();
+}
+
+function clearPendingFiles() {
+  pendingFiles.length = 0;
   const preview = $('#filePreview');
-  if (preview) {
-    preview.innerHTML = '';
-    preview.hidden = true;
-  }
+  if (preview) { preview.innerHTML = ''; preview.hidden = true; }
   const fileInput = $('#fileInput');
   if (fileInput) fileInput.value = '';
 }

wwwroot/js/history.js

@@ -34,7 +34,7 @@ function renderMessages(msgs, addToConversation) {
       case 'text':
         if (msg.role === 'user') {
           addUserBubble(msg.content);
-          if (msg.attachmentCount > 0) addAttachmentIndicator(msg.id, msg.attachmentCount);
+          if (msg.attachmentCount > 0) addAttachmentIndicator(msg.id, msg.attachmentCount, msg.attachmentNames);
           if (addToConversation) messages.push({ role: 'user', content: msg.content });
         } else if (msg.role === 'assistant') {
           addAssistantBubble(msg.content);

wwwroot/js/pages/chat-page.js

@@ -49,7 +49,7 @@ registerPage('chat', {
     if (fileBtn && fileInput) {
       fileBtn.addEventListener('click', () => fileInput.click());
       fileInput.addEventListener('change', (e) => {
-        if (e.target.files[0]) handleFileSelect(e.target.files[0]);
+        if (e.target.files.length > 0) handleMultipleFiles(e.target.files);
       });
     }
 
@@ -60,7 +60,7 @@ registerPage('chat', {
       chatContainer.addEventListener('drop', (e) => {
         e.preventDefault();
         e.stopPropagation();
-        if (e.dataTransfer.files[0]) handleFileSelect(e.dataTransfer.files[0]);
+        if (e.dataTransfer.files.length > 0) handleMultipleFiles(e.dataTransfer.files);
       });
     }
 
@@ -98,6 +98,6 @@ registerPage('chat', {
     lastKnownMessageId = 0;
     loadedArchiveCount = 0;
     isStreaming = false;
-    clearPendingFile();
+    clearPendingFiles();
   }
 });

wwwroot/js/ui.js

@@ -124,15 +124,21 @@ function removeStreamedElements() {
 
 // ── Attachment Indicator ──
 
-function addAttachmentIndicator(messageId, count) {
+function addAttachmentIndicator(messageId, count, namesJson) {
   const chat = chatEl();
   const lastMsg = chat.lastElementChild;
   if (!lastMsg) return;
 
+  let names = [];
+  try { if (namesJson) names = JSON.parse(namesJson); } catch {}
+
   const indicator = document.createElement('div');
   indicator.className = 'attachment-indicator';
-  indicator.textContent = `📎 ${count} Datei${count > 1 ? 'en' : ''}`;
+
+  const nameList = names.filter(n => n).join(', ');
+  indicator.textContent = `📎 ${count} Datei${count > 1 ? 'en' : ''}` + (nameList ? `: ${nameList}` : '');
   indicator.style.cursor = 'pointer';
+  indicator.title = 'Klicken zum Anzeigen';
   indicator.addEventListener('click', () => loadAndShowAttachments(messageId, indicator));
   lastMsg.appendChild(indicator);
 }
@@ -168,7 +174,6 @@ async function loadAndShowAttachments(messageId, indicator) {
 
     indicator.textContent = `📎 ${attachments.length} Datei${attachments.length > 1 ? 'en' : ''}`;
     indicator.parentElement.appendChild(container);
-    scrollDown();
   } catch (e) {
     indicator.textContent = '📎 Fehler beim Laden';
     indicator.dataset.loaded = '';