feat: persistent AI chat with multi-session history sidebar

backend/app/ai/chat.py

@@ -1,36 +1,180 @@
 import json
 import os
-from threading import Lock
 from sqlalchemy.orm import Session
-from app.database.models import User, Account, Transaction, Goal, Investment, Subscription
+from datetime import datetime, timezone
+
+from app.database.models import (
+    User, Account, Transaction, Goal, Investment, Subscription,
+    ChatMessage, ChatSession,
+)
 from app.ai.behavior import analyze_spending_behavior
 from app.ai.coaching import calculate_financial_health_score
 
-# Thread-safe chatbot memory storage
+CONTEXT_LIMIT = 12
+MESSAGES_PER_SESSION_LIMIT = 200
+SESSIONS_PER_USER_LIMIT = 50
+
+
+def _title_from_prompt(text: str) -> str:
+    cleaned = " ".join(text.strip().split())
+    if len(cleaned) <= 48:
+        return cleaned or "New chat"
+    return cleaned[:48] + "…"
+
+
 class ChatMemoryManager:
-    def __init__(self):
-        self._history = {}
-        self._lock = Lock()
-
-    def get_history(self, user_id: str):
-        with self._lock:
-            if user_id not in self._history:
-                self._history[user_id] = []
-            return self._history[user_id]
-
-    def add_message(self, user_id: str, role: str, content: str):
-        with self._lock:
-            if user_id not in self._history:
-                self._history[user_id] = []
-            self._history[user_id].append({"role": role, "content": content})
-            # Limit history to last 12 messages (6 rounds)
-            if len(self._history[user_id]) > 12:
-                self._history[user_id] = self._history[user_id][-12:]
-
-    def clear_history(self, user_id: str):
-        with self._lock:
-            if user_id in self._history:
-                self._history[user_id] = []
+    """Session-scoped chat persistence with multi-conversation support."""
+
+    def get_session(self, db: Session, user_id: str, session_id: str) -> ChatSession | None:
+        return (
+            db.query(ChatSession)
+            .filter(ChatSession.id == session_id, ChatSession.user_id == user_id)
+            .first()
+        )
+
+    def create_session(self, db: Session, user_id: str, title: str = "New chat") -> ChatSession:
+        session = ChatSession(user_id=user_id, title=title or "New chat")
+        db.add(session)
+        db.commit()
+        db.refresh(session)
+        self._trim_old_sessions(db, user_id)
+        return session
+
+    def list_sessions(self, db: Session, user_id: str, limit: int = 30) -> list[dict]:
+        limit = min(max(limit, 1), SESSIONS_PER_USER_LIMIT)
+        sessions = (
+            db.query(ChatSession)
+            .filter(ChatSession.user_id == user_id)
+            .order_by(ChatSession.updated_at.desc())
+            .limit(limit)
+            .all()
+        )
+        result = []
+        for s in sessions:
+            last = (
+                db.query(ChatMessage)
+                .filter(ChatMessage.session_id == s.id)
+                .order_by(ChatMessage.created_at.desc())
+                .first()
+            )
+            count = db.query(ChatMessage).filter(ChatMessage.session_id == s.id).count()
+            result.append({
+                "id": s.id,
+                "title": s.title,
+                "created_at": s.created_at.isoformat() if s.created_at else None,
+                "updated_at": s.updated_at.isoformat() if s.updated_at else None,
+                "message_count": count,
+                "preview": (last.content[:80] + "…") if last and len(last.content) > 80 else (last.content if last else ""),
+            })
+        return result
+
+    def delete_session(self, db: Session, user_id: str, session_id: str) -> bool:
+        session = self.get_session(db, user_id, session_id)
+        if not session:
+            return False
+        db.delete(session)
+        db.commit()
+        return True
+
+    def ensure_session(self, db: Session, user_id: str, session_id: str | None) -> ChatSession:
+        if session_id:
+            session = self.get_session(db, user_id, session_id)
+            if session:
+                return session
+        return self.create_session(db, user_id)
+
+    def get_history(self, db: Session, session_id: str) -> list[dict]:
+        rows = (
+            db.query(ChatMessage)
+            .filter(ChatMessage.session_id == session_id)
+            .order_by(ChatMessage.created_at.desc())
+            .limit(CONTEXT_LIMIT)
+            .all()
+        )
+        return [{"role": r.role, "content": r.content} for r in reversed(rows)]
+
+    def list_messages(self, db: Session, session_id: str, limit: int = 100) -> list[dict]:
+        limit = min(max(limit, 1), MESSAGES_PER_SESSION_LIMIT)
+        rows = (
+            db.query(ChatMessage)
+            .filter(ChatMessage.session_id == session_id)
+            .order_by(ChatMessage.created_at.asc())
+            .limit(limit)
+            .all()
+        )
+        return [
+            {
+                "id": r.id,
+                "role": r.role,
+                "content": r.content,
+                "created_at": r.created_at.isoformat() if r.created_at else None,
+            }
+            for r in rows
+        ]
+
+    def add_message(
+        self, db: Session, session: ChatSession, user_id: str, role: str, content: str
+    ) -> None:
+        if not content or not content.strip():
+            return
+        text = content.strip()
+        db.add(
+            ChatMessage(
+                user_id=user_id,
+                session_id=session.id,
+                role=role,
+                content=text,
+            )
+        )
+        session.updated_at = datetime.now(timezone.utc)
+        if role == "user" and session.title in ("New chat", "Previous conversation"):
+            session.title = _title_from_prompt(text)
+        db.commit()
+        self._trim_old_messages(db, session.id)
+
+    def clear_session_messages(self, db: Session, user_id: str, session_id: str) -> bool:
+        session = self.get_session(db, user_id, session_id)
+        if not session:
+            return False
+        db.query(ChatMessage).filter(ChatMessage.session_id == session_id).delete()
+        session.title = "New chat"
+        session.updated_at = datetime.now(timezone.utc)
+        db.commit()
+        return True
+
+    def _trim_old_messages(self, db: Session, session_id: str) -> None:
+        total = db.query(ChatMessage).filter(ChatMessage.session_id == session_id).count()
+        if total <= MESSAGES_PER_SESSION_LIMIT:
+            return
+        excess = total - MESSAGES_PER_SESSION_LIMIT
+        oldest = (
+            db.query(ChatMessage)
+            .filter(ChatMessage.session_id == session_id)
+            .order_by(ChatMessage.created_at.asc())
+            .limit(excess)
+            .all()
+        )
+        ids = [m.id for m in oldest]
+        if ids:
+            db.query(ChatMessage).filter(ChatMessage.id.in_(ids)).delete(synchronize_session=False)
+            db.commit()
+
+    def _trim_old_sessions(self, db: Session, user_id: str) -> None:
+        total = db.query(ChatSession).filter(ChatSession.user_id == user_id).count()
+        if total <= SESSIONS_PER_USER_LIMIT:
+            return
+        excess = total - SESSIONS_PER_USER_LIMIT
+        oldest = (
+            db.query(ChatSession)
+            .filter(ChatSession.user_id == user_id)
+            .order_by(ChatSession.updated_at.asc())
+            .limit(excess)
+            .all()
+        )
+        for s in oldest:
+            db.delete(s)
+        db.commit()
+
 
 chat_memory = ChatMemoryManager()
 
