Support pasted image chat attachments

Author: nickyang

gui/src/apps/chat/chat.vue

@@ -98,6 +98,7 @@
               style="color:#2a1f13"
               @input="autoResize"
               @keydown.enter.exact="onEnter"
+              @paste="onPaste"
               @compositionstart="composing = true"
               @compositionend="composing = false"
             />
@@ -494,6 +495,34 @@ const onPickFiles = async (e) => {
   if (fileInput.value) fileInput.value.value = '';
 };
 
+const fileExtFromMime = (type = '') => {
+  if (type === 'image/jpeg') return 'jpg';
+  if (type === 'image/png') return 'png';
+  if (type === 'image/webp') return 'webp';
+  if (type === 'image/gif') return 'gif';
+  return 'png';
+};
+
+const onPaste = async (event) => {
+  if (busy.value) return;
+  const items = Array.from(event.clipboardData?.items || []);
+  const files = items
+    .filter((item) => item.kind === 'file' && String(item.type || '').startsWith('image/'))
+    .map((item, idx) => {
+      const file = item.getAsFile();
+      if (!file) return null;
+      const ext = fileExtFromMime(file.type);
+      const name = file.name && file.name !== 'image.png'
+        ? file.name
+        : `pasted-image-${Date.now()}-${idx + 1}.${ext}`;
+      return new File([file], name, { type: file.type || `image/${ext}` });
+    })
+    .filter(Boolean);
+  if (!files.length) return;
+  event.preventDefault();
+  await appendFiles(files);
+};
+
 const hasDraggedFiles = (event) => {
   const types = event?.dataTransfer?.types;
   return !!types && Array.from(types).includes('Files');

server/main/api/chat.js

@@ -13,7 +13,8 @@ const CHAT_UPLOAD_DIR = join(FILES_DIR, "uploads", "chat");
 const MAX_UPLOAD_BYTES = 10 * 1024 * 1024;
 const UPLOADABLE_EXT = new Set([
   ".txt", ".md", ".pdf", ".doc", ".docx", ".json", ".csv",
-  ".png", ".jpg", ".jpeg", ".webp", ".log", ".pptx", ".xlsx"
+  ".png", ".jpg", ".jpeg", ".webp", ".gif", ".log", ".pptx", ".xlsx",
+  ".html", ".htm"
 ]);
 const safeName = (name = "file") => {
   const normalized = String(name || "file")

server/main/api/fs.js

@@ -15,7 +15,7 @@ const MAX_UPLOAD_BYTES = 10 * 1024 * 1024;
 const MAX_TEXT_BYTES = 1024 * 1024;
 const TEXT_EXT = new Set([".txt", ".md", ".json", ".csv", ".log", ".js", ".mjs", ".cjs", ".ts", ".tsx", ".jsx", ".vue", ".css", ".html", ".xml", ".yml", ".yaml", ".toml"]);
 const WRITABLE_EXT = new Set([".txt", ".md", ".json", ".csv", ".log", ".js", ".mjs", ".cjs", ".ts", ".tsx", ".jsx", ".vue", ".css", ".html", ".xml", ".yml", ".yaml", ".toml"]);
-const UPLOADABLE_EXT = new Set([".txt", ".md", ".pdf", ".doc", ".docx", ".json", ".csv", ".png", ".jpg", ".jpeg", ".webp", ".log", ".pptx", ".xlsx"]);
+const UPLOADABLE_EXT = new Set([".txt", ".md", ".pdf", ".doc", ".docx", ".json", ".csv", ".png", ".jpg", ".jpeg", ".webp", ".gif", ".log", ".pptx", ".xlsx", ".html", ".htm"]);
 const MIME_MAP = {
   ".txt": "text/plain",
   ".md": "text/markdown",