Add support for pasted images in AI queries and enhance UI components

Author: 6A31

src/main/ipcHandlers.js

@@ -824,7 +824,7 @@ function resolveFileReferences(query) {
 
 let activeQueryId = 0;
 
-async function handleAIQuery(event, query, usePro, forceShowOutput, followUp) {
+async function handleAIQuery(event, query, usePro, forceShowOutput, followUp, pastedImages) {
   const queryId = ++activeQueryId;
 
   if (!ai) {
@@ -846,6 +846,17 @@ async function handleAIQuery(event, query, usePro, forceShowOutput, followUp) {
 
     // Build contents: continue existing conversation or start fresh
     const userParts = [{ text: resolvedQuery }, ...extraParts];
+
+    // Add pasted images
+    if (Array.isArray(pastedImages) && pastedImages.length > 0) {
+      for (const img of pastedImages) {
+        if (img.dataUri && img.mimeType) {
+          const base64 = img.dataUri.replace(/^data:[^;]+;base64,/, '');
+          userParts.push({ inlineData: { mimeType: img.mimeType, data: base64 } });
+        }
+      }
+      userParts[0] = { text: resolvedQuery + '\n\n[Pasted image attached]' };
+    }
     let contents;
     if (followUp && chatHistory && chatHistory.model === modelName) {
       contents = [...chatHistory.contents, { role: 'user', parts: userParts }];
@@ -1443,8 +1454,8 @@ function registerHandlers(ipcMain) {
     }
   });
 
-  ipcMain.handle(IPC.AI_QUERY, async (event, query, usePro, forceShowOutput, followUp) => {
-    return handleAIQuery(event, query, usePro, forceShowOutput, followUp);
+  ipcMain.handle(IPC.AI_QUERY, async (event, query, usePro, forceShowOutput, followUp, pastedImages) => {
+    return handleAIQuery(event, query, usePro, forceShowOutput, followUp, pastedImages);
   });
 
   ipcMain.handle('trim:copy-image', async (_e, dataUri) => {
@@ -1458,6 +1469,19 @@ function registerHandlers(ipcMain) {
     }
   });
 
+  ipcMain.handle('trim:read-clipboard-image', async () => {
+    try {
+      const { nativeImage, clipboard } = require('electron');
+      const img = clipboard.readImage();
+      if (img.isEmpty()) return null;
+      const pngBuffer = img.toPNG();
+      const dataUri = `data:image/png;base64,${pngBuffer.toString('base64')}`;
+      return { dataUri, mimeType: 'image/png' };
+    } catch {
+      return null;
+    }
+  });
+
   ipcMain.handle(IPC.SEARCH_FOLDERS, async (_e, query) => {
     try {
       const sender = _e.sender;

src/renderer/index.html

@@ -32,6 +32,7 @@
           spellcheck="false"
         >
       </div>
+      <div id="image-attachments"></div>
       <div id="chip-container"></div>
       <span class="search-hint" id="search-hint"></span>
     </div>

src/renderer/inputRouter.js

@@ -24,6 +24,7 @@ let activeFilePickRequestId = null;
 const aiFileRefs = new Map(); // label -> absolute path
 let inputOverlayEl = null;
 let calcSyntaxEnabled = true;
+let pastedImageData = null; // { dataUri, mimeType } or null
 
 function init() {
   const input = document.getElementById('search-input');
@@ -38,6 +39,23 @@ function init() {
     calcSyntaxEnabled = s && s.calcSyntax === false ? false : true;
   }).catch(() => {});
 
+  // Handle image paste - use Electron's native clipboard via IPC (sandbox-safe)
+  input.addEventListener('paste', async (e) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    let hasImage = false;
+    for (const item of items) {
+      if (item.type.startsWith('image/')) { hasImage = true; break; }
+    }
+    if (!hasImage) return;
+    e.preventDefault();
+    const result = await window.trim.readClipboardImage();
+    if (result && result.dataUri) {
+      pastedImageData = { dataUri: result.dataUri, mimeType: result.mimeType };
+      if (window._chips) window._chips.renderChips();
+    }
+  });
+
   window.trim.offFolderSearchUpdate();
   window.trim.onFolderSearchUpdate((data) => {
     const currentRaw = input.value;
@@ -445,24 +463,25 @@ function renderCalcOverlay(inputEl, raw) {
 
 function syncOverlayScroll(inputEl) {
   if (!inputOverlayEl || inputOverlayEl.style.display === 'none') return;
-  const containerW = inputOverlayEl.parentElement.clientWidth;
-  const contentW = inputOverlayEl.scrollWidth;
-  if (contentW > containerW) {
-    inputOverlayEl.style.transform = `translateX(${containerW - contentW}px)`;
-  } else {
-    inputOverlayEl.style.transform = '';
-  }
+  inputOverlayEl.style.transform = `translateX(${-inputEl.scrollLeft}px)`;
 }
 
 function refreshInputDecor(inputEl) {
   pruneStaleFileRefs(inputEl.value || '');
   updateFileRefTooltip(inputEl);
   renderInputOverlay(inputEl);
-  requestAnimationFrame(() => syncOverlayScroll(inputEl));
+  requestAnimationFrame(() => {
+    syncOverlayScroll(inputEl);
+    // Double-rAF: input.scrollLeft may update after layout
+    requestAnimationFrame(() => syncOverlayScroll(inputEl));
+  });
 }
 
 function isFilePickActive() {
   return filePickActive;
 }
 
-window._inputRouter = { init, route, detectMode, isFilePickActive, resolveAIFileRefsInQuery, refreshInputDecor, setCalcSyntax(v) { calcSyntaxEnabled = v; } };
+window._inputRouter = { init, route, detectMode, isFilePickActive, resolveAIFileRefsInQuery, refreshInputDecor, setCalcSyntax(v) { calcSyntaxEnabled = v; },
+  getPastedImage() { return pastedImageData; },
+  clearPastedImage() { pastedImageData = null; if (window._chips) window._chips.renderChips(); },
+};

src/renderer/modules/aiQuery.js

@@ -8,7 +8,7 @@ async function search(query) {
   return [{ type: 'ai-loading' }];
 }
 
-async function execute(query, mode, forceShow, renderFn) {
+async function execute(query, mode, forceShow, renderFn, pastedImages) {
   if (isQuerying) return; // Prevent concurrent queries
   isQuerying = true;
 
@@ -22,7 +22,7 @@ async function execute(query, mode, forceShow, renderFn) {
   });
 
   try {
-    const result = await window.trim.aiQuery(query, usePro, forceShow, followUp);
+    const result = await window.trim.aiQuery(query, usePro, forceShow, followUp, pastedImages || []);
 
     // Silently ignore aborted queries
     if (result.error === '__aborted__') return;

src/renderer/modules/chips.js

@@ -16,6 +16,7 @@ function register(id, opts) {
     modes: opts.modes || [], // which input modes show this chip
     action: typeof opts.action === 'function' ? opts.action : null,
     visibleWhen: typeof opts.visibleWhen === 'function' ? opts.visibleWhen : null,
+    dismissable: opts.dismissable || false,
   });
   activeToggles[id] = opts.default || false;
 }
@@ -87,6 +88,16 @@ register('update_available', {
   action: () => { window.trim.quitAndInstall(); },
 });
 
+register('pasted_image', {
+  label: 'Clipboard image',
+  icon: 'image',
+  default: false,
+  modes: ['ai', 'ai_pro'],
+  dismissable: true,
+  visibleWhen: () => window._inputRouter && !!window._inputRouter.getPastedImage(),
+  action: () => { if (window._inputRouter) window._inputRouter.clearPastedImage(); },
+});
+
 if (window.trim.onUpdateReady) {
   window.trim.onUpdateReady(() => {
     updateReady = true;
@@ -164,6 +175,14 @@ function renderChips(mode) {
     label.textContent = chip.label;
     el.appendChild(label);
 
+    if (chip.dismissable) {
+      const dismiss = document.createElement('span');
+      dismiss.className = 'material-symbols-rounded chip-dismiss';
+      dismiss.style.fontSize = '14px';
+      dismiss.textContent = 'close';
+      el.appendChild(dismiss);
+    }
+
     // Prevent chip from stealing focus from the input
     el.addEventListener('mousedown', (e) => e.preventDefault());
 
@@ -198,4 +217,4 @@ function triggerVisibleAction() {
   return false;
 }
 
-window._chips = { init, updateMode, isActive, register, toggle, deactivate, setResultsCount, triggerVisibleAction };
+window._chips = { init, updateMode, isActive, register, toggle, deactivate, setResultsCount, triggerVisibleAction, renderChips() { renderChips(chipMode); } };

src/renderer/preload.js

@@ -6,7 +6,7 @@ contextBridge.exposeInMainWorld('trim', {
   getUsage:      ()           => ipcRenderer.invoke('trim:get-usage'),
   getDisplayScale: ()         => ipcRenderer.invoke('trim:get-display-scale'),
   openApp:       (appPath, appName) => ipcRenderer.invoke('trim:open-app', appPath, appName),
-  aiQuery:       (query, usePro, forceShow, followUp) => ipcRenderer.invoke('trim:ai-query', query, usePro, forceShow, followUp),
+  aiQuery:       (query, usePro, forceShow, followUp, pastedImages) => ipcRenderer.invoke('trim:ai-query', query, usePro, forceShow, followUp, pastedImages),
   searchFolders: (query)      => ipcRenderer.invoke('trim:search-folders', query),
   onFolderSearchUpdate: (cb)  => ipcRenderer.on('trim:folder-search-update', (_e, data) => cb(data)),
   offFolderSearchUpdate: ()   => ipcRenderer.removeAllListeners('trim:folder-search-update'),
@@ -29,4 +29,5 @@ contextBridge.exposeInMainWorld('trim', {
   onUpdateReady: (cb) => ipcRenderer.on('trim:update-ready', cb),
   quitAndInstall: () => ipcRenderer.send('trim:quit-and-install'),
   copyImageToClipboard: (dataUri) => ipcRenderer.invoke('trim:copy-image', dataUri),
+  readClipboardImage: () => ipcRenderer.invoke('trim:read-clipboard-image'),
 });

src/renderer/renderer.js

@@ -52,6 +52,9 @@ function boot() {
       window._settings.dismiss();
     }
 
+    // Always clear pasted images on hide
+    if (window._inputRouter) window._inputRouter.clearPastedImage();
+
     const hasChat = window._aiQuery && window._aiQuery.isFollowUp();
     input.value = '';
     if (window._inputRouter) window._inputRouter.refreshInputDecor(input);

src/renderer/styles/search.css

@@ -58,13 +58,15 @@
 
 #search-input-overlay {
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
   pointer-events: none;
   z-index: 1;
   display: flex;
   align-items: center;
   white-space: pre;
-  overflow: hidden;
+  width: max-content;
   font-family: var(--font);
   font-size: 16px;
   font-weight: 400;
@@ -92,16 +94,13 @@
 }
 
 .file-ref-pill {
-  display: inline-flex;
-  align-items: center;
-  margin: 0 1px;
-  padding: 1px 7px;
+  display: inline;
   border-radius: 6px;
   background: color-mix(in srgb, var(--accent) 12%, transparent);
   color: color-mix(in srgb, var(--accent) 85%, #ffffff);
-  font-size: 0.82em;
-  font-weight: 500;
-  line-height: 1.35;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
 }
 
 .file-ref-hidden-brackets {
@@ -190,6 +189,16 @@
   color: #fff;
 }
 
+.chip-dismiss {
+  opacity: 0.5;
+  margin-left: -2px;
+  transition: opacity 0.15s ease;
+}
+
+.input-chip:hover .chip-dismiss {
+  opacity: 1;
+}
+
 /* Results list */
 #results-container {
   overflow-y: auto;

src/renderer/ui.js

@@ -73,21 +73,23 @@ function handleKeyboard(e) {
         const query = input.slice(2).trim();
         const resolvedQuery = window._inputRouter.resolveAIFileRefsInQuery(query);
         if (query) {
+          const pastedImages = collectPastedImages();
           window._aiQuery.prepareForQuery('ai_pro');
           showAILoading('Asking Gemini Pro...');
           window._aiQuery.execute(resolvedQuery, 'ai_pro', forceShow, (response) => {
             renderAIResponse(response);
-          });
+          }, pastedImages);
         }
       } else if (input.startsWith('?')) {
         const query = input.slice(1).trim();
         const resolvedQuery = window._inputRouter.resolveAIFileRefsInQuery(query);
         if (query) {
+          const pastedImages = collectPastedImages();
           window._aiQuery.prepareForQuery('ai');
           showAILoading();
           window._aiQuery.execute(resolvedQuery, 'ai', forceShow, (response) => {
             renderAIResponse(response);
-          });
+          }, pastedImages);
         }
       } else {
         const didExecute = executeSelected();
@@ -947,6 +949,8 @@ function clearResults() {
   renderPlaceholderState('empty', rawInput);
   // Clear conversation history
   if (window._aiQuery) window._aiQuery.clearConversation();
+  // Clear any pasted image
+  if (window._inputRouter) window._inputRouter.clearPastedImage();
 }
 
 function smartScroll(aiContainer) {
@@ -1072,6 +1076,14 @@ function restoreAIArea() {
   }
 }
 
+function collectPastedImages() {
+  if (!window._inputRouter) return [];
+  const img = window._inputRouter.getPastedImage();
+  if (!img) return [];
+  window._inputRouter.clearPastedImage();
+  return [img];
+}
+
 function escapeHtml(str) {
   const div = document.createElement('div');
   div.textContent = str;