Feat: Show attached image in chat and provide local preview

backend/controllers/ai.js

@@ -81,9 +81,11 @@ exports.chat = asyncHandler(async (req, res, next) => {
   // 2. Handle File (Sync Handshake to prevent OS Termination)
   let attachmentContext = '';
   let vaultLink = '';
+  let attachmentUrl = '';
   if (req.file) {
     console.log('Vault: Initiating Priority Upload...');
     attachmentContext = await processFile(req.file.path);
+    attachmentUrl = `/uploads/${req.file.filename}`;
     try {
       const vaultData = await uploadToVault(req.file.path, req.file.originalname);
       if (vaultData && vaultData.success) {
@@ -92,12 +94,8 @@ exports.chat = asyncHandler(async (req, res, next) => {
       }
     } catch (e) {
       console.error("Vault_Priority_Error:", e.message);
-    } finally {
-      if (fs.existsSync(req.file.path)) {
-        fs.unlinkSync(req.file.path);
-        console.log(`[SYSTEM] Temp file purged: ${req.file.path}`);
-      }
     }
+    // We keep the file in public/uploads so the frontend can display it
   }
 
   // 3. Build History
@@ -185,7 +183,12 @@ exports.chat = asyncHandler(async (req, res, next) => {
         
         // Save and end
         const userContent = message || "[SIGNAL]";
-        await Message.create({ sessionId: session._id, sender: 'user', content: userContent });
+        await Message.create({ 
+          sessionId: session._id, 
+          sender: 'user', 
+          content: userContent,
+          attachmentUrl: attachmentUrl
+        });
         await Message.create({ sessionId: session._id, sender: 'ai', content: fullAIResponse, modelUsed: model });
         
         user.usage.requestsToday += 1;
@@ -275,7 +278,12 @@ exports.chat = asyncHandler(async (req, res, next) => {
       try {
         // Persist Messages after stream ends
         const userContent = message || (req.file ? `[Attached Image: ${req.file.originalname}]` : "[SIGNAL]");
-        await Message.create({ sessionId: session._id, sender: 'user', content: userContent });
+        await Message.create({ 
+          sessionId: session._id, 
+          sender: 'user', 
+          content: userContent,
+          attachmentUrl: attachmentUrl
+        });
         await Message.create({ sessionId: session._id, sender: 'ai', content: fullAIResponse, modelUsed: model });
         
         user.usage.requestsToday += 1;

backend/public/chat.html

@@ -210,12 +210,21 @@
 
         let currentSessionId = null, selectedFile = null, isProcessing = false;
         const chatWindow = document.getElementById('chat-window'), input = document.getElementById('user-input');
+        let localFilePreview = null;
 
         function handleFile(input) {
             if (input.files && input.files[0]) {
                 selectedFile = input.files[0];
                 const plusBtn = document.querySelector('button[onclick*="file-input"]');
-                plusBtn.innerHTML = '<i class="fas fa-check text-green-500"></i>';
+                
+                // Show local image preview instead of checkmark
+                if (selectedFile.type.startsWith('image/')) {
+                    localFilePreview = URL.createObjectURL(selectedFile);
+                    plusBtn.innerHTML = `<img src="${localFilePreview}" class="w-8 h-8 rounded-lg object-cover border border-white/20">`;
+                } else {
+                    plusBtn.innerHTML = '<i class="fas fa-check text-green-500"></i>';
+                }
+                
                 console.log(`[FILE_LOADED] ${selectedFile.name}`);
             }
         }
@@ -290,7 +299,7 @@
             currentSessionId = id; chatWindow.innerHTML = ''; toggleMenu();
             const res = await fetch(`${API_BASE}/api/ai/sessions/${id}/messages`, { headers: { 'Authorization': `Bearer ${token}` } });
             const data = await res.json();
-            if (data.success) data.data.forEach(m => appendMessage(m.sender === 'user' ? 'user' : 'ai', m.content, m.modelUsed));
+            if (data.success) data.data.forEach(m => appendMessage(m.sender === 'user' ? 'user' : 'ai', m.content, m.modelUsed, m.attachmentUrl));
             loadHistory();
         }
 
@@ -303,7 +312,9 @@
             const fd = new FormData(); fd.append('message', message); fd.append('model', activeModel);
             if (currentSessionId) fd.append('sessionId', currentSessionId);
             if (selectedFile) fd.append('file', selectedFile);
-            appendMessage('user', message || "[SIGNAL]");
+            
+            appendMessage('user', message || "[SIGNAL]", '', localFilePreview);
+            
             input.value = ''; input.style.height = 'auto';
             try {
                 const res = await fetch(`${API_BASE}/api/ai/chat`, { method: 'POST', headers: { 'Authorization': `Bearer ${token}` }, body: fd });
@@ -336,13 +347,14 @@
             } finally { 
                 isProcessing = false; 
                 selectedFile = null;
+                localFilePreview = null;
                 document.getElementById('file-input').value = '';
                 document.querySelector('button[onclick*="file-input"]').innerHTML = '<i class="fas fa-plus"></i>';
                 document.getElementById('send-btn').innerHTML = '<i class="fas fa-arrow-up text-sm"></i>'; 
-            }
+            } 
         }
 
-        function appendMessage(role, text, model = '') {
+        function appendMessage(role, text, model = '', attachmentUrl = '') {
             const div = document.createElement('div');
             div.className = `msg-node ${role}`;
             div.innerHTML = `
@@ -350,7 +362,10 @@
                     <div class="flex items-center gap-3"><div class="status-dot"></div> ${role === 'user' ? 'Architect In' : 'Titan Out'}</div>
                     <div class="hud-id">${model || 'MAIN CORE'}</div>
                 </div>
-                <div class="bubble"><div class="prose max-w-none">${marked.parse(text)}</div></div>
+                <div class="bubble">
+                    ${attachmentUrl ? `<img src="${attachmentUrl}" class="max-w-full rounded-2xl mb-4 border border-white/10 shadow-2xl cursor-zoom-in" onclick="window.open(this.src)">` : ''}
+                    <div class="prose max-w-none">${marked.parse(text)}</div>
+                </div>
                 <div class="msg-toolkit">
                     <div class="tool-btn" onclick="copyText(this)"><i class="far fa-copy"></i> Copy</div>
                     ${role === 'ai' ? `<div class="tool-btn" onclick="window.location.reload()"><i class="fas fa-redo"></i> Redo</div>` : ''}
@@ -403,4 +418,4 @@
         function logout() { localStorage.removeItem('token'); window.location.href = '/auth'; }
     </script>
 </body>
-</html>
+</html>

backend/routes/ai.js

@@ -10,7 +10,7 @@ const router = express.Router();
 // Setup Multer for file uploads
 const storage = multer.diskStorage({
   destination: function (req, file, cb) {
-    const uploadPath = path.join(__dirname, '../uploads');
+    const uploadPath = path.join(__dirname, '../public/uploads');
     if (!fs.existsSync(uploadPath)) fs.mkdirSync(uploadPath, { recursive: true });
     cb(null, uploadPath)
   },

backend/server.js

@@ -25,9 +25,9 @@ restoreFromCloud();
 // Periodic Cloud Sync (Every 30 minutes)
 setInterval(syncToCloud, 30 * 60 * 1000);
 
-// Ensure Uploads Directory exists
+// Ensure Uploads Directory exists inside public
 const fs = require('fs');
-const uploadsDir = path.join(__dirname, 'uploads');
+const uploadsDir = path.join(__dirname, 'public', 'uploads');
 if (!fs.existsSync(uploadsDir)){
     fs.mkdirSync(uploadsDir, { recursive: true });
 }