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

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 = '';
 }