@@ -185,21 +329,25 @@ def get_offline_chat_fallback(db: Session, user_id: str, prompt: str) -> str:
             "Audit duplicate subscriptions and automate goal savings to enhance your trajectory."
         )
 
-def get_chat_response(db: Session, user_id: str, prompt: str) -> str:
+def get_chat_response(
+    db: Session, user_id: str, prompt: str, session_id: str | None = None
+) -> tuple[str, str]:
     """
-    Returns an HTTP conversational response grounded in database context.
+    Returns (assistant reply, session_id) grounded in database context.
     """
     from app.ai.ollama_integration import has_active_ai_backend
 
+    session = chat_memory.ensure_session(db, user_id, session_id)
+
     if not has_active_ai_backend():
         fallback_msg = get_offline_chat_fallback(db, user_id, prompt)
-        chat_memory.add_message(user_id, "user", prompt)
-        chat_memory.add_message(user_id, "assistant", fallback_msg)
-        return fallback_msg
+        chat_memory.add_message(db, session, user_id, "user", prompt)
+        chat_memory.add_message(db, session, user_id, "assistant", fallback_msg)
+        return fallback_msg, session.id
 
     # Build full message list: system prompt with real account data + history + new message
     sys_prompt = get_contextual_system_prompt(db, user_id)
-    history = chat_memory.get_history(user_id)
+    history = chat_memory.get_history(db, session.id)
 
     full_messages = [{"role": "system", "content": sys_prompt}]
     for msg in history:
@@ -250,20 +398,24 @@ def get_chat_response(db: Session, user_id: str, prompt: str) -> str:
     if not response_content:
         response_content = get_offline_chat_fallback(db, user_id, prompt)
 
-    chat_memory.add_message(user_id, "user", prompt)
-    chat_memory.add_message(user_id, "assistant", response_content)
-    return response_content
+    chat_memory.add_message(db, session, user_id, "user", prompt)
+    chat_memory.add_message(db, session, user_id, "assistant", response_content)
+    return response_content, session.id
 
-def stream_chat_response(db: Session, user_id: str, prompt: str):
+def stream_chat_response(
+    db: Session, user_id: str, prompt: str, session_id: str | None = None
+):
     """
     Generates streaming chunks for WebSocket or HTTP SSE.
     """
     from app.ai.ollama_integration import has_active_ai_backend
 
+    session = chat_memory.ensure_session(db, user_id, session_id)
+
     if not has_active_ai_backend():
         fallback_msg = get_offline_chat_fallback(db, user_id, prompt)
-        chat_memory.add_message(user_id, "user", prompt)
-        chat_memory.add_message(user_id, "assistant", fallback_msg)
+        chat_memory.add_message(db, session, user_id, "user", prompt)
+        chat_memory.add_message(db, session, user_id, "assistant", fallback_msg)
         import time
         for word in fallback_msg.split(" "):
             yield word + " "
@@ -271,14 +423,14 @@ def stream_chat_response(db: Session, user_id: str, prompt: str):
         return
 
     sys_prompt = get_contextual_system_prompt(db, user_id)
-    history = chat_memory.get_history(user_id)
+    history = chat_memory.get_history(db, session.id)
 
     full_messages = [{"role": "system", "content": sys_prompt}]
     for msg in history:
         full_messages.append({"role": msg["role"], "content": msg["content"]})
     full_messages.append({"role": "user", "content": prompt})
 
-    chat_memory.add_message(user_id, "user", prompt)
+    chat_memory.add_message(db, session, user_id, "user", prompt)
 
     OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY", "")
     GROQ_API_KEY = os.environ.get("GROQ_API_KEY", "") or os.environ.get("GROQ_KEY", "")
@@ -301,7 +453,7 @@ def stream_chat_response(db: Session, user_id: str, prompt: str):
                 if content:
                     complete_reply += content
                     yield content
-            chat_memory.add_message(user_id, "assistant", complete_reply)
+            chat_memory.add_message(db, session, user_id, "assistant", complete_reply)
             return
         except Exception as e:
             print(f"OpenAI streaming error: {e}")
@@ -322,7 +474,7 @@ def stream_chat_response(db: Session, user_id: str, prompt: str):
                 if content:
                     complete_reply += content
                     yield content
-            chat_memory.add_message(user_id, "assistant", complete_reply)
+            chat_memory.add_message(db, session, user_id, "assistant", complete_reply)
             return
         except Exception as e:
             print(f"Groq streaming error: {e}")
@@ -333,9 +485,9 @@ def stream_chat_response(db: Session, user_id: str, prompt: str):
             if chunk:
                 complete_reply += chunk
                 yield chunk
-        chat_memory.add_message(user_id, "assistant", complete_reply)
+        chat_memory.add_message(db, session, user_id, "assistant", complete_reply)
     except Exception as e:
         print(f"Ollama streaming error: {e}")
         fallback_msg = get_offline_chat_fallback(db, user_id, prompt)
         yield fallback_msg
-        chat_memory.add_message(user_id, "assistant", fallback_msg)
+        chat_memory.add_message(db, session, user_id, "assistant", fallback_msg)

backend/app/ai/router.py

@@ -14,7 +14,7 @@ from app.ai.behavior import analyze_spending_behavior
 from app.ai.coaching import calculate_financial_health_score, generate_daily_briefing
 from app.ai.subscriptions import analyze_subscriptions
 from app.ai.fraud import evaluate_transaction_for_fraud, get_user_fraud_alerts
-from app.ai.chat import get_chat_response
+from app.ai.chat import get_chat_response, chat_memory
 from app.ai.intelligence import generate_weekly_coaching, explain_fraud_alert, generate_spending_narrative
 
 router = APIRouter(prefix="/api/ai", tags=["AI Intelligence"])
@@ -44,6 +44,10 @@ class SubscriptionSimulationRequest(BaseModel):
 
 class ChatMessageRequest(BaseModel):
     message: str
