From 8d74656ecc0e1c7e47fc3ecd65c287bdf2d2d73a Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Mon, 11 May 2026 01:57:03 +0530
Subject: [PATCH] Fix AI chat UX

- Show user message immediately while waiting for AI
- Add delete button for each conversation

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/app/ai/page.tsx | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/app/ai/page.tsx b/src/app/ai/page.tsx
index f2956a3..12cb19c 100644
--- a/src/app/ai/page.tsx
+++ b/src/app/ai/page.tsx
@@ -77,6 +77,17 @@ export default function AIChatPage() {
     const userContent = input.trim();
     setInput("");
 
+    // Show user message immediately in UI
+    const tempUserMsg = { id: "temp-" + Date.now(), role: "user" as const, content: userContent, createdAt: new Date().toISOString() };
+    if (currentSessionId) {
+      const sessionIdx = sessions.findIndex(s => s.id === currentSessionId);
+      if (sessionIdx >= 0) {
+        const updatedSessions = [...sessions];
+        updatedSessions[sessionIdx] = { ...updatedSessions[sessionIdx], messages: [...(updatedSessions[sessionIdx].messages || []), tempUserMsg] };
+        setSessions(updatedSessions);
+      }
+    }
+
     // Auto-create session if none selected
     let sessionId = currentSessionId;
     if (!sessionId && childId) {
@@ -89,7 +100,7 @@ export default function AIChatPage() {
         const data = await res.json();
         if (data.session) {
           sessionId = data.session.id;
-          const newSession = { ...data.session, messages: [] };
+          const newSession = { ...data.session, messages: [tempUserMsg] };
           setSessions([newSession, ...sessions]);
           setCurrentSessionId(sessionId);
         }
@@ -166,10 +177,18 @@ export default function AIChatPage() {
               <div
                 key={session.id}
                 onClick={() => setCurrentSessionId(session.id)}
-                className={`p-2 rounded-lg cursor-pointer ${session.id === currentSessionId ? "bg-rose-100" : ""}`}
+                className={`p-2 rounded-lg cursor-pointer flex justify-between items-center ${session.id === currentSessionId ? "bg-rose-100" : ""}`}
               >
-                <div className="text-sm font-medium truncate">{session.title}</div>
-                <div className="text-xs text-gray-400">{new Date(session.updatedAt).toLocaleDateString()}</div>
+                <div className="flex-1">
+                  <div className="text-sm font-medium truncate">{session.title}</div>
+                  <div className="text-xs text-gray-400">{new Date(session.updatedAt).toLocaleDateString()}</div>
+                </div>
+                <button
+                  onClick={(e) => { e.stopPropagation(); deleteSession(session.id); }}
+                  className="text-red-400 p-1"
+                >
+                  🗑️
+                </button>
               </div>
             ))}
           </div>