feat: migrate chat API to AI SDK with tool support and add active bar interaction to analytics charts

app/(dashboard)/chat/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useEffect, useState, useRef } from "react";
-import { Brain, Send, Paperclip, MoreHorizontal, Search, MessageSquare, Plus, FileText, CheckCircle2, Trash2 } from "lucide-react";
+import { Brain, Send, MessageSquare, Plus, Trash2, Loader2, Wrench } from "lucide-react";
 import { createClient } from "@/lib/supabase/client";
-import { v4 as uuidv4 } from "uuid";
+import { Button } from "poyraz-ui/atoms";
+import { useChat } from "ai/react";
 
 interface ChatSession {
   id: string;
@@ -11,23 +12,22 @@ interface ChatSession {
   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);
 
+  const { messages, input, setInput, handleInputChange, handleSubmit, append, setMessages, isLoading, stop } = useChat({
+    api: "/api/chat",
+    body: {
+      sessionId: activeSessionId
+    },
+    onError: (err) => {
+      console.error(err);
+    }
+  });
+
   // Auto-scroll to bottom
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -61,7 +61,10 @@ export default function AIChatPage() {
 
   // 2. Fetch Messages when session changes
   useEffect(() => {
-    if (!activeSessionId) return;
+    if (!activeSessionId) {
+      setMessages([]);
+      return;
+    }
 
     const fetchMessages = async () => {
       const { data } = await supabase
@@ -71,308 +74,256 @@ export default function AIChatPage() {
         .order("created_at", { ascending: true });
 
       if (data) {
-        setMessages(data as ChatMessage[]);
+        // Map Supabase messages to AI SDK format
+        const formattedMessages = data.map((msg: any) => ({
+          id: msg.id,
+          role: msg.role as 'user' | 'assistant' | 'system',
+          content: msg.content,
+        }));
+        setMessages(formattedMessages);
+      } else {
+        setMessages([]);
       }
     };
+    
     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]);
+  }, [activeSessionId, supabase, setMessages]);
 
   const handleNewChat = async () => {
-    const { data: { user } } = await supabase.auth.getUser();
-    if (!user) return;
+    setActiveSessionId(null);
+    setMessages([]);
+  };
 
-    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 handleDeleteSession = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    await supabase.from("chat_sessions").delete().eq("id", id);
+    const updatedSessions = sessions.filter(s => s.id !== id);
+    setSessions(updatedSessions);
+    if (activeSessionId === id) {
+      setActiveSessionId(updatedSessions.length > 0 ? updatedSessions[0].id : null);
+      if (updatedSessions.length === 0) setMessages([]);
     }
   };
 
-  const handleSend = async (e?: React.FormEvent) => {
-    if (e) e.preventDefault();
+  const customHandleSubmit = async (e: React.FormEvent) => {
+    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;
+    const currentInput = input;
+    setInput("");
 
     if (!sessionId) {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (!user) return;
+
       const { data: newSess } = await supabase
         .from("chat_sessions")
-        .insert({ user_id: user.id, title: userMessageContent.slice(0, 30) + "..." })
+        .insert({ user_id: user.id, title: currentInput.slice(0, 30) + "..." })
         .select()
         .single();
+      
       if (newSess) {
         sessionId = newSess.id;
         setActiveSessionId(sessionId);
         setSessions([newSess, ...sessions]);
-      } else return;
-    }
-
-    const resolvedSessionId = sessionId;
-    if (!resolvedSessionId) return;
-
-    setIsLoading(true);
-
-    // 1. Optimistic Update: Add User Message locally
-    const optimisticUserMsg: ChatMessage = {
-      id: uuidv4(),
-      session_id: resolvedSessionId,
-      role: "user",
-      content: userMessageContent,
-      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: resolvedSessionId,
-      role: "user",
-      content: userMessageContent
-    });
-
-    try {
-      // 3. Fetch AI preferences for API call
-      const { data: settings } = await supabase
-        .from("user_settings")
-        .select("*")
-        .eq("user_id", user.id)
-        .single();
-
-      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 }),
-      });
-
-      if (!res.ok) throw new Error("AI API Error");
-      const data = await res.json();
-
-      // 5. Optimistic Update: Add Assistant Message locally
-      const assistantMsg: ChatMessage = {
-        id: uuidv4(),
-        session_id: resolvedSessionId,
-        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: resolvedSessionId,
-        role: "assistant",
-        content: assistantMsg.content
-      });
-
-      // 7. Update session title if it was default
-      const currentSession = sessions.find(s => s.id === resolvedSessionId);
-      if (currentSession?.title === "Yeni Sohbet") {
-        const newTitle = userMessageContent.slice(0, 40);
-        await supabase.from("chat_sessions").update({ title: newTitle }).eq("id", resolvedSessionId);
-        setSessions(prev => prev.map(s => s.id === resolvedSessionId ? { ...s, title: newTitle } : s));
+      } else {
+        return;
       }