+    session_id: Optional[str] = None
+
+class ChatSessionCreateRequest(BaseModel):
+    title: Optional[str] = "New chat"
 
 # ─── FINANCIAL TWIN FORECASTS ──────────────────────────────────────────────────
 
@@ -175,11 +179,78 @@ def post_fraud_evaluate(transaction_id: str, db: Session = Depends(get_db)):
 
 # ─── CONTEXTUAL CHAT ENDPOINT ──────────────────────────────────────────────────
 
+@router.get("/chat/sessions")
+def list_chat_sessions(
+    user_id: Optional[str] = None,
+    limit: int = Query(30, ge=1, le=50),
+    db: Session = Depends(get_db),
+):
+    uid = get_user_id_fallback(db, user_id)
+    sessions = chat_memory.list_sessions(db, uid, limit=limit)
+    return {"sessions": sessions, "count": len(sessions)}
+
+
+@router.post("/chat/sessions")
+def create_chat_session(
+    body: ChatSessionCreateRequest,
+    user_id: Optional[str] = None,
+    db: Session = Depends(get_db),
+):
+    uid = get_user_id_fallback(db, user_id)
+    session = chat_memory.create_session(db, uid, title=body.title or "New chat")
+    return {
+        "id": session.id,
+        "title": session.title,
+        "created_at": session.created_at.isoformat() if session.created_at else None,
+        "updated_at": session.updated_at.isoformat() if session.updated_at else None,
+        "message_count": 0,
+        "preview": "",
+    }
+
+
+@router.delete("/chat/sessions/{session_id}")
+def delete_chat_session(
+    session_id: str,
+    user_id: Optional[str] = None,
+    db: Session = Depends(get_db),
+):
+    uid = get_user_id_fallback(db, user_id)
+    if not chat_memory.delete_session(db, uid, session_id):
+        raise HTTPException(status_code=404, detail="Chat session not found")
+    return {"ok": True, "message": "Chat deleted"}
+
+
+@router.get("/chat/history")
+def get_chat_history(
+    session_id: str = Query(..., description="Chat session ID"),
+    user_id: Optional[str] = None,
+    limit: int = Query(100, ge=1, le=200),
+    db: Session = Depends(get_db),
+):
+    uid = get_user_id_fallback(db, user_id)
+    if not chat_memory.get_session(db, uid, session_id):
+        raise HTTPException(status_code=404, detail="Chat session not found")
+    messages = chat_memory.list_messages(db, session_id, limit=limit)
+    return {"session_id": session_id, "messages": messages, "count": len(messages)}
+
+
+@router.delete("/chat/history")
+def delete_chat_history(
+    session_id: str = Query(..., description="Chat session ID"),
+    user_id: Optional[str] = None,
+    db: Session = Depends(get_db),
+):
+    uid = get_user_id_fallback(db, user_id)
+    if not chat_memory.clear_session_messages(db, uid, session_id):
+        raise HTTPException(status_code=404, detail="Chat session not found")
+    return {"ok": True, "message": "Conversation cleared", "session_id": session_id}
+
+
 @router.post("/chat")
 def post_chat(req: ChatMessageRequest, user_id: Optional[str] = None, db: Session = Depends(get_db)):
     uid = get_user_id_fallback(db, user_id)
-    response_msg = get_chat_response(db, uid, req.message)
-    return {"response": response_msg}
+    response_msg, session_id = get_chat_response(db, uid, req.message, req.session_id)
+    return {"response": response_msg, "session_id": session_id}
 
 
 # ─── FINANCIAL COACH MODE ──────────────────────────────────────────────────────

backend/app/database/chat_migrate.py

@@ -0,0 +1,52 @@
+"""Lightweight schema updates for chat sessions (SQLite/HF compatible)."""
+from sqlalchemy import inspect, text
+
+from app.database.database import engine
+from app.database.models import ChatSession, ChatMessage
+
+
+def migrate_chat_schema() -> None:
+    insp = inspect(engine)
+    tables = insp.get_table_names()
+
+    if "chat_sessions" not in tables:
+        ChatSession.__table__.create(bind=engine, checkfirst=True)
+
+    if "chat_messages" not in tables:
+        ChatMessage.__table__.create(bind=engine, checkfirst=True)
+        return
+
+    cols = {c["name"] for c in insp.get_columns("chat_messages")}
+    if "session_id" not in cols:
+        with engine.begin() as conn:
+            conn.execute(text("ALTER TABLE chat_messages ADD COLUMN session_id VARCHAR"))
+
+    _attach_orphan_messages()
+
+
+def _attach_orphan_messages() -> None:
+    from sqlalchemy.orm import Session
+    from app.database.database import SessionLocal
+
+    db = SessionLocal()
+    try:
+        orphans = (
+            db.query(ChatMessage)
+            .filter(ChatMessage.session_id.is_(None))
+            .all()
+        )
+        if not orphans:
+            return
+        by_user: dict[str, list] = {}
+        for msg in orphans:
+            by_user.setdefault(msg.user_id, []).append(msg)
+        for user_id, msgs in by_user.items():
+            session = ChatSession(user_id=user_id, title="Previous conversation")
+            db.add(session)
+            db.flush()
+            for m in msgs:
+                m.session_id = session.id
+            session.updated_at = msgs[-1].created_at if msgs[-1].created_at else session.updated_at
+        db.commit()
+    finally:
+        db.close()

backend/app/database/models.py

@@ -27,6 +27,31 @@ class User(Base):
     notifications = relationship("Notification", back_populates="user")
     analytics_snapshots = relationship("AnalyticsSnapshot", back_populates="user")
     payments = relationship("Payment", back_populates="user")
+    chat_sessions = relationship("ChatSession", back_populates="user", cascade="all, delete-orphan")
+
+class ChatSession(Base):
+    __tablename__ = "chat_sessions"
+
+    id = Column(String, primary_key=True, index=True, default=generate_uuid)
+    user_id = Column(String, ForeignKey("users.id"), nullable=False, index=True)
+    title = Column(String, default="New chat", nullable=False)
+    created_at = Column(DateTime(timezone=True), server_default=func.now())
+    updated_at = Column(DateTime(timezone=True), server_default=func.now(), onupdate=func.now())
+
+    user = relationship("User", back_populates="chat_sessions")
+    messages = relationship("ChatMessage", back_populates="session", cascade="all, delete-orphan")
+
+class ChatMessage(Base):
+    __tablename__ = "chat_messages"
+
+    id = Column(String, primary_key=True, index=True, default=generate_uuid)
+    user_id = Column(String, ForeignKey("users.id"), nullable=False, index=True)
+    session_id = Column(String, ForeignKey("chat_sessions.id"), nullable=True, index=True)
+    role = Column(String, nullable=False)  # user | assistant
+    content = Column(Text, nullable=False)
+    created_at = Column(DateTime(timezone=True), server_default=func.now())
+
+    session = relationship("ChatSession", back_populates="messages")
 
 class Account(Base):
     __tablename__ = "accounts"

