clay-server 2.5.0 → 2.6.0

package/lib/public/modules/input.js

@@ -6,6 +6,8 @@ var ctx;
 // --- State ---
 var pendingImages = []; // [{data: base64, mediaType: "image/png"}]
 var pendingPastes = []; // [{text: string, preview: string}]
+var pendingFiles = []; // [{name: string, path: string}]
+var uploadingCount = 0;
 var slashActiveIdx = -1;
 var slashFiltered = [];
 var isComposing = false;
@@ -23,7 +25,8 @@ export var builtinCommands = [
 export function sendMessage() {
   var text = ctx.inputEl.value.trim();
   var images = pendingImages.slice();
-  if (!text && images.length === 0 && pendingPastes.length === 0) return;
+  if (!text && images.length === 0 && pendingPastes.length === 0 && pendingFiles.length === 0) return;
+  if (uploadingCount > 0) return; // wait for uploads to finish
   hideSlashMenu();
   if (ctx.hideSuggestionChips) ctx.hideSuggestionChips();
 
@@ -78,6 +81,13 @@ export function sendMessage() {
     return;
   }
 
+  // Prepend file paths to text
+  var files = pendingFiles.slice();
+  if (files.length > 0) {
+    var filePaths = files.map(function (f) { return "[Uploaded file: " + f.path + "]"; }).join("\n");
+    text = text ? filePaths + "\n\n" + text : filePaths;
+  }
+
   var pastes = pendingPastes.map(function (p) { return p.text; });
   ctx.addUserMessage(text, images.length > 0 ? images : null, pastes.length > 0 ? pastes : null);
 
@@ -183,6 +193,7 @@ function removePendingImage(idx) {
 export function clearPendingImages() {
   pendingImages = [];
   pendingPastes = [];
+  pendingFiles = [];
   renderInputPreviews();
 }
 
@@ -191,10 +202,15 @@ function removePendingPaste(idx) {
   renderInputPreviews();
 }
 
+function removePendingFile(idx) {
+  pendingFiles.splice(idx, 1);
+  renderInputPreviews();
+}
+
 function renderInputPreviews() {
   var bar = ctx.imagePreviewBar;
   bar.innerHTML = "";
-  if (pendingImages.length === 0 && pendingPastes.length === 0) {
+  if (pendingImages.length === 0 && pendingPastes.length === 0 && pendingFiles.length === 0 && uploadingCount === 0) {
     bar.classList.remove("visible");
     return;
   }
@@ -222,6 +238,45 @@ function renderInputPreviews() {
     })(i);
   }
 
+  // File chips
+  for (var fi = 0; fi < pendingFiles.length; fi++) {
+    (function (idx) {
+      var chip = document.createElement("div");
+      chip.className = "file-chip";
+      var icon = document.createElement("span");
+      icon.className = "file-chip-icon";
+      icon.innerHTML = iconHtml("file");
+      var nameSpan = document.createElement("span");
+      nameSpan.className = "file-chip-name";
+      nameSpan.textContent = pendingFiles[idx].name;
+      var removeBtn = document.createElement("button");
+      removeBtn.className = "file-chip-remove";
+      removeBtn.innerHTML = iconHtml("x");
+      removeBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        removePendingFile(idx);
+      });
+      chip.appendChild(icon);
+      chip.appendChild(nameSpan);
+      chip.appendChild(removeBtn);
+      bar.appendChild(chip);
+    })(fi);
+  }
+
+  // Uploading indicator
+  if (uploadingCount > 0) {
+    var chip = document.createElement("div");
+    chip.className = "file-chip file-chip-uploading";
+    var spinner = document.createElement("span");
+    spinner.className = "file-chip-spinner";
+    var label = document.createElement("span");
+    label.className = "file-chip-name";
+    label.textContent = "Uploading" + (uploadingCount > 1 ? " (" + uploadingCount + ")" : "") + "...";
+    chip.appendChild(spinner);
+    chip.appendChild(label);
+    bar.appendChild(chip);
+  }
+
   // Pasted content chips
   for (var j = 0; j < pendingPastes.length; j++) {
     (function (idx) {
@@ -253,6 +308,46 @@ function renderInputPreviews() {
 var MAX_IMAGE_BYTES = 5 * 1024 * 1024; // 5 MB
 var RESIZE_MAX_DIM = 1920;
 var RESIZE_QUALITY = 0.85;
+var MAX_UPLOAD_BYTES = 50 * 1024 * 1024; // 50 MB
+
+// --- File upload ---
+function uploadFile(file) {
+  if (file.size > MAX_UPLOAD_BYTES) {
+    if (ctx.addSystemMessage) ctx.addSystemMessage("File too large (max 50MB): " + file.name, true);
+    return;
+  }
+  uploadingCount++;
+  renderInputPreviews();
+  var reader = new FileReader();
+  reader.onload = function (ev) {
+    var dataUrl = ev.target.result;
+    var commaIdx = dataUrl.indexOf(",");
+    var b64 = commaIdx !== -1 ? dataUrl.substring(commaIdx + 1) : "";
+
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", ctx.basePath + "api/upload");
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onload = function () {
+      uploadingCount--;
+      if (xhr.status === 200) {
+        try {
+          var resp = JSON.parse(xhr.responseText);
+          pendingFiles.push({ name: resp.name || file.name, path: resp.path });
+        } catch (e) {}
+      } else {
+        if (ctx.addSystemMessage) ctx.addSystemMessage("Upload failed: " + file.name, true);
+      }
+      renderInputPreviews();
+    };
+    xhr.onerror = function () {
+      uploadingCount--;
+      if (ctx.addSystemMessage) ctx.addSystemMessage("Upload failed: " + file.name, true);
+      renderInputPreviews();
+    };
+    xhr.send(JSON.stringify({ name: file.name, data: b64 }));
+  };
+  reader.readAsDataURL(file);
+}
 
 function readImageBlob(blob) {
   var reader = new FileReader();
@@ -356,26 +451,10 @@ export function handleInputSync(text) {
   isRemoteInput = false;
 }
 
-// --- Attach menu ---
-var attachMenuOpen = false;
-
-function toggleAttachMenu() {
-  var menu = document.getElementById("attach-menu");
-  if (!menu) return;
-  attachMenuOpen = !attachMenuOpen;
-  menu.classList.toggle("hidden", !attachMenuOpen);
-}
-
-function closeAttachMenu() {
-  var menu = document.getElementById("attach-menu");
-  if (menu) menu.classList.add("hidden");
-  attachMenuOpen = false;
-}
-
 function createFileInput(accept, capture, multiple) {
   var input = document.createElement("input");
   input.type = "file";
-  input.accept = accept;
+  if (accept) input.accept = accept;
   if (capture) input.setAttribute("capture", capture);
   if (multiple) input.multiple = true;
   input.style.display = "none";
@@ -386,6 +465,8 @@ function createFileInput(accept, capture, multiple) {
       for (var i = 0; i < input.files.length; i++) {
         if (input.files[i].type.indexOf("image/") === 0) {
           readImageBlob(input.files[i]);
+        } else {
+          uploadFile(input.files[i]);
         }
       }
     }
@@ -399,47 +480,24 @@ function createFileInput(accept, capture, multiple) {
 export function initInput(_ctx) {
   ctx = _ctx;
 
-  // Attach button
-  var isTouchDevice = "ontouchstart" in window;
-  var attachBtn = document.getElementById("attach-btn");
-  if (attachBtn) {
-    attachBtn.addEventListener("click", function (e) {
+  // File (clip) button — opens file picker for all types
+  var attachFileBtn = document.getElementById("attach-file-btn");
+  if (attachFileBtn) {
+    attachFileBtn.addEventListener("click", function (e) {
       e.stopPropagation();
-      // Desktop: skip menu, open file picker directly
-      if (!isTouchDevice) {
-        createFileInput("image/*", null, true);
-        return;
-      }
-      toggleAttachMenu();
+      createFileInput(null, null, true);
     });
   }
 
-  var cameraBtn = document.getElementById("attach-camera");
-  if (cameraBtn) {
-    cameraBtn.addEventListener("click", function () {
-      closeAttachMenu();
-      createFileInput("image/*", "environment");
-    });
-  }
-
-  var photosBtn = document.getElementById("attach-photos");
-  if (photosBtn) {
-    photosBtn.addEventListener("click", function () {
-      closeAttachMenu();
+  // Image button — opens image picker (OS handles camera/gallery choice)
+  var attachImageBtn = document.getElementById("attach-image-btn");
+  if (attachImageBtn) {
+    attachImageBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
       createFileInput("image/*", null, true);
     });
   }
 
-  // Close attach menu when clicking outside
-  document.addEventListener("click", function (e) {
-    if (attachMenuOpen) {
-      var wrap = document.getElementById("attach-wrap");
-      if (wrap && !wrap.contains(e.target)) {
-        closeAttachMenu();
-      }
-    }
-  });
-
   // Paste handler
   document.addEventListener("paste", function (e) {
     var cd = e.clipboardData;
@@ -453,6 +511,9 @@ export function initInput(_ctx) {
         if (cd.files[i].type.indexOf("image/") === 0) {
           found = true;
           readImageBlob(cd.files[i]);
+        } else if (cd.files[i].name) {
+          found = true;
+          uploadFile(cd.files[i]);
         }
       }
     }
@@ -466,6 +527,12 @@ export function initInput(_ctx) {
             found = true;
             readImageBlob(blob);
           }
+        } else if (cd.items[i].kind === "file") {
+          var fileBlob = cd.items[i].getAsFile();
+          if (fileBlob && fileBlob.name) {
+            found = true;
+            uploadFile(fileBlob);
+          }
         }
       }
     }
@@ -559,10 +626,6 @@ export function initInput(_ctx) {
         return;
       }
       e.preventDefault();
-      // If suggestion chips are visible, accept chip instead of sending
-      if (ctx.acceptSuggestionChip && ctx.acceptSuggestionChip()) {
-        return;
-      }
       sendMessage();
     }
   });