Fix: Context Amnesia & UI Cards

src/core/memory.py

@@ -14,33 +14,29 @@ class MemoryManager:
 
     def get_conn(self): return self.engine.connect()
 
-    def get_user_workspaces(self, user_id):
-        if not self.engine: return [{"id": 1, "name": "Offline Store"}]
-        try:
-            with self.get_conn() as conn:
-                rows = conn.execute(text("SELECT id, name, type FROM workspaces WHERE user_id = :uid"), {"uid": str(user_id)}).fetchall()
-                if not rows: return [{"id": 1, "name": "Default Store"}]
-                return [{"id": r[0], "name": r[1]} for r in rows]
-        except: return [{"id": 1, "name": "Default Store"}]
-
-    def _get_or_create_session(self, conn, user_id, workspace_id):
-        row = conn.execute(text("SELECT id FROM chat_sessions WHERE user_id = :uid ORDER BY last_active DESC LIMIT 1"), {"uid": str(user_id)}).fetchone()
-        if row: return row[0]
-        res = conn.execute(text("INSERT INTO chat_sessions (user_id, workspace_id, title) VALUES (:uid, :wid, 'New Chat') RETURNING id"), {"uid": str(user_id), "wid": str(workspace_id)}).fetchone()
-        return res[0]
-
     def save_attachment(self, user_id, workspace_id, filename, filetype, analysis):
         try:
             with self.get_conn() as conn:
-                sid = self._get_or_create_session(conn, user_id, workspace_id)
+                # Get or Create Session
+                row = conn.execute(text("SELECT id FROM chat_sessions WHERE user_id = :uid ORDER BY last_active DESC LIMIT 1"), {"uid": str(user_id)}).fetchone()
+                if row: 
+                    sid = row[0]
+                else:
+                    res = conn.execute(text("INSERT INTO chat_sessions (user_id, workspace_id, title) VALUES (:uid, :wid, 'New Chat') RETURNING id"), {"uid": str(user_id), "wid": str(workspace_id)}).fetchone()
+                    sid = res[0]
+
                 conn.execute(text("INSERT INTO chat_attachments (session_id, file_name, file_type, analysis_summary) VALUES (:sid, :f, :t, :a)"), {"sid": sid, "f": filename, "t": filetype, "a": analysis})
+                conn.execute(text("UPDATE chat_sessions SET last_active = CURRENT_TIMESTAMP WHERE id = :sid"), {"sid": sid})
                 conn.commit()
-        except: pass
+        except Exception as e: print(f"DB Error: {e}")
 
     def add_message(self, user_id, workspace_id, role, content):
         try:
             with self.get_conn() as conn:
-                sid = self._get_or_create_session(conn, user_id, workspace_id)
+                # Simple lookup for demo
+                sid_res = conn.execute(text("SELECT id FROM chat_sessions WHERE user_id = :uid ORDER BY last_active DESC LIMIT 1"), {"uid": str(user_id)}).fetchone()
+                sid = sid_res[0] if sid_res else 1
+                
                 conn.execute(text("INSERT INTO chat_messages (session_id, role, content) VALUES (:sid, :role, :content)"), {"sid": sid, "role": role, "content": str(content)})
                 conn.commit()
         except: pass
@@ -48,19 +44,37 @@ class MemoryManager:
     def get_context_string(self, user_id, limit=6):
         try:
             with self.get_conn() as conn:
+                # 1. Get Messages
                 rows = conn.execute(text("SELECT m.role, m.content FROM chat_messages m JOIN chat_sessions s ON m.session_id = s.id WHERE s.user_id = :uid ORDER BY m.created_at DESC LIMIT :lim"), {"uid": str(user_id), "lim": limit}).fetchall()
                 history = "\n".join([f"{r[0]}: {r[1]}" for r in reversed(rows)])
                 