backend/app/main.py

@@ -109,6 +109,8 @@ async def rate_limit(request: Request, call_next):
 def startup():
     api_logger.info("BankBot API starting", extra={"version": "2.0.0"})
     Base.metadata.create_all(bind=engine)
+    from app.database.chat_migrate import migrate_chat_schema
+    migrate_chat_schema()
     api_logger.info("Database tables ready")
 
     # Log active backends

backend/app/websocket/router.py

@@ -114,7 +114,8 @@ async def websocket_chat_endpoint(
                 await websocket.send_json({"type": "chat_start"})
 
                 try:
-                    for chunk in stream_chat_response(db, user_id, prompt):
+                    ws_session_id = payload.get("session_id")
+                    for chunk in stream_chat_response(db, user_id, prompt, ws_session_id):
                         if chunk:
                             await websocket.send_json({"type": "chat_chunk", "content": chunk})
                 except Exception as e:

frontend/src/app/chat/page.tsx

@@ -5,11 +5,11 @@ import { motion, AnimatePresence } from "framer-motion";
 import {
   Send, Sparkles, TrendingUp, Shield, PieChart,
   Zap, Copy, ThumbsUp, ThumbsDown, RotateCcw, Mic, Paperclip,
+  Plus, MessageSquare, Trash2,
 } from "lucide-react";
 import { aiApi } from "@/lib/api";
 import { useAuthStore } from "@/lib/stores/authStore";
 
-// ─── Types ────────────────────────────────────────────────────────────────────
 interface Message {
   id: string;
   role: "user" | "assistant";
@@ -18,15 +18,34 @@ interface Message {
   timestamp: Date;
 }
 
-// ─── Suggested Prompts ────────────────────────────────────────────────────────
+interface ChatSessionItem {
+  id: string;
+  title: string;
+  created_at: string | null;
+  updated_at: string | null;
+  message_count: number;
+  preview: string;
+}
+
 const suggestions = [
-  { icon: TrendingUp, label: "What's my total balance?",     color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/20" },
-  { icon: PieChart,   label: "Analyze my spending this month", color: "text-blue-400",  bg: "bg-blue-500/10 border-blue-500/20" },
-  { icon: Shield,     label: "Explain my fraud alerts",       color: "text-purple-400", bg: "bg-purple-500/10 border-purple-500/20" },
-  { icon: Zap,        label: "Give me a savings nudge",       color: "text-amber-400",  bg: "bg-amber-500/10 border-amber-500/20" },
+  { icon: TrendingUp, label: "What's my total balance?", color: "text-emerald-400", bg: "bg-emerald-500/10 border-emerald-500/20" },
+  { icon: PieChart, label: "Analyze my spending this month", color: "text-blue-400", bg: "bg-blue-500/10 border-blue-500/20" },
+  { icon: Shield, label: "Explain my fraud alerts", color: "text-purple-400", bg: "bg-purple-500/10 border-purple-500/20" },
+  { icon: Zap, label: "Give me a savings nudge", color: "text-amber-400", bg: "bg-amber-500/10 border-amber-500/20" },
 ];
 
-// ─── AI Orb ───────────────────────────────────────────────────────────────────
+const WELCOME_MESSAGE: Message = {
+  id: "welcome",
+  role: "assistant",
+  content:
+    "Hello! I'm your AI financial assistant with full context of your accounts, spending patterns, and goals.\n\nWhat would you like to explore today?",
+  timestamp: new Date(),
+};
+
+function sessionStorageKey(userId?: string) {
+  return `bb_active_chat_session_${userId ?? "default"}`;
+}
+
 function AIOrb({ isThinking }: { isThinking: boolean }) {
   return (
     <div className="relative flex items-center justify-center">
@@ -49,10 +68,7 @@ function AIOrb({ isThinking }: { isThinking: boolean }) {
         transition={{ duration: isThinking ? 0.8 : 3, repeat: Infinity, ease: "easeInOut" }}
         className="relative h-16 w-16 rounded-full bg-gradient-to-br from-emerald-400 via-cyan-400 to-blue-500 flex items-center justify-center"
       >
-        <motion.div
-          animate={{ rotate: isThinking ? 360 : 0 }}
-          transition={{ duration: 2, repeat: isThinking ? Infinity : 0, ease: "linear" }}
-        >
+        <motion.div animate={{ rotate: isThinking ? 360 : 0 }} transition={{ duration: 2, repeat: isThinking ? Infinity : 0, ease: "linear" }}>
           <Sparkles className="h-7 w-7 text-white" />
         </motion.div>
       </motion.div>
@@ -60,7 +76,6 @@ function AIOrb({ isThinking }: { isThinking: boolean }) {
   );
 }
 
-// ─── Message Bubble ───────────────────────────────────────────────────────────
 function MessageBubble({
   message,
   onCopy,
@@ -90,18 +105,13 @@ function MessageBubble({
       transition={{ duration: 0.3, ease: "easeOut" }}
       className={`flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"}`}
     >
-      {/* Avatar */}
       <div
         className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-xl text-xs font-bold ${
-          isUser
-            ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white"
-            : "bg-gradient-to-br from-emerald-400 to-cyan-500"
+          isUser ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white" : "bg-gradient-to-br from-emerald-400 to-cyan-500"
         }`}
       >
         {isUser ? userInitial : <Sparkles className="h-4 w-4 text-white" />}
       </div>
-
-      {/* Bubble */}
       <div className={`max-w-[75%] flex flex-col gap-1 ${isUser ? "items-end" : "items-start"}`}>
         <div
           className={`rounded-2xl px-4 py-3 text-sm leading-relaxed ${
@@ -113,22 +123,15 @@ function MessageBubble({
           <div className="whitespace-pre-wrap">{renderContent(message.content)}</div>
           {message.streaming && <span className="streaming-cursor" />}
         </div>
-
-        {/* Action buttons (AI messages only) */}
         {!isUser && !message.streaming && (
           <div className="flex items-center gap-1 px-1">
             {[
-              { icon: Copy,      label: "Copy",  action: () => onCopy(message.content) },
-              { icon: ThumbsUp,  label: "Good",  action: () => {} },
-              { icon: ThumbsDown,label: "Bad",   action: () => {} },
+              { icon: Copy, label: "Copy", action: () => onCopy(message.content) },
+              { icon: ThumbsUp, label: "Good", action: () => {} },
+              { icon: ThumbsDown, label: "Bad", action: () => {} },
               { icon: RotateCcw, label: "Retry", action: () => {} },
             ].map(({ icon: Icon, label, action }) => (
-              <button
-                key={label}
-                title={label}
-                onClick={action}
-                className="p-1 rounded-lg text-zinc-600 hover:text-zinc-400 hover:bg-white/5 transition-all"
-              >
+              <button key={label} title={label} onClick={action} className="p-1 rounded-lg text-zinc-600 hover:text-zinc-400 hover:bg-white/5 transition-all">
                 <Icon className="h-3 w-3" />
               </button>
             ))}
@@ -139,77 +142,149 @@ function MessageBubble({
   );
 }
 
-// ─── Main Chat Page ───────────────────────────────────────────────────────────
 export default function ChatPage() {
   const { user } = useAuthStore();
   const userInitial = user?.name?.charAt(0).toUpperCase() ?? "U";
 
-  const [messages, setMessages] = useState<Message[]>([
-    {
-      id: "welcome",
-      role: "assistant",
-      content:
-        "Hello! I'm your AI financial assistant with full context of your accounts, spending patterns, and goals.\n\nWhat would you like to explore today?",
-      timestamp: new Date(),
-    },
-  ]);
+  const [sessions, setSessions] = useState<ChatSessionItem[]>([]);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [messages, setMessages] = useState<Message[]>([WELCOME_MESSAGE]);
   const [input, setInput] = useState("");
   const [isThinking, setIsThinking] = useState(false);
+  const [sessionsLoading, setSessionsLoading] = useState(true);
+  const [historyLoading, setHistoryLoading] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const abortRef = useRef<AbortController | null>(null);
 
-  // Auto-scroll on new messages
+  const refreshSessions = useCallback(async () => {
+    const res = await aiApi.chatSessions(user?.user_id);
+    setSessions(res.sessions);
+    return res.sessions;
+  }, [user?.user_id]);
+
+  const loadSessionMessages = useCallback(async (sessionId: string) => {
+    setHistoryLoading(true);
+    try {
+      const res = await aiApi.chatHistory(sessionId, user?.user_id);
+      if (res.messages.length > 0) {
+        setMessages(
+          res.messages.map((m) => ({
+            id: m.id,
+            role: m.role,
+            content: m.content,
+            timestamp: m.created_at ? new Date(m.created_at) : new Date(),
+          }))
+        );
+      } else {
+        setMessages([WELCOME_MESSAGE]);
+      }
+    } catch {
+      setMessages([WELCOME_MESSAGE]);
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, [user?.user_id]);
+
+  const selectSession = useCallback(
+    async (sessionId: string) => {
+      setActiveSessionId(sessionId);
+      if (typeof window !== "undefined") {
+        localStorage.setItem(sessionStorageKey(user?.user_id), sessionId);
+      }
+      await loadSessionMessages(sessionId);
+    },
+    [loadSessionMessages, user?.user_id]
+  );
+
+  const startNewChat = useCallback(async () => {
+    const created = await aiApi.createChatSession(user?.user_id);
+    setSessions((prev) => [created, ...prev.filter((s) => s.id !== created.id)]);
+    setActiveSessionId(created.id);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(sessionStorageKey(user?.user_id), created.id);
+    }
+    setMessages([WELCOME_MESSAGE]);
+  }, [user?.user_id]);
+
+  // Bootstrap sessions on mount
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      setSessionsLoading(true);
+      try {
+        let list = await refreshSessions();
+        if (cancelled) return;
+
+        const savedId = typeof window !== "undefined"
+          ? localStorage.getItem(sessionStorageKey(user?.user_id))
+          : null;
+
+        if (savedId && list.some((s) => s.id === savedId)) {
+          await selectSession(savedId);
+        } else if (list.length > 0) {
+          await selectSession(list[0].id);
+        } else {
+          await startNewChat();
+        }
+      } catch {
+        if (!cancelled) {
+          setMessages([WELCOME_MESSAGE]);
+          try {
+            await startNewChat();
+          } catch {
+            /* offline */
+          }
+        }
+      } finally {
+        if (!cancelled) setSessionsLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [user?.user_id]); // eslint-disable-line react-hooks/exhaustive-deps
+
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
 
-  // ── Simulated word-by-word streaming from HTTP response ───────────────────
   const streamWords = useCallback((msgId: string, fullText: string) => {
     const words = fullText.split(" ");
     let i = 0;
-
-    // Mark as streaming
-    setMessages((prev) =>
-      prev.map((m) => (m.id === msgId ? { ...m, streaming: true } : m))
-    );
-
+    setMessages((prev) => prev.map((m) => (m.id === msgId ? { ...m, streaming: true } : m)));
     const interval = setInterval(() => {
       if (i >= words.length) {
         clearInterval(interval);
-        setMessages((prev) =>
-          prev.map((m) => (m.id === msgId ? { ...m, streaming: false } : m))
-        );
+        setMessages((prev) => prev.map((m) => (m.id === msgId ? { ...m, streaming: false } : m)));
         return;
       }
       const chunk = words.slice(0, i + 1).join(" ");
-      setMessages((prev) =>
-        prev.map((m) => (m.id === msgId ? { ...m, content: chunk } : m))
-      );
+      setMessages((prev) => prev.map((m) => (m.id === msgId ? { ...m, content: chunk } : m)));
       i++;
-    }, 28); // ~35 words/sec — feels natural
+    }, 28);
   }, []);
 
-  // ── Send message ──────────────────────────────────────────────────────────
   const sendMessage = useCallback(
     async (text?: string) => {
       const content = (text ?? input).trim();
       if (!content || isThinking) return;
 
-      // Cancel any in-flight request
-      abortRef.current?.abort();
-      abortRef.current = new AbortController();
+      let sessionId = activeSessionId;
+      if (!sessionId) {
+        const created = await aiApi.createChatSession(user?.user_id);
+        sessionId = created.id;
+        setActiveSessionId(created.id);
+        setSessions((prev) => [created, ...prev]);
+      }
 
       setInput("");
       setIsThinking(true);
 
-      // Add user message
       setMessages((prev) => [
-        ...prev,
+        ...prev.filter((m) => m.id !== "welcome"),
         { id: `user-${Date.now()}`, role: "user", content, timestamp: new Date() },
       ]);
 
-      // Placeholder AI message
       const aiId = `ai-${Date.now()}`;
       setMessages((prev) => [
         ...prev,
@@ -217,9 +292,16 @@ export default function ChatPage() {
       ]);
 
       try {
-        const res = await aiApi.chat(content, user?.user_id);
+        const res = await aiApi.chat(content, user?.user_id, sessionId ?? undefined);
+        if (res.session_id && res.session_id !== activeSessionId) {
+          setActiveSessionId(res.session_id);
+          if (typeof window !== "undefined") {
+            localStorage.setItem(sessionStorageKey(user?.user_id), res.session_id);
+          }
+        }
         setIsThinking(false);
         streamWords(aiId, res.response);
+        await refreshSessions();
       } catch (err) {
         setIsThinking(false);
         const errMsg =
@@ -227,182 +309,265 @@ export default function ChatPage() {
             ? "Session expired. Please refresh and log in again."
             : "⚠️ Could not reach the AI backend. Please try again.";
         setMessages((prev) =>
-          prev.map((m) =>
-            m.id === aiId
-              ? { ...m, content: errMsg, streaming: false }
-              : m
-          )
+          prev.map((m) => (m.id === aiId ? { ...m, content: errMsg, streaming: false } : m))
         );
       }
     },
-    [input, isThinking, user?.user_id, streamWords]
+    [input, isThinking, activeSessionId, user?.user_id, streamWords, refreshSessions]
   );
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      sendMessage();
+  const deleteSession = async (sessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!confirm("Delete this conversation?")) return;
+    try {
+      await aiApi.deleteChatSession(sessionId, user?.user_id);
+      const remaining = sessions.filter((s) => s.id !== sessionId);
+      setSessions(remaining);
+      if (activeSessionId === sessionId) {
+        if (remaining.length > 0) await selectSession(remaining[0].id);
+        else await startNewChat();
+      }
+    } catch {
+      /* ignore */
     }
   };
 
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text).catch(() => {});
+  const clearCurrentChat = async () => {
+    if (!activeSessionId || isThinking || isStreaming) return;
+    try {
+      await aiApi.clearChatHistory(activeSessionId, user?.user_id);
+      setMessages([WELCOME_MESSAGE]);
+      await refreshSessions();
+    } catch {
+      setMessages([WELCOME_MESSAGE]);
+    }
   };
 
   const isStreaming = messages.some((m) => m.streaming);
+  const showWelcome = !historyLoading && messages.length === 1 && messages[0].id === "welcome";
 
   return (
-    <div className="flex h-[calc(100vh-4rem)] flex-col -m-8">
-      {/* ── Header ─────────────────────────────────────────────────────────── */}
-      <div className="flex items-center justify-between border-b border-white/10 bg-black/20 backdrop-blur-xl px-8 py-4 flex-shrink-0">
-        <div className="flex items-center gap-3">
-          {/* Live indicator */}
-          <div className="flex items-center gap-2">
-            <div className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />
-            <span className="text-xs text-emerald-400">Live AI</span>
-          </div>
-          <div className="h-4 w-px bg-white/10" />
-          <div>
-            <h1 className="text-base font-semibold text-white">BankBot AI Assistant</h1>
-            <p className="text-xs text-zinc-500">Context-aware · Groq-powered · Personalized</p>
-          </div>
+    <div className="flex h-[calc(100vh-4rem)] -m-8">
+      {/* ── Chat history sidebar ─────────────────────────────────────────── */}
+      <aside className="hidden md:flex w-64 lg:w-72 flex-shrink-0 flex-col border-r border-white/10 bg-black/30 backdrop-blur-xl">
+        <div className="p-4 border-b border-white/10">
+          <button
+            type="button"
+            onClick={startNewChat}
+            disabled={sessionsLoading || isThinking || isStreaming}
+            className="flex w-full items-center justify-center gap-2 rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-3 py-2.5 text-sm font-medium text-emerald-400 hover:bg-emerald-500/20 transition-colors disabled:opacity-40"
+          >
+            <Plus className="h-4 w-4" />
+            New chat
+          </button>
         </div>
-        <div className="flex items-center gap-2 text-xs text-zinc-500">
-          <Shield className="h-3.5 w-3.5 text-emerald-400" />
-          <span>Encrypted</span>
+        <div className="flex-1 overflow-y-auto p-2 space-y-1">
+          <p className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">Chat history</p>
+          {sessionsLoading ? (
+            <p className="px-3 py-4 text-xs text-zinc-500">Loading chats...</p>
+          ) : sessions.length === 0 ? (
+            <p className="px-3 py-4 text-xs text-zinc-500">No conversations yet</p>
+          ) : (
+            sessions.map((s) => (
+              <div
+                key={s.id}
+                className={`group w-full flex items-start gap-1 rounded-xl transition-all ${
+                  activeSessionId === s.id
+                    ? "bg-white/10 border border-white/15"
+                    : "hover:bg-white/5 border border-transparent"
+                }`}
+              >
+                <button
+                  type="button"
+                  onClick={() => selectSession(s.id)}
+                  className="flex flex-1 items-start gap-2 px-3 py-2.5 text-left min-w-0"
+                >
+                  <MessageSquare className={`h-4 w-4 flex-shrink-0 mt-0.5 ${activeSessionId === s.id ? "text-emerald-400" : "text-zinc-500"}`} />
+                  <div className="flex-1 min-w-0">
+                    <p className={`text-sm font-medium truncate ${activeSessionId === s.id ? "text-white" : "text-zinc-300"}`}>
+                      {s.title}
+                    </p>
+                    {s.preview && (
+                      <p className="text-[11px] text-zinc-500 truncate mt-0.5">{s.preview}</p>
+                    )}
+                  </div>
+                </button>
+                <button
+                  type="button"
+                  onClick={(e) => deleteSession(s.id, e)}
+                  className="opacity-0 group-hover:opacity-100 mr-1 mt-2 p-1 rounded-lg text-zinc-500 hover:text-red-400 hover:bg-red-500/10 transition-all flex-shrink-0"
+                  title="Delete chat"
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            ))
+          )}
         </div>
-      </div>
+      </aside>
 
-      {/* ── Messages ───────────────────────────────────────────────────────── */}
-      <div className="flex-1 overflow-y-auto px-8 py-6 space-y-5">
-        {/* Welcome orb (only when just the welcome message exists) */}
-        {messages.length === 1 && (
-          <motion.div
-            initial={{ opacity: 0, scale: 0.8 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.6, ease: "easeOut" }}
-            className="flex flex-col items-center gap-6 py-8"
-          >
-            <AIOrb isThinking={false} />
-            <div className="text-center">
-              <p className="text-lg font-semibold text-white">Your AI Financial Twin</p>
-              <p className="text-sm text-zinc-400 mt-1">Ask me anything about your finances</p>
+      {/* ── Main chat area ─────────────────────────────────────────────────── */}
+      <div className="flex flex-1 flex-col min-w-0">
+        <div className="flex items-center justify-between border-b border-white/10 bg-black/20 backdrop-blur-xl px-4 sm:px-8 py-4 flex-shrink-0">
+          <div className="flex items-center gap-3 min-w-0">
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <div className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />
+              <span className="text-xs text-emerald-400">Live AI</span>
             </div>
-            <div className="grid grid-cols-2 gap-3 w-full max-w-md">
-              {suggestions.map((s) => {
-                const Icon = s.icon;
-                return (
-                  <motion.button
-                    key={s.label}
-                    whileHover={{ scale: 1.03 }}
-                    whileTap={{ scale: 0.97 }}
-                    onClick={() => sendMessage(s.label)}
-                    className={`flex items-center gap-2 rounded-xl border px-4 py-3 text-sm font-medium transition-all ${s.bg} ${s.color} hover:brightness-110`}
-                  >
-                    <Icon className="h-4 w-4" />
-                    {s.label}
-                  </motion.button>
-                );
-              })}
+            <div className="h-4 w-px bg-white/10 hidden sm:block" />
+            <div className="min-w-0">
+              <h1 className="text-base font-semibold text-white truncate">BankBot AI Assistant</h1>
+              <p className="text-xs text-zinc-500 truncate hidden sm:block">Context-aware · Groq-powered · Personalized</p>
             </div>
-          </motion.div>
-        )}
+          </div>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <button
+              type="button"
+              onClick={startNewChat}
+              className="md:hidden flex items-center gap-1 rounded-lg border border-white/10 bg-white/5 px-2 py-1.5 text-xs text-zinc-400"
+            >
+              <Plus className="h-3.5 w-3.5" />
+              New
+            </button>
+            <button
+              type="button"
+              onClick={clearCurrentChat}
+              disabled={historyLoading || isThinking || isStreaming || !activeSessionId}
+              title="Clear this conversation"
+              className="flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-2.5 py-1.5 text-xs text-zinc-400 hover:text-white transition-colors disabled:opacity-40"
+            >
+              <RotateCcw className="h-3.5 w-3.5" />
+              <span className="hidden sm:inline">Clear</span>
+            </button>
+            <Shield className="h-3.5 w-3.5 text-emerald-400 hidden sm:block" />
+          </div>
+        </div>
 
-        {messages.map((msg) => (
-          <MessageBubble
-            key={msg.id}
-            message={msg}
-            onCopy={copyToClipboard}
-            userInitial={userInitial}
-          />
-        ))}
-
-        {/* Thinking dots */}
-        <AnimatePresence>
-          {isThinking && (
+        <div className="flex-1 overflow-y-auto px-4 sm:px-8 py-6 space-y-5">
+          {(sessionsLoading || historyLoading) && (
+            <div className="flex justify-center py-12 text-sm text-zinc-500">Loading conversation...</div>
+          )}
+
+          {!sessionsLoading && !historyLoading && showWelcome && (
             <motion.div
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              className="flex gap-3"
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.6, ease: "easeOut" }}
+              className="flex flex-col items-center gap-6 py-8"
             >
-              <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-400 to-cyan-500">
-                <Sparkles className="h-4 w-4 text-white" />
+              <AIOrb isThinking={false} />
+              <div className="text-center">
+                <p className="text-lg font-semibold text-white">Your AI Financial Twin</p>
+                <p className="text-sm text-zinc-400 mt-1">Ask me anything about your finances</p>
               </div>
-              <div className="glass rounded-2xl rounded-tl-sm px-4 py-3 border border-white/10">
-                <div className="flex gap-1 items-center h-4">
-                  {[0, 1, 2].map((i) => (
-                    <motion.div
-                      key={i}
-                      animate={{ y: [0, -4, 0] }}
-                      transition={{ duration: 0.6, repeat: Infinity, delay: i * 0.15 }}
-                      className="h-1.5 w-1.5 rounded-full bg-emerald-400"
-                    />
-                  ))}
-                </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full max-w-md">
+                {suggestions.map((s) => {
+                  const Icon = s.icon;
+                  return (
+                    <motion.button
+                      key={s.label}
+                      whileHover={{ scale: 1.03 }}
+                      whileTap={{ scale: 0.97 }}
+                      onClick={() => sendMessage(s.label)}
+                      className={`flex items-center gap-2 rounded-xl border px-4 py-3 text-sm font-medium transition-all ${s.bg} ${s.color} hover:brightness-110`}
+                    >
+                      <Icon className="h-4 w-4" />
+                      {s.label}
+                    </motion.button>
+                  );
+                })}
               </div>
             </motion.div>
           )}
-        </AnimatePresence>
 
-        <div ref={messagesEndRef} />
-      </div>
+          {!sessionsLoading && !historyLoading && !showWelcome &&
+            messages.map((msg) => (
+              <MessageBubble key={msg.id} message={msg} onCopy={(t) => navigator.clipboard.writeText(t).catch(() => {})} userInitial={userInitial} />
+            ))}
 
-      {/* ── Quick suggestions (after first message) ────────────────────────── */}
-      {messages.length > 1 && (
-        <div className="flex gap-2 px-8 pb-2 overflow-x-auto flex-shrink-0">
-          {suggestions.map((s) => {
-            const Icon = s.icon;
-            return (
-              <button
-                key={s.label}
-                onClick={() => sendMessage(s.label)}
-                disabled={isStreaming || isThinking}
-                className={`flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-all disabled:opacity-40 ${s.bg} ${s.color} hover:brightness-110`}
-              >
-                <Icon className="h-3 w-3" />
-                {s.label}
-              </button>
-            );
-          })}
+          <AnimatePresence>
+            {isThinking && (
+              <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="flex gap-3">
+                <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-400 to-cyan-500">
+                  <Sparkles className="h-4 w-4 text-white" />
+                </div>
+                <div className="glass rounded-2xl rounded-tl-sm px-4 py-3 border border-white/10">
+                  <div className="flex gap-1 items-center h-4">
+                    {[0, 1, 2].map((i) => (
+                      <motion.div
+                        key={i}
+                        animate={{ y: [0, -4, 0] }}
+                        transition={{ duration: 0.6, repeat: Infinity, delay: i * 0.15 }}
+                        className="h-1.5 w-1.5 rounded-full bg-emerald-400"
+                      />
+                    ))}
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+          <div ref={messagesEndRef} />
         </div>
-      )}
 
-      {/* ── Input ──────────────────────────────────────────────────────────── */}
-      <div className="flex-shrink-0 border-t border-white/10 bg-black/20 backdrop-blur-xl px-8 py-4">
-        <div className="flex items-end gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 focus-within:border-emerald-500/40 transition-all">
-          <button className="text-zinc-500 hover:text-zinc-300 transition-colors mb-0.5">
-            <Paperclip className="h-4 w-4" />
-          </button>
-          <textarea
-            ref={inputRef}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Ask about your finances, forecasts, fraud alerts..."
-            rows={1}
-            disabled={isStreaming || isThinking}
-            className="flex-1 resize-none bg-transparent text-sm text-white placeholder:text-zinc-500 focus:outline-none leading-relaxed max-h-32 disabled:opacity-50"
-            style={{ minHeight: "24px" }}
-          />
-          <div className="flex items-center gap-2 mb-0.5">
-            <button className="text-zinc-500 hover:text-zinc-300 transition-colors">
-              <Mic className="h-4 w-4" />
+        {messages.length > 1 && (
+          <div className="flex gap-2 px-4 sm:px-8 pb-2 overflow-x-auto flex-shrink-0">
+            {suggestions.map((s) => {
+              const Icon = s.icon;
+              return (
+                <button
+                  key={s.label}
+                  onClick={() => sendMessage(s.label)}
+                  disabled={isStreaming || isThinking}
+                  className={`flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-all disabled:opacity-40 ${s.bg} ${s.color} hover:brightness-110`}
+                >
+                  <Icon className="h-3 w-3" />
+                  {s.label}
+                </button>
+              );
+            })}
+          </div>
+        )}
+
+        <div className="flex-shrink-0 border-t border-white/10 bg-black/20 backdrop-blur-xl px-4 sm:px-8 py-4">
+          <div className="flex items-end gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 focus-within:border-emerald-500/40 transition-all">
+            <button type="button" className="text-zinc-500 hover:text-zinc-300 transition-colors mb-0.5">
+              <Paperclip className="h-4 w-4" />
             </button>
-            <motion.button
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              onClick={() => sendMessage()}
-              disabled={!input.trim() || isThinking || isStreaming}
-              className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-cyan-500 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
-            >
-              <Send className="h-3.5 w-3.5" />
-            </motion.button>
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  sendMessage();
+                }
+              }}
+              placeholder="Ask about your finances, forecasts, fraud alerts..."
+              rows={1}
+              disabled={isStreaming || isThinking || sessionsLoading}
+              className="flex-1 resize-none bg-transparent text-sm text-white placeholder:text-zinc-500 focus:outline-none leading-relaxed max-h-32 disabled:opacity-50"
+              style={{ minHeight: "24px" }}
+            />
+            <div className="flex items-center gap-2 mb-0.5">
+              <button type="button" className="text-zinc-500 hover:text-zinc-300 transition-colors">
+                <Mic className="h-4 w-4" />
+              </button>
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={() => sendMessage()}
+                disabled={!input.trim() || isThinking || isStreaming || sessionsLoading}
+                className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-cyan-500 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
+              >
+                <Send className="h-3.5 w-3.5" />
+              </motion.button>
+            </div>
           </div>
+          <p className="text-center text-xs text-zinc-600 mt-2">
+            AI responses are for informational purposes only. Not financial advice.
+          </p>
         </div>
-        <p className="text-center text-xs text-zinc-600 mt-2">
-          AI responses are for informational purposes only. Not financial advice.
-        </p>
       </div>
     </div>
   );

frontend/src/lib/api.ts

@@ -199,13 +199,62 @@ export const aiApi = {
     const qs = userId ? `?user_id=${userId}` : "";
     return apiFetch<{ subscriptions: Array<{ merchant: string; amount: number; recommendation: string }> }>(`/api/ai/subscriptions/optimize${qs}`);
   },
-  chat: (message: string, userId?: string) => {
+  chat: (message: string, userId?: string, sessionId?: string) => {
     const qs = userId ? `?user_id=${userId}` : "";
-    return apiFetch<{ response: string }>(`/api/ai/chat${qs}`, {
+    return apiFetch<{ response: string; session_id: string }>(`/api/ai/chat${qs}`, {
       method: "POST",
-      body: JSON.stringify({ message }),
+      body: JSON.stringify({ message, session_id: sessionId }),
     });
   },
+  chatSessions: (userId?: string) => {
+    const qs = userId ? `?user_id=${userId}` : "";
+    return apiFetch<{
+      sessions: Array<{
+        id: string;
+        title: string;
+        created_at: string | null;
+        updated_at: string | null;
+        message_count: number;
+        preview: string;
+      }>;
+      count: number;
+    }>(`/api/ai/chat/sessions${qs}`);
+  },
+  createChatSession: (userId?: string, title = "New chat") => {
+    const qs = userId ? `?user_id=${userId}` : "";
+    return apiFetch<{
+      id: string;
+      title: string;
+      created_at: string | null;
+      updated_at: string | null;
+      message_count: number;
+      preview: string;
+    }>(`/api/ai/chat/sessions${qs}`, {
+      method: "POST",
+      body: JSON.stringify({ title }),
+    });
+  },
+  deleteChatSession: (sessionId: string, userId?: string) => {
+    const qs = userId ? `?user_id=${userId}` : "";
+    return apiFetch<{ ok: boolean }>(`/api/ai/chat/sessions/${sessionId}${qs}`, { method: "DELETE" });
+  },
+  chatHistory: (sessionId: string, userId?: string, limit = 100) => {
+    const params = new URLSearchParams({ session_id: sessionId, limit: String(limit) });
+    if (userId) params.set("user_id", userId);
+    return apiFetch<{
+      session_id: string;
+      messages: Array<{ id: string; role: "user" | "assistant"; content: string; created_at: string | null }>;
+      count: number;
+    }>(`/api/ai/chat/history?${params}`);
+  },
+  clearChatHistory: (sessionId: string, userId?: string) => {
+    const params = new URLSearchParams({ session_id: sessionId });
+    if (userId) params.set("user_id", userId);
+    return apiFetch<{ ok: boolean; message: string; session_id: string }>(
+      `/api/ai/chat/history?${params}`,
+      { method: "DELETE" }
+    );
+  },
   simulatePurchase: (amount: number, merchant: string, category: string, userId?: string) => {
     const qs = userId ? `?user_id=${userId}` : "";
     return apiFetch<Record<string, unknown>>(`/api/ai/simulate/purchase${qs}`, {