You are an expert full-stack AI engineer. Build a production-ready AI Customer Support Bot with the following specifications:

## ARCHITECTURE OVERVIEW
Create a modern 3-tier architecture:
1. Frontend: Next.js 14 + TypeScript + Tailwind CSS + shadcn/ui
2. Backend: FastAPI (Python 3.11+) + LangGraph for orchestration
3. Data Layer: PostgreSQL + Redis + Pinecone (vector store)

## PROJECT STRUCTURE

### Backend (FastAPI)
backend/
├── app/
│ ├── api/v1/
│ │ ├── chat.py # WebSocket + REST endpoints
│ │ ├── sessions.py # Session CRUD
│ │ └── analytics.py # Dashboard metrics
│ ├── agents/
│ │ ├── orchestrator.py # LangGraph state machine
│ │ ├── faq_agent.py # RAG-based FAQ retrieval
│ │ ├── action_agent.py # Tool-calling agent
│ │ └── escalation.py # Human handoff logic
│ ├── services/
│ │ ├── llm_service.py # OpenAI/Anthropic abstraction
│ │ ├── rag_service.py # Pinecone vector search
│ │ └── memory.py # Redis session management
│ ├── models/
│ │ ├── database.py # SQLAlchemy models
│ │ └── schemas.py # Pydantic validation
│ └── core/
│ ├── config.py # Environment variables
│ └── prompts.py # LLM prompt templates

### Frontend (Next.js)
frontend/
├── app/
│ ├── page.tsx # Main chat interface
│ └── api/chat/route.ts # API proxy
├── components/
│ ├── chat/
│ │ ├── ChatWindow.tsx
│ │ ├── MessageList.tsx
│ │ ├── ActionApprovalModal.tsx
│ │ └── EscalationBanner.tsx
│ └── ui/ # shadcn components
├── hooks/
│ ├── useChat.ts # Chat state management
│ └── useWebSocket.ts # Real-time connection
└── lib/
└── api.ts # Backend API client