-                att_rows = conn.execute(text("SELECT a.file_name, a.analysis_summary FROM chat_attachments a JOIN chat_sessions s ON a.session_id = s.id WHERE s.user_id = :uid ORDER BY s.last_active DESC LIMIT 3"), {"uid": str(user_id)}).fetchall()
-                vision = ""
+                # 2. Get Attachments (SMARTER LOGIC)
+                # We fetch the *Latest* one separately to mark it as CURRENT
+                att_rows = conn.execute(text("SELECT a.file_name, a.analysis_summary, a.created_at FROM chat_attachments a JOIN chat_sessions s ON a.session_id = s.id WHERE s.user_id = :uid ORDER BY a.created_at DESC LIMIT 3"), {"uid": str(user_id)}).fetchall()
+                
+                vision_context = ""
                 if att_rows:
-                    vision = "\n[VISUAL CONTEXT]:\n" + "\n".join([f"- {r[0]}: {r[1]}" for r in att_rows])
-                return vision + history
-        except: return ""
+                    # The first one is the latest
+                    latest = att_rows[0]
+                    vision_context += f"\n[CURRENTLY LOOKING AT IMAGE]:\nFile: {latest[0]}\nDescription: {latest[1]}\n"
+                    
+                    # The rest are history
+                    if len(att_rows) > 1:
+                        vision_context += "\n[PREVIOUS IMAGES (Context only)]:\n"
+                        for r in att_rows[1:]:
+                            vision_context += f"- {r[0]}: {r[1]}\n"
+                            
+                return vision_context + "\n" + history
+        except Exception as e: 
+            return f"Error: {e}"
 
     def save_workflow(self, workspace_id, name, json_data):
+        # (Same as before)
         with self.get_conn() as conn:
             conn.execute(text("INSERT INTO scenarios (workspace_id, name, description, steps, status, created_at) VALUES (:wid, :name, 'AI Generated', :steps, 'active', :time)"),
             {"wid": workspace_id, "name": name, "steps": json.dumps(json_data), "time": datetime.now().isoformat()})
             conn.commit()
             return 1
+    
+    # Required for server.py imports
+    def get_user_workspaces(self, uid): return []

src/server.py

@@ -47,8 +47,6 @@ def clean_output(text):
     text = re.sub(r"<think>.*?</think>", "", text, flags=re.DOTALL)
     return text.replace("</think>", "").replace("<think>", "").strip()
 
