Update templates/index.html

templates/index.html

@@ -87,32 +87,58 @@
             }
         }
 
-        // Handle Add Memory
+        // Handle Add Memory (Streaming Version)
         document.getElementById('addForm').addEventListener('submit', async (e) => {
             e.preventDefault();
             const formData = new FormData(e.target);
             const status = document.getElementById('addStatus');
             const btn = e.target.querySelector('button');
             
+            // UI Reset
             btn.disabled = true;
-            btn.textContent = "Committing...";
+            status.classList.remove('hidden');
+            status.textContent = "Starting stream...";
+            status.className = "mt-4 text-sm text-center text-indigo-400 animate-pulse";
 
             try {
-                const res = await fetch('/add', { method: 'POST', body: formData });
-                const data = await res.json();
+                const response = await fetch('/add', { method: 'POST', body: formData });
                 
-                status.classList.remove('hidden');
-                if (data.success) {
-                    status.textContent = "✅ " + data.message;
-                    status.className = "mt-4 text-sm text-center text-green-400";
-                    e.target.reset();
-                    setTimeout(() => status.classList.add('hidden'), 4000);
-                } else {
-                    status.textContent = "❌ " + data.error;
-                    status.className = "mt-4 text-sm text-center text-red-400";
+                // Reader to handle the stream
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+
+                    // Decode chunk and split by newline (NDJSON)
+                    const chunk = decoder.decode(value, { stream: true });
+                    const lines = chunk.split('\n').filter(line => line.trim() !== '');
+
+                    for (const line of lines) {
+                        try {
+                            const data = JSON.parse(line);
+                            
+                            if (data.status === 'processing') {
+                                // Show progress
+                                status.textContent = "⏳ " + data.message;
+                            } else if (data.status === 'success') {
+                                // Success state
+                                status.textContent = "✅ " + data.message;
+                                status.className = "mt-4 text-sm text-center text-green-400";
+                                e.target.reset();
+                                setTimeout(() => status.classList.add('hidden'), 4000);
+                            } else if (data.status === 'error') {
+                                // Error state
+                                throw new Error(data.message);
+                            }
+                        } catch (err) {
+                            console.error("Stream parse error:", err);
+                        }
+                    }
                 }
             } catch (err) {
-                status.textContent = "❌ Connection Error";
+                status.textContent = "❌ " + err.message;
                 status.className = "mt-4 text-sm text-center text-red-400";
             } finally {
                 btn.disabled = false;