@mooncompany/uplink-chat 0.5.0

package/public/js/files.js

@@ -0,0 +1,352 @@
+// ============================================
+// FILES MODULE
+// Drag & drop, enhanced file preview
+// ============================================
+
+import { UplinkCore } from './core.js';
+
+const logger = window.UplinkLogger || console;
+
+// State
+let dropZoneVisible = false;
+
+// Pending file state (previously on window.*)
+let pendingImage = null;
+let pendingFile = null;
+
+// Create drop zone overlay
+const dropZone = document.createElement('div');
+dropZone.className = 'drop-zone';
+dropZone.innerHTML = `
+  <div class="drop-zone-content">
+    <div class="drop-zone-icon">📎</div>
+    <div class="drop-zone-text">Drop files here</div>
+    <div class="drop-zone-hint">Images, PDFs, text files, code</div>
+  </div>
+`;
+
+function init() {
+  const app = document.querySelector('.app');
+  if (!app) {
+    setTimeout(init, 100);
+    return;
+  }
+
+  // Add drop zone to DOM
+  app.appendChild(dropZone);
+
+  // Set up drag and drop listeners on the entire app
+  app.addEventListener('dragenter', handleDragEnter);
+  app.addEventListener('dragover', handleDragOver);
+  app.addEventListener('dragleave', handleDragLeave);
+  app.addEventListener('drop', handleDrop);
+
+  // Enhance file preview
+  enhanceFilePreview();
+
+  logger.debug('Files: Initialized');
+}
+
+function handleDragEnter(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  
+  // Only show for files
+  if (e.dataTransfer.types.includes('Files')) {
+    showDropZone();
+  }
+}
+
+function handleDragOver(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  e.dataTransfer.dropEffect = 'copy';
+}
+
+function handleDragLeave(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  
+  // Only hide if leaving the app container
+  const rect = dropZone.getBoundingClientRect();
+  if (
+    e.clientX < rect.left ||
+    e.clientX > rect.right ||
+    e.clientY < rect.top ||
+    e.clientY > rect.bottom
+  ) {
+    hideDropZone();
+  }
+}
+
+function handleDrop(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  hideDropZone();
+
+  const files = Array.from(e.dataTransfer.files);
+  if (files.length === 0) return;
+
+  // Process the first file (can extend to handle multiple)
+  const file = files[0];
+  processFile(file);
+}
+
+function showDropZone() {
+  if (dropZoneVisible) return;
+  dropZoneVisible = true;
+  dropZone.classList.add('visible');
+}
+
+function hideDropZone() {
+  dropZoneVisible = false;
+  dropZone.classList.remove('visible');
+}
+
+function processFile(file) {
+  const reader = new FileReader();
+  
+  reader.onload = (loadEvent) => {
+    const fileContent = loadEvent.target.result;
+    
+    // Show preview based on file type
+    if (file.type.startsWith('image/')) {
+      showImagePreview(fileContent, file.name);
+    } else if (isTextFile(file)) {
+      showTextPreview(fileContent, file.name, file.type);
+    } else {
+      // PDF, DOCX, XLSX, and other binary files — store blob for upload
+      showGenericPreview(file.name, file.type, file.size);
+      pendingFile = {
+        blob: file,
+        name: file.name,
+        type: file.type || 'application/octet-stream',
+        size: file.size,
+        isText: false,
+      };
+    }
+  };
+
+  // Read as appropriate format
+  if (file.type.startsWith('image/')) {
+    reader.readAsDataURL(file);
+  } else if (isTextFile(file)) {
+    reader.readAsText(file);
+  } else {
+    // For binary files, still trigger onload but we use the raw File object
+    reader.readAsArrayBuffer(file);
+  }
+}
+
+function isTextFile(file) {
+  const textTypes = [
+    'text/',
+    'application/json',
+    'application/javascript',
+    'application/xml',
+    'application/x-yaml'
+  ];
+  const textExtensions = [
+    '.txt', '.md', '.json', '.js', '.ts', '.py', '.html', '.css',
+    '.csv', '.xml', '.yaml', '.yml', '.sh', '.bat', '.ps1', '.sql',
+    '.env', '.gitignore', '.dockerfile'
+  ];
+  
+  if (textTypes.some(t => file.type.startsWith(t))) return true;
+  if (textExtensions.some(ext => file.name.toLowerCase().endsWith(ext))) return true;
+  return false;
+}
+
+function showImagePreview(dataUrl, filename) {
+  const preview = document.getElementById('imagePreview');
+  const previewImg = document.getElementById('previewImg');
+  const fileLabel = preview.querySelector('.file-label');
+  
+  previewImg.src = dataUrl;
+  previewImg.style.display = 'block';
+  if (fileLabel) fileLabel.style.display = 'none';
+  preview.classList.add('visible');
+
+  // Store for sending
+  pendingImage = dataUrl;
+  pendingFile = { data: dataUrl, name: filename, type: 'image' };
+
+  // Scroll messages to bottom so preview doesn't hide last message
+  requestAnimationFrame(() => {
+    const messagesEl = document.getElementById('messages');
+    if (messagesEl) messagesEl.scrollTop = messagesEl.scrollHeight;
+  });
+}
+
+function showPdfPreview(filename) {
+  const preview = document.getElementById('imagePreview');
+  const previewImg = document.getElementById('previewImg');
+  
+  previewImg.style.display = 'none';
+  
+  let fileLabel = preview.querySelector('.file-label');
+  if (!fileLabel) {
+    fileLabel = document.createElement('div');
+    fileLabel.className = 'file-label';
+    preview.appendChild(fileLabel);
+  }
+  
+  fileLabel.textContent = `📄 ${filename}`;
+  fileLabel.style.display = 'block';
+  preview.classList.add('visible');
+}
+
+function showTextPreview(content, filename, mimeType) {
+  const preview = document.getElementById('imagePreview');
+  const previewImg = document.getElementById('previewImg');
+  
+  previewImg.style.display = 'none';
+  
+  let fileLabel = preview.querySelector('.file-label');
+  if (!fileLabel) {
+    fileLabel = document.createElement('div');
+    fileLabel.className = 'file-label';
+    preview.appendChild(fileLabel);
+  }
+  
+  // Show filename with icon based on type
+  const icon = getFileIcon(filename);
+  fileLabel.textContent = `${icon} ${filename}`;
+  fileLabel.style.display = 'block';
+  preview.classList.add('visible');
+
+  // Store content for sending
+  pendingFile = {
+    data: content,
+    name: filename,
+    type: mimeType || 'text/plain',
+    isText: true
+  };
+}
+
+function showGenericPreview(filename, mimeType, size) {
+  const preview = document.getElementById('imagePreview');
+  const previewImg = document.getElementById('previewImg');
+  
+  previewImg.style.display = 'none';
+  
+  let fileLabel = preview.querySelector('.file-label');
+  if (!fileLabel) {
+    fileLabel = document.createElement('div');
+    fileLabel.className = 'file-label';
+    preview.appendChild(fileLabel);
+  }
+  
+  const icon = getFileIcon(filename);
+  const sizeStr = formatFileSize(size);
+  // Safely build HTML: icon + filename (text) + size span
+  fileLabel.innerHTML = '';
+  fileLabel.appendChild(document.createTextNode(`${icon} ${filename} `));
+  const sizeSpan = document.createElement('span');
+  sizeSpan.className = 'file-size';
+  sizeSpan.textContent = `(${sizeStr})`;
+  fileLabel.appendChild(sizeSpan);
+  fileLabel.style.display = 'block';
+  preview.classList.add('visible');
+}
+
+function getFileIcon(filename) {
+  const ext = filename.split('.').pop().toLowerCase();
+  const icons = {
+    pdf: '📄',
+    doc: '📝', docx: '📝',
+    xls: '📊', xlsx: '📊', csv: '📊',
+    ppt: '📽️', pptx: '📽️',
+    zip: '🗜️', rar: '🗜️', '7z': '🗜️',
+    mp3: '🎵', wav: '🎵', flac: '🎵',
+    mp4: '🎬', mov: '🎬', avi: '🎬',
+    js: '📜', ts: '📜', py: '🐍', json: '📋',
+    html: '🌐', css: '🎨',
+    md: '📑', txt: '📄'
+  };
+  return icons[ext] || '📁';
+}
+
+function formatFileSize(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}
+
+function enhanceFilePreview() {
+  // Get the existing file input
+  const fileInput = document.getElementById('fileInput');
+  if (!fileInput) return;
+
+  // Accept all files — validation happens server-side
+  // Removed restrictive accept list (caused file dialog freezes on Windows/Chrome)
+
+  // Override the existing change handler to use our enhanced preview
+  const originalHandler = fileInput.onchange;
+  fileInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      processFile(file);
+      fileInput.value = ''; // Reset for re-selection
+    }
+  });
+
+  // Wire up the remove/cancel button on the image preview
+  const removeBtn = document.getElementById('removePreview');
+  if (removeBtn) {
+    removeBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const preview = document.getElementById('imagePreview');
+      const previewImg = document.getElementById('previewImg');
+      if (preview) preview.classList.remove('visible');
+      if (previewImg) {
+        previewImg.src = '';
+        previewImg.style.display = 'none';
+      }
+      const fileLabel = preview?.querySelector('.file-label');
+      if (fileLabel) fileLabel.style.display = 'none';
+      // Clear pending state
+      pendingImage = null;
+      pendingFile = null;
+      logger.debug('Files: Preview cleared');
+    });
+  }
+}
+
+function destroy() {
+  const app = document.getElementById('app');
+  if (app) {
+    app.removeEventListener('dragenter', handleDragEnter);
+    app.removeEventListener('dragover', handleDragOver);
+    app.removeEventListener('dragleave', handleDragLeave);
+    app.removeEventListener('drop', handleDrop);
+  }
+  
+  if (dropZone.parentNode) {
+    dropZone.parentNode.removeChild(dropZone);
+  }
+  
+  logger.debug('Files: Destroyed');
+}
+
+// Expose for external use
+export const UplinkFiles = {
+  process: processFile,
+  showDropZone,
+  hideDropZone,
+  destroy,
+  getFileIcon,
+  // Pending file state accessors (replaces window.pendingImage/pendingFile)
+  getPendingImage: () => pendingImage,
+  getPendingFile: () => pendingFile,
+  clearPending: () => { pendingImage = null; pendingFile = null; },
+  setPendingImage: (img) => { pendingImage = img; },
+  setPendingFile: (file) => { pendingFile = file; }
+};
+
+// Backward compat: assign to window
+window.UplinkFiles = UplinkFiles;
+
+// Register with core for coordinated initialization
+UplinkCore.registerModule('files', init);