-# --- ROUTES ---
-
 @app.get("/", response_class=HTMLResponse)
 async def root():
     return """
@@ -59,142 +57,152 @@ async def root():
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Project A</title>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
-        :root { --primary: #0084ff; --bg: #ffffff; --chat-bg: #f0f2f5; --user-msg: #0084ff; --ai-msg: #e4e6eb; --text-ai: #050505; }
-        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); display: flex; justify-content: center; height: 100vh; margin: 0; }
-        
-        .chat-widget { width: 100%; max-width: 600px; height: 100vh; background: #fff; display: flex; flex-direction: column; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
+        :root { --primary: #0084ff; --bg: #ffffff; --chat-bg: #f0f2f5; --user-msg: #0084ff; --ai-msg: #e4e6eb; }
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); display: flex; justify-content: center; height: 100vh; margin: 0; }
         
-        /* Header */
+        .chat-widget { width: 100%; max-width: 700px; height: 100vh; background: #fff; display: flex; flex-direction: column; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
         .header { padding: 15px 20px; border-bottom: 1px solid #eee; font-weight: 700; font-size: 18px; color: #333; display: flex; align-items: center; gap: 10px; }
         .status-dot { width: 10px; height: 10px; background: #31a24c; border-radius: 50%; }
 
-        /* Messages */
-        .messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: #fff; }
+        .messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
         .msg-row { display: flex; flex-direction: column; max-width: 85%; }
         .msg-row.user { align-self: flex-end; align-items: flex-end; }
         .msg-row.ai { align-self: flex-start; align-items: flex-start; }
-        
-        .msg { padding: 10px 16px; border-radius: 18px; font-size: 15px; line-height: 1.5; word-wrap: break-word; }
+        .msg { padding: 10px 16px; border-radius: 18px; font-size: 15px; line-height: 1.5; }
         .msg.user { background: var(--user-msg); color: white; border-bottom-right-radius: 4px; }
-        .msg.ai { background: var(--ai-msg); color: var(--text-ai); border-bottom-left-radius: 4px; }
-        .msg p { margin: 0; }
-
-        /* Feedback */
-        .feedback-actions { display: flex; gap: 10px; margin-top: 5px; margin-left: 5px; font-size: 12px; color: #65676b; opacity: 0; transition: opacity 0.2s; }
-        .msg-row.ai:hover .feedback-actions { opacity: 1; }
-        .fb-btn { cursor: pointer; } .fb-btn:hover { color: var(--primary); }
-        .correction-box { display: none; margin-top: 5px; width: 100%; }
-        .correction-box input { width: 100%; padding: 5px; border: 1px solid #ddd; border-radius: 5px; font-size: 12px; }
+        .msg.ai { background: var(--ai-msg); color: #050505; border-bottom-left-radius: 4px; }
 
-        /* Input Area */
+        /* --- NEW ATTACHMENT CARDS --- */
+        .attachment-area { display: flex; gap: 10px; padding: 10px 15px; background: #fff; overflow-x: auto; min-height: 60px; display: none; }
+        
+        .att-card { 
+            display: flex; align-items: center; gap: 10px; 
+            background: #2b2d31; color: white; 
+            padding: 8px 12px; border-radius: 8px; 
+            font-size: 13px; min-width: 150px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+        }
+        
+        .att-thumb { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; background: #444; }
+        .att-info { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
+        .att-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+        .att-size { font-size: 10px; color: #aaa; }
+        .att-close { cursor: pointer; color: #aaa; padding: 5px; }
+        .att-close:hover { color: white; }
+
+        /* Input Bar */
         .input-wrapper { padding: 15px; border-top: 1px solid #eee; background: #fff; }
-        .file-preview { display: none; padding: 8px 12px; background: #e7f3ff; border-radius: 8px; margin-bottom: 10px; font-size: 13px; color: #0084ff; align-items: center; justify-content: space-between; }
-        .remove-file { cursor: pointer; font-weight: bold; }
-
         .input-bar { display: flex; align-items: center; gap: 10px; background: #f0f2f5; padding: 8px 12px; border-radius: 25px; }
-        
-        .attach-btn { background: none; border: none; cursor: pointer; color: #65676b; padding: 5px; display: flex; align-items: center; }
+        .attach-btn { background: none; border: none; cursor: pointer; color: #65676b; font-size: 20px; }
         .attach-btn:hover { color: var(--primary); }
-        .attach-btn svg { width: 24px; height: 24px; fill: currentColor; }
-
         input[type="text"] { flex: 1; background: transparent; border: none; outline: none; font-size: 15px; }
+        .send-btn { background: var(--primary); color: white; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
         
-        .send-btn { background: var(--primary); color: white; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; }
-        .send-btn:active { transform: scale(0.95); }
-        .send-btn svg { width: 18px; height: 18px; fill: white; margin-left: 2px; }
-
         #typing { font-size: 12px; color: #888; margin-left: 20px; margin-bottom: 5px; display: none; }
     </style>
 </head>
 <body>
 
 <div class="chat-widget">
-    <div class="header">
-        <div class="status-dot"></div> Project A
-    </div>
+    <div class="header"><div class="status-dot"></div> Project A</div>
+    <div class="messages" id="messages"></div>
+    <div id="typing">Project A đang suy nghĩ...</div>
 
-    <div class="messages" id="messages">
-        <!-- Chat starts empty -->
-    </div>
-
-    <div id="typing">Project A đang soạn tin...</div>
+    <!-- ATTACHMENT PREVIEW AREA -->
+    <div id="attachment-area" class="attachment-area"></div>
 
     <div class="input-wrapper">
-        <div id="file-preview" class="file-preview">
-            <span id="filename">image.png</span>
-            <span class="remove-file" onclick="clearFile()">✕</span>
-        </div>
-
         <div class="input-bar">
-            <input type="file" id="fileInput" accept="image/*" style="display: none;" onchange="handleFileUpload()">
-            <button class="attach-btn" onclick="document.getElementById('fileInput').click()" title="Đính kèm ảnh">
-                <svg viewBox="0 0 24 24"><path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 0 1 5 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 0 0 5 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/></svg>
+            <input type="file" id="fileInput" accept="image/*" style="display: none;" onchange="handleFileSelect()">
+            <button class="attach-btn" onclick="document.getElementById('fileInput').click()">
+                <i class="fa-solid fa-paperclip"></i>
             </button>
-            
             <input type="text" id="input" placeholder="Nhập tin nhắn..." onkeypress="handleEnter(event)">
-            
-            <button class="send-btn" onclick="sendMessage()">
-                <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
-            </button>
+            <button class="send-btn" onclick="sendMessage()"><i class="fa-solid fa-paper-plane"></i></button>
         </div>
     </div>
 </div>
 
 <script>
-    const API_URL = ""; // Relative path for HF Space
+    const API_URL = ""; 
+    let currentFile = null;
 
-    async function handleFileUpload() {
+    function handleFileSelect() {
         const file = document.getElementById('fileInput').files[0];
         if (!file) return;
+        currentFile = file;
 
-        const preview = document.getElementById("file-preview");
-        const nameSpan = document.getElementById("filename");
-        
-        preview.style.display = "flex";
-        nameSpan.innerText = "⏳ Đang tải: " + file.name;
-
-        const formData = new FormData();
-        formData.append("file", file);
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            showAttachmentCard(file.name, e.target.result);
+        };
+        reader.readAsDataURL(file);
+    }
 
-        try {
-            const res = await fetch(`${API_URL}/upload`, { method: "POST", body: formData });
-            const data = await res.json();
-            if (data.status === "success") {
-                nameSpan.innerText = "📎 " + file.name;
-            } else {
-                nameSpan.innerText = "❌ Lỗi tải file";
-            }
-        } catch (e) {
-            nameSpan.innerText = "❌ Lỗi kết nối";
-        }
+    function showAttachmentCard(name, src) {
+        const area = document.getElementById('attachment-area');
+        area.style.display = 'flex';
+        area.innerHTML = `
+            <div class="att-card">
+                <img src="${src}" class="att-thumb">
+                <div class="att-info">
+                    <div class="att-name">${name}</div>
+                    <div class="att-size">Ready to upload</div>
+                </div>
+                <div class="att-close" onclick="clearFile()">✕</div>
+            </div>
+        `;
     }
 
     function clearFile() {
-        document.getElementById("fileInput").value = "";
-        document.getElementById("file-preview").style.display = "none";
+        currentFile = null;
+        document.getElementById('fileInput').value = "";
+        document.getElementById('attachment-area').style.display = 'none';
+        document.getElementById('attachment-area').innerHTML = "";
     }
 
     async function sendMessage() {
         const input = document.getElementById("input");
         const text = input.value.trim();
-        if (!text) return;
+        
+        // Don't send if empty AND no file
+        if (!text && !currentFile) return;
+
+        // 1. UI Update
+        if (text) addMessage(text, "user");
+        if (currentFile) {
+            // Show a mini "uploaded" message for the file
+            addMessage(`📎 Đã gửi ảnh: ${currentFile.name}`, "user");
+        }
 
-        addMessage(text, "user");
         input.value = "";
-        clearFile(); // Visual clear, server remembers context
-
         document.getElementById("typing").style.display = "block";
 
         try {
+            // 2. Upload File First (If exists)
+            if (currentFile) {
+                const formData = new FormData();
+                formData.append("file", currentFile);
+                await fetch(`${API_URL}/upload`, { method: "POST", body: formData });
+                clearFile(); // Clear from UI after upload
+            }
+
+            // 3. Send Text
+            // If text was empty but file was sent, prompt AI to describe it
+            const msgToSend = text || "Hãy mô tả ảnh tôi vừa gửi.";
+
             const res = await fetch(`${API_URL}/chat`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ user_id: 1, store_id: 1, message: text })
+                body: JSON.stringify({ user_id: 1, store_id: 1, message: msgToSend })
             });
+            
             const data = await res.json();
             document.getElementById("typing").style.display = "none";
-            addAiMessage(data.response, text);
+            addMessage(data.response, "ai");
+
         } catch (e) {
             document.getElementById("typing").style.display = "none";
             addMessage("Lỗi: " + e.message, "ai");
@@ -204,68 +212,12 @@ async def root():
     function addMessage(text, role) {
         const row = document.createElement("div");
         row.className = `msg-row ${role}`;
-        
         const bubble = document.createElement("div");
         bubble.className = `msg ${role}`;
         bubble.innerHTML = marked.parse(text);
-        
-        row.appendChild(bubble);
-        document.getElementById("messages").appendChild(row);
-        scrollToBottom();
-    }
-
-    function addAiMessage(text, prompt) {
-        const row = document.createElement("div");
-        row.className = "msg-row ai";
-        
-        const bubble = document.createElement("div");
-        bubble.className = "msg ai";
-        bubble.innerHTML = marked.parse(text);
-        
-        const actions = document.createElement("div");
-        actions.className = "feedback-actions";
-        actions.innerHTML = `
-            <span class="fb-btn" onclick="sendFeedback(this, 'up')">👍</span>
-            <span class="fb-btn" onclick="showCorrection(this)">👎</span>
-        `;
-        
-        const correction = document.createElement("div");
-        correction.className = "correction-box";
-        correction.innerHTML = `
-            <input placeholder="Góp ý sửa lỗi..." onkeypress="if(event.key==='Enter') submitCorrection('${prompt}', '${text.replace(/'/g, "\'")}', this)">
-        `;
-
         row.appendChild(bubble);
-        row.appendChild(actions);
-        row.appendChild(correction);
-        
         document.getElementById("messages").appendChild(row);
-        scrollToBottom();
-    }
-
-    function showCorrection(btn) {
-        btn.parentElement.nextElementSibling.style.display = 'block';
-    }
-
-    function sendFeedback(btn, type) {
-        btn.parentElement.innerHTML = "<span style='color:green'>✓ Đã ghi nhận</span>";
-        // Call API if needed
-    }
-
-    async function submitCorrection(prompt, response, input) {
-        const feedback = input.value;
-        input.parentElement.innerHTML = "<span style='color:green; font-size:12px'>✓ Cảm ơn bạn!</span>";
-        
-        await fetch(`${API_URL}/feedback`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ prompt, response, feedback: "down", correction: feedback })
-        });
-    }
-
-    function scrollToBottom() {
-        const m = document.getElementById("messages");
-        m.scrollTop = m.scrollHeight;
+        document.getElementById("messages").scrollTop = document.getElementById("messages").scrollHeight;
     }
 
     function handleEnter(e) { if (e.key === "Enter") sendMessage(); }
@@ -286,7 +238,6 @@ async def upload_file(file: UploadFile = File(...)):
     if file_ext in ['jpg', 'png', 'jpeg', 'webp']: 
         analysis = vision.analyze_media(save_path)
     
-    # Save to User 1 (Default)
     memory.save_attachment(1, 1, file.filename, file_ext, analysis)
     return {"status": "success", "vision_analysis": analysis}
 
@@ -305,7 +256,6 @@ async def chat_endpoint(req: ChatRequest):
     decision = manager.analyze_task(req.message, history)
     cat = decision.get("category", "GENERAL")
     
-    # Vision Override
     if "ảnh" in req.message.lower() or "hình" in req.message.lower(): 
         cat = "GENERAL"