## DATABASE SCHEMA (PostgreSQL)
```sql
-- Core tables
CREATE TABLE sessions (
session_id UUID PRIMARY KEY,
user_id VARCHAR(255),
status VARCHAR(50) DEFAULT 'active',
escalation_reason TEXT,
created_at TIMESTAMP DEFAULT NOW(),
metadata JSONB
);

CREATE TABLE messages (
message_id UUID PRIMARY KEY,
session_id UUID REFERENCES sessions(session_id),
role VARCHAR(20) NOT NULL,
content TEXT NOT NULL,
confidence_score FLOAT,
matched_faq_id VARCHAR(255),
timestamp TIMESTAMP DEFAULT NOW(),
tool_calls JSONB
);

CREATE TABLE faqs (
faq_id VARCHAR(255) PRIMARY KEY,
question TEXT NOT NULL,
answer TEXT NOT NULL,
category VARCHAR(100),
keywords TEXT[],
usage_count INT DEFAULT 0,
is_active BOOLEAN DEFAULT TRUE
);

CREATE TABLE escalation_queue (
queue_id UUID PRIMARY KEY,
session_id UUID REFERENCES sessions(session_id),
priority VARCHAR(20) DEFAULT 'normal',
reason TEXT,
status VARCHAR(50) DEFAULT 'pending',
created_at TIMESTAMP DEFAULT NOW()
);

CREATE TABLE feedback (
feedback_id UUID PRIMARY KEY,
message_id UUID REFERENCES messages(message_id),
rating INT CHECK (rating >= 1 AND rating <= 5),
feedback_text TEXT,
created_at TIMESTAMP DEFAULT NOW()
);
KEY IMPLEMENTATION REQUIREMENTS
1. LangGraph Multi-Agent Orchestrator
Create a state machine with these agents:

Intent Classifier: Route queries to FAQ/Action/Escalation
FAQ Agent: Use Pinecone for semantic search (threshold: 0.75)
Action Agent: Tool-calling with approval mechanism (interrupt before execution)
Escalation Agent: Trigger on: low confidence (3+ messages), explicit request, sentiment analysis (anger/frustration), repeated failures

State definition:
pythonclass AgentState(TypedDict):
messages: Annotated[list, add_messages]
session_id: str
user_info: dict
current_intent: str
confidence_score: float
escalation_triggered: bool
pending_actions: list
2. RAG-Based FAQ System

Use OpenAI text-embedding-3-small for embeddings
Store in Pinecone with metadata filtering
Hybrid search: semantic similarity + keyword matching
Return top 5 results, filter by confidence threshold
Generate answers using Claude 3.5 Sonnet with FAQ context

3. Real-Time Chat (WebSocket)

Use Socket.IO for bidirectional communication
Events: 'message', 'typing_start', 'action_approval_needed', 'escalation'
Maintain session state in Redis (TTL: 30 minutes)
Graceful fallback to REST API if WebSocket fails

4. Action Approval Flow
For sensitive operations (data updates, bookings):

Agent proposes action → sends to frontend
Display modal with action details and impacts
User approves/rejects → resume LangGraph execution
Use LangGraph's interrupt_before mechanism

5. Escalation Logic
Trigger escalation when:

Confidence score < 0.6 for 3 consecutive messages
User says: "speak to agent", "human", "representative"
Sentiment analysis shows anger (intensity > 0.7)
Agent retries same query 3+ times without resolution

Actions on escalation:

Create escalation_queue record with priority
Generate conversation summary for human agent
Display banner with estimated wait time
Disable bot input, enable "Cancel Escalation" option

6. Session Memory Management

Store in Redis with session_id as key
Include: last 10 messages, user_info, conversation_summary, action_history
Compress old sessions to PostgreSQL after 30 minutes
Use LangChain's ConversationSummaryMemory for long conversations

7. Frontend Requirements

Modern, clean UI with message bubbles (user: right/blue, bot: left/gray)
Typing indicator with animated dots
Action approval modal with clear description and approve/reject buttons
Escalation banner showing queue position and wait time
Auto-scroll to latest message
Input validation (max 500 chars, rate limit: 10 msg/min)
Responsive design (mobile-first)

8. Analytics Dashboard (Admin)
Display metrics:

Total conversations, resolution rate, escalation rate
Average confidence score, response time
Top FAQ categories, unresolved queries
User satisfaction (thumbs up/down on messages)
Escalation reasons breakdown (pie chart)

9. LLM Configuration
Primary LLM: Claude 3.5 Sonnet (complex queries, actions)
Secondary LLM: GPT-4o-mini (intent classification, fast responses)
Embeddings: OpenAI text-embedding-3-small
Temperature: 0 for actions, 0.7 for conversational responses
System prompt template:
You are a helpful customer support assistant for [COMPANY].

Guidelines:
- Be concise, friendly, and professional
- Use provided FAQ context when available
- Always explain actions before executing
- If unsure, admit limitations and offer human escalation
- Maintain conversation context across messages

Current user: {user_info}
FAQ context: {faq_context}
Conversation history: {conversation_history}
DELIVERABLES

GitHub Repository with:

Complete source code
Docker Compose setup
Environment variable template (.env.example)
README with setup instructions
API documentation (auto-generated with FastAPI)


Database Migration Scripts:

Alembic migrations for PostgreSQL
Seed script for sample FAQs


Demo Features:

Sample FAQ dataset (50+ questions)
Mock escalation queue
Test user with conversation history


Documentation:

Architecture diagram
API endpoint documentation
Prompt engineering guide
Deployment instructions (Docker/Railway/Vercel)



TESTING REQUIREMENTS

Unit tests for agents (pytest)
Integration tests for API endpoints
E2E tests for chat flow (Playwright)
Load testing for WebSocket (100 concurrent users)

DEPLOYMENT STRATEGY

Backend: Docker container on Railway/Render
Frontend: Vercel with edge functions
Database: Supabase (PostgreSQL) or Railway
Vector Store: Pinecone (free tier)
Monitoring: Sentry for errors, PostHog for analytics

CRITICAL IMPLEMENTATION NOTES

Never use localStorage in artifacts - use React state
Implement exponential backoff for LLM rate limits
Sanitize all user inputs to prevent prompt injection
Log all escalations for quality assurance
Add CORS middleware for frontend-backend communication
Use connection pooling for database (SQLAlchemy with pool_size=10)
Implement graceful degradation if vector store is unavailable
Cache frequent FAQ queries in Redis (TTL: 1 hour)

SUCCESS METRICS

70%+ queries resolved by AI without escalation
< 3 second average response time
90%+ uptime
4+ star average user satisfaction
< 5% error rate

Build this system step-by-step, starting with:

Database schema and models
Basic FastAPI app with health check
Simple LangGraph orchestrator
FAQ agent with mock data
Next.js chat interface
WebSocket integration
Action approval flow
Escalation logic
Analytics dashboard
Testing and deployment

Use best practices: type hints, async/await, error handling, logging, and comprehensive docstrings.

---

## **🚀 QUICK START COMMAND**

Use this shortened version if you want to start immediately:
Build an AI customer support chatbot:

Backend: FastAPI + LangGraph + Pinecone (RAG) + PostgreSQL + Redis
Frontend: Next.js + TypeScript + Tailwind + WebSocket
Features: FAQ retrieval (RAG), multi-agent orchestration, action approval (human-in-loop), escalation logic, session memory, analytics
Database: sessions, messages, faqs, escalation_queue, feedback tables
Agents: IntentClassifier → FAQ/Action/Escalation agents with LangGraph state machine
Escalation triggers: confidence<0.6, explicit request, sentiment analysis, retry count>3
Use Claude 3.5 Sonnet for main LLM, GPT-4o-mini for classification
Real-time chat with Socket.IO, action approval modals, typing indicators
Deliver: Full repo with Docker setup, README, 50+ sample FAQs, API docs
Start with database schema, then FastAPI setup, then LangGraph orchestrator, then Next.js UI.


---

## **📦 TECH STACK SUMMARY**

| Layer | Technology | Purpose |
|-------|-----------|---------|
| **Frontend** | Next.js 14 + TypeScript | Modern React framework |
| | Tailwind CSS + shadcn/ui | Styling & components |
| | Socket.IO client | Real-time communication |
| **Backend** | FastAPI (Python 3.11+) | Async REST API |
| | LangGraph | Agent orchestration |
| | LangChain | LLM abstraction |
| **AI/ML**

README.md

@@ -1,10 +1,13 @@
 ---
-title: Supportbot Supreme Ai
-emoji: 👀
-colorFrom: gray
-colorTo: yellow
+title: SupportBot Supreme AI 🤖
+colorFrom: purple
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,232 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SupportBot Supreme AI</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        .chat-container {
+            height: calc(100vh - 160px);
+        }
+        .typing {
+            display: inline-block;
+        }
+        .typing-dot {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            margin-right: 3px;
+            background: #3b82f6;
+            animation: typingAnimation 1.4s infinite ease-in-out;
+        }
+        .typing-dot:nth-child(1) {
+            animation-delay: 0s;
+        }
+        .typing-dot:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-dot:nth-child(3) {
+            animation-delay: 0.4s;
+            margin-right: 0;
+        }
+        @keyframes typingAnimation {
+            0%, 60%, 100% { transform: translateY(0); }
+            30% { transform: translateY(-5px); }
+        }
+        .message-user {
+            border-radius: 18px 18px 0 18px;
+        }
+        .message-bot {
+            border-radius: 18px 18px 18px 0;
+        }
+        .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <div class="max-w-4xl mx-auto p-4 h-screen flex flex-col">
+        <!-- Header -->
+        <header class="bg-white shadow-sm rounded-lg p-4 mb-4 flex items-center justify-between">
+            <div class="flex items-center space-x-3">
+                <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
+                    <i data-feather="message-circle" class="text-white"></i>
+                </div>
+                <h1 class="text-xl font-bold text-gray-800">SupportBot Supreme</h1>
+            </div>
+            <div class="flex items-center space-x-2">
+                <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">AI Assistant</span>
+                <button class="p-2 rounded-full hover:bg-gray-100">
+                    <i data-feather="settings" class="text-gray-500"></i>
+                </button>
+            </div>
+        </header>
+
+        <!-- Chat Container -->
+        <div class="flex-1 bg-white rounded-lg shadow-sm overflow-hidden flex flex-col">
+            <!-- Messages Area -->
+            <div id="chat-messages" class="chat-container p-4 overflow-y-auto scrollbar-hide space-y-3">
+                <!-- Welcome Message -->
+                <div class="flex justify-start">
+                    <div class="bg-blue-50 text-blue-800 p-4 message-bot max-w-[80%]">
+                        <p class="font-medium">Hello! 👋 I'm your AI support assistant. How can I help you today?</p>
+                        <p class="text-sm mt-2 opacity-80">I can answer questions about your account, orders, and more.</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Input Area -->
+            <div class="border-t p-4 bg-gray-50">
+                <div class="flex items-end space-x-2">
+                    <div class="flex-1 relative">
+                        <textarea 
+                            id="message-input" 
+                            class="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none" 
+                            placeholder="Type your message..." 
+                            rows="1"
+                            style="min-height: 44px; max-height: 120px;"></textarea>
+                        <button class="absolute right-3 bottom-3 text-gray-400 hover:text-blue-500">
+                            <i data-feather="paperclip"></i>
+                        </button>
+                    </div>
+                    <button id="send-button" class="bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-lg transition">
+                        <i data-feather="send"></i>
+                    </button>
+                </div>
+                <p class="text-xs text-gray-500 mt-2">SupportBot may make mistakes. Consider checking important information.</p>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <footer class="text-center text-xs text-gray-500 mt-4">
+            <p>© 2023 SupportBot Supreme AI. All rights reserved.</p>
+        </footer>
+    </div>
+
+    <!-- Typing Indicator Template -->
+    <template id="typing-template">
+        <div class="flex justify-start" id="typing-indicator">
+            <div class="bg-blue-50 text-blue-800 p-4 message-bot">
+                <div class="typing">
+                    <span class="typing-dot"></span>
+                    <span class="typing-dot"></span>
+                    <span class="typing-dot"></span>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <script>
+        feather.replace();
+        
+        // Chat simulation
+        const messageInput = document.getElementById('message-input');
+        const sendButton = document.getElementById('send-button');
+        const chatMessages = document.getElementById('chat-messages');
+        const typingTemplate = document.getElementById('typing-template');
+        
+        // Auto-resize textarea
+        messageInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = (this.scrollHeight) + 'px';
+        });
+        
+        // Sample FAQ responses
+        const faqResponses = {
+            "password": "To reset your password, click 'Forgot Password' on the login page and follow the instructions sent to your email.",
+            "hours": "Our support team is available Monday to Friday, 9AM to 6PM (EST).",
+            "order": "You can track your order in your account dashboard under 'My Orders'.",
+            "return": "We accept returns within 30 days of purchase. Please visit our Returns Center for more details.",
+            "contact": "You can reach our support team at support@example.com or call us at (555) 123-4567."
+        };
+        
+        // Keywords for FAQ matching
+        const faqKeywords = {
+            "password": ["password", "reset", "forgot", "login"],
+            "hours": ["hours", "time", "available", "open", "close"],
+            "order": ["order", "track", "delivery", "ship", "status"],
+            "return": ["return", "refund", "exchange", "policy"],
+            "contact": ["contact", "speak", "human", "agent", "phone", "call", "email"]
+        };
+        
+        // Send message function
+        function sendMessage() {
+            const message = messageInput.value.trim();
+            if (message === '') return;
+            
+            // Add user message to chat
+            addMessage(message, 'user');
+            messageInput.value = '';
+            messageInput.style.height = 'auto';
+            
+            // Show typing indicator
+            const typingIndicator = typingTemplate.content.cloneNode(true);
+            chatMessages.appendChild(typingIndicator);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            
+            // Simulate AI response after delay
+            setTimeout(() => {
+                // Remove typing indicator
+                document.getElementById('typing-indicator')?.remove();
+                
+                // Check for escalation keywords
+                if (message.toLowerCase().includes('human') || 
+                    message.toLowerCase().includes('agent') || 
+                    message.toLowerCase().includes('representative')) {
+                    addMessage("I'll connect you with a human support agent. Please wait while I transfer you...", 'bot');
+                    setTimeout(() => {
+                        addMessage("All our agents are currently busy. Your estimated wait time is 5-7 minutes. Would you like to leave a callback request instead?", 'bot');
+                    }, 2000);
+                    return;
+                }
+                
+                // Find matching FAQ
+                let response = "I'm sorry, I couldn't find information about that. Could you please provide more details?";
+                for (const [key, keywords] of Object.entries(faqKeywords)) {
+                    if (keywords.some(keyword => message.toLowerCase().includes(keyword))) {
+                        response = faqResponses[key];
+                        break;
+                    }
+                }
+                
+                // Add bot response
+                addMessage(response, 'bot');
+            }, 1000 + Math.random() * 2000);
+        }
+        
+        // Add message to chat
+        function addMessage(text, sender) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `flex justify-${sender === 'user' ? 'end' : 'start'}`;
+            
+            const messageContent = document.createElement('div');
+            messageContent.className = sender === 'user' 
+                ? 'bg-blue-500 text-white p-4 message-user max-w-[80%]' 
+                : 'bg-blue-50 text-blue-800 p-4 message-bot max-w-[80%]';
+            messageContent.textContent = text;
+            
+            messageDiv.appendChild(messageContent);
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        
+        // Event listeners
+        sendButton.addEventListener('click', sendMessage);
+        messageInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+        
+        // Sample messages
+        setTimeout(() => {
+            addMessage("Try asking me about password reset, business hours, order tracking, returns policy, or contact information!", 'bot');
+        }, 1500);
+    </script>
+</body>
 </html>