-
-    } catch (error) {
-      console.error(error);
-      const errorMsg: ChatMessage = {
-        id: uuidv4(),
-        session_id: resolvedSessionId,
-        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: resolvedSessionId,
-        role: "assistant",
-        content: errorMsg.content
-      });
-    } finally {
-      setIsLoading(false);
     }
-  };
 
-  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([]);
-    }
+    // Append using AI SDK with explicit body to ensure sessionId is passed immediately
+    append({ role: 'user', content: currentInput }, { body: { sessionId } });
   };
 
   return (
-    <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">
+    <div className="flex h-[calc(100vh-6rem)] w-full overflow-hidden border border-border rounded-lg bg-background">
       
-      {/* 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">
+      {/* Sidebar - Sessions List */}
+      <div className="w-80 border-r border-border bg-muted/20 flex flex-col hidden md:flex">
+        <div className="p-4 border-b border-border flex items-center justify-between">
+          <h2 className="font-semibold text-foreground flex items-center gap-2">
+            <MessageSquare className="h-4 w-4" />
+            Geçmiş Sohbetler
+          </h2>
+          <Button variant="outline" size="icon" className="h-8 w-8" onClick={handleNewChat}>
             <Plus className="h-4 w-4" />
-            NEW CHAT
-          </button>
+          </Button>
+        </div>
+        
+        <div className="flex-1 overflow-y-auto p-3 space-y-2">
+          {sessions.length === 0 ? (
+            <div className="text-center text-sm text-muted-foreground mt-10">Henüz sohbet yok.</div>
+          ) : (
+            sessions.map(session => (
+              <div 
+                key={session.id}
+                onClick={() => setActiveSessionId(session.id)}
+                className={`group flex items-center justify-between p-3 rounded-md cursor-pointer transition-colors ${activeSessionId === session.id ? 'bg-primary/10 text-primary' : 'hover:bg-muted/50 text-foreground'}`}
+              >
+                <div className="truncate text-sm font-medium w-full pr-2">
+                  {session.title || "İsimsiz Sohbet"}
+                </div>
+                <button 
+                  onClick={(e) => handleDeleteSession(session.id, e)}
+                  className={`opacity-0 group-hover:opacity-100 p-1 hover:bg-destructive/10 hover:text-destructive rounded transition-all`}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            ))
+          )}
         </div>
       </div>
 
-      {/* 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"
-              />
+      {/* Main Chat Area */}
+      <div className="flex-1 flex flex-col bg-background relative">
+        {/* Chat Header */}
+        <div className="h-14 border-b border-border flex items-center justify-between px-6 bg-background/50 backdrop-blur-sm z-10">
+          <div className="flex items-center gap-3">
+            <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+              <Brain className="h-4 w-4" />
+            </div>
+            <div>
+              <h2 className="text-sm font-semibold text-foreground">Ajan Asistan</h2>
+              <p className="text-[10px] text-muted-foreground flex items-center gap-1">
+                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
+                Sisteme görev ve veri ekleyebilir
+              </p>
             </div>
           </div>
-          
-          <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'}`}
-              >
-                <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>
+          <Button variant="ghost" size="icon" className="md:hidden" onClick={handleNewChat}>
+            <Plus className="h-4 w-4" />
+          </Button>
         </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>
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-6 scroll-smooth">
+          {messages.length === 0 ? (
+            <div className="h-full flex flex-col items-center justify-center text-center opacity-70 max-w-md mx-auto">
+              <div className="h-16 w-16 bg-primary/10 rounded-2xl flex items-center justify-center mb-6 text-primary">
+                <Brain className="h-8 w-8" />
               </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>
-            ))}
-            {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 ref={messagesEndRef} />
-          </div>
-
-          {/* 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>
+              <h3 className="text-xl font-bold text-foreground mb-2">Ajan Asistan'a Hoşgeldiniz</h3>
+              <p className="text-sm text-muted-foreground mb-4">Sadece sorularınızı cevaplamakla kalmaz, komutlarınızla projeler, görevler ve finans kayıtları da oluşturabilir.</p>
+              
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full mt-4">
+                <Button variant="outline" className="h-auto py-3 justify-start text-left text-xs whitespace-normal" onClick={() => setInput("Bana 'Sunum hazırlığı' adında yeni bir görev ekler misin?")}>
+                  Görev Ekle
+                </Button>
+                <Button variant="outline" className="h-auto py-3 justify-start text-left text-xs whitespace-normal" onClick={() => setInput("Bugün 350 TL Yemek harcaması yaptım, kaydeder misin?")}>
+                  Harcama Ekle
+                </Button>
+                <Button variant="outline" className="h-auto py-3 justify-start text-left text-xs whitespace-normal" onClick={() => setInput("Aktif projelerimin durumunu özetler misin?")}>
+                  Projelerimi Sorgula
+                </Button>
+                <Button variant="outline" className="h-auto py-3 justify-start text-left text-xs whitespace-normal" onClick={() => setInput("Son 30 günlük finansal özetimi ver.")}>
+                  Gelir/Gider Özeti
+                </Button>
               </div>
             </div>
-            <p className="text-center text-[10px] text-muted-foreground mt-3">AI can make mistakes. Verify important decisions.</p>
+          ) : (
+            messages.map((msg) => (
+              <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                <div className={`flex gap-3 max-w-[85%] ${msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`}>
+                  <div className={`shrink-0 h-8 w-8 rounded-full flex items-center justify-center ${msg.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted border border-border text-foreground'}`}>
+                    {msg.role === 'user' ? <span className="text-xs font-bold">ME</span> : <Brain className="h-4 w-4" />}
+                  </div>
+                  
+                  <div className="flex flex-col gap-2">
+                    {msg.content && (
+                      <div className={`px-4 py-3 rounded-2xl text-sm ${msg.role === 'user' ? 'bg-primary text-primary-foreground rounded-tr-none' : 'bg-muted/50 border border-border text-foreground rounded-tl-none whitespace-pre-wrap'}`}>
+                        {msg.content}
+                      </div>
+                    )}
+
+                    {/* Render Tool Invocations for AI Messages */}
+                    {msg.toolInvocations && msg.toolInvocations.map((tool) => (
+                      <div key={tool.toolCallId} className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/30 border border-border px-3 py-1.5 rounded-md self-start">
+                        {tool.state === 'result' ? (
+                          <>
+                            <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
+                            <span><span className="font-medium text-foreground">{tool.toolName}</span> aracı başarıyla çalıştırıldı.</span>
+                          </>
+                        ) : (
+                          <>
+                            <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" />
+                            <span><span className="font-medium text-foreground">{tool.toolName}</span> aracı çalıştırılıyor...</span>
+                          </>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+          
+          {isLoading && messages[messages.length - 1]?.role === 'user' && (
+             <div className="flex justify-start">
+             <div className="flex gap-3 max-w-[85%] flex-row">
+               <div className="shrink-0 h-8 w-8 rounded-full bg-muted border border-border text-foreground flex items-center justify-center">
+                 <Brain className="h-4 w-4" />
+               </div>
+               <div className="px-4 py-3 rounded-2xl text-sm bg-muted/50 border border-border text-foreground rounded-tl-none flex items-center gap-2">
+                 <span className="h-2 w-2 bg-primary/50 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></span>
+                 <span className="h-2 w-2 bg-primary/50 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></span>
+                 <span className="h-2 w-2 bg-primary/50 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></span>
+               </div>
+             </div>
+           </div>
+          )}
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Input Area */}
+        <div className="p-4 border-t border-border bg-background">
+          <form onSubmit={customHandleSubmit} className="relative flex items-end gap-2 max-w-4xl mx-auto">
+            <div className="relative flex-1 bg-muted/30 border border-border rounded-xl flex items-center focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary transition-all">
+              <textarea
+                value={input}
+                onChange={handleInputChange}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    customHandleSubmit(e);
+                  }
+                }}
+                placeholder="Verilerinize dayalı bir soru sorun veya görev/finans kaydı eklemesini isteyin..."
+                className="w-full bg-transparent border-none focus:outline-none focus:ring-0 resize-none py-4 pl-4 pr-12 text-sm text-foreground placeholder:text-muted-foreground min-h-[56px] max-h-[200px]"
+                rows={1}
+                disabled={isLoading}
+              />
+              <div className="absolute right-2 bottom-2 flex gap-1">
+                {isLoading ? (
+                  <Button 
+                    type="button" 
+                    variant="outline"
+                    size="icon" 
+                    className="h-10 w-10 rounded-lg bg-background text-foreground"
+                    onClick={() => stop()}
+                  >
+                    <div className="w-3 h-3 bg-current" />
+                  </Button>
+                ) : (
+                  <Button 
+                    type="submit" 
+                    size="icon" 
+                    className={`h-10 w-10 rounded-lg ${input.trim() ? 'bg-primary text-primary-foreground hover:bg-primary/90' : 'bg-muted text-muted-foreground'}`}
+                    disabled={!input.trim()}
+                  >
+                    <Send className="h-4 w-4 ml-0.5" />
+                  </Button>
+                )}
+              </div>
+            </div>
+          </form>
+          <div className="text-center mt-3 flex items-center justify-center gap-4 text-[10px] text-muted-foreground">
+            <span>Yapay Zeka Hatalar Yapabilir.</span>
+            <div className="flex items-center gap-1">
+              <Wrench className="h-3 w-3" />
+              <span>Veri okuma/yazma yetkisi aktiftir.</span>
+            </div>
           </div>
         </div>
       </div>