feat: implement AI chat interface with Supabase persistence and edge API route integration

app/(dashboard)/chat/page.tsx

@@ -1,176 +1,378 @@
 "use client";
 
-import { useState } from "react";
-import { useLiveQuery } from "dexie-react-hooks";
-import { db } from "@/lib/db";
+import { useEffect, useState, useRef } from "react";
+import { Brain, Send, Paperclip, MoreHorizontal, Search, MessageSquare, Plus, FileText, CheckCircle2, Trash2 } from "lucide-react";
+import { createClient } from "@/lib/supabase/client";
 import { v4 as uuidv4 } from "uuid";
-import { Send, Bot, User, Trash2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 
-export default function ChatPage() {
+interface ChatSession {
+  id: string;
+  title: string;
+  created_at: string;
+}
+
+interface ChatMessage {
+  id: string;
+  session_id: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  created_at: string;
+}
+
+export default function AIChatPage() {
+  const [supabase] = useState(() => createClient());
+  const [sessions, setSessions] = useState<ChatSession[]>([]);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [input, setInput] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
 
-  // Mesajları eski tarihten yeniye göre sıralayarak al (Sohbet akışı)
-  const messages = useLiveQuery(
-    () => db.chat_messages.orderBy("created_at").toArray(),
-    [],
-  );
+  // Auto-scroll to bottom
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
 
-  // Ollama'ya veya harici API'ye mesaj gönder
-  const handleSend = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!input.trim()) return;
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  // 1. Fetch Sessions on mount
+  useEffect(() => {
+    const fetchSessions = async () => {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (!user) return;
+
+      const { data } = await supabase
+        .from("chat_sessions")
+        .select("*")
+        .eq("user_id", user.id)
+        .order("updated_at", { ascending: false });
+
+      if (data) {
+        setSessions(data);
+        if (data.length > 0) {
+          setActiveSessionId(data[0].id);
+        }
+      }
+    };
+    fetchSessions();
+  }, [supabase]);
+
+  // 2. Fetch Messages when session changes
+  useEffect(() => {
+    if (!activeSessionId) return;
+
+    const fetchMessages = async () => {
+      const { data } = await supabase
+        .from("chat_messages")
+        .select("*")
+        .eq("session_id", activeSessionId)
+        .order("created_at", { ascending: true });
+
+      if (data) {
+        setMessages(data as ChatMessage[]);
+      }
+    };
+    fetchMessages();
+
+    // Subscribe to real-time changes
+    const channel = supabase
+      .channel(`chat:${activeSessionId}`)
+      .on('postgres_changes', { 
+        event: 'INSERT', 
+        schema: 'public', 
+        table: 'chat_messages',
+        filter: `session_id=eq.${activeSessionId}`
+      }, (payload) => {
+        setMessages(prev => {
+          if (prev.find(m => m.id === payload.new.id)) return prev;
+          return [...prev, payload.new as ChatMessage];
+        });
+      })
+      .subscribe();
+
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, [activeSessionId, supabase]);
+
+  const handleNewChat = async () => {
+    const { data: { user } } = await supabase.auth.getUser();
+    if (!user) return;
+
+    const newSession = {
+      user_id: user.id,
+      title: "Yeni Sohbet",
+      updated_at: new Date().toISOString()
+    };
+
+    const { data, error } = await supabase
+      .from("chat_sessions")
+      .insert(newSession)
+      .select()
+      .single();
+
+    if (data) {
+      setSessions([data, ...sessions]);
+      setActiveSessionId(data.id);
+      setMessages([]);
+    }
+  };
+
+  const handleSend = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+    if (!input.trim() || isLoading) return;
 
     const userMessageContent = input.trim();
     setInput("");
+    
+    // Ensure we have a session
+    let sessionId = activeSessionId;
+    const { data: { user } } = await supabase.auth.getUser();
+    if (!user) return;
+
+    if (!sessionId) {
+      const { data: newSess } = await supabase
+        .from("chat_sessions")
+        .insert({ user_id: user.id, title: userMessageContent.slice(0, 30) + "..." })
+        .select()
+        .single();
+      if (newSess) {
+        sessionId = newSess.id;
+        setActiveSessionId(sessionId);
+        setSessions([newSess, ...sessions]);
+      } else return;
+    }
+
     setIsLoading(true);
 
-    const userMessage = {
+    // 1. Optimistic Update: Add User Message locally
+    const optimisticUserMsg: ChatMessage = {
       id: uuidv4(),
-      role: "user" as const,
+      session_id: sessionId,
+      role: "user",
       content: userMessageContent,
-      created_at: new Date().toISOString(),
+      created_at: new Date().toISOString()
     };
+    setMessages(prev => [...prev, optimisticUserMsg]);
+
+    // 2. Save User Message to Supabase
+    await supabase.from("chat_messages").insert({
+      id: optimisticUserMsg.id,
+      session_id: sessionId,
+      role: "user",
+      content: userMessageContent
+    });
 
     try {
-      await db.chat_messages.add(userMessage);
+      // 3. Fetch AI preferences for API call
+      const { data: settings } = await supabase
+        .from("user_settings")
+        .select("*")
+        .eq("user_id", user.id)
+        .single();
 
-      // LocalStorage'dan veya Environment ayarlarını okuyup backend API'ye gönderiyoruz
-      const provider = localStorage.getItem("mindspace_ai_provider") || "groq";
-      const apiKey =
-        localStorage.getItem("mindspace_api_key") ||
-        process.env.NEXT_PUBLIC_GROQ_API_KEY ||
-        "";
+      const provider = settings?.ai_model || localStorage.getItem("mindspace_ai_provider") || "gemini";
+      const apiKey = settings?.api_key || localStorage.getItem("mindspace_api_key") || "";
 
+      // 4. Call AI API
       const res = await fetch("/api/chat", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          provider,
-          apiKey,
-          userMessageContent,
-        }),
+        body: JSON.stringify({ provider, apiKey, userMessageContent }),
       });
 
-      if (!res.ok) {
-        const errData = await res.json();
-        throw new Error(errData.error || "Sunucu hatası oluştu.");
-      }
-
+      if (!res.ok) throw new Error("AI API Error");
       const data = await res.json();
 
-      const assistantMessage = {
+      // 5. Optimistic Update: Add Assistant Message locally
+      const assistantMsg: ChatMessage = {
         id: uuidv4(),
-        role: "assistant" as const,
-        content:
-          data.reply ||
-          "Şu an cevap veremiyorum, lütfen ayarlarınızı kontrol edin.",
-        created_at: new Date().toISOString(),
+        session_id: sessionId,
+        role: "assistant",
+        content: data.reply || "Cevap üretilemedi.",
+        created_at: new Date().toISOString()
       };
+      setMessages(prev => [...prev, assistantMsg]);
+
+      // 6. Save Assistant Message to Supabase
+      await supabase.from("chat_messages").insert({
+        id: assistantMsg.id,
+        session_id: sessionId,
+        role: "assistant",
+        content: assistantMsg.content
+      });
+
+      // 7. Update session title if it was default
+      const currentSession = sessions.find(s => s.id === sessionId);
+      if (currentSession?.title === "Yeni Sohbet") {
+        const newTitle = userMessageContent.slice(0, 40);
+        await supabase.from("chat_sessions").update({ title: newTitle }).eq("id", sessionId);
+        setSessions(prev => prev.map(s => s.id === sessionId ? { ...s, title: newTitle } : s));
+      }
 
-      await db.chat_messages.add(assistantMessage);
     } catch (error) {
       console.error(error);
-      await db.chat_messages.add({
+      const errorMsg: ChatMessage = {
         id: uuidv4(),
-        role: "assistant" as const,
-        content:
-          "API Bağlantısı kurulamadı. Lütfen internetini veya Ayarlar sayfasından API anahtarını kontrol et.",
-        created_at: new Date().toISOString(),
+        session_id: sessionId,
+        role: "assistant",
+        content: "Hata oluştu. Lütfen Ayarlar sayfasından API anahtarınızı kontrol edin.",
+        created_at: new Date().toISOString()
+      };
+      setMessages(prev => [...prev, errorMsg]);
+      await supabase.from("chat_messages").insert({
+        id: errorMsg.id,
+        session_id: sessionId,
+        role: "assistant",
+        content: errorMsg.content
       });
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleClearChat = async () => {
-    await db.chat_messages.clear();
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const deleteSession = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    await supabase.from("chat_sessions").delete().eq("id", id);
+    setSessions(prev => prev.filter(s => s.id !== id));
+    if (activeSessionId === id) {
+      setActiveSessionId(null);
+      setMessages([]);
+    }
   };
 
   return (
-    <div className="flex flex-col h-[calc(100vh-4rem)] p-4 max-w-4xl mx-auto w-full">
-      <div className="flex items-center justify-between mb-4">
-        <div>
-          <h1 className="text-2xl font-bold text-foreground">
-            AI Terapist (Sohbet)
-          </h1>
-          <p className="text-sm text-muted-foreground">
-            Ollama veya bulut destekli akıllı asistanınızla konuşun.
-          </p>
+    <div className="mx-auto max-w-7xl animate-in fade-in slide-in-from-bottom-4 duration-500 h-[calc(100vh-80px)] flex flex-col text-foreground font-sans">
+      
+      {/* Top Header */}
+      <div className="flex items-center justify-between pb-4 border-b border-white/5 mt-4 shrink-0">
+        <h1 className="text-lg font-medium text-muted-foreground flex items-center gap-2">
+          <Brain className="h-5 w-5 text-primary" />
+          <span className="text-foreground">MindSpace</span> / AI Assistant
+        </h1>
+        <div className="flex items-center gap-3">
+          <button onClick={handleNewChat} className="bg-primary hover:bg-primary/90 text-primary-foreground border border-primary/20 px-4 py-1.5 rounded-sm text-xs font-semibold flex items-center gap-2 transition-colors shadow-lg shadow-primary/20">
+            <Plus className="h-4 w-4" />
+            NEW CHAT
+          </button>
         </div>
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={handleClearChat}
-          title="Sohbeti Temizle"
-        >
-          <Trash2 className="w-4 h-4 text-destructive" />
-        </Button>
       </div>
 
-      <div className="flex-1 overflow-y-auto p-4 space-y-4 rounded-xl border border-border bg-card shadow-sm mb-4">
-        {(!messages || messages.length === 0) && (
-          <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
-            <Bot className="w-12 h-12 mb-2 opacity-50" />
-            <p>Sohbet henüz başlamadı. İlk mesajınızı yollayın!</p>
+      {/* Main Chat Interface */}
+      <div className="flex-1 flex gap-6 mt-6 min-h-0">
+        
+        {/* Left Sidebar: Chat Sessions */}
+        <div className="hidden lg:flex w-72 flex-col gap-4 shrink-0 border border-white/5 bg-[#0A0710] rounded-sm overflow-hidden">
+          <div className="p-4 border-b border-white/5 bg-[#0F0B15]/50">
+            <div className="bg-[#150F1D] border border-white/5 rounded-sm px-3 py-2 flex items-center gap-2">
+              <Search className="h-4 w-4 text-muted-foreground" />
+              <input 
+                type="text" 
+                placeholder="Search history..." 
+                className="bg-transparent border-none outline-none text-xs w-full placeholder:text-muted-foreground/50 text-foreground"
+              />
+            </div>
           </div>
-        )}
-
-        {messages?.map((m) => (
-          <div
-            key={m.id}
-            className={`flex w-full ${m.role === "user" ? "justify-end" : "justify-start"}`}
-          >
-            <div
-              className={`flex gap-2 max-w-[80%] ${m.role === "user" ? "flex-row-reverse" : "flex-row"}`}
-            >
-              <div
-                className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0 ${m.role === "user" ? "bg-primary text-primary-foreground" : "bg-secondary text-secondary-foreground"}`}
+          
+          <div className="flex-1 overflow-y-auto tiny-scrollbar p-3 space-y-1">
+            <div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground px-2 py-1 mb-1">Recent Conversations</div>
+            {sessions.map((session) => (
+              <div 
+                key={session.id} 
+                onClick={() => setActiveSessionId(session.id)}
+                className={`group flex items-center gap-3 p-3 rounded-sm cursor-pointer transition-colors ${activeSessionId === session.id ? 'bg-[#1F172B] border border-primary/30 text-primary' : 'hover:bg-white/5 text-muted-foreground hover:text-foreground border border-transparent'}`}
               >
-                {m.role === "user" ? (
-                  <User className="w-4 h-4" />
-                ) : (
-                  <Bot className="w-4 h-4" />
+                <MessageSquare className="h-4 w-4 shrink-0" />
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium truncate">{session.title}</div>
+                  <div className="text-[10px] mt-0.5 opacity-60">{new Date(session.created_at).toLocaleDateString()}</div>
+                </div>
+                <button onClick={(e) => deleteSession(session.id, e)} className="opacity-0 group-hover:opacity-100 p-1 hover:bg-white/10 rounded-sm transition-opacity">
+                  <Trash2 className="h-3.5 w-3.5 text-red-400" />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Right Side: Active Chat Area */}
+        <div className="flex-1 flex flex-col rounded-sm border border-white/5 bg-[#0A0710] overflow-hidden relative">
+          
+          {/* Chat Messages Area */}
+          <div className="flex-1 overflow-y-auto tiny-scrollbar p-6 space-y-8">
+            {messages.length === 0 && !isLoading && (
+              <div className="flex flex-col items-center justify-center h-full text-muted-foreground opacity-60">
+                <Brain className="w-16 h-16 mb-4 text-primary opacity-50" />
+                <p className="text-sm font-medium">Hello! I am your MindSpace AI Assistant.</p>
+                <p className="text-xs mt-1">Start a conversation or select a session from history.</p>
+              </div>
+            )}
+
+            {messages.map((m) => (
+              <div key={m.id} className={`flex items-start gap-4 max-w-4xl ${m.role === "user" ? "ml-auto" : "mr-auto"}`}>
+                {m.role === "assistant" && (
+                  <div className="h-8 w-8 rounded-sm bg-primary/20 border border-primary/30 flex items-center justify-center shrink-0">
+                    <Brain className="h-5 w-5 text-primary" />
+                  </div>
+                )}
+                <div className={`flex-1 p-5 ${m.role === "user" ? "bg-[#150F1D] border border-white/10 rounded-sm rounded-tr-none" : "bg-[linear-gradient(135deg,rgba(108,91,176,0.05)_0%,rgba(10,7,16,0)_100%)] border border-primary/10 rounded-sm rounded-tl-none"}`}>
+                  <p className="text-sm leading-relaxed whitespace-pre-wrap">{m.content}</p>
+                </div>
+                {m.role === "user" && (
+                  <div className="h-8 w-8 rounded-sm bg-[#1F172B] border border-white/10 flex items-center justify-center font-bold text-foreground shrink-0 text-[10px]">ME</div>
                 )}
               </div>
-              <div
-                className={`p-3 rounded-xl ${m.role === "user" ? "bg-primary text-primary-foreground rounded-tr-none" : "bg-muted text-foreground rounded-tl-none border border-border"}`}
-              >
-                {m.content}
+            ))}
+            {isLoading && (
+              <div className="flex items-center gap-2 text-primary text-xs ml-12">
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                </span>
+                MindSpace AI is thinking...
               </div>
-            </div>
+            )}
+            <div ref={messagesEndRef} />
           </div>
-        ))}
-        {isLoading && (
-          <div className="flex w-full justify-start">
-            <div className="flex gap-2 max-w-[80%]">
-              <div className="w-8 h-8 rounded-full bg-secondary text-secondary-foreground flex items-center justify-center shrink-0">
-                <Bot className="w-4 h-4" />
-              </div>
-              <div className="p-3 rounded-xl bg-muted text-foreground rounded-tl-none border border-border flex items-center gap-2">
-                <div className="w-2 h-2 rounded-full bg-primary/50 animate-bounce" />
-                <div className="w-2 h-2 rounded-full bg-primary/50 animate-bounce delay-75" />
-                <div className="w-2 h-2 rounded-full bg-primary/50 animate-bounce delay-150" />
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
 
-      <form onSubmit={handleSend} className="flex gap-2 items-center">
-        <Input
-          disabled={isLoading}
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder="Bugün nasıl hissediyorsun? Ya da eski günlüklere dayanarak bir şeyler sor..."
-          className="flex-1"
-        />
-        <Button type="submit" size="icon" disabled={isLoading || !input.trim()}>
-          <Send className="w-4 h-4" />
-        </Button>
-      </form>
+          {/* Chat Input Box */}
+          <div className="p-4 border-t border-white/5 bg-[#0F0B15]/80 backdrop-blur-sm">
+            <div className="max-w-4xl mx-auto flex flex-col bg-[#150F1D] border border-white/10 rounded-sm focus-within:border-primary/50 transition-colors p-2 shadow-2xl">
+              <textarea 
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={handleKeyDown}
+                disabled={isLoading}
+                placeholder="Message your MindSpace AI... (Press Enter to send)"
+                className="w-full bg-transparent border-none outline-none text-sm text-foreground resize-none p-2 min-h-[60px] tiny-scrollbar disabled:opacity-50"
+              />
+              <div className="flex items-center justify-between mt-2 pt-2 border-t border-white/5">
+                <div className="flex gap-2">
+                  <button className="p-1.5 hover:bg-white/10 rounded-sm text-muted-foreground transition-colors" title="Attach Context"><Paperclip className="h-4 w-4" /></button>
+                  <button className="p-1.5 hover:bg-white/10 rounded-sm text-muted-foreground transition-colors" title="Settings"><MoreHorizontal className="h-4 w-4" /></button>
+                </div>
+                <button 
+                  onClick={handleSend}
+                  disabled={isLoading || !input.trim()}
+                  className="bg-primary hover:bg-primary/90 text-primary-foreground p-2 rounded-sm transition-colors shadow-lg shadow-primary/20 disabled:opacity-50"
+                >
+                  <Send className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+            <p className="text-center text-[10px] text-muted-foreground mt-3">AI can make mistakes. Verify important decisions.</p>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }