From 881888ef1085689648ca8afaca863712c40e7119 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Mon, 11 May 2026 01:44:08 +0530
Subject: [PATCH] Fix AI chat: handle undefined sessions

- Add error state to display API errors
- Safe guard sessions.map with (sessions || [])
- Show error message on API failure

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

diff --git a/src/app/ai/page.tsx b/src/app/ai/page.tsx
index c7d2cb6..3148830 100644
--- a/src/app/ai/page.tsx
+++ b/src/app/ai/page.tsx
@@ -25,6 +25,7 @@ export default function AIChatPage() {
   const [input, setInput] = useState("");
   const [loading, setLoading] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [error, setError] = useState<string>("");
 
   useEffect(() => {
     if (childId) {
@@ -37,7 +38,13 @@ export default function AIChatPage() {
     try {
       const res = await fetch(`/api/chat?childId=${childId}`);
       const data = await res.json();
+      if (data.error) {
+        setError(data.error);
+        console.error("API error:", data.error);
+        return;
+      }
       setSessions(data.sessions || []);
+      setError("");
     } catch (err) {
       console.error("Failed to fetch:", err);
     }
@@ -113,6 +120,11 @@ export default function AIChatPage() {
 
   return (
     <div className="flex h-screen bg-gradient-to-br from-rose-50 to-amber-50">
+      {error && (
+        <div className="p-4 bg-red-100 text-red-700">
+          Error: {error}
+        </div>
+      )}
       {/* Sidebar */}
       <div className={`${sidebarOpen ? "w-64" : "w-0"} overflow-hidden transition-all`}>
         <div className="w-64 p-4 border-r bg-white h-full overflow-y-auto">
@@ -121,7 +133,7 @@ export default function AIChatPage() {
             <button onClick={createNewSession} className="text-rose-400">+</button>
           </div>
           <div className="space-y-2">
-            {sessions.map(session => (
+            {(sessions || []).map(session => (
               <div
                 key={session.id}
                 onClick={() => setCurrentSessionId(session.id)}