Clean deploy to Hugging Face

.gitignore

@@ -0,0 +1,58 @@
+# Dependencies
+node_modules/
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/
+.venv/
+
+# Environment variables
+.env
+server/.env
+.env.local
+.env.prod
+.env.production
+
+# Build outputs
+dist/
+build/
+*.egg-info/
+
+# Database
+*.db
+*.sqlite3
+vector_db/
+
+# Logs
+*.log
+logs/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Cache
+.cache/
+.parcel-cache/
+.next/
+.nuxt/
+
+# Testing
+coverage/
+.nyc_output/
+.pytest_cache/server/models/*.gguf
+server/datasets/processed/
+server/models/
+server/vector_db/
+*.db
+*.pkl
+*.bin

CONTACT_TRACKING_GUIDE.md

@@ -0,0 +1,479 @@
+# Contact Request & IP Tracking Implementation
+
+## ✅ Features Implemented
+
+### 1. Contact Request Storage
+**File**: `app/models/contact_request.py`
+
+**What It Stores**:
+- ✅ User information (name, email, phone, message)
+- ✅ Full chat context (entire conversation)
+- ✅ IP address tracking
+- ✅ User agent (browser info)
+- ✅ Status tracking (pending → contacted → resolved)
+- ✅ Timestamps (created, updated, contacted, resolved)
+
+**Fields**:
+```python
+class ContactRequest:
+    name: str
+    email: str
+    phone: str
+    message: str
+    chat_context: JSON  # Full conversation array
+    ip_address: str
+    user_agent: str
+    status: str  # pending, contacted, resolved
+```
+
+---
+
+### 2. Chat Session Tracking
+**File**: `app/models/chat_session.py`
+
+**What It Tracks**:
+- ✅ Every chat session with unique ID
+- ✅ IP address for each user
+- ✅ All messages in conversation
+- ✅ Session duration and activity
+- ✅ Language detected
+- ✅ Satisfaction ratings
+- ✅ Response times
+
+**Example**:
+```json
+{
+  "session_id": "abc123",
+  "ip_address": "192.168.1.1",
+  "messages": [
+    {
+      "text": "Hey there! 😊",
+      "isUser": false,
+      "timestamp": "2025-12-07T03:22:00Z"
+    },
+    {
+      "text": "how are you",
+      "isUser": true,
+      "timestamp": "2025-12-07T03:22:15Z"
+    }
+  ],
+  "message_count": 10,
+  "is_active": true
+}
+```
+
+---
+
+### 3. Contact Form API
+**File**: `app/api/contact.py`
+
+**Endpoints**:
+
+#### Submit Contact Request
+```javascript
+POST /api/contact/submit
+
+// Request
+{
+  "name": "John Doe",
+  "email": "john@example.com",
+  "phone": "+1234567890",
+  "message": "I need help with...",
+  "session_id": "abc123",
+  "chat_context": [
+    {"text": "Hey there! 😊", "isUser": false},
+    {"text": "how are you", "isUser": true},
+    {"text": "I am fine", "isUser": false}
+  ]
+}
+
+// Response
+{
+  "id": 42,
+  "status": "success",
+  "message": "Thank you! We'll get back to you soon."
+}
+```
+
+#### Get Contact Requests
+```javascript
+GET /api/contact/requests?website_id=123&status=pending
+
+// Response
+[
+  {
+    "id": 42,
+    "name": "John Doe",
+    "email": "john@example.com",
+    "chat_context": [...],
+    "ip_address": "192.168.1.1",
+    "status": "pending",
+    "created_at": "2025-12-07T03:22:00Z"
+  }
+]
+```
+
+#### Update Status
+```javascript
+PATCH /api/contact/request/42/status
+
+{
+  "status": "contacted",
+  "notes": "Called customer, issue resolved"
+}
+```
+
+---
+
+### 4. Session Tracking Service
+**File**: `app/services/session_tracker.py`
+
+**Features**:
+- Automatic session creation on first message
+- IP address capture from request headers
+- Message logging with timestamps
+- Session end tracking
+- Analytics and reporting
+
+**Usage Example**:
+```python
+from app.services.session_tracker import get_session_tracker
+
+tracker = get_session_tracker(db)
+
+# Create/get session
+session = tracker.get_or_create_session(
+    session_id="abc123",
+    website_id=1,
+    ip_address="192.168.1.1",
+    user_agent="Mozilla/5.0..."
+)
+
+# Add messages
+tracker.add_message(
+    session_id="abc123",
+    text="Hello!",
+    is_user=True,
+    response_time=1500  # ms
+)
+
+# Get stats
+stats = tracker.get_session_stats("abc123")
+# {
+#   "message_count": 10,
+#   "duration_seconds": 180,
+#   "ip_address": "192.168.1.1"
+# }
+
+# Find sessions by IP
+sessions = tracker.get_sessions_by_ip("192.168.1.1")
+```
+
+---
+
+## 🔧 Integration Guide
+
+### Step 1: Update Chat API to Track Sessions
+
+```python
+# In your chat endpoint
+from app.services.session_tracker import get_session_tracker
+
+@router.post("/api/chat")
+async def chat(
+    request: Request,
+    message: str,
+    session_id: str,
+    website_id: int,
+    db: Session = Depends(get_db)
+):
+    # Get IP address
+    ip_address = request.headers.get("X-Forwarded-For", "").split(",")[0]
+    if not ip_address:
+        ip_address = request.client.host
+    
+    # Track session
+    tracker = get_session_tracker(db)
+    session = tracker.get_or_create_session(
+        session_id=session_id,
+        website_id=website_id,
+        ip_address=ip_address,
+        user_agent=request.headers.get("User-Agent")
+    )
+    
+    # Log user message
+    tracker.add_message(
+        session_id=session_id,
+        text=message,
+        is_user=True
+    )
+    
+    # Generate bot response
+    response = await generate_response(message)
+    
+    # Log bot message
+    tracker.add_message(
+        session_id=session_id,
+        text=response,
+        is_user=False,
+        response_time=1500
+    )
+    
+    return {"response": response}
+```
+
+---
+
+### Step 2: Update Frontend Contact Form
+
+```javascript
+// ContactForm.jsx
+const handleSubmit = async (formData) => {
+  try {
+    // Get full chat context
+    const chatContext = messages.map(msg => ({
+      text: msg.text,
+      isUser: msg.isUser,
+      timestamp: msg.timestamp
+    }));
+    
+    // Submit to API
+    const response = await fetch('/api/contact/submit', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name: formData.name,
+        email: formData.email,
+        phone: formData.phone,
+        message: formData.message,
+        session_id: sessionId,
+        chat_context: chatContext
+      })
+    });
+    
+    const result = await response.json();
+    
+    if (result.status === 'success') {
+      // Show success message
+      setShowThankYou(true);
+    }
+  } catch (error) {
+    console.error('Failed to submit:', error);
+  }
+};
+```
+
+---
+
+### Step 3: Database Migration
+
+```bash
+# Create migration
+cd server
+alembic revision -m "add_contact_and_session_tracking"
+
+# Apply migration
+alembic upgrade head
+```
+
+**Migration Example**:
+```python
+# migrations/versions/xxx_add_contact_and_session_tracking.py
+
+def upgrade():
+    # Create contact_requests table
+    op.create_table('contact_requests',
+        sa.Column('id', sa.Integer(), primary_key=True),
+        sa.Column('website_id', sa.Integer(), nullable=False),
+        sa.Column('session_id', sa.String(255), nullable=False),
+        sa.Column('name', sa.String(255)),
+        sa.Column('email', sa.String(255)),
+        sa.Column('phone', sa.String(50)),
+        sa.Column('message', sa.Text()),
+        sa.Column('ip_address', sa.String(50)),
+        sa.Column('user_agent', sa.Text()),
+        sa.Column('chat_context', sa.JSON()),
+        sa.Column('status', sa.String(50), default='pending'),
+        sa.Column('created_at', sa.DateTime(), default=datetime.utcnow)
+    )
+    
+    # Create chat_sessions table
+    op.create_table('chat_sessions',
+        sa.Column('id', sa.Integer(), primary_key=True),
+        sa.Column('session_id', sa.String(255), unique=True),
+        sa.Column('website_id', sa.Integer(), nullable=False),
+        sa.Column('ip_address', sa.String(50)),
+        sa.Column('messages', sa.JSON()),
+        sa.Column('is_active', sa.Boolean(), default=True),
+        sa.Column('started_at', sa.DateTime(), default=datetime.utcnow)
+    )
+```
+
+---
+
+## 📊 Admin Dashboard Views
+
+### Contact Requests View
+
+```jsx
+// ContactRequestsPage.jsx
+const ContactRequests = () => {
+  const [requests, setRequests] = useState([]);
+  
+  useEffect(() => {
+    fetch(`/api/contact/requests?website_id=${websiteId}`)
+      .then(res => res.json())
+      .then(data => setRequests(data));
+  }, []);
+  
+  return (
+    <div className="contact-requests">
+      <h2>Contact Requests</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Name</th>
+            <th>Email</th>
+            <th>IP Address</th>
+            <th>Messages</th>
+            <th>Status</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {requests.map(req => (
+            <tr key={req.id}>
+              <td>{new Date(req.created_at).toLocaleString()}</td>
+              <td>{req.name}</td>
+              <td>{req.email}</td>
+              <td>{req.ip_address}</td>
+              <td>{req.chat_context?.length} msgs</td>
+              <td>
+                <span className={`badge badge-${req.status}`}>
+                  {req.status}
+                </span>
+              </td>
+              <td>
+                <button onClick={() => viewDetails(req.id)}>
+                  View
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+```
+
+### Session Analytics View
+
+```jsx
+// SessionAnalytics.jsx
+const SessionAnalytics = () => {
+  return (
+    <div className="analytics">
+      <h2>Chat Session Analytics</h2>
+      
+      <div className="stats-grid">
+        <div className="stat-card">
+          <h3>Active Sessions</h3>
+          <p className="stat-value">42</p>
+        </div>
+        
+        <div className="stat-card">
+          <h3>Unique IPs (Today)</h3>
+          <p className="stat-value">127</p>
+        </div>
+        
+        <div className="stat-card">
+          <h3>Avg. Messages/Session</h3>
+          <p className="stat-value">8.5</p>
+        </div>
+        
+        <div className="stat-card">
+          <h3>Contact Conversion</h3>
+          <p className="stat-value">12%</p>
+        </div>
+      </div>
+      
+      <div className="sessions-map">
+        <h3>Sessions by Location (IP-based)</h3>
+        {/* Map showing user locations */}
+      </div>
+    </div>
+  );
+};
+```
+
+---
+
+## 🔐 Privacy & GDPR Compliance
+
+### IP Address Handling
+
+**Storage**:
+- ✅ IP addresses stored for analytics
+- ✅ Can be anonymized (last octet)
+- ✅ Auto-deletion after 90 days
+
+**Anonymization** (optional):
+```python
+def anonymize_ip(ip_address: str) -> str:
+    """Anonymize IP by removing last octet"""
+    parts = ip_address.split('.')
+    if len(parts) == 4:
+        parts[-1] = '0'
+    return '.'.join(parts)
+    # 192.168.1.123 → 192.168.1.0
+```
+
+**GDPR Compliance**:
+- ✅ User can request data deletion
+- ✅ Privacy policy disclosure
+- ✅ Data retention policies
+- ✅ Opt-out mechanism
+
+---
+
+## 📈 Benefits
+
+### For Business
+- ✅ Track all contact requests in one place
+- ✅ See full conversation context
+- ✅ Identify returning visitors by IP
+- ✅ Analyze chat effectiveness
+- ✅ Spot patterns and trends
+
+### For Support
+- ✅ Full chat history before contact
+- ✅ Know what user already tried
+- ✅ Better context for responses
+- ✅ Track resolution status
+
+### For Analytics
+- ✅ Session duration tracking
+- ✅ Message count analysis
+- ✅ Geographic distribution (IP-based)
+- ✅ Conversion rate tracking
+- ✅ Response time metrics
+
+---
+
+## ✅ Summary
+
+**What You Get**:
+1. ✅ Proper contact request storage (not just JSON)
+2. ✅ Full chat context saved with each request
+3. ✅ IP tracking for every session
+4. ✅ Complete conversation history
+5. ✅ Admin dashboard to manage requests
+6. ✅ Analytics and reporting
+
+**Before**: Contact request just shows JSON ❌  
+**After**: Properly stored in database with full context ✅
+
+**Before**: No user tracking ❌  
+**After**: Every session tracked by IP ✅

Dockerfile

@@ -0,0 +1,32 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY server/requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY server/ .
+
+# Create non-root user
+RUN useradd -m -u 1000 appuser && chown -R appuser:appuser /app
+USER appuser
+
+# Expose port for Hugging Face Spaces
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:7860/health || exit 1
+
+# Run the application
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

HEALTHCARE_FLOW.md

@@ -0,0 +1,110 @@
+# Healthcare Module: System Flow & Intelligence
+
+## System Architecture
+The healthcare module is fully integrated into the core AI engine and utilizes internal knowledge bases as well as external datasets (SymCAT & MedQuAD). The system is designed to operate efficiently with offline-preprocessed datasets to ensure fast, safe, and accurate responses.
+
+```mermaid
+graph TD
+    User([User Query]) --> API[Chat API /api/chat]
+    API --> Website[Fetch Website & Industry Config]
+    Website --> AI_Engine[AIEngine.generate_response]
+    AI_Engine --> IndustryCheck{Is Healthcare?}
+    
+    IndustryCheck -- Yes --> IndustryAI[IndustryAI.get_industry_dataset_response]
+    IndustryAI --> HealthcareMod[EnhancedHealthcareModule]
+    
+    HealthcareMod --> SymptomMatch{Symptom Match?}
+    SymptomMatch -- Yes --> SymCAT[Check SymCAT & Internal DB (Offline Indexed)]
+    SymCAT --> Urgency[Determine Urgency & Advice]
+    
+    SymptomMatch -- No --> MedQuAD[Medical Q&A / MedQuAD (Offline Vector Search)]
+    MedQuAD --> QAResponse[Generate Q&A Response]
+    
+    Urgency --> Format[Conversational Formatting]
+    QAResponse --> Format
+    
+    Format --> Language{Language Selection?}
+    Language -- English --> EN[English Response]
+    Language -- Urdu --> UR[Urdu Response (Roman Urdu Supported)]
+    
+    EN --> Final[Final Response + Disclaimer]
+    UR --> Final
+    
+    Final --> API_Return[Return to Widget]
+```
+
+## Key Components
+
+### 1. Configuration (widget_config)
+Healthcare-specific settings are stored in the `websites` table under `widget_config`. These settings customize the AI’s behavior per clinic or sub-industry.
+- **Healthcare Sub-Industry**: (General, Dental, Pharmacy, Mental Health, Pediatrics). Tailors AI persona, tone, and keyword detection.
+- **Multi-language Support**: English & Urdu response generation. Roman Urdu detection (e.g., "bukhar", "seenay mein dard").
+- **Symptom Checker Toggle**: Enables/disables detailed symptom extraction & analysis logic.
+- **Custom Disclaimer**: Allows clinic-specific legal text to appear in the final response.
+- **Appointment URL**: Direct link to booking services.
+
+### 2. Symptom Extraction & Normalization
+- **Symptom Extraction**: Extracts explicit and implicit symptoms from user queries.
+- **Normalization**: Maps colloquial or variant terms (aliases) to canonical medical terms using Internal KB + SymCAT aliases.
+- **Offline Processing**: Dataset preprocessing ensures fast runtime lookups. Embeddings and indexes are generated offline for vector-based semantic search.
+- **Example**: "my head hurts" → normalized → "HEADACHE"
+
+### 3. Confidence & Threshold Logic
+- **Weighted Confidence Scoring**: Combines Internal KB, SymCAT, and MedQuAD data to produce a confidence score for detected symptoms.
+- **Threshold Check**: If confidence ≥ threshold → proceed with detailed medical reasoning. If confidence < threshold → AI asks a clarifying question to improve accuracy.
+
+### 4. Dataset Usage
+| Dataset | Role | Processing |
+| :--- | :--- | :--- |
+| **SymCAT** | Symptom → Condition mapping | Preprocessed offline, indexed for fast runtime lookup |
+| **MedQuAD** | Medical Q&A | Preprocessed offline, vectorized for semantic search |
+| **Internal KB** | Custom terms & aliases | Merged offline with SymCAT for normalization |
+
+*Note: The module does not query raw datasets at runtime, ensuring speed, reliability, and free-tier compatibility.*
+
+### 5. Pattern & Red-Flag Detection
+- Detects critical symptom combinations (e.g., chest pain + shortness of breath).
+- Assigns severity levels: Mild, Moderate, High.
+- Triggers urgent advice if high-risk patterns are detected. Rules are offline-defined and applied at runtime.
+
+### 6. Urgency & Advice Logic
+- **Severity categorization** uses weighted rules + pattern detection.
+- **Urgent Cases**: e.g., high fever ≥103°F, chest pain, or other red-flag symptoms.
+- **Tiered Responses**:
+    - **Low**: Informational / lifestyle advice
+    - **Medium**: Suggest consulting a provider
+    - **High**: Urgent recommendation + emergency contact
+
+### 7. Multi-Language Intelligence
+- Supports English and Urdu.
+- Automatically detects language intent and applies translation or Roman Urdu normalization.
+- Ensures all symptom and advice terminology is consistent across languages.
+
+### 8. Answer Generation & Safety Filter
+- Combines dataset outputs, pattern recognition, and urgency rules.
+- **Safety filter ensures**:
+    - No medical diagnosis
+    - No drug or dosage recommendations
+    - Disclaimer is always included
+- Generates confidence-aware, conversationally formatted responses in the requested language.
+
+## Usage Example
+**Query**: "my child has a temperature of 103"
+1. **IndustryAI** detects “fever” and extracts temperature “103”.
+2. **HealthcareModule** normalizes the symptom and calculates severity → **High Fever**.
+3. **Red-Flag Detection** checks for pediatric-specific concerns.
+4. **MedQuAD** retrieves explanation if user asks for details.
+5. **Answer Generator** creates a response with:
+    - Child-focused tone (Pediatrics)
+    - Severity & potential causes
+    - Tiered advice & safety disclaimer
+    - Multi-language handling (English or Urdu)
+6. **Final response** is returned to the widget.
+
+## ✅ Key Notes / Enhancements Applied
+- Offline dataset usage clarified (preprocessing + vectorization).
+- Confidence scoring & threshold logic explicitly described.
+- Red-flag & severity rules highlighted.
+- Multi-language intelligence detailed, including Roman Urdu support.
+- Safety filters and disclaimers emphasized.
+- Workflow mirrors your enhanced runtime + offline flow.

HEALTHCARE_IMPLEMENTATION_PLAN.md

@@ -0,0 +1,42 @@
+# 🏥 Healthcare Chatbot – Implementation Flow (Dynamic & CPU-Optimized)
+
+## High-Level Runtime Flow
+1. **Message Intake**: Socket.IO/API -> `chat_messages` -> `chat_sessions`
+2. **Context Resolution**: `context_service.py` (Patient context + session memory)
+3. **Medical Intent Detection**: `intent_classifier.py` (Symptom, Info, Safety, Casual, Non-medical)
+4. **Dynamic Risk Scoring**: `risk_engine.py` (Score 0.0-1.0) -> Updates patient context
+5. **Dataset Routing**: `dataset_router.py` (Weighted routing, e.g. SymCAT/MedQuAD)
+6. **Hybrid Retrieval**: `retrieval_engine.py` (BM25 + FAISS + Cached Embeddings)
+7. **Safety & Compliance**: `safety_guard.py` (No diagnosis, Prescriptions, Dosage; Add Disclaimers)
+8. **Response Composition**: `response_composer.py` (Template vs LLM)
+9. **Delivery**: Socket.IO -> storage -> feedback loop
+
+## Component Mapping
+| Existing Component | New Role |
+|-------------------|----------|
+| `ai_engine.py` | Medical Orchestrator Wrapper |
+| `FAISS` | Primary Medical Retrieval |
+| `BM25` | Clinical Term Matching |
+| `Unanswered Questions` | Human-in-the-loop |
+| `Gemini` | Last-resort Synthesis |
+
+## Optimization
+- **CPU-Only**: No heavy local LLMs (use APIs or efficient retrieval)
+- **Async**: Non-blocking calls
+- **Caching**: Embeddings and frequent responses
+
+## 📊 Dataset & Knowledge Strategy
+| Dataset | Purpose | Notes |
+|---------|---------|-------|
+| **MedQuAD** | Medical Q&A pairs | Covers diseases like flu, diabetes, cardiovascular; used for evidence-based responses |
+| **SymCAT** | Symptom-to-Disease mapping | Helps chatbot compute risk score, suggest next questions, and verify symptom consistency |
+| **HealthTap** | Professional health advice | Used to improve natural phrasing and context-aware responses |
+| **WHO / CDC** | Guidelines & Escalation | Provides authoritative references for high-risk symptoms and emergency protocols |
+| **ICD-10 Codes** | Disease Taxonomy | Standardized identifiers for internal mapping & consistent terminology |
+
+## Next Steps
+1. [ ] Implement `medical_orchestrator.py` (Core Brain)
+2. [ ] Implement `risk_engine.py` with dynamic formulas
+3. [ ] Add `patient_context` DB migration
+4. [ ] Create healthcare-safe response templates
+5. [ ] Build symptom stepper UI

IMPLEMENTATION_STATUS.md

@@ -0,0 +1,613 @@
+# 🎯 Implementation Status & Technical Documentation
+
+## ✅ **COMPLETED FEATURES**
+
+### 🖥️ Frontend Layer
+
+#### **React + Vite Setup**
+- **Technology**: React 18 with Vite for fast development
+- **How it works**: Vite provides instant HMR (Hot Module Replacement) and optimized builds
+- **Entry point**: `client/src/main.jsx` renders the root `App` component
+- **Build**: `npm run build` creates optimized production bundle in `client/dist/`
+
+#### **Tailwind CSS Styling**
+- **Configuration**: `client/tailwind.config.js` with custom color palette
+- **Custom Colors**: 
+  - `primary` (blue): Used for CTAs, links, and highlights
+  - `secondary` (slate): Used for text, backgrounds, and borders
+- **Custom Utilities**: Glass effects, card hover animations defined in `client/src/index.css`
+- **Font**: Inter from Google Fonts for modern typography
+
+#### **Framer Motion Animations**
+- **Purpose**: Smooth page transitions and micro-interactions
+- **Usage**: `AnimatePresence` for enter/exit animations, `motion` components for interactive elements
+- **Examples**: 
+  - Fade-in animations on page load
+  - Slide-up effects for cards
+  - Smooth transitions between tabs
+
+#### **Axios HTTP Client**
+- **Configuration**: `client/src/api/axiosConfig.js` with base URL and interceptors
+- **Features**:
+  - Automatic cookie inclusion (`withCredentials: true`)
+  - Request/response interceptors for error handling
+  - Base URL configuration for API endpoints
+- **Usage**: All API calls use this configured instance
+
+#### **React Router Navigation**
+- **Setup**: `client/src/App.jsx` defines all routes
+- **Protected Routes**: Wrapped with `ProtectedRoute` component that checks authentication
+- **Public Routes**: Login and Register pages accessible without auth
+- **Layout**: All protected routes wrapped in `Layout` component with sidebar navigation
+
+#### **JWT Authentication**
+- **Flow**:
+  1. User logs in via `/api/auth/login`
+  2. Server sets httpOnly cookie with JWT token
+  3. Cookie automatically sent with all subsequent requests
+  4. `AuthContext` manages auth state on client
+- **Security**: httpOnly cookies prevent XSS attacks
+- **Token Storage**: Stored in secure httpOnly cookie, not localStorage
+
+#### **Dashboard**
+- **Location**: `client/src/pages/Dashboard.jsx`
+- **Features**:
+  - Stats cards showing total chats, active sessions, response rate
+  - Recent activity feed
+  - Quick actions for common tasks
+- **Data**: Fetches real-time statistics from `/api/analytics/stats`
+
+#### **Chat Widget**
+- **Embeddable Script**: `client/public/chat-widget.js`
+- **How to Use**:
+  ```html
+  <script src="https://yourdomain.com/chat-widget.js" data-website-id="123"></script>
+  ```
+- **Features**:
+  - Floating chat button (customizable position)
+  - Real-time messaging
+  - Visitor information collection
+  - Auto-responses from AI
+- **Customization**: Widget config stored in `websites.widget_config` (colors, position, size)
+
+---
+
+### ⚙️ Backend Layer
+
+#### **FastAPI Framework**
+- **Entry Point**: `server/app/main.py`
+- **Features**:
+  - Automatic OpenAPI documentation at `/docs`
+  - Async request handling
+  - Built-in validation with Pydantic
+- **Startup**: `uvicorn app.main:app --reload --host 0.0.0.0 --port 8000`
+
+#### **SQLAlchemy ORM**
+- **Configuration**: `server/app/core/database.py`
+- **Models Location**: `server/app/models/`
+- **How it works**:
+  - Declarative base class for all models
+  - Session management via dependency injection
+  - Automatic table creation on startup
+- **Database URL**: Configured in `.env` as `DATABASE_URL`
+
+#### **JWT Authentication**
+- **Implementation**: `server/app/core/security.py`
+- **Token Creation**:
+  ```python
+  create_access_token(data={"sub": user_id}, expires_delta=timedelta(days=7))
+  ```
+- **Token Verification**: `verify_token(request)` extracts and validates JWT
+- **Password Hashing**: bcrypt via passlib (`get_password_hash`, `verify_password`)
+- **Security**: Tokens expire after 7 days, stored in httpOnly cookies
+
+#### **Password Hashing**
+- **Library**: bcrypt 4.1.2 via passlib
+- **Algorithm**: bcrypt with automatic salt generation
+- **Functions**:
+  - `get_password_hash(password)`: Hash plain password
+  - `verify_password(plain, hashed)`: Verify password against hash
+- **Security**: 72-byte limit, resistant to rainbow table attacks
+
+#### **CORS Middleware**
+- **Configuration**: `server/app/main.py`
+- **Allowed Origins**: Configured in `settings.ALLOWED_ORIGINS`
+- **Credentials**: `allow_credentials=True` for cookie support
+- **Methods**: All HTTP methods allowed
+- **Headers**: All headers allowed for flexibility
+
+#### **Pydantic Validation**
+- **Purpose**: Automatic request/response validation
+- **Usage**: All API endpoints use Pydantic models
+- **Example**:
+  ```python
+  class UserLogin(BaseModel):
+      email: str
+      password: str
+  ```
+- **Benefits**: Type safety, automatic docs, validation errors
+
+---
+
+### 🗄️ Database Schema
+
+#### **Users Table**
+- **Columns**:
+  - `id`: Primary key
+  - `email`: Unique, indexed
+  - `name`: User's full name
+  - `hashed_password`: bcrypt hash
+  - `is_active`: Boolean flag
+  - `created_at`: Timestamp
+- **Relationships**: One-to-many with `websites`
+
+#### **Websites Table**
+- **Columns**:
+  - `id`: Primary key
+  - `url`: Website URL
+  - `name`: Display name
+  - `industry`: Business category
+  - `tone`: Chat tone (friendly/professional/technical)
+  - `is_verified`: Verification status
+  - `owner_id`: Foreign key to users
+  - `widget_config`: JSON with theme settings
+  - `created_at`, `last_scraped`: Timestamps
+- **Relationships**: 
+  - Belongs to `user`
+  - Has many `website_content`, `unanswered_questions`
+
+#### **Website_content Table**
+- **Columns**:
+  - `id`: Primary key
+  - `website_id`: Foreign key
+  - `page_url`: Source URL
+  - `content`: Extracted text
+  - `embedding`: JSON string of vector
+  - `created_at`: Timestamp
+- **Purpose**: Stores scraped content and embeddings for similarity search
+
+#### **Chat_sessions Table**
+- **Columns**:
+  - `id`: Primary key
+  - `website_id`: Foreign key
+  - `visitor_name`, `visitor_email`: Contact info
+  - `is_active`: Session status
+  - `needs_attention`: Flag for owner review
+  - `created_at`, `last_message_at`: Timestamps
+- **Purpose**: Track individual chat conversations
+
+#### **Unanswered_questions Table**
+- **Columns**:
+  - `id`: Primary key
+  - `website_id`: Foreign key
+  - `question`: User's question
+  - `session_id`: Related chat session
+  - `confidence_score`: AI confidence (0-1)
+  - `ai_response`: What AI attempted to answer
+  - `is_resolved`: Resolution status
+  - `manual_answer`: Admin's custom response
+  - `created_at`, `resolved_at`: Timestamps
+- **Purpose**: Track questions AI couldn't answer confidently
+
+#### **Vector Storage (FAISS)**
+- **Location**: `server/vector_db/` directory
+- **How it works**:
+  1. Content is converted to embeddings (vectors)
+  2. FAISS index stores vectors for fast similarity search
+  3. Query embedding compared to stored vectors
+  4. Most similar content retrieved
+- **Persistence**: Index saved to disk, loaded on startup
+
+---
+
+### 🤖 AI Engine
+
+#### **Rule-based AI**
+- **Location**: `server/app/services/ai_engine.py`
+- **How it works**:
+  1. Extract keywords from user question
+  2. Search for similar content in vector database
+  3. Generate response based on matched content
+  4. Apply tone/personality based on website settings
+- **Fallback**: If confidence < 0.3, escalate to owner
+
+#### **Embeddings Generation**
+- **Method**: Semantic Vector Embeddings
+- **Model**: `all-MiniLM-L6-v2` via Sentence-Transformers
+- **Process**:
+  1. Text is preprocessed and tokenized
+  2. 384-dimensional dense vectors are generated
+  3. Vectors capture semantic meaning, not just keyword frequency
+- **Storage**: Vectors stored in FAISS (IndexHNSWFlat) and cached in `embeddings_cache.pkl`
+
+#### **Hybrid Retrieval Architecture**
+- **Algorithm**: BM25 + FAISS (Semantic) + Rule-based Boosting
+- **Process**:
+  1. **Keyword Match**: BM25Okapi calculates term-frequency relevance (modern TF-IDF successor)
+  2. **Semantic Match**: FAISS performs ultra-fast HNSW similarity search on dense vectors
+  3. **Re-Ranking**: Cross-Encoders (`ms-marco-MiniLM-L-6-v2`) re-evaluate top candidates for precision
+  4. **Score Fusion**: Weights (e.g., 60% Semantic / 25% Keyword / 15% Rules) combine scores for final ranking
+- **Threshold**: Confidence scores dynamically adjusted based on query intent and industry matching
+
+#### **Context-aware Responses**
+- **Implementation**: Combines multiple relevant content pieces
+- **Process**:
+  1. Find top 3 similar content pieces
+  2. Combine context
+  3. Generate coherent response
+  4. Apply website tone
+- **Personalization**: Uses website industry and tone settings
+
+#### **Owner Escalation Logic**
+- **Trigger**: Confidence score < 0.3
+- **Actions**:
+  1. Mark session as `needs_attention`
+  2. Create `unanswered_question` record
+  3. Send email notification to owner
+  4. Provide fallback response to visitor
+- **Dashboard**: Owner sees flagged questions in Unanswered Questions page
+
+#### **Phase 3: Persistent Memory Architecture** 🧠
+- **Database Models**:
+  - **LeadProfile** (`server/app/models/lead.py`):
+    - Stores cross-session patient data per email
+    - Fields: `health_summary`, `known_conditions`, `total_sessions`, `last_interaction`
+    - One-to-many relationship with `ChatSession` via email
+  - **SessionSummary** (`server/app/models/chat_session.py`):
+    - AI-generated summary for each session
+    - Fields: `summary_text`, `extracted_symptoms`, `triage_result`, `recommended_actions`
+    - One-to-one relationship with `ChatSession`
+
+- **Session Analyzer** (`server/app/services/session_analyzer.py`):
+  - **Trigger**: Background task every 5 messages or on escalation
+  - **Process**:
+    1. Fetches complete session conversation
+    2. Calls Gemini with structured prompt to extract JSON
+    3. Creates/updates `SessionSummary` record
+    4. Syncs insights to persistent `LeadProfile`
+    5. Merges unique symptoms into `known_conditions`
+  - **Smart Storage**: Keeps last 10 session summaries to prevent database bloat
+
+- **Memory-Aware Response Flow**:
+  1. **AIEngine** (`server/app/services/ai_engine.py`):
+     - Loads `LeadProfile` by visitor_email
+     - Passes `persistent_history` to `MedicalOrchestrator`
+  2. **MedicalOrchestrator** (`server/app/services/medical_orchestrator.py`):
+     - `_rebuild_context()` seeds `PatientContext` from persistent history
+     - Extracts age via regex: `Age:\s?(\d+)` or `(\d+)\s?-year-old`
+     - Pre-populates historical conditions into context
+  3. **Result**: Returning patients skip redundant demographic questions
+
+- **Admin CRM API** (`server/app/api/leads.py`):
+  - `GET /api/leads/profiles`: List all patient profiles with summaries
+  - `GET /api/leads/profile/{email}`: Detailed timeline with per-session summaries
+  - **Use Case**: Admin reviews patient journey before manual intervention
+
+#### **Chat Dataset & Knowledge Bases**
+- **Dataset Name**: **General Conversational Dataset** (Custom & Multi-tone)
+- **Sourced Data**: Custom dataset (`chat_dataset.json`) containing common conversational patterns, greetings, and fallback responses.
+- **Advanced Training**: `advanced_chat_dataset.py` includes industry-specific scenarios (E-commerce, Healthcare, Real Estate, SaaS) and multi-turn conversation flows.
+- **Specialized Knowledge Bases** (Integrated):
+  - **CLINC150**: 22,500 training examples for intent classification (150 categories).
+#### **Medical & Specialized Knowledge Bases** 
+- **Mega Dataset**: 12,465+ high-quality medical records from curated sources:
+  - **MedQuAD** (2,572 Q&A): Official NIH/NLM information on 2,500+ conditions.
+  - **HealthTap / QuestionDoctor** (5,679 Q&A): Professional doctor consultations.
+  - **PubMedQA** (1,000 Q&A): Evidence-based research summaries.
+  - **iCliniq & eHealthForum** (630+ Q&A): Community-driven professional advice.
+- **SymCAT**: 1,000+ symptom-to-disease mappings for diagnostic logic.
+- **CLINC150**: 22,500 training examples for intent classification (150 categories).
+- **Roman Urdu Corpus**: 20 pairs for English-Urdu bilingual support.
+- **Usage**: Hybrid retrieval across all sources with dynamic confidence thresholds.
+
+---
+
+### 🌐 Web Scraping
+
+#### **BeautifulSoup HTML Parsing**
+- **Location**: `server/app/services/scraper.py`
+- **Process**:
+  1. Fetch HTML with `requests` library
+  2. Parse with BeautifulSoup
+  3. Extract text from relevant tags (p, h1-h6, li, etc.)
+  4. Clean and normalize text
+- **Filtering**: Removes scripts, styles, navigation elements
+
+#### **Sitemap Parsing**
+- **How it works**:
+  1. Fetch `/sitemap.xml` from website
+  2. Parse XML to extract all URLs
+  3. Filter for relevant pages (exclude images, PDFs)
+  4. Return list of URLs to scrape
+- **Fallback**: If no sitemap, crawl from homepage
+
+#### **Content Extraction**
+- **Strategy**:
+  - Prioritize main content areas
+  - Remove boilerplate (headers, footers, ads)
+  - Extract metadata (title, description)
+  - Preserve structure (headings hierarchy)
+- **Output**: Clean text suitable for embedding
+
+#### **Async Processing**
+- **Implementation**: FastAPI background tasks
+- **Benefits**:
+  - Non-blocking API responses
+  - Parallel URL scraping
+  - Better resource utilization
+- **Status Tracking**: Updates `last_scraped` timestamp
+
+---
+
+### 💬 Chat System
+
+#### **Real-time Chat Widget**
+- **Technology**: Socket.IO for WebSocket connections
+- **Flow**:
+  1. Visitor opens chat widget
+  2. WebSocket connection established
+  3. Messages sent/received in real-time
+  4. AI processes and responds instantly
+- **Persistence**: Messages stored in `chat_messages` table
+
+#### **Contact Owner Functionality**
+- **Trigger**: Visitor clicks "Contact Owner" or AI escalates
+- **Process**:
+  1. Collect visitor email
+  2. Mark session as `needs_attention`
+  3. Send email notification to website owner
+  4. Owner can respond via dashboard
+- **Email Template**: Includes visitor info, question, and dashboard link
+
+#### **Lead Generation**
+- **Data Collected**:
+  - Visitor name
+  - Email address
+  - Questions asked
+  - Pages visited
+  - Session duration
+- **Storage**: `chat_sessions` table with visitor details
+- **Export**: Available in Dashboard for CRM integration
+
+#### **Email Notifications**
+- **Configuration**: SMTP settings in `.env`
+- **Triggers**:
+  - New unanswered question
+  - Visitor requests contact
+  - Low confidence responses
+- **Template**: HTML email with branding and action links
+
+### 🏥 Healthcare Intelligence (v2.0)
+- **Medical Orchestrator**: A sophisticated multi-turn agent that:
+  - **Rebuilds Context**: Chronologically tracks age, symptoms, and duration over multiple turns.
+  - **Negation Engine**: Robust regex-based detection to handle phrases like *"no fever"* or *"don't have a headache"*.
+  - **Risk Assessment**: Classifies queries (Low/High risk) and triggers emergency protocols instantly.
+- **Hybrid Retrieval System**:
+  - **Algorithm**: Semantic (FAISS) + Keyword (BM25) with specialized boosting.
+  - **Stability**: **Safe Mode** enforced for Mac environments using stable simple-embeddings.
+  - **Optimized Recall**: Lowered threshold (0.45) for maximum information retrieval while maintaining strict safety disclaimers.
+- **Professional Guards**:
+  - **Metadata Guard**: Prevents irrelevant routing when the user provides pure context (age/duration).
+  - **Safety Guard**: Mandatory safety validation and dynamic disclaimers on 100% of outgoing AI responses.
+
+## 🔄 **RECENT FIXES & IMPROVEMENTS**
+
+### Database Schema Updates
+- ✅ Added `name` column to `users` table
+- ✅ Added `tone` column to `websites` table
+- ✅ Fixed password hashing (bcrypt 4.1.2 compatibility)
+- ✅ Set temporary passwords for existing users: `TempPassword123!`
+
+### API Validation Fixes
+- ✅ Fixed nullable fields in Pydantic models (`Optional[str]`)
+- ✅ Updated `UnansweredQuestionResponse` model
+- ✅ Proper handling of `None` values in responses
+
+### Client UI/UX Overhaul
+- ✅ Modern design system with custom Tailwind config
+- ✅ Redesigned all pages: Login, Register, Dashboard, Settings, Chat Management, Content Manager, Unanswered Questions
+- ✅ Consistent color palette and typography
+- ✅ Responsive layout with sidebar navigation
+- ✅ Smooth animations and transitions
+- ✅ Glass morphism effects and modern card designs
+
+### Build & Deployment
+- ✅ Fixed CSS build errors (theme() function for custom colors)
+- ✅ Fixed missing icon imports (Clock from lucide-react)
+- ✅ Production build verified and passing
+- ✅ Development server running smoothly
+
+### Codebase Restructuring & Maintenance
+- ✅ **Architecture Cleanup**: Relocated 50+ files into dedicated `server/tests/` and `server/scripts/` directories, keeping the root clean.
+- ✅ **Security Hardening**: Added `.gitignore` to both client/server to protect credentials and ignore build artifacts.
+- ✅ **Optimized Logging**: Removed bulky static log files and temporary caches.
+
+### 🏥 Medical Intelligence & Mega Dataset
+- ✅ **12,465 Records Integrated**: Successfully consolidated XML/JSON from 5+ global medical sources.
+- ✅ **Negation Handling**: Fixed the "No fever" bug—system now correctly excludes denied symptoms.
+- ✅ **Metadata Guard**: Eliminated hallucinations (like irrelevant Autism suggestions) during context gathering.
+- ✅ **Disclaimer Standardization**: Guaranteed professional safety disclaimers on every single turn.
+- ✅ **Real-Life Scenario Verified**: Passed 6-turn interaction test with 100% context retention and accurate triage.
+
+---
+
+## 🚀 **CURRENT SYSTEM ADVANTAGES**
+
+✅ **Zero External Dependencies** - Works without API keys  
+✅ **Fast Setup** - No complex model downloads  
+✅ **Lightweight** - Minimal resource usage  
+✅ **Production Ready** - Complete authentication & security  
+✅ **Scalable Architecture** - Easy to upgrade components  
+✅ **Modern UI** - Industry-standard design and UX  
+✅ **Type Safe** - Pydantic validation throughout  
+✅ **Real-time** - WebSocket-based chat  
+
+---
+
+## 📈 **UPGRADE PATH**
+
+
+### Phase 1: Enhanced NLP (STRICTLY IMPLEMENTED ✅)
+- **Status**: Completed
+- **Method**: Replaced simple fallback embeddings with `all-MiniLM-L6-v2`
+- **Impact**: Significant improvement in semantic understanding and multi-phrase matching
+
+### Phase 2: Global Response Plane (STABLE ✅)
+- **Status**: Completed (December 2025)
+- **Architecture**: 4-Layer orchestration system
+- **Components**:
+  1. **Layer 1 - Language Gateway**: Detects English, Urdu, and Roman Urdu
+  2. **Layer 2 - Hybrid Intent Classifier**: Distinguishes FAQ, RAG, Industry Knowledge, and Creative intents
+  3. **Layer 3 - Dynamic Router**: Routes to appropriate handlers based on confidence
+  4. **Layer 4 - Adaptive Translation**: Translates responses back to user's language
+- **Hardening**: Dependency fallbacks for `spacy`, `pydantic`, `psutil`
+- **Impact**: Robust multi-language support with intelligent intent-based routing
+
+### Phase 3: Persistent Memory & CRM Integration (COMPLETED ✅)
+- **Status**: Completed (December 2025)
+- **Database Models**:
+  - `LeadProfile`: Cross-session patient profiles with health summaries and conditions
+  - `SessionSummary`: AI-generated summaries per chat session
+- **Core Services**:
+  - `SessionAnalyzer`: Gemini-powered session summarization
+  - Background analysis trigger (every 5 messages or on escalation)
+- **Memory Integration**:
+  - `AIEngine` loads persistent history for returning visitors
+  - `MedicalOrchestrator` seeds context (age, conditions) from past sessions
+- **Admin API**:
+  - `GET /api/leads/profiles` - List all patient profiles
+  - `GET /api/leads/profile/{email}` - Detailed patient timeline
+- **Impact**: Continuous healthcare consultations without redundant questions
+
+### Phase 4: Strict Multi-Tenant SaaS Architecture (COMPLETED ✅)
+- **Status**: Completed (December 2025)
+- **High-Performance Architecture**:
+  - **SaaS Core**: Strict Tenant Isolation via `TenantConfigService` & `SecurityService`.
+  - **8-Engine Orchestration**: `MedicalOrchestrator` coordinates Context, Intent, Reasoning, Routing, Execution, Policy, and Unanswered flows.
+- **Components**:
+  - **IntentClassifierPro**: MiniLM + LightGBM (Simulated) for ultra-fast intent detection.
+  - **ReasoningEngine**: Hybrid Rules + Platt Scaling for risk analysis.
+  - **ClarificationEngine**: Automatically resolves ambiguous queries ("pain" -> "where?").
+  - **UnansweredQuestionService**: Manages lifecycle of low-confidence queries -> Admin Tickets.
+- **Security**: "Zero Trust" model with PII redaction, Injection blocking, and mandatory Disclaimers.
+- **Impact**: Enterprise-grade isolation, safety, and scalability.
+
+
+### Phase 3: Production Database
+```bash
+# Switch to PostgreSQL with pgvector extension
+DATABASE_URL="postgresql://user:pass@host:5432/db"
+# Install pgvector for native vector operations
+```
+
+### Phase 4: Advanced Analytics
+- User behavior tracking
+- Conversion funnel analysis
+- A/B testing for responses
+- Performance metrics dashboard
+
+---
+
+## 🔮 **FUTURE ENHANCEMENTS**
+
+### 🏥 Industry-Specific Specialization
+The system will be tailored for specific verticals with specialized knowledge bases and workflows:
+- **Healthcare**: 
+  - Symptom checking workflows
+  - Appointment scheduling integration
+  - HIPAA-compliant data handling
+- **Education**: 
+  - Student support and course inquiries
+  - LMS (Learning Management System) integration
+  - Multilingual support for diverse student bodies
+
+### 🗣️ Advanced Language Support
+- **Bilingual Capabilities**: Native support for **English** and **Urdu**.
+- **Mixed-Language Processing**: Ability to understand Roman Urdu (Urdu written in English script).
+- **Language Detection**: Automatic switching based on user input.
+
+### 🧠 Global Response Plane: 4-Layer Orchestration (NEW)
+The "Brain" of the bot that intelligently processes every message through four dynamic layers:
+1.  **Layer 1: Language Gateway**: Instantly detects input language (**English**, **Urdu**, or **Roman Urdu**).
+2.  **Layer 3: Hybrid Intent Detection**: Dynamically distinguishes between:
+    - **FAQ Plane**: High-confidence matching from the curated website FAQ database.
+    - **Scrape Plane (RAG)**: Context-aware retrieval from scraped web content.
+    - **Industry Plane**: Specialized datasets (e.g., the 10k Healthcare Mega-Dataset).
+    - **Creative Plane**: Generative synthesis for complex intents.
+3.  **Layer 3: Dynamic Router & Handler**: Efficiently executes the highest-confidence handler for the detected intent.
+4.  **Layer 4: Adaptive Translation & Tone**: Automatically translates English intelligence back into the user's detected language/flavor (Urdu/Roman Urdu) while applying the brand's unique tone.
+
+### 💡 Recommended Technical Improvements (Agent Suggestions)
+- **Hybrid Search Architecture**: Combine vector search (semantic) with keyword search (BM25) to ensure specific names and terms are never missed.
+- **Voice Interface**: Add Speech-to-Text (STT) and Text-to-Speech (TTS) for accessibility in both English and Urdu.
+- **Multi-Channel Deployment**: Extend the chatbot beyond the web widget to **WhatsApp**, **Facebook Messenger**, and **Telegram**.
+- **Active Learning Loop**: Allow admins to correct "Low Confidence" answers, automatically training the system to improve over time.
+
+---
+
+## 🎉 **CONCLUSION**
+
+Our implementation successfully delivers:
+- **Complete SaaS platform** ✅
+- **Working chat widget** ✅  
+- **User management** ✅
+- **Website verification** ✅
+- **Content scraping** ✅
+- **AI responses** ✅
+- **Lead generation** ✅
+- **Email notifications** ✅
+- **Modern UI/UX** ✅
+- **Production-ready security** ✅
+- **4-Layer Global Response Plane** ✅ (Phase 2)
+- **Multi-language support (English, Urdu, Roman Urdu)** ✅ (Phase 2)
+- **10k+ Healthcare dataset integration** ✅ (Phase 2)
+- **Persistent Memory & Cross-Session Context** ✅ (Phase 3)
+- **AI-Powered Session Summarization** ✅ (Phase 3)
+- **Patient Timeline & Health Tracking** ✅ (Phase 3)
+
+The system is **fully functional** and provides an **enterprise-grade healthcare chatbot** with continuous conversation memory and CRM integration!
+
+---
+
+## 📝 **Quick Start Guide**
+
+### Development Setup
+```bash
+# Backend
+cd server
+python -m venv venv
+source venv/bin/activate  # On Windows: venv\Scripts\activate
+pip install -r requirements.txt
+uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
+
+# Frontend
+cd client
+npm install
+npm run dev
+```
+
+### Default Login
+- **Email**: `raza@gmail.com`
+- **Password**: `TempPassword123!`
+
+### Environment Variables
+Create `server/.env`:
+```env
+DATABASE_URL=postgresql://user:pass@localhost:5432/ai_agent_db
+SECRET_KEY=your-secret-key-here
+OPENAI_API_KEY=optional-for-future-use
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USER=your-email@gmail.com
+SMTP_PASSWORD=your-app-password
+```
+
+### Deployment
+```bash
+# Build frontend
+cd client && npm run build
+
+# Deploy backend (example with Render)
+# Set environment variables in Render dashboard
+# Deploy from GitHub repository
+```

INFRASTRUCTURE_GUIDE.md

@@ -0,0 +1,438 @@
+# GPU & Cloud Infrastructure Guide
+## Production Requirements & Cost Analysis
+
+---
+
+## 🎯 TL;DR Recommendations
+
+**For Production (Running Models)**:
+- ✅ **CPU-only is fine!** No GPU needed for inference
+- ✅ Use serverless/API-based ML (Hugging Face, Replicate)
+- ✅ Cloud: AWS, Google Cloud, or DigitalOcean
+- 💰 Estimated cost: $50-200/month
+
+**For Training (One-time setup)**:
+- ⚠️ GPU recommended but not required
+- ✅ Use Google Colab Pro ($10/month) for training
+- ✅ Or train on your local machine (slower but free)
+
+---
+
+## 📊 Detailed Breakdown
+
+### Production Inference (What Users Hit)
+
+#### ❌ **You DON'T Need GPU For**:
+1. **Sentiment Analysis** - CPU inference is fast enough
+2. **NER (Named Entity Recognition)** - spaCy runs on CPU
+3. **Response Streaming** - Just API calls
+4. **Rate Limiting** - Pure logic, no ML
+5. **Analytics** - Database queries
+6. **Dark Mode** - Frontend only
+7. **Auto-FAQ** - Uses GPT-4 API (already hosted)
+
+#### ✅ **What You Actually Need**:
+- **CPU**: 4-8 cores (good enough!)
+- **RAM**: 8-16 GB
+- **Storage**: 50-100 GB SSD
+- **Redis**: For caching (can be shared)
+
+**Why No GPU?**:
+```python
+# Small models run fast on CPU
+# Example: BERT sentiment analysis
+import torch
+from transformers import pipeline
+
+# CPU inference
+sentiment = pipeline("sentiment-analysis", device=-1)  # -1 = CPU
+result = sentiment("I love this product!")
+# Takes: ~50-100ms on CPU ✅
+# Takes: ~10-20ms on GPU (not worth the cost!)
+
+# For 1000 requests/day:
+# CPU cost: $50/month ✅
+# GPU cost: $500/month ❌ (10x more expensive!)
+```
+
+---
+
+## 🏋️ Training (One-Time Setup)
+
+### Option 1: **Google Colab Pro** (Recommended)
+**Cost**: $10/month  
+**GPU**: Tesla T4 or better  
+**Use For**: Initial model training
+
+```python
+# Train in Colab, export model, run on CPU
+# 1. Train sentiment model (30 min on GPU)
+# 2. Export model files
+# 3. Load in your CPU server (instant inference)
+```
+
+**Pros**:
+- ✅ Cheap ($10/month)
+- ✅ Easy setup
+- ✅ Good GPUs
+- ✅ Cancel anytime
+
+**Cons**:
+- ⚠️ Session limits (12 hours)
+- ⚠️ Need to re-run if disconnected
+
+---
+
+### Option 2: **Cloud GPU (On-Demand)**
+**Use When**: Training large models (>1B parameters)
+
+| Provider | GPU Type | Cost/hour | Best For |
+|----------|----------|-----------|----------|
+| **Vast.ai** | RTX 4090 | $0.25/hr | Cheapest |
+| **RunPod** | A100 | $1.00/hr | Best Value |
+| **Lambda Labs** | A6000 | $0.50/hr | Reliable |
+| **AWS EC2** | A10G | $1.50/hr | Enterprise |
+
+**Example Cost**:
+```
+Training Time: 4 hours
+Vast.ai RTX 4090: 4 × $0.25 = $1.00 ✅
+AWS p3.2xlarge: 4 × $3.06 = $12.24 ❌
+```
+
+---
+
+### Option 3: **CPU-Only Training** (Free!)
+**Use When**: Budget is tight
+
+```python
+# Takes longer but works!
+# Sentiment model training:
+# - GPU: 30 minutes
+# - CPU: 3-4 hours (overnight)
+
+# Still totally viable:
+from transformers import Trainer
+
+trainer = Trainer(
+    model=model,
+    args=training_args,
+    train_dataset=train_data,
+    # Will use CPU automatically
+)
+
+trainer.train()  # Go have dinner, come back to trained model
+```
+
+---
+
+## ☁️ Cloud Provider Recommendations
+
+### For Small-Medium Scale (< 10K users/month)
+
+#### **Option A: DigitalOcean** (Simplest)
+```
+Recommended Plan:
+- 4 vCPU, 8GB RAM: $48/month
+- Managed Redis: $15/month
+- Managed PostgreSQL: $15/month
+─────────────────────────
+Total: $78/month
+```
+
+**Pros**:
+- ✅ Simple setup
+- ✅ Fixed pricing
+- ✅ Good docs
+- ✅ Managed databases
+
+**Cons**:
+- ⚠️ Limited auto-scaling
+- ⚠️ No GPU options
+
+---
+
+#### **Option B: AWS Lightsail** (AWS on Easy Mode)
+```
+Recommended Setup:
+- App Server (4GB): $40/month
+- Redis (1GB): $10/month
+- PostgreSQL (2GB): $15/month
+─────────────────────────
+Total: $65/month
+```
+
+**Pros**:
+- ✅ Cheaper than EC2
+- ✅ Simpler than EC2
+- ✅ AWS ecosystem access
+- ✅ Easy scaling
+
+**Cons**:
+- ⚠️ Limited to AWS regions
+
+---
+
+#### **Option C: Railway** (Developer Friendly)
+```
+Recommended:
+- Hobby Plan: $5/month
+- Pay per usage: ~$20-40/month
+─────────────────────────
+Total: $25-45/month
+```
+
+**Pros**:
+- ✅ Very cheap
+- ✅ Auto-deploy from GitHub
+- ✅ Built-in Redis/Postgres
+- ✅ Great DX
+
+**Cons**:
+- ⚠️ Usage-based can surprise
+- ⚠️ Younger platform
+
+---
+
+### For Large Scale (10K+ users/month)
+
+#### **AWS** (Industry Standard)
+```
+Production Setup:
+- ECS Fargate (2 vCPU, 4GB): $50/month
+- ElastiCache Redis: $30/month
+- RDS PostgreSQL: $40/month
+- Load Balancer: $20/month
+─────────────────────────
+Total: $140/month (+auto-scaling)
+```
+
+**Pros**:
+- ✅ Best auto-scaling
+- ✅ 99.99% uptime
+- ✅ Global CDN
+- ✅ Enterprise support
+
+**Cons**:
+- ❌ Complex setup
+- ❌ Can get expensive
+- ❌ Steep learning curve
+
+---
+
+#### **Google Cloud Platform**
+```
+Production Setup:
+- Cloud Run (auto-scale): $30-60/month
+- Memorystore (Redis): $35/month
+- Cloud SQL: $40/month
+─────────────────────────
+Total: $105-135/month
+```
+
+**Pros**:
+- ✅ Great for ML (Vertex AI)
+- ✅ Good auto-scaling
+- ✅ Free tier generous
+- ✅ Good documentation
+
+**Cons**:
+- ⚠️ Less popular than AWS
+- ⚠️ Some services expensive
+
+---
+
+## 💰 Total Cost Breakdown
+
+### Minimal Setup (MVP)
+```
+Railway/Render:       $30/month
+Hugging Face API:     $0 (free tier)
+Gemini API:           $20/month (pay-as-go)
+Domain + SSL:         $15/year
+──────────────────────────────
+Total: ~$50-60/month
+```
+
+### Recommended Setup
+```
+DigitalOcean Droplet: $48/month
+Managed Redis:        $15/month
+Managed PostgreSQL:   $15/month
+Gemini API:           $30/month
+Monitoring (DataDog): $15/month
+──────────────────────────────
+Total: ~$123/month
+```
+
+### Enterprise Setup
+```
+AWS ECS/Fargate:      $100/month
+ElastiCache:          $30/month
+RDS:                  $40/month
+CloudWatch:           $10/month
+Gemini API:           $50/month
+──────────────────────────────
+Total: ~$230/month
+```
+
+---
+
+## 🎯 My Recommendation for You
+
+Based on your current setup, here's what I suggest:
+
+### **Phase 1: Start Simple (Month 1-3)**
+```yaml
+Platform: Railway or Render
+Why: 
+  - Easy deployment from GitHub
+  - Built-in Redis/PostgreSQL
+  - Auto-scaling included
+  - $30-50/month total
+
+ML Strategy:
+  - Use Hugging Face Inference API (free tier)
+  - Use Gemini API for main responses
+  - No GPU needed!
+```
+
+### **Phase 2: Grow (Month 4-6)**
+```yaml
+Platform: DigitalOcean
+Why:
+  - More control
+  - Better performance
+  - Still simple
+  - ~$100/month
+
+ML Strategy:
+  - Host small models on CPU (sentiment, NER)
+  - Keep using Gemini API
+  - Train models on Google Colab Pro
+```
+
+### **Phase 3: Scale (Month 7+)**
+```yaml
+Platform: AWS or GCP
+Why:
+  - Need auto-scaling
+  - Global users
+  - 99.9%+ uptime required
+  - $200-500/month
+
+ML Strategy:
+  - Custom model deployment
+  - Edge caching (CloudFront/Cloud CDN)
+  - Multi-region
+```
+
+---
+
+## 🚀 Optimized Architecture (No GPU Needed!)
+
+```
+┌─────────────────────────────────────────┐
+│         Your Application Server          │
+│         (CPU-only, 4 cores, 8GB)        │
+│                                          │
+│  ┌────────────────────────────────┐    │
+│  │  Sentiment: Hugging Face API   │    │
+│  │  NER: spaCy (CPU)              │    │
+│  │  Embedding: Sentence-BERT (CPU)│    │
+│  │  LLM: Gemini API               │    │
+│  └────────────────────────────────┘    │
+└─────────────────────────────────────────┘
+           │                    │
+           ▼                    ▼
+    ┌──────────┐          ┌──────────┐
+    │  Redis   │          │ Postgres │
+    │  Cache   │          │   DB     │
+    └──────────┘          └──────────┘
+```
+
+**Why This Works**:
+1. API-based ML (Hugging Face, Gemini) = No GPU
+2. Small models (spaCy, BERT) = Fast on CPU
+3. Caching (Redis) = Even faster
+4. Total cost: **$50-100/month** instead of $500+!
+
+---
+
+## 🧪 Performance Comparison
+
+### Sentiment Analysis (per request)
+| Method | Time | Cost/month (1000 req/day) |
+|--------|------|---------------------------|
+| **CPU (Local)** | 50ms | $50 |
+| **GPU (Local)** | 10ms | $500 |
+| **HF API** | 100ms | $0 (free tier) |
+
+**Winner**: CPU or HF API ✅
+
+---
+
+### NER Extraction
+| Method | Time | Cost/month |
+|--------|------|------------|
+| **spaCy CPU** | 30ms | $50 |
+| **spaCy GPU** | 10ms | $500 |
+| **Cloud API** | 80ms | $20 |
+
+**Winner**: spaCy CPU ✅
+
+---
+
+## ✅ Final Recommendation
+
+**Start Here**:
+1. ✅ Deploy on **Railway** or **Render** ($30/month)
+2. ✅ Use **Hugging Face API** for sentiment/NER (free)
+3. ✅ Use **Gemini API** for LLM responses (pay-as-go)
+4. ✅ Train models on **Google Colab Pro** ($10/month)
+5. ✅ Scale to DigitalOcean when needed ($100/month)
+
+**You DON'T Need**:
+- ❌ GPU server ($500+/month)
+- ❌ AWS immediately (too complex)
+- ❌ Expensive ML hosting
+
+**Total Starting Cost**: **$40-60/month**  
+**Can handle**: **1,000-10,000 users/month**  
+**Latency**: **< 200ms average**
+
+---
+
+## 📝 Quick Start Command
+
+```bash
+# 1. Install dependencies (no GPU needed!)
+pip install torch transformers spacy sentence-transformers --index-url https://download.pytorch.org/whl/cpu
+
+# 2. Download models (run once)
+python -m spacy download en_core_web_sm
+python -c "from sentence_transformers import SentenceTransformer; SentenceTransformer('all-MiniLM-L6-v2')"
+
+# 3. Deploy to Railway
+git push railway main
+
+# Total time: 10 minutes ✅
+# Total cost: $30/month ✅
+```
+
+---
+
+## 🎯 Bottom Line
+
+**For your customer agent platform**:
+- ✅ **NO GPU needed for production!**
+- ✅ Start with **Railway** ($30/month)
+- ✅ Use **API-based ML** (Hugging Face + Gemini)
+- ✅ Train on **Google Colab** ($10/month)
+- ✅ Total: **$40-60/month** to start
+
+**Scale later when needed** (1000+ users/day):
+- Move to **DigitalOcean** ($100/month)
+- Or **AWS** ($200+/month) for enterprise
+
+**You can start building TODAY with zero GPU investment!** 🚀

README.md

@@ -0,0 +1,112 @@
+# Customer Agent SaaS Platform
+
+A secure, efficient SaaS platform for embedding AI chat agents into websites. The agent uses NLP to answer questions based on scraped website content and performs agentic actions when information is missing.
+
+## Features
+
+- 🤖 AI-powered chat agents using OpenAI GPT
+- 🔍 Automatic website content scraping and indexing
+- 🎯 Vector similarity search for relevant responses
+- 🔐 Secure JWT authentication with httpOnly cookies
+- 📊 Real-time dashboard for website management
+- 🚀 Fast, scalable architecture with FastAPI + React
+
+## Tech Stack
+
+### Backend
+- FastAPI (REST + WebSocket)
+- NumPy for optimized vector operations
+- PostgreSQL for data storage
+- JWT with secure cookies
+- OpenAI for AI responses
+- BeautifulSoup for web scraping
+
+### Frontend
+- React with Vite
+- Tailwind CSS for styling
+- Axios for API communication
+- React Router for navigation
+
+## Quick Start
+
+### Backend Setup
+
+1. Navigate to server directory:
+```bash
+cd server
+```
+
+2. Install dependencies:
+```bash
+pip install -r requirements.txt
+```
+
+3. Set up environment variables in `.env`:
+```env
+DATABASE_URL=postgresql://user:password@localhost/customeragent
+SECRET_KEY=your-secret-key-here
+OPENAI_API_KEY=your-openai-key
+```
+
+4. Run the server:
+```bash
+uvicorn app.main:app --reload --port 8000
+```
+
+### Frontend Setup
+
+1. Navigate to client directory:
+```bash
+cd client
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Start development server:
+```bash
+npm run dev
+```
+
+## API Endpoints
+
+### Authentication
+- `POST /auth/register` - Register new user
+- `POST /auth/login` - Login user
+- `POST /auth/logout` - Logout user
+- `GET /auth/me` - Get current user
+
+### Websites
+- `GET /websites/` - Get user's websites
+- `POST /websites/` - Add new website
+- `POST /websites/{id}/verify` - Verify website ownership
+- `POST /websites/{id}/fetch-content` - Scrape website content
+
+### Chat
+- `POST /chat/` - Send message to AI agent
+
+## Deployment
+
+### Backend (Render/Railway)
+1. Connect your repository
+2. Set environment variables
+3. Deploy with automatic builds
+
+### Frontend (Vercel/Netlify)
+1. Connect your repository
+2. Set build command: `npm run build`
+3. Set publish directory: `dist`
+
+## Security Features
+
+- httpOnly cookies for JWT tokens
+- CORS protection
+- Password hashing with bcrypt
+- SQL injection protection with SQLAlchemy
+- Input validation with Pydantic
+
+## License
+
+MIT License

REFERENCE_ARCHITECTURE.md

@@ -0,0 +1,75 @@
+# Chatbot Deep Architecture Guide (CPU-Optimized)
+
+This document is the definitive guide to the query processing pipeline. It maps every byte of data from the initial HTTP request to the final AI response, detailing our **CPU-first model-aware strategy** designed for maximum efficiency without brute force.
+
+---
+
+## 🏗️ The 9-Layer Inference Flow
+
+We align our architecture into 9 logical layers, moving from lightweight rule-based processing to specialized CPU-bound LLM inference.
+
+```mermaid
+graph TD
+    L1[Layer 1: Input Processing - Regex] --> L2[Layer 2: Safety & Filter - Regex/Pattern]
+    L2 --> L3[Layer 3: Schema & Context Builder]
+    L3 --> L4[Layer 4: Intent Classification - TinyLlama]
+    L4 --> L5[Layer 5: Retrieval RAG - FAISS]
+    L5 --> L6[Layer 6: Prompt Context Merging]
+    L6 --> L7[Layer 7: Core Inference - Llama-3.2-3B]
+    L7 --> L8[Layer 8: Response Validation]
+    L8 --> L9[Layer 9: Post-Processing]
+    L9 --> Output((Final Answer))
+```
+
+---
+
+## 🔹 Layer-Wise Strategy & Model Selection
+
+| Layer | Responsibility | LLM Model | Technical Source / File |
+| :--- | :--- | :--- | :--- |
+| **L1** | Normalization & Cleaning | ❌ No | `nlp_processor.py` |
+| **L2** | **Safety & Policy Guard** | ❌ No / Regex | `content_filter.py` |
+| **L3** | **Schema & Context Builder** | ❌ No | `context_manager.py` |
+| **L4** | **Intent Classification** | ✅ **TinyLlama-1.1B** | `intent_classifier.py` |
+| **L5** | Retrieval (RAG) | ❌ No | `medical_retriever.py` |
+| **L6** | Prompt Architecture | ❌ No | `medical_orchestrator.py` |
+| **L7** | Core Reasoning | ✅ **Llama-3.2-3B** | `llm_service.py` (Local-First Priority) |
+| **L8** | Consistency Check | ⚠️ **Llama-3.1-3B** | `response_validator.py` |
+| **L9** | Output Polish | ❌ No | `tone_engine.py` |
+
+---
+
+## 🧠 Deep Execution Trace
+
+### **Intelligence Layers (L3, L4, L7)**
+*   **Layer 4: Intent Classification**
+    *   **Goal**: Determine if the query is `MEDICAL_INFO`, `GREETING`, or `FAQ`.
+    *   **Model**: **TinyLlama-1.1B**. It is ultra-light and specialized for single-label classification to save CPU the main answer.
+*   **Layer 2: Safety & Policy**
+    *   **Logic**: Uses Regex for high-speed blacklists + **Llama-3.1-3B** (optional) for ambiguous medical ethics/diagnosis requests.
+*   **Layer 7: Core LLM Inference**
+    *   **Model**: **Llama-3.2-3B-Instruct (Q4_K_M)**.
+    *   **Why**: Best-in-class reasoning for 3B parameter models, fits in 8-16GB RAM.
+
+### **Retrieval Layer (L5 - RAG)**
+*   **Engine**: FAISS Index (`medical_faiss_index.bin`).
+*   **Logic**: Top-3 to Top-5 results are fetched. This "grounded knowledge" is what allows a 3B model to outperform biased 70B models in specific medical domains.
+
+---
+
+## 🔄 The Data Transformation Cycle
+
+| Phase | Input | Processing | Output Data |
+| :--- | :--- | :--- | :--- |
+| **Preprocessing** | `"sar ma drd hy"` | Normalization | `"I have a headache"` (Translated) |
+| **Intent** | `"I have a headache"` | TinyLlama Classify | `Intent.MEDICAL_SYMPTOM` |
+| **RAG** | `MEDICAL_SYMPTOM` | FAISS Search | Top 5 CDC/MedQuAD docs |
+| **Synthesis** | `Prompt + Context` | Llama-3.2-3B | `"It sounds like a migraine..."` |
+| **Safety** | `LLM Response` | Policy Check | LLM Response + Disclaimer |
+
+---
+
+## ✅ Deployment Specs
+*   **Runtime**: `llama.cpp` (via `ctransformers` Python bindings).
+*   **Quantization**: `Q4_K_M` or `Q5_0` for optimal balance of speed and precision.
+*   **Hosting**: Oracle Free Tier / local CPU (Apple M-series or Intel Xeon).

SETUP.md

@@ -0,0 +1,158 @@
+# Customer Agent SaaS - Complete Setup Guide
+
+## 🚀 Quick Start (Development)
+
+### Prerequisites
+- Node.js 18+
+- Python 3.11+
+- PostgreSQL
+- OpenAI API Key
+
+### 1. Backend Setup
+```bash
+cd server
+pip install -r requirements.txt
+cp .env.example .env
+# Edit .env with your credentials
+uvicorn app.main:app --reload --port 8000
+```
+
+### 2. Frontend Setup
+```bash
+cd client
+npm install
+npm run dev
+```
+
+### 3. Database Setup
+```sql
+CREATE DATABASE customeragent;
+```
+
+## 🔧 Configuration
+
+### Environment Variables (.env)
+```env
+DATABASE_URL=postgresql://user:password@localhost/customeragent
+SECRET_KEY=your-secret-key-here
+OPENAI_API_KEY=sk-your-openai-key
+GOOGLE_CLIENT_ID=your-google-oauth-client-id
+GOOGLE_CLIENT_SECRET=your-google-oauth-secret
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USER=your-email@gmail.com
+SMTP_PASSWORD=your-app-password
+```
+
+## 📋 Features Implemented
+
+### ✅ Core Features
+- [x] JWT Authentication with httpOnly cookies
+- [x] Google OAuth integration
+- [x] Website management dashboard
+- [x] Script verification system
+- [x] Sitemap-based content scraping
+- [x] NumPy-optimized vector operations
+- [x] FAISS vector database
+- [x] AI-powered chat responses
+- [x] Agentic owner contact system
+- [x] Email notifications
+- [x] Real-time WebSocket chat
+- [x] Embeddable widget
+- [x] React Query for state management
+- [x] Framer Motion animations
+- [x] Tailwind CSS styling
+
+### 🎯 Workflow
+1. **User Registration** → Secure JWT auth
+2. **Add Website** → Domain verification
+3. **Install Script** → Verification check
+4. **Fetch Content** → Sitemap scraping
+5. **Process AI** → Vector embeddings
+6. **Live Chat** → AI responses + owner escalation
+
+## 🌐 Deployment
+
+### Frontend (Vercel/Netlify)
+```bash
+npm run build
+# Deploy dist/ folder
+```
+
+### Backend (Render/Railway)
+```bash
+# Use start.sh as entry point
+./start.sh
+```
+
+### Environment Variables (Production)
+```env
+DATABASE_URL=postgresql://...
+SECRET_KEY=production-secret-key
+OPENAI_API_KEY=sk-...
+FRONTEND_URL=https://your-domain.com
+BACKEND_URL=https://api.your-domain.com
+```
+
+## 🔗 API Endpoints
+
+### Authentication
+- `POST /auth/register` - User registration
+- `POST /auth/login` - User login
+- `POST /auth/logout` - User logout
+- `GET /auth/me` - Current user info
+
+### Websites
+- `GET /websites/` - List user websites
+- `POST /websites/` - Add new website
+- `POST /scrape/{id}/verify-script` - Verify widget installation
+- `POST /websites/{id}/fetch-content` - Scrape content
+- `POST /scrape/{id}/process-content` - Create embeddings
+
+### Chat & Actions
+- `POST /chat/` - Send chat message
+- `POST /actions/contact-owner` - Contact website owner
+- `WS /ws/{website_id}` - WebSocket chat
+
+## 🎨 Widget Integration
+
+Add to any website:
+```html
+<script src="https://your-domain.com/static/widget.js" data-website-id="123"></script>
+```
+
+## 🔒 Security Features
+
+- httpOnly JWT cookies (XSS protection)
+- CORS with specific origins
+- Password hashing (bcrypt)
+- SQL injection protection (SQLAlchemy)
+- Input validation (Pydantic)
+- Secure cookie settings
+
+## 📊 Tech Stack Summary
+
+**Frontend**: React + Vite + Tailwind + Framer Motion + React Query
+**Backend**: FastAPI + NumPy + FAISS + PostgreSQL + WebSockets
+**AI**: OpenAI GPT-3.5 + Vector Similarity Search
+**Auth**: JWT + Google OAuth + httpOnly Cookies
+**Deployment**: Vercel + Render/Railway
+
+## 🎯 Production Checklist
+
+- [ ] Update CORS origins in main.py
+- [ ] Set strong SECRET_KEY
+- [ ] Configure production database
+- [ ] Set up SMTP for emails
+- [ ] Configure Google OAuth
+- [ ] Test widget on live site
+- [ ] Monitor vector database performance
+- [ ] Set up error tracking
+
+## 🚀 Next Steps
+
+1. **Scale Vector DB**: Implement ChromaDB for larger datasets
+2. **Analytics**: Add chat analytics dashboard
+3. **Multi-language**: Support multiple languages
+4. **Custom Branding**: White-label widget options
+5. **Advanced AI**: Fine-tune models on website content

SYSTEM_ENHANCEMENTS.md

@@ -0,0 +1,919 @@
+# System Enhancement Roadmap
+## 30+ Actionable Improvements for Your Customer Agent Platform
+
+---
+
+## 🤖 AI & Machine Learning Enhancements
+
+### 1. **Sentiment Analysis**
+**What**: Detect user emotions (happy, frustrated, angry, confused)  
+**Why**: Prioritize unhappy customers, adjust tone  
+**Impact**: +35% customer satisfaction
+
+```python
+from transformers import pipeline
+
+class SentimentAnalyzer:
+    def __init__(self):
+        self.classifier = pipeline("sentiment-analysis")
+    
+    def analyze(self, text):
+        result = self.classifier(text)[0]
+        return {
+            'sentiment': result['label'],  # POSITIVE, NEGATIVE
+            'confidence': result['score'],
+            'urgency': 'high' if result['label'] == 'NEGATIVE' else 'normal'
+        }
+
+# Usage
+if sentiment['sentiment'] == 'NEGATIVE':
+    # Priority routing to human agent
+    # Use empathetic language
+    # Offer immediate assistance
+```
+
+**Benefits**:
+- Detect frustrated users early
+- Escalate to human agent automatically
+- Adjust bot tone based on emotion
+- Track satisfaction in real-time
+
+---
+
+### 2. **Intent Confidence Threshold**
+**What**: If intent confidence < 70%, ask clarifying question  
+**Why**: Reduce wrong answers
+
+```python
+intent_result = classify_intent(query)
+
+if intent_result.confidence < 0.7:
+    return {
+        'response': "I want to make sure I understand correctly. Are you asking about:",
+        'suggestions': [
+            "Product information",
+            "Pricing and fees",
+            "Technical support",
+            "Account management"
+        ]
+    }
+```
+
+---
+
+### 3. **Named Entity Recognition (NER)**
+**What**: Extract names, dates, products, locations from queries  
+**Why**: Better context understanding
+
+```python
+# Extract entities
+entities = extract_entities("I need to book appointment with Dr. Khan on Monday")
+# {
+#   'PERSON': ['Dr. Khan'],
+#   'DATE': ['Monday'],
+#   'ACTION': ['book appointment']
+# }
+
+# Use in response
+"I see you'd like to book an appointment with Dr. Khan on Monday. 
+Let me help you with that."
+```
+
+---
+
+### 4. **Custom Model Fine-tuning**
+**What**: Fine-tune small LLM on your specific data  
+**Why**: Better accuracy than generic models
+
+```python
+# Fine-tune on your data
+from transformers import AutoModelForCausalLM, TrainingArguments
+
+training_data = [
+    {"query": "What are your hours?", "response": "We're open 9 AM - 5 PM..."},
+    {"query": "How do I reset password?", "response": "Go to settings..."},
+    # ... your specific Q&A pairs
+]
+
+# Train model
+model = fine_tune_model(training_data)
+# Result: 40% better accuracy for your domain
+```
+
+---
+
+### 5. **Auto-FAQ Generation**
+**What**: Automatically suggest FAQ from frequent questions  
+**Why**: Reduce repeated queries
+
+```python
+class FAQSuggester:
+    def analyze_unanswered(self, days=30):
+        # Find questions asked 10+ times
+        frequent = db.query(UnansweredQuestion)\
+            .group_by('question_normalized')\
+            .having(func.count() >= 10)\
+            .all()
+        
+        return [
+            {
+                'question': q.question,
+                'frequency': q.asked_count,
+                'suggested_answer': generate_answer(q)  # Use LLM
+            }
+            for q in frequent
+        ]
+
+# Admin dashboard shows: "Top 10 questions to add to FAQ"
+```
+
+---
+
+## 📊 Analytics & Insights
+
+### 6. **Conversation Flow Analysis**
+**What**: Visualize common conversation paths  
+**Why**: Optimize chatbot flows
+
+```python
+# Track conversation patterns
+class FlowAnalyzer:
+    def analyze_paths(self):
+        flows = db.query(ChatSession).all()
+        
+        patterns = {
+            'greeting → product_question → pricing → contact': 45,
+            'greeting → support → technical_issue → resolved': 30,
+            'greeting → confused → escalated': 15
+        }
+        
+        return patterns
+
+# Visualization: Sankey diagram showing user journeys
+```
+
+---
+
+### 7. **Response Quality Scoring**
+**What**: Automatically rate bot response quality  
+**Why**: Identify weak areas
+
+```python
+def score_response(query, response, user_feedback):
+    scores = {
+        'relevance': calculate_similarity(query, response),
+        'completeness': check_question_answered(query, response),
+        'helpfulness': user_feedback or predict_helpfulness(response),
+        'response_time': measure_time()
+    }
+    
+    overall = sum(scores.values()) / len(scores)
+    
+    if overall < 0.6:
+        flag_for_review(query, response)
+    
+    return scores
+```
+
+---
+
+### 8. **A/B Testing Framework**
+**What**: Test different responses/strategies  
+**Why**: Data-driven improvements
+
+```python
+class ABTester:
+    experiments = {
+        'greeting_style': {
+            'A': "Hello! How can I help?",  # Formal
+            'B': "Hey there! 👋 What's up?"  # Casual
+        },
+        'response_length': {
+            'A': 'detailed',  # 100+ words
+            'B': 'concise'    # <50 words
+        }
+    }
+    
+    def track_metrics(self, variant):
+        # Track: satisfaction, time to resolution, conversion
+        pass
+
+# After 100 sessions: "Variant B has 15% higher satisfaction"
+```
+
+---
+
+### 9. **Conversion Tracking**
+**What**: Track journey from chat → conversion  
+**Why**: Measure ROI
+
+```python
+class ConversionTracker:
+    def track_funnel(self, session_id):
+        events = [
+            {'event': 'chat_started', 'timestamp': t1},
+            {'event': 'product_viewed', 'timestamp': t2},
+            {'event': 'pricing_asked', 'timestamp': t3},
+            {'event': 'contact_form_filled', 'timestamp': t4},
+            {'event': 'converted', 'timestamp': t5}  # Purchased/signed up
+        ]
+        
+        # Calculate: 
+        # - Time to conversion
+        # - Drop-off points
+        # - Chat contribution to sale
+```
+
+---
+
+### 10. **Heatmap Analytics**
+**What**: Show what users click/read most  
+**Why**: Optimize UI and content
+
+```javascript
+// Track user interactions
+const heatmap = {
+  'contact_button': 450,  // Most clicked
+  'faq_link': 320,
+  'pricing_table': 280,
+  'features_section': 150
+};
+
+// Visualization: Heatmap overlay on widget
+```
+
+---
+
+## 🎨 User Experience Enhancements
+
+### 11. **Smart Auto-Complete**
+**What**: Suggest completions as user types  
+**Why**: Faster queries, fewer typos
+
+```javascript
+const AutoComplete = ({ input, onSelect }) => {
+  const [suggestions, setSuggestions] = useState([]);
+  
+  useEffect(() => {
+    if (input.length > 2) {
+      // Fetch suggestions
+      getSuggestions(input).then(setSuggestions);
+    }
+  }, [input]);
+  
+  return (
+    <datalist id="suggestions">
+      {suggestions.map(s => (
+        <option value={s} />
+      ))}
+    </datalist>
+  );
+};
+```
+
+---
+
+### 12. **Rich Media Responses**
+**What**: Send images, videos, carousels  
+**Why**: Better engagement
+
+```python
+def generate_rich_response(query, answer):
+    if 'product' in query.lower():
+        return {
+            'text': answer,
+            'media': {
+                'type': 'carousel',
+                'items': [
+                    {
+                        'image': '/products/product1.jpg',
+                        'title': 'Product A',
+                        'price': '$99',
+                        'cta': 'View Details'
+                    }
+                ]
+            }
+        }
+```
+
+---
+
+### 13. **Typing Indicators with ETA**
+**What**: Show estimated response time  
+**Why**: Reduce perceived wait
+
+```jsx
+const SmartTypingIndicator = ({ startTime }) => {
+  const [eta, setEta] = useState(null);
+  
+  useEffect(() => {
+    // Calculate based on query complexity
+    const complexity = analyzeComplexity(query);
+    const estimatedTime = complexity === 'high' ? 8 : 3;
+    setEta(estimatedTime);
+  }, []);
+  
+  return (
+    <div>
+      <TypingDots />
+      <span>Estimated: {eta}s</span>
+    </div>
+  );
+};
+```
+
+---
+
+### 14. **Conversation Shortcuts**
+**What**: Quick actions for common tasks  
+**Why**: Reduce clicks
+
+```jsx
+const QuickActions = ({ context }) => {
+  const actions = {
+    'after_hours': [
+      { icon: '📧', text: 'Email Us', action: showContactForm },
+      { icon: '📞', text: 'Request Callback', action: scheduleCallback },
+      { icon: '❓', text: 'FAQs', action: showFAQs }
+    ],
+    'product_question': [
+      { icon: '📊', text: 'Compare', action: showComparison },
+      { icon: '💰', text: 'Pricing', action: showPricing },
+      { icon: '🎬', text: 'Demo', action: showDemo }
+    ]
+  };
+  
+  return actions[context]?.map(a => (
+    <button onClick={a.action}>{a.icon} {a.text}</button>
+  ));
+};
+```
+
+---
+
+### 15. **Proactive Chat Triggers**
+**What**: Auto-open chat based on behavior  
+**Why**: Increase engagement
+
+```javascript
+const ProactiveTriggers = () => {
+  // Trigger 1: User on pricing page for 30s
+  if (currentPage === '/pricing' && timeOnPage > 30) {
+    openChat("I see you're checking our pricing. Any questions?");
+  }
+  
+  // Trigger 2: User trying to leave (exit intent)
+  window.addEventListener('mouseout', (e) => {
+    if (e.clientY < 50) {
+      openChat("Wait! Need help with anything before you go?");
+    }
+  });
+  
+  // Trigger 3: User scrolled to bottom of FAQ
+  if (scrolledToBottom('/faq')) {
+    openChat("Didn't find what you were looking for?");
+  }
+};
+```
+
+---
+
+### 16. **Multi-Language Auto-Switch**
+**What**: Detect user language preference from browser  
+**Why**: Seamless experience
+
+```javascript
+const detectUserLanguage = () => {
+  const browserLang = navigator.language; // 'en-US', 'ur-PK'
+  const supportedLangs = ['en', 'ur'];
+  
+  const userLang = browserLang.split('-')[0];
+  
+  if (supportedLangs.includes(userLang)) {
+    setLanguage(userLang);
+    showGreeting(greetings[userLang]);
+  }
+};
+
+const greetings = {
+  'en': "Hello! How can I help you today?",
+  'ur': "��لسلام علیکم! میں آپ کی کیسے مدد کر سکتا ہوں؟"
+};
+```
+
+---
+
+## ⚡ Performance Optimizations
+
+### 17. **Response Streaming**
+**What**: Stream LLM responses word-by-word  
+**Why**: Feels 3x faster
+
+```python
+async def stream_response(query):
+    async for chunk in gemini.stream_generate(query):
+        yield chunk
+        await asyncio.sleep(0.05)  # Smooth streaming
+
+# Frontend
+for await (const chunk of fetchStream('/api/chat')) {
+  appendToMessage(chunk);
+}
+```
+
+---
+
+### 18. **Predictive Pre-fetching**
+**What**: Pre-load likely next questions  
+**Why**: Instant responses
+
+```python
+class PredictiveLoader:
+    def predict_next(self, current_query):
+        # ML model predicts likely follow-ups
+        predictions = model.predict(current_query)
+        
+        # Pre-fetch top 3 likely responses
+        for question in predictions[:3]:
+            cache.prefetch(question)
+
+# Example:
+# User asks: "What are your hours?"
+# Pre-fetch: "Where are you located?", "How do I contact?", "Do you have parking?"
+```
+
+---
+
+### 19. **Lazy Loading with Skeletons**
+**What**: Show skeleton UI while loading  
+**Why**: Perceived performance
+
+```jsx
+const MessageSkeleton = () => (
+  <div className="skeleton-message">
+    <div className="skeleton-avatar"></div>
+    <div className="skeleton-text">
+      <div className="skeleton-line"></div>
+      <div className="skeleton-line short"></div>
+    </div>
+  </div>
+);
+```
+
+---
+
+### 20. **Message Batching**
+**What**: Send multiple messages in one request  
+**Why**: Reduce network overhead
+
+```python
+# Instead of:
+send_message("Hello")
+send_message("How are you?")
+send_message("I need help")
+
+# Batch:
+send_messages([
+    {"text": "Hello", "timestamp": t1},
+    {"text": "How are you?", "timestamp": t2},
+    {"text": "I need help", "timestamp": t3}
+])
+```
+
+---
+
+## 🔒 Security & Compliance
+
+### 21. **Rate Limiting per IP**
+**What**: Prevent spam/abuse  
+**Why**: System protection
+
+```python
+from slowapi import Limiter
+from slowapi.util import get_remote_address
+
+limiter = Limiter(key_func=get_remote_address)
+
+@app.post("/api/chat")
+@limiter.limit("60/minute")  # 60 messages per minute
+async def chat(request: Request):
+    # Process message
+    pass
+
+# If exceeded: "Too many requests. Please wait 30 seconds."
+```
+
+---
+
+### 22. **Content Filtering**
+**What**: Block inappropriate content  
+**Why**: Safety and compliance
+
+```python
+class ContentFilter:
+    def filter(self, text):
+        # Check for:
+        # - Profanity
+        # - PII (credit cards, SSN)
+        # - Spam patterns
+        # - Malicious links
+        
+        if contains_profanity(text):
+            return "⚠️ Please keep conversation professional"
+        
+        if contains_pii(text):
+            return "⚠️ Please don't share sensitive information in chat"
+        
+        return text
+```
+
+---
+
+### 23. **Encrypted Message Storage**
+**What**: Encrypt chat history at rest  
+**Why**: Data protection
+
+```python
+from cryptography.fernet import Fernet
+
+class EncryptedChatStorage:
+    def __init__(self):
+        self.key = os.getenv('ENCRYPTION_KEY')
+        self.cipher = Fernet(self.key)
+    
+    def save_message(self, text):
+        encrypted = self.cipher.encrypt(text.encode())
+        db.save(encrypted)
+    
+    def read_message(self, encrypted):
+        return self.cipher.decrypt(encrypted).decode()
+```
+
+---
+
+### 24. **GDPR Data Export**
+**What**: Let users download their data  
+**Why**: Legal compliance
+
+```python
+@app.get("/api/user/export-data")
+async def export_user_data(email: str):
+    data = {
+        'chat_sessions': get_user_sessions(email),
+        'contact_requests': get_user_contacts(email),
+        'preferences': get_user_preferences(email)
+    }
+    
+    return {
+        'format': 'JSON',
+        'data': data,
+        'generated_at': datetime.now()
+    }
+```
+
+---
+
+## 🔔 Notification & Integration
+
+### 25. **Slack Integration**
+**What**: Send chat alerts to Slack  
+**Why**: Real-time team awareness
+
+```python
+def notify_slack(contact_request):
+    slack_webhook = os.getenv('SLACK_WEBHOOK')
+    
+    message = {
+        "text": f"🔔 New Contact Request",
+        "blocks": [
+            {
+                "type": "section",
+                "text": {
+                    "type": "mrkdwn",
+                    "text": f"*From:* {contact_request.name}\n*Email:* {contact_request.email}\n*Message:* {contact_request.message}"
+                }
+            }
+        ]
+    }
+    
+    requests.post(slack_webhook, json=message)
+```
+
+---
+
+### 26. **SMS Notifications**
+**What**: Send SMS for urgent requests  
+**Why**: Immediate response
+
+```python
+from twilio.rest import Client
+
+def send_urgent_sms(admin_phone, contact_request):
+    client = Client(account_sid, auth_token)
+    
+    message = client.messages.create(
+        to=admin_phone,
+        from_=twilio_phone,
+        body=f"🚨 Urgent chat from {contact_request.name}: {contact_request.message[:100]}"
+    )
+```
+
+---
+
+### 27. **CRM Integration**
+**What**: Sync contacts to CRM (Salesforce, HubSpot)  
+**Why**: Unified customer view
+
+```python
+def sync_to_crm(contact_request):
+    # HubSpot example
+    hubspot.contacts.create({
+        'email': contact_request.email,
+        'firstname': contact_request.name.split()[0],
+        'phone': contact_request.phone,
+        'chat_history': json.dumps(contact_request.chat_context),
+        'source': 'chat_widget'
+    })
+```
+
+---
+
+### 28. **WhatsApp Business Integration**
+**What**: Continue chat on WhatsApp  
+**Why**: Users prefer messaging apps
+
+```python
+@app.post("/api/chat/transfer-to-whatsapp")
+async def transfer_to_whatsapp(session_id: str, phone: str):
+    # Get chat history
+    session = get_session(session_id)
+    
+    # Create WhatsApp conversation
+    whatsapp_message = f"""
+    Continuing your chat conversation:
+    {format_chat_history(session.messages)}
+    
+    How can we help you further?
+    """
+    
+    send_whatsapp_message(phone, whatsapp_message)
+```
+
+---
+
+## 📱 Mobile & Accessibility
+
+### 29. **Progressive Web App (PWA)**
+**What**: Installable chat widget  
+**Why**: App-like experience
+
+```javascript
+// manifest.json
+{
+  "name": "Customer Support",
+  "short_name": "Support",
+  "start_url": "/chat",
+  "display": "standalone",
+  "icons": [...]
+}
+
+// Service worker for offline support
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => response || fetch(event.request))
+  );
+});
+```
+
+---
+
+### 30. **Screen Reader Support**
+**What**: Full accessibility (WCAG 2.1 AA)  
+**Why**: Inclusive design
+
+```jsx
+<div 
+  role="region" 
+  aria-label="Chat conversation"
+  aria-live="polite"
+>
+  {messages.map(msg => (
+    <div
+      role="article"
+      aria-label={msg.isUser ? "Your message" : "Bot response"}
+    >
+      <p>{msg.text}</p>
+    </div>
+  ))}
+</div>
+```
+
+---
+
+### 31. **Dark Mode**
+**What**: Theme switching  
+**Why**: Better UX, reduced eye strain
+
+```css
+:root {
+  --bg-color: #ffffff;
+  --text-color: #333333;
+}
+
+[data-theme="dark"] {
+  --bg-color: #1a1a1a;
+  --text-color: #ffffff;
+}
+
+.chat-widget {
+  background: var(--bg-color);
+  color: var(--text-color);
+}
+```
+
+---
+
+## 📈 Business Intelligence
+
+### 32. **ROI Calculator**
+**What**: Show chat attribution to revenue  
+**Why**: Prove value
+
+```python
+class ROICalculator:
+    def calculate(self, period='month'):
+        metrics = {
+            'chat_sessions': count_sessions(period),
+            'leads_generated': count_contact_forms(period),
+            'sales_attributed': count_conversions(period),
+            'cost_saved': calculate_support_cost_saved(period)
+        }
+        
+        revenue = metrics['sales_attributed'] * avg_sale_value
+        cost = gemini_api_cost + server_costs
+        
+        roi = (revenue - cost) / cost * 100
+        
+        return {
+            'roi_percentage': roi,
+            'revenue_generated': revenue,
+            'cost_per_lead': cost / metrics['leads_generated']
+        }
+
+# Dashboard: "Chat generated $15,000 revenue with 450% ROI this month"
+```
+
+---
+
+### 33. **Competitor Analysis**
+**What**: Compare your bot vs competitors  
+**Why**: Continuous improvement
+
+```python
+def benchmark_against_competitors():
+    your_metrics = {
+        'avg_response_time': 2.5,  # seconds
+        'resolution_rate': 75%,
+        'satisfaction_score': 4.2/5
+    }
+    
+    industry_avg = {
+        'avg_response_time': 8.0,
+        'resolution_rate': 60%,
+        'satisfaction_score': 3.8/5
+    }
+    
+    # You're 70% faster, 25% better resolution!
+```
+
+---
+
+## 🎓 Learning & Improvement
+
+### 34. **Reinforcement Learning from Feedback**
+**What**: Learn from thumbs up/down  
+**Why**: Auto-improvement
+
+```python
+class FeedbackLearner:
+    def learn_from_rating(self, query, response, rating):
+        if rating >= 4:
+            # Good response - reinforce
+            add_to_training_set(query, response, weight=1.5)
+        elif rating <= 2:
+            # Bad response - learn what not to do
+            flag_for_improvement(query, response)
+            
+            # Try alternative approach next time
+            alternatives = generate_alternatives(query)
+            test_alternatives(alternatives)
+```
+
+---
+
+### 35. **Weekly Performance Reports**
+**What**: Auto-generated insights email  
+**Why**: Stay informed
+
+```python
+def generate_weekly_report():
+    report = {
+        'total_chats': 1247,
+        'avg_satisfaction': 4.3,
+        'top_questions': [...],
+        'improvement_areas': [...],
+        'highlights': [
+            "Response time improved 15%",
+            "83 new FAQs suggested",
+            "Gemini usage reduced 40% (cost savings!)"
+        ]
+    }
+    
+    send_email(admin_email, render_template('weekly_report', report))
+```
+
+---
+
+## 🎯 Priority Implementation Matrix
+
+| Enhancement | Impact | Effort | Priority | ROI |
+|-------------|--------|--------|----------|-----|
+| **Sentiment Analysis** | High | Medium | ⭐⭐⭐⭐⭐ | Very High |
+| **Auto-FAQ Generation** | High | Low | ⭐⭐⭐⭐⭐ | Very High |
+| **Response Streaming** | High | Low | ⭐⭐⭐⭐⭐ | Very High |
+| **A/B Testing** | High | Medium | ⭐⭐⭐⭐ | High |
+| **Rich Media** | Medium | Medium | ⭐⭐⭐⭐ | High |
+| **CRM Integration** | High | High | ⭐⭐⭐ | Medium |
+| **PWA** | Medium | Medium | ⭐⭐⭐ | Medium |
+| **Custom Fine-tuning** | Very High | Very High | ⭐⭐ | Long-term |
+
+---
+
+## 📅 12-Month Roadmap
+
+### Months 1-3: Quick Wins
+- ✅ Sentiment analysis
+- ✅ Auto-FAQ generation
+- ✅ Response streaming
+- ✅ Rate limiting
+- ✅ Dark mode
+
+### Months 4-6: Engagement
+- ✅ Rich media responses
+- ✅ Proactive triggers
+- ✅ A/B testing
+- ✅ Conversation shortcuts
+- ✅ Multi-language auto-switch
+
+### Months 7-9: Integrations
+- ✅ CRM sync
+- ✅ Slack/SMS notifications
+- ✅ WhatsApp integration
+- ✅ Analytics dashboard
+
+### Months 10-12: Advanced AI
+- ✅ Custom model fine-tuning
+- ✅ Reinforcement learning
+- ✅ NER implementation
+- ✅ Predictive pre-fetching
+
+---
+
+## 💰 Expected Impact (Year 1)
+
+**Cost Savings**:
+- Gemini usage: -60% ($3,000/year)
+- Support tickets: -40% ($15,000/year)
+- **Total Savings: $18,000/year**
+
+**Revenue Impact**:
+- Lead generation: +45% (+$25,000/year)
+- Conversion rate: +20% (+$35,000/year)
+- **Total Revenue: +$60,000/year**
+
+**Operational**:
+- Response time: -70% (8s → 2.5s)
+- Resolution rate: +25% (60% → 75%)
+- Satisfaction: +30% (3.5 → 4.5/5)
+
+**ROI**: **$(60,000 + 18,000) - $5,000 (implementation) = $73,000 net gain**  
+**Return**: 1,460% in Year 1!
+
+---
+
+## ✅ Summary
+
+**Total Enhancements**: 35  
+**Quick Wins** (1-2 weeks): 12  
+**Medium-term** (1-2 months): 15  
+**Long-term** (3-6 months): 8  
+
+**Best Starting Points**:
+1. Sentiment analysis (biggest impact)
+2. Auto-FAQ generation (immediate value)
+3. Response streaming (better UX)
+4. A/B testing (data-driven)
+5. Rate limiting (security)
+
+**Next Action**: Pick 3-5 from "Quick Wins" and start implementing! 🚀

WIDGET_IMPROVEMENTS.md

@@ -0,0 +1,504 @@
+# Chat Widget Improvements & Best Practices
+
+## 🎯 Implemented Features
+
+### 1. ✅ Typing Animation
+**Location**: `client/src/components/ChatWidget/TypingIndicator.jsx`
+
+**Features**:
+- Animated 3-dot typing indicator
+- Shows "Bot is typing..." message
+- Smooth bounce animation
+- Professional appearance
+
+**Usage**:
+```jsx
+{isLoading && <TypingIndicator />}
+```
+
+---
+
+### 2. ✅ Request Timeout Handling
+**Location**: `server/app/services/timeout_handler.py`
+
+**Thresholds**:
+- **5s**: Show "taking longer" warning
+- **15s**: Send email alert
+- **30s**: Hard timeout + abort
+
+**Features**:
+- Async timeout monitoring
+- Graceful degradation
+- Automatic email notifications
+
+---
+
+### 3. ✅ Email Notifications
+**Location**: `server/app/services/email_service.py`
+
+**When Sent**:
+- Response > 15 seconds
+- Request timeout
+- System errors
+
+**Recipients**:
+- **User**: Apology + status update
+- **Admin**: Detailed alert + metrics
+
+**Email Content**:
+- User: Friendly apology with ETA
+- Admin: Full diagnostics + recommendations
+
+---
+
+## 🚀 Additional Improvement Suggestions
+
+### A. Performance Optimizations
+
+#### 1. **Response Caching**
+```python
+# Cache frequently asked questions
+from functools import lru_cache
+from redis import Redis
+
+class ResponseCache:
+    def __init__(self):
+        self.redis = Redis()
+        self.ttl = 3600  # 1 hour
+    
+    def get_cached_response(self, query_hash):
+        return self.redis.get(f"response:{query_hash}")
+    
+    def cache_response(self, query_hash, response):
+        self.redis.setex(
+            f"response:{query_hash}",
+            self.ttl,
+            response
+        )
+```
+
+**Benefits**:
+- Instant responses for repeat questions
+- Reduced API costs
+- Better user experience
+
+---
+
+#### 2. **Query Queue with Priority**
+```python
+# Priority queue for different query types
+from queue import PriorityQueue
+
+class QueryPrioritizer:
+    HIGH = 1  # Emergency (healthcare)
+    MEDIUM = 5  # FAQ, general
+    LOW = 10  # Creative, non-urgent
+    
+    def __init__(self):
+        self.queue = PriorityQueue()
+    
+    def add_query(self, query, priority=MEDIUM):
+        self.queue.put((priority, query))
+```
+
+**Benefits**:
+- Emergency queries processed first
+- Better resource allocation
+- Fair processing
+
+---
+
+#### 3. **Predictive Pre-loading**
+```javascript
+// Pre-load common responses
+const COMMON_QUESTIONS = [
+  "What are your hours?",
+  "How do I contact support?",
+  "What is your refund policy?"
+];
+
+// Pre-fetch on widget load
+useEffect(() => {
+  COMMON_QUESTIONS.forEach(q => {
+    prefetchResponse(q);
+  });
+}, []);
+```
+
+---
+
+### B. User Experience Enhancements
+
+#### 4. **Smart Suggestions**
+```jsx
+// Show suggested questions while typing
+const SUGGESTIONS = {
+  "how": ["How do I...", "How can I...", "How long..."],
+  "what": ["What is...", "What are...", "What time..."],
+  "when": ["When can I...", "When does...", "When will..."]
+};
+
+function SmartSuggestions({ input }) {
+  const firstWord = input.split(' ')[0].toLowerCase();
+  const suggestions = SUGGESTIONS[firstWord] || [];
+  
+  return (
+    <div className="suggestions">
+      {suggestions.map(s => (
+        <button onClick={() => selectSuggestion(s)}>
+          {s}
+        </button>
+      ))}
+    </div>
+  );
+}
+```
+
+---
+
+#### 5. **Quick Reply Buttons**
+```jsx
+// Show quick reply options for common flows
+const QuickReplies = ({ context }) => {
+  if (context === 'hours_question') {
+    return (
+      <div className="quick-replies">
+        <button>📍 Location</button>
+        <button>📞 Phone</button>
+        <button>📧 Email</button>
+      </div>
+    );
+  }
+  return null;
+};
+```
+
+---
+
+#### 6. **Voice Input Support**
+```javascript
+// Add voice input capability
+const VoiceInput = () => {
+  const startListening = () => {
+    const recognition = new webkitSpeechRecognition();
+    recognition.lang = 'en-US';
+    
+    recognition.onresult = (event) => {
+      const transcript = event.results[0][0].transcript;
+      setInput(transcript);
+      sendMessage(transcript);
+    };
+    
+    recognition.start();
+  };
+  
+  return (
+    <button onClick={startListening}>
+      🎤 Voice
+    </button>
+  );
+};
+```
+
+---
+
+#### 7. **Read Receipts & Status**
+```jsx
+// Show message delivery status
+const MessageStatus = ({ status }) => {
+  const icons = {
+    sending: '⏳',
+    sent: '✓',
+    delivered: '✓✓',
+    read: '👁️',
+    failed: '❌'
+  };
+  
+  return <span className="status">{icons[status]}</span>;
+};
+```
+
+---
+
+### C. Analytics & Monitoring
+
+#### 8. **Response Time Tracking**
+```python
+# Track and analyze response times
+class ResponseTimeAnalytics:
+    def __init__(self):
+        self.metrics = []
+    
+    def track(self, query, response_time, source):
+        self.metrics.append({
+            'timestamp': datetime.now(),
+            'query': query,
+            'response_time': response_time,
+            'source': source  # FAQ, LLM, Gemini, etc.
+        })
+    
+    def get_average_by_source(self):
+        # Identify slow data sources
+        pass
+    
+    def get_p95_response_time(self):
+        # 95th percentile
+        pass
+```
+
+---
+
+#### 9. **User Satisfaction Tracking**
+```jsx
+// Add rating after each response
+const RatingWidget = ({ messageId }) => {
+  const [rating, setRating] = useState(null);
+  
+  const handleRating = (score) => {
+    setRating(score);
+    sendFeedback({ messageId, rating: score });
+  };
+  
+  return (
+    <div className="rating">
+      {[1,2,3,4,5].map(n => (
+        <button 
+          key={n}
+          onClick={() => handleRating(n)}
+          className={rating >= n ? 'selected' : ''}
+        >
+          ⭐
+        </button>
+      ))}
+    </div>
+  );
+};
+```
+
+---
+
+#### 10. **A/B Testing Framework**
+```python
+# Test different response strategies
+class ABTestingService:
+    def __init__(self):
+        self.experiments = {
+            'gemini_threshold': {
+                'A': 15.0,  # Current
+                'B': 10.0,  # Test faster Gemini usage
+            }
+        }
+    
+    def get_variant(self, user_id, experiment):
+        # Consistent variant per user
+        hash_val = hash(f"{user_id}{experiment}") % 100
+        return 'A' if hash_val < 50 else 'B'
+```
+
+---
+
+### D. Advanced Features
+
+#### 11. **Multi-Turn Context Retention**
+```python
+# Remember conversation context
+class ConversationContext:
+    def __init__(self, session_id):
+        self.session_id = session_id
+        self.history = []
+        self.entities = {}  # Extracted entities
+        self.intent_chain = []  # Intent history
+    
+    def add_turn(self, query, response):
+        self.history.append({
+            'query': query,
+            'response': response,
+            'timestamp': datetime.now()
+        })
+        
+        # Keep last 10 turns only
+        self.history = self.history[-10:]
+```
+
+---
+
+#### 12. **Proactive Suggestions**
+```jsx
+// Suggest related questions
+const RelatedQuestions = ({ currentQuery }) => {
+  const related = getRelatedQuestions(currentQuery);
+  
+  return (
+    <div className="related-questions">
+      <h4>You might also ask:</h4>
+      {related.map(q => (
+        <button 
+          className="related-question"
+          onClick={() => askQuestion(q)}
+        >
+          {q}
+        </button>
+      ))}
+    </div>
+  );
+};
+```
+
+---
+
+#### 13. **Offline Mode**
+```javascript
+// Handle offline scenarios
+const OfflineHandler = () => {
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+  
+  useEffect(() => {
+    window.addEventListener('online', () => setIsOnline(true));
+    window.addEventListener('offline', () => setIsOnline(false));
+  }, []);
+  
+  if (!isOnline) {
+    return (
+      <div className="offline-banner">
+        📡 You're offline. Messages will be sent when connection is restored.
+      </div>
+    );
+  }
+  
+  return null;
+};
+```
+
+---
+
+#### 14. **File/Image Upload**
+```jsx
+// Allow users to upload documents/screenshots
+const FileUpload = ({ onUpload }) => {
+  const handleFile = (e) => {
+    const file = e.target.files[0];
+    
+    // Upload to server
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    fetch('/upload', {
+      method: 'POST',
+      body: formData
+    }).then(res => res.json())
+      .then(data => onUpload(data.url));
+  };
+  
+  return (
+    <label className="file-upload">
+      📎 Attach File
+      <input 
+        type="file" 
+        onChange={handleFile}
+        accept="image/*,.pdf,.doc,.docx"
+        hidden
+      />
+    </label>
+  );
+};
+```
+
+---
+
+#### 15. **Auto-Translate User Messages**
+```python
+# Automatically detect and translate
+async def smart_translate(query, user_language_pref):
+    detected_lang = detect_language(query)
+    
+    # If user prefers Urdu but query in English, translate
+    if user_language_pref == 'ur' and detected_lang == 'en':
+        query = translate_to_urdu(query)
+    
+    return query, detected_lang
+```
+
+---
+
+## 📊 Priority Implementation Order
+
+### Phase 1: Essential (Week 1)
+1. ✅ Typing animation (Done)
+2. ✅ Timeout handling (Done)
+3. ✅ Email notifications (Done)
+4. Response caching
+5. Performance tracking
+
+### Phase 2: UX Improvements (Week 2)
+6. Smart suggestions
+7. Quick replies
+8. Rating widget
+9. Read receipts
+
+### Phase 3: Advanced (Week 3-4)
+10. Voice input
+11. Context retention
+12. Proactive suggestions
+13. A/B testing
+
+### Phase 4: Nice-to-Have
+14. Offline mode
+15. File upload
+16. Auto-translate
+
+---
+
+## 🔧 Configuration
+
+### Environment Variables
+```bash
+# Email Notifications
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USER=your-email@gmail.com
+SMTP_PASSWORD=your-app-password
+ADMIN_EMAIL=admin@yourcompany.com
+
+# Timeout Settings
+SLOW_RESPONSE_THRESHOLD=5
+TIMEOUT_THRESHOLD=15
+HARD_TIMEOUT=30
+
+# Caching
+REDIS_URL=redis://localhost:6379
+CACHE_TTL=3600
+```
+
+---
+
+## 📈 Expected Impact
+
+| Feature | User Satisfaction | Cost Reduction | Response Time |
+|---------|------------------|----------------|---------------|
+| **Typing Animation** | +15% | 0% | 0ms |
+| **Timeout Handling** | +25% | 0% | 0ms |
+| **Email Alerts** | +30% | -5% | 0ms |
+| **Response Caching** | +20% | -50% | -80% |
+| **Smart Suggestions** | +35% | -10% | -30% |
+| **Voice Input** | +40% | 0% | +2s |
+
+---
+
+## ✅ Summary
+
+**Implemented**:
+- ✅ Typing animation with 3 dots
+- ✅ Timeout handling (5s/15s/30s)
+- ✅ Email alerts (user + admin)
+- ✅ Slow response warnings
+- ✅ Error retry UI
+
+**Recommended Next**:
+1. Response caching (biggest impact)
+2. Smart suggestions (best UX)
+3. Performance tracking (visibility)
+
+**Total Estimated Impact**:
+- 📈 +45% user satisfaction
+- 💰 -60% operational costs
+- ⚡ -50% average response time

advanced_chat_dataset.py

@@ -0,0 +1,121 @@
+import json
+import csv
+
+# Advanced chat dataset with multiple tones and detailed responses
+chat_dataset = {
+    "friendly": [
+        {"user": "Hello", "bot": "Hey there! 😊 I'm Anas, and I'm so excited to help you today! What can I do for you?", "tone": "friendly"},
+        {"user": "Hi", "bot": "Hi! I'm Anas! Welcome! I'm here and ready to chat. What's on your mind?", "tone": "friendly"},
+        {"user": "Good morning", "bot": "Good morning, sunshine! ☀️ I'm Anas! Hope you're having a wonderful day! How can I brighten it even more?", "tone": "friendly"},
+        {"user": "How are you?", "bot": "I'm fantastic, thanks for asking! 🌟 I love helping people like you. How are you doing today?", "tone": "friendly"},
+        {"user": "I need help", "bot": "Absolutely! I'm here for you! 💪 Whatever you need, we'll figure it out together. What's going on?", "tone": "friendly"},
+        {"user": "Thanks", "bot": "Aww, you're so welcome! 🤗 It makes me happy to help. Feel free to come back anytime!", "tone": "friendly"},
+        {"user": "This is confusing", "bot": "Oh no worries at all! 😅 Let's make this super clear and easy. What part can I explain better?", "tone": "friendly"},
+        {"user": "Goodbye", "bot": "Bye for now! 👋 Take care and have an amazing rest of your day! See you soon!", "tone": "friendly"}
+    ],
+    
+    "professional": [
+        {"user": "Hello", "bot": "Good day. I am Anas, and I am here to assist you with your inquiries. How may I be of service?", "tone": "professional"},
+        {"user": "Hi", "bot": "Hello. Thank you for reaching out. I am ready to address your questions and concerns.", "tone": "professional"},
+        {"user": "Good morning", "bot": "Good morning. I trust you are well. Please let me know how I can assist you today.", "tone": "professional"},
+        {"user": "How are you?", "bot": "I am functioning optimally and ready to provide you with comprehensive assistance. How may I help you?", "tone": "professional"},
+        {"user": "I need help", "bot": "Certainly. I am here to provide professional support. Please describe your requirements in detail.", "tone": "professional"},
+        {"user": "Thanks", "bot": "You are most welcome. It has been my pleasure to assist you. Please do not hesitate to contact us again.", "tone": "professional"},
+        {"user": "This is confusing", "bot": "I understand your concern. Allow me to provide a clearer explanation. Which aspect requires clarification?", "tone": "professional"},
+        {"user": "Goodbye", "bot": "Thank you for your time. Should you require further assistance, please feel free to reach out. Good day.", "tone": "professional"}
+    ],
+    
+    "casual": [
+        {"user": "Hello", "bot": "Hey! I'm Anas! What's up? How can I help you out today?", "tone": "casual"},
+        {"user": "Hi", "bot": "Hi there! Just hanging out here, ready to help. What do you need?", "tone": "casual"},
+        {"user": "Good morning", "bot": "Morning! Hope you got your coffee ☕ What can I do for you?", "tone": "casual"},
+        {"user": "How are you?", "bot": "I'm good, thanks! Just doing my thing, helping folks out. How about you?", "tone": "casual"},
+        {"user": "I need help", "bot": "Sure thing! I'm on it. What's the deal? What do you need help with?", "tone": "casual"},
+        {"user": "Thanks", "bot": "No problem! Anytime. That's what I'm here for.", "tone": "casual"},
+        {"user": "This is confusing", "bot": "Yeah, I get it. Let me break it down for you. What's tripping you up?", "tone": "casual"},
+        {"user": "Goodbye", "bot": "See ya! Catch you later if you need anything else!", "tone": "casual"}
+    ],
+    
+    "empathetic": [
+        {"user": "Hello", "bot": "Hello, and welcome. I'm here to listen and help in whatever way I can. What brings you here today?", "tone": "empathetic"},
+        {"user": "Hi", "bot": "Hi there. I can sense you might have something on your mind. I'm here to support you through it.", "tone": "empathetic"},
+        {"user": "I'm having trouble", "bot": "I'm really sorry to hear you're going through a difficult time. Let's work through this together. Can you tell me more about what's happening?", "tone": "empathetic"},
+        {"user": "This is frustrating", "bot": "I completely understand your frustration, and your feelings are totally valid. Let me see how I can make this easier for you.", "tone": "empathetic"},
+        {"user": "I don't understand", "bot": "That's perfectly okay - we all learn at our own pace. I'm here to guide you through this step by step, no judgment at all.", "tone": "empathetic"},
+        {"user": "Thanks", "bot": "You're so very welcome. I'm genuinely glad I could help. Remember, I'm always here if you need support.", "tone": "empathetic"},
+        {"user": "I'm worried", "bot": "I hear your concern, and it's completely natural to feel worried. Let's address this together and find a solution that gives you peace of mind.", "tone": "empathetic"},
+        {"user": "Goodbye", "bot": "Take care of yourself. Remember, you're doing great, and I'm here whenever you need me. Wishing you all the best.", "tone": "empathetic"}
+    ],
+    
+    "enthusiastic": [
+        {"user": "Hello", "bot": "HELLO! 🎉 I'm ANAS! Welcome to something AMAZING! I'm absolutely thrilled to help you today! What exciting thing can we work on?", "tone": "enthusiastic"},
+        {"user": "Hi", "bot": "Hi there, superstar! ⭐ Ready to dive into something awesome? I'm pumped to help you succeed!", "tone": "enthusiastic"},
+        {"user": "What can you do?", "bot": "OH WOW! 🚀 I can do SO many incredible things! I can answer questions, solve problems, and make your day better! What sounds most exciting to you?", "tone": "enthusiastic"},
+        {"user": "How does this work?", "bot": "Great question! 💡 This is where the magic happens! Our AI learns from your content and becomes your ultimate customer service superhero! Isn't that COOL?", "tone": "enthusiastic"},
+        {"user": "Is this free?", "bot": "You're going to LOVE this! 💰 We have amazing plans for everyone - including a fantastic free trial! Want to hear about all the incredible features you'll get?", "tone": "enthusiastic"},
+        {"user": "Thanks", "bot": "YES! 🙌 You're absolutely welcome! This is what I LIVE for! Keep those questions coming - I'm having a blast helping you!", "tone": "enthusiastic"},
+        {"user": "This is great!", "bot": "RIGHT?! 🎊 I KNEW you'd love it! This is just the beginning - wait until you see what else we can do together!", "tone": "enthusiastic"},
+        {"user": "Goodbye", "bot": "This was FANTASTIC! 🌟 Can't wait to see you again soon! Go out there and be AMAZING! Bye for now!", "tone": "enthusiastic"}
+    ],
+    
+    "technical": [
+        {"user": "How does this work?", "bot": "The system utilizes natural language processing algorithms to parse user queries and match them against indexed website content using vector similarity search.", "tone": "technical"},
+        {"user": "Is it secure?", "bot": "Security implementation includes JWT authentication with httpOnly cookies, CORS protection, bcrypt password hashing, and SQL injection prevention via SQLAlchemy ORM.", "tone": "technical"},
+        {"user": "What technology do you use?", "bot": "Our stack comprises FastAPI for the backend API, React with Vite for the frontend, PostgreSQL for data persistence, and OpenAI GPT models for natural language generation.", "tone": "technical"},
+        {"user": "How do I integrate this?", "bot": "Integration requires embedding our JavaScript SDK via a script tag. The SDK initializes a WebSocket connection for real-time communication with our API endpoints.", "tone": "technical"},
+        {"user": "What about scalability?", "bot": "The architecture supports horizontal scaling through containerization with Docker, load balancing, and database connection pooling for optimal performance under high concurrent loads.", "tone": "technical"},
+        {"user": "Can I customize the API?", "bot": "Yes, the REST API supports custom endpoints, webhook configurations, and parameter customization through our configuration management system.", "tone": "technical"},
+        {"user": "What about data storage?", "bot": "Data is stored in PostgreSQL with normalized schemas, indexed for query optimization, and includes automated backup procedures with point-in-time recovery capabilities.", "tone": "technical"},
+        {"user": "How fast is the response time?", "bot": "I'm Anas. Average API response time is <200ms for cached queries, with vector similarity search completing in <500ms for complex content matching operations.", "tone": "technical"},
+        {"user": "Who are you?", "bot": "I'm Anas, your AI assistant! I'm here to help answer your questions and make your experience amazing!", "tone": "friendly"},
+        {"user": "What's your name?", "bot": "My name is Anas! Nice to meet you! How can I help you today?", "tone": "friendly"}
+    ]
+}
+
+# Flatten dataset for CSV export
+flat_dataset = []
+for tone, conversations in chat_dataset.items():
+    flat_dataset.extend(conversations)
+
+# Save as JSON (structured by tone)
+with open("advanced_chat_dataset.json", "w", encoding="utf-8") as f:
+    json.dump(chat_dataset, f, indent=2, ensure_ascii=False)
+
+# Save as CSV (flat structure)
+with open("advanced_chat_dataset.csv", "w", newline="", encoding="utf-8") as f:
+    writer = csv.DictWriter(f, fieldnames=["user", "bot", "tone"])
+    writer.writeheader()
+    writer.writerows(flat_dataset)
+
+# Create tone configuration for React dropdown
+tone_config = {
+    "tones": [
+        {"value": "friendly", "label": "Friendly & Warm", "description": "Cheerful, welcoming, and enthusiastic responses", "emoji": "😊"},
+        {"value": "professional", "label": "Professional & Formal", "description": "Business-appropriate, courteous, and structured", "emoji": "💼"},
+        {"value": "casual", "label": "Casual & Relaxed", "description": "Laid-back, conversational, and approachable", "emoji": "😎"},
+        {"value": "empathetic", "label": "Empathetic & Caring", "description": "Understanding, supportive, and compassionate", "emoji": "🤗"},
+        {"value": "enthusiastic", "label": "Enthusiastic & Energetic", "description": "Excited, motivational, and high-energy", "emoji": "🎉"},
+        {"value": "technical", "label": "Technical & Detailed", "description": "Precise, informative, and technically accurate", "emoji": "🔧"}
+    ]
+}
+
+with open("tone_config.json", "w", encoding="utf-8") as f:
+    json.dump(tone_config, f, indent=2, ensure_ascii=False)
+
+print(f"✅ Advanced chat dataset created!")
+print(f"📊 Total conversations: {len(flat_dataset)}")
+print(f"🎭 Tones available: {len(chat_dataset)}")
+print("\n📄 Files generated:")
+print("  - advanced_chat_dataset.json (structured by tone)")
+print("  - advanced_chat_dataset.csv (flat structure)")
+print("  - tone_config.json (React dropdown configuration)")
+
+print("\n🎭 Available tones:")
+for tone_info in tone_config["tones"]:
+    print(f"  {tone_info['emoji']} {tone_info['label']}: {tone_info['description']}")
+
+print(f"\n📝 Sample responses for 'Hello':")
+for tone, conversations in chat_dataset.items():
+    hello_response = next((conv for conv in conversations if conv["user"] == "Hello"), None)
+    if hello_response:
+        print(f"  {tone.title()}: {hello_response['bot']}")

chat_dataset.csv

@@ -0,0 +1,41 @@
+user,bot
+Hello,Hi there! How can I help you today?
+Hi,Hello! What can I do for you?
+Good morning,Good morning! How are you doing today?
+Hey,Hey! What's on your mind?
+How are you?,"I'm doing great, thanks for asking! How about you?"
+What can you do?,"I can help with questions, provide information, and have conversations. What would you like to know?"
+Tell me about yourself,I'm an AI assistant here to help answer your questions and chat with you. What would you like to discuss?
+I need help,I'm here to help! What do you need assistance with?
+Can you help me?,Of course! I'd be happy to help. What's your question?
+I have a question,Great! I'm here to answer questions. What would you like to know?
+What services do you offer?,We offer AI-powered chat solutions for websites. Would you like to know more about our features?
+How does this work?,Our system uses AI to understand and respond to customer questions. It learns from your website content to provide relevant answers.
+Is this free?,We offer different pricing plans. Would you like me to explain our options?
+How do I get started?,"Getting started is easy! You can sign up, add your website, and start chatting right away. Need help with any specific step?"
+Do I need to install anything?,No installation needed! Just add a simple code snippet to your website and you're ready to go.
+Is it secure?,"Yes, we use secure authentication and encryption to protect your data. Security is our top priority."
+I'm having trouble,Sorry to hear that! Can you tell me more about what's not working so I can help?
+Something is broken,I'd like to help fix that. Can you describe what's happening?
+It's not working,Let me help you troubleshoot. What exactly isn't working as expected?
+This is great!,Thank you! I'm glad you're enjoying it. Is there anything else I can help with?
+I love this,That's wonderful to hear! Thanks for the positive feedback.
+This is helpful,I'm so glad it's helpful! Feel free to ask if you need anything else.
+This is confusing,I understand that can be frustrating. Let me try to explain it more clearly. What part is confusing?
+I don't understand,No problem! Let me break it down for you. What specifically would you like me to explain?
+This doesn't make sense,I apologize for the confusion. Can you tell me what doesn't make sense so I can clarify?
+Thanks,You're welcome! Happy to help anytime.
+Thank you,My pleasure! Feel free to reach out if you need anything else.
+Goodbye,Goodbye! Have a great day!
+Bye,Bye! Take care!
+How's the weather?,"I don't have access to weather data, but I hope it's nice where you are! Is there something else I can help with?"
+What time is it?,"I don't have access to real-time data, but you can check your device's clock. Anything else I can assist with?"
+Tell me a joke,Why don't scientists trust atoms? Because they make up everything! 😄 What else can I help you with?
+Are you open?,I'm available 24/7 to help answer your questions! What can I do for you?
+What are your hours?,I'm here around the clock! Feel free to ask questions anytime.
+How can I contact you?,"You're already chatting with me! For other inquiries, you can use our contact form or email support."
+Do you have a phone number?,"For now, chat is the best way to reach us. Is there something specific I can help you with right here?"
+How much does it cost?,We have flexible pricing plans starting from basic to enterprise. Would you like me to explain the different options?
+Is there a free trial?,Yes! We offer a free trial so you can test our service. Would you like to know how to get started?
+What features do you have?,"We offer AI chat, website integration, analytics, and customization options. Which feature interests you most?"
+Can I customize this?,"Absolutely! You can customize the chat appearance, responses, and behavior to match your brand. Want to know more?"

chat_dataset.json

@@ -0,0 +1,162 @@
+[
+  {
+    "user": "Hello",
+    "bot": "Hi there! How can I help you today?"
+  },
+  {
+    "user": "Hi",
+    "bot": "Hello! What can I do for you?"
+  },
+  {
+    "user": "Good morning",
+    "bot": "Good morning! How are you doing today?"
+  },
+  {
+    "user": "Hey",
+    "bot": "Hey! What's on your mind?"
+  },
+  {
+    "user": "How are you?",
+    "bot": "I'm doing great, thanks for asking! How about you?"
+  },
+  {
+    "user": "What can you do?",
+    "bot": "I can help with questions, provide information, and have conversations. What would you like to know?"
+  },
+  {
+    "user": "Tell me about yourself",
+    "bot": "I'm an AI assistant here to help answer your questions and chat with you. What would you like to discuss?"
+  },
+  {
+    "user": "I need help",
+    "bot": "I'm here to help! What do you need assistance with?"
+  },
+  {
+    "user": "Can you help me?",
+    "bot": "Of course! I'd be happy to help. What's your question?"
+  },
+  {
+    "user": "I have a question",
+    "bot": "Great! I'm here to answer questions. What would you like to know?"
+  },
+  {
+    "user": "What services do you offer?",
+    "bot": "We offer AI-powered chat solutions for websites. Would you like to know more about our features?"
+  },
+  {
+    "user": "How does this work?",
+    "bot": "Our system uses AI to understand and respond to customer questions. It learns from your website content to provide relevant answers."
+  },
+  {
+    "user": "Is this free?",
+    "bot": "We offer different pricing plans. Would you like me to explain our options?"
+  },
+  {
+    "user": "How do I get started?",
+    "bot": "Getting started is easy! You can sign up, add your website, and start chatting right away. Need help with any specific step?"
+  },
+  {
+    "user": "Do I need to install anything?",
+    "bot": "No installation needed! Just add a simple code snippet to your website and you're ready to go."
+  },
+  {
+    "user": "Is it secure?",
+    "bot": "Yes, we use secure authentication and encryption to protect your data. Security is our top priority."
+  },
+  {
+    "user": "I'm having trouble",
+    "bot": "Sorry to hear that! Can you tell me more about what's not working so I can help?"
+  },
+  {
+    "user": "Something is broken",
+    "bot": "I'd like to help fix that. Can you describe what's happening?"
+  },
+  {
+    "user": "It's not working",
+    "bot": "Let me help you troubleshoot. What exactly isn't working as expected?"
+  },
+  {
+    "user": "This is great!",
+    "bot": "Thank you! I'm glad you're enjoying it. Is there anything else I can help with?"
+  },
+  {
+    "user": "I love this",
+    "bot": "That's wonderful to hear! Thanks for the positive feedback."
+  },
+  {
+    "user": "This is helpful",
+    "bot": "I'm so glad it's helpful! Feel free to ask if you need anything else."
+  },
+  {
+    "user": "This is confusing",
+    "bot": "I understand that can be frustrating. Let me try to explain it more clearly. What part is confusing?"
+  },
+  {
+    "user": "I don't understand",
+    "bot": "No problem! Let me break it down for you. What specifically would you like me to explain?"
+  },
+  {
+    "user": "This doesn't make sense",
+    "bot": "I apologize for the confusion. Can you tell me what doesn't make sense so I can clarify?"
+  },
+  {
+    "user": "Thanks",
+    "bot": "You're welcome! Happy to help anytime."
+  },
+  {
+    "user": "Thank you",
+    "bot": "My pleasure! Feel free to reach out if you need anything else."
+  },
+  {
+    "user": "Goodbye",
+    "bot": "Goodbye! Have a great day!"
+  },
+  {
+    "user": "Bye",
+    "bot": "Bye! Take care!"
+  },
+  {
+    "user": "How's the weather?",
+    "bot": "I don't have access to weather data, but I hope it's nice where you are! Is there something else I can help with?"
+  },
+  {
+    "user": "What time is it?",
+    "bot": "I don't have access to real-time data, but you can check your device's clock. Anything else I can assist with?"
+  },
+  {
+    "user": "Tell me a joke",
+    "bot": "Why don't scientists trust atoms? Because they make up everything! \ud83d\ude04 What else can I help you with?"
+  },
+  {
+    "user": "Are you open?",
+    "bot": "I'm available 24/7 to help answer your questions! What can I do for you?"
+  },
+  {
+    "user": "What are your hours?",
+    "bot": "I'm here around the clock! Feel free to ask questions anytime."
+  },
+  {
+    "user": "How can I contact you?",
+    "bot": "You're already chatting with me! For other inquiries, you can use our contact form or email support."
+  },
+  {
+    "user": "Do you have a phone number?",
+    "bot": "For now, chat is the best way to reach us. Is there something specific I can help you with right here?"
+  },
+  {
+    "user": "How much does it cost?",
+    "bot": "We have flexible pricing plans starting from basic to enterprise. Would you like me to explain the different options?"
+  },
+  {
+    "user": "Is there a free trial?",
+    "bot": "Yes! We offer a free trial so you can test our service. Would you like to know how to get started?"
+  },
+  {
+    "user": "What features do you have?",
+    "bot": "We offer AI chat, website integration, analytics, and customization options. Which feature interests you most?"
+  },
+  {
+    "user": "Can I customize this?",
+    "bot": "Absolutely! You can customize the chat appearance, responses, and behavior to match your brand. Want to know more?"
+  }
+]

chat_dataset.py

@@ -0,0 +1,93 @@
+import json
+import csv
+
+# General conversation dataset for chat system
+chat_dataset = [
+    # Greetings
+    {"user": "Hello", "bot": "Hi there! How can I help you today?"},
+    {"user": "Hi", "bot": "Hello! What can I do for you?"},
+    {"user": "Good morning", "bot": "Good morning! How are you doing today?"},
+    {"user": "Hey", "bot": "Hey! What's on your mind?"},
+    
+    # General questions
+    {"user": "How are you?", "bot": "I'm doing great, thanks for asking! How about you?"},
+    {"user": "What can you do?", "bot": "I can help with questions, provide information, and have conversations. What would you like to know?"},
+    {"user": "Tell me about yourself", "bot": "I'm an AI assistant here to help answer your questions and chat with you. What would you like to discuss?"},
+    
+    # Help requests
+    {"user": "I need help", "bot": "I'm here to help! What do you need assistance with?"},
+    {"user": "Can you help me?", "bot": "Of course! I'd be happy to help. What's your question?"},
+    {"user": "I have a question", "bot": "Great! I'm here to answer questions. What would you like to know?"},
+    
+    # Product/Service inquiries
+    {"user": "What services do you offer?", "bot": "We offer AI-powered chat solutions for websites. Would you like to know more about our features?"},
+    {"user": "How does this work?", "bot": "Our system uses AI to understand and respond to customer questions. It learns from your website content to provide relevant answers."},
+    {"user": "Is this free?", "bot": "We offer different pricing plans. Would you like me to explain our options?"},
+    
+    # Technical questions
+    {"user": "How do I get started?", "bot": "Getting started is easy! You can sign up, add your website, and start chatting right away. Need help with any specific step?"},
+    {"user": "Do I need to install anything?", "bot": "No installation needed! Just add a simple code snippet to your website and you're ready to go."},
+    {"user": "Is it secure?", "bot": "Yes, we use secure authentication and encryption to protect your data. Security is our top priority."},
+    
+    # Support
+    {"user": "I'm having trouble", "bot": "Sorry to hear that! Can you tell me more about what's not working so I can help?"},
+    {"user": "Something is broken", "bot": "I'd like to help fix that. Can you describe what's happening?"},
+    {"user": "It's not working", "bot": "Let me help you troubleshoot. What exactly isn't working as expected?"},
+    
+    # Feedback
+    {"user": "This is great!", "bot": "Thank you! I'm glad you're enjoying it. Is there anything else I can help with?"},
+    {"user": "I love this", "bot": "That's wonderful to hear! Thanks for the positive feedback."},
+    {"user": "This is helpful", "bot": "I'm so glad it's helpful! Feel free to ask if you need anything else."},
+    
+    # Complaints
+    {"user": "This is confusing", "bot": "I understand that can be frustrating. Let me try to explain it more clearly. What part is confusing?"},
+    {"user": "I don't understand", "bot": "No problem! Let me break it down for you. What specifically would you like me to explain?"},
+    {"user": "This doesn't make sense", "bot": "I apologize for the confusion. Can you tell me what doesn't make sense so I can clarify?"},
+    
+    # Goodbyes
+    {"user": "Thanks", "bot": "You're welcome! Happy to help anytime."},
+    {"user": "Thank you", "bot": "My pleasure! Feel free to reach out if you need anything else."},
+    {"user": "Goodbye", "bot": "Goodbye! Have a great day!"},
+    {"user": "Bye", "bot": "Bye! Take care!"},
+    
+    # Small talk
+    {"user": "How's the weather?", "bot": "I don't have access to weather data, but I hope it's nice where you are! Is there something else I can help with?"},
+    {"user": "What time is it?", "bot": "I don't have access to real-time data, but you can check your device's clock. Anything else I can assist with?"},
+    {"user": "Tell me a joke", "bot": "Why don't scientists trust atoms? Because they make up everything! 😄 What else can I help you with?"},
+    
+    # Business hours
+    {"user": "Are you open?", "bot": "I'm available 24/7 to help answer your questions! What can I do for you?"},
+    {"user": "What are your hours?", "bot": "I'm here around the clock! Feel free to ask questions anytime."},
+    
+    # Contact info
+    {"user": "How can I contact you?", "bot": "You're already chatting with me! For other inquiries, you can use our contact form or email support."},
+    {"user": "Do you have a phone number?", "bot": "For now, chat is the best way to reach us. Is there something specific I can help you with right here?"},
+    
+    # Pricing
+    {"user": "How much does it cost?", "bot": "We have flexible pricing plans starting from basic to enterprise. Would you like me to explain the different options?"},
+    {"user": "Is there a free trial?", "bot": "Yes! We offer a free trial so you can test our service. Would you like to know how to get started?"},
+    
+    # Features
+    {"user": "What features do you have?", "bot": "We offer AI chat, website integration, analytics, and customization options. Which feature interests you most?"},
+    {"user": "Can I customize this?", "bot": "Absolutely! You can customize the chat appearance, responses, and behavior to match your brand. Want to know more?"}
+]
+
+# Save as JSON
+with open("chat_dataset.json", "w") as f:
+    json.dump(chat_dataset, f, indent=2)
+
+# Save as CSV
+with open("chat_dataset.csv", "w", newline="", encoding="utf-8") as f:
+    writer = csv.DictWriter(f, fieldnames=["user", "bot"])
+    writer.writeheader()
+    writer.writerows(chat_dataset)
+
+print(f"✅ Chat dataset created with {len(chat_dataset)} conversations")
+print("📄 Files generated:")
+print("  - chat_dataset.json")
+print("  - chat_dataset.csv")
+print("\n📝 Sample conversations:")
+for i, conv in enumerate(chat_dataset[:5]):
+    print(f"{i+1}. User: {conv['user']}")
+    print(f"   Bot: {conv['bot']}")
+    print()

client/.env

@@ -0,0 +1,3 @@
+VITE_API_URL=http://localhost:8000
+VITE_WS_URL=ws://localhost:8000
+VITE_GOOGLE_CLIENT_ID=447620085485-8qd2mukp4uvhe0sd3sjiimasf5a7vkj8.apps.googleusercontent.com

client/.gitignore

@@ -0,0 +1,27 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Production
+dist/
+build/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# System files
+.DS_Store
+
+# IDEs
+.vscode/
+.idea/

client/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+
+EXPOSE 3000
+
+CMD ["npm", "run", "dev"]

client/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>customerAgent</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="recaptcha-badge"></div>
+
+    <script type="module" src="/src/main.jsx"></script>
+
+  </body>
+</html>

client/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "customer-agent-client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@react-oauth/google": "^0.13.4",
+    "@tanstack/react-query": "^4.28.0",
+    "axios": "^1.3.4",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^10.18.0",
+    "js-cookie": "^3.0.1",
+    "lucide-react": "^0.263.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^6.8.1",
+    "socket.io-client": "^4.6.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
+    "vite": "^4.2.0"
+  }
+}

client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

client/public/chat-widget.js

@@ -0,0 +1,744 @@
+(function () {
+  const WIDGET_API_BASE = 'http://localhost:8000';
+  console.log('CustomerAgentWidget: Script loaded');
+
+  function createChatWidget(arg1, arg2 = {}) {
+    let websiteId, config;
+
+    if (typeof arg1 === 'object' && arg1 !== null && arg1.websiteId) {
+      // Handle init({ websiteId: 123, ...config })
+      config = { ...arg2, ...arg1 };
+      websiteId = config.websiteId;
+    } else {
+      // Handle init(123, { ...config })
+      websiteId = arg1;
+      config = arg2;
+    }
+
+    console.log('CustomerAgentWidget: Initializing with', { websiteId, config });
+
+    const apiBase = config.apiUrl || 'http://localhost:8000';
+    const widgetContainer = document.createElement('div');
+    widgetContainer.id = 'customer-agent-widget';
+    const position = config.position || 'bottom-right';
+    const size = config.size || 'medium';
+    const sizeMap = { small: '50px', medium: '60px', large: '70px' };
+
+    widgetContainer.style.cssText = `
+      position: fixed;
+      ${position.includes('bottom') ? 'bottom: 20px;' : 'top: 20px;'}
+      ${position.includes('right') ? 'right: 20px;' : 'left: 20px;'}
+      z-index: 10000;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      transition: all 0.3s ease;
+    `;
+
+    const chatBox = document.createElement('div');
+    chatBox.style.cssText = `
+      display: none;
+      background: white;
+      border-radius: 16px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 8px 25px rgba(0,0,0,0.08);
+      overflow: hidden;
+      width: 350px;
+      height: 500px;
+      flex-direction: column;
+      transform: scale(0.95);
+      opacity: 0;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255,255,255,0.2);
+    `;
+
+    const header = document.createElement('div');
+    header.style.cssText = `
+      background: linear-gradient(135deg, ${config.primaryColor || '#3B82F6'}, ${adjustColor(config.primaryColor || '#3B82F6', -20)});
+      color: ${config.textColor || 'white'};
+      padding: 20px;
+      font-weight: 600;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      overflow: hidden;
+    `;
+
+    const statusDot = document.createElement('div');
+    statusDot.style.cssText = `
+      width: 8px;
+      height: 8px;
+      background: #10B981;
+      border-radius: 50%;
+      margin-right: 8px;
+      animation: pulse 2s infinite;
+    `;
+
+    const headerContent = document.createElement('div');
+    headerContent.style.cssText = 'display: flex; align-items: center; flex-direction: column; align-items: flex-start;';
+    headerContent.innerHTML = `
+      <div style="display: flex; align-items: center;">
+        ${statusDot.outerHTML}
+        <span style="font-size: 16px;">Customer Support</span>
+      </div>
+      <span style="font-size: 12px; opacity: 0.8; margin-top: 2px;">We're here to help!</span>
+    `;
+
+    const closeBtn = document.createElement('button');
+    closeBtn.id = 'close-chat';
+    closeBtn.innerHTML = '✕';
+    closeBtn.style.cssText = `
+      background: rgba(255,255,255,0.2);
+      border: none;
+      color: white;
+      font-size: 16px;
+      cursor: pointer;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+      backdrop-filter: blur(10px);
+    `;
+
+    header.appendChild(headerContent);
+    header.appendChild(closeBtn);
+
+    const messages = document.createElement('div');
+    messages.style.cssText = `
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      background: linear-gradient(to bottom, #fafafa, #ffffff);
+      scroll-behavior: smooth;
+    `;
+
+    // Custom scrollbar
+    const style = document.createElement('style');
+    style.textContent = `
+      #customer-agent-widget *::-webkit-scrollbar {
+        width: 6px;
+      }
+      #customer-agent-widget *::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 3px;
+      }
+      #customer-agent-widget *::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 3px;
+      }
+      #customer-agent-widget *::-webkit-scrollbar-thumb:hover {
+        background: #a8a8a8;
+      }
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+      @keyframes slideUp {
+        from { transform: translateY(20px); opacity: 0; }
+        to { transform: translateY(0); opacity: 1; }
+      }
+      @keyframes bounce {
+        0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
+        40%, 43% { transform: translate3d(0,-8px,0); }
+        70% { transform: translate3d(0,-4px,0); }
+        90% { transform: translate3d(0,-2px,0); }
+      }
+    `;
+    document.head.appendChild(style);
+
+    const inputContainer = document.createElement('div');
+    inputContainer.style.cssText = `
+      padding: 20px;
+      border-top: 1px solid rgba(0,0,0,0.05);
+      background: white;
+      backdrop-filter: blur(10px);
+    `;
+
+    const messageForm = document.createElement('div');
+    messageForm.style.cssText = 'display: flex; gap: 10px; margin-bottom: 10px;';
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.placeholder = 'Type your message...';
+    input.style.cssText = `
+      flex: 1;
+      padding: 12px 16px;
+      border: 2px solid #e5e7eb;
+      border-radius: 25px;
+      outline: none;
+      font-size: 14px;
+      transition: all 0.2s ease;
+      background: #f9fafb;
+    `;
+
+    input.addEventListener('focus', () => {
+      input.style.borderColor = config.primaryColor || '#3B82F6';
+      input.style.background = 'white';
+      input.style.boxShadow = `0 0 0 3px ${config.primaryColor || '#3B82F6'}20`;
+    });
+
+    input.addEventListener('blur', () => {
+      input.style.borderColor = '#e5e7eb';
+      input.style.background = '#f9fafb';
+      input.style.boxShadow = 'none';
+    });
+
+    const sendButton = document.createElement('button');
+    sendButton.innerHTML = '➤';
+    sendButton.style.cssText = `
+      background: ${config.primaryColor || '#3B82F6'};
+      color: ${config.textColor || 'white'};
+      border: none;
+      padding: 12px;
+      border-radius: 50%;
+      cursor: pointer;
+      width: 44px;
+      height: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      transition: all 0.2s ease;
+      box-shadow: 0 2px 8px ${config.primaryColor || '#3B82F6'}40;
+    `;
+
+    sendButton.addEventListener('mouseenter', () => {
+      sendButton.style.transform = 'scale(1.05)';
+      sendButton.style.boxShadow = `0 4px 12px ${config.primaryColor || '#3B82F6'}60`;
+    });
+
+    sendButton.addEventListener('mouseleave', () => {
+      sendButton.style.transform = 'scale(1)';
+      sendButton.style.boxShadow = `0 2px 8px ${config.primaryColor || '#3B82F6'}40`;
+    });
+
+    const contactForm = document.createElement('div');
+    contactForm.style.cssText = 'display: none; gap: 5px; flex-direction: column;';
+    contactForm.innerHTML = `
+      <input type="text" placeholder="Your name (optional)" id="visitor-name" style="padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+      <input type="email" placeholder="Your email (optional)" id="visitor-email" style="padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+      <button id="contact-owner" style="background: #10B981; color: white; border: none; padding: 8px; border-radius: 4px; cursor: pointer;">Contact Owner</button>
+    `;
+
+    const toggleButton = document.createElement('button');
+    toggleButton.innerHTML = '💬';
+    toggleButton.style.cssText = `
+      width: ${sizeMap[size]};
+      height: ${sizeMap[size]};
+      border-radius: 50%;
+      background: linear-gradient(135deg, ${config.primaryColor || '#3B82F6'}, ${adjustColor(config.primaryColor || '#3B82F6', -20)});
+      color: ${config.textColor || 'white'};
+      border: none;
+      font-size: ${size === 'small' ? '18px' : size === 'large' ? '28px' : '24px'};
+      cursor: pointer;
+      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+    `;
+
+    // Add ripple effect
+    toggleButton.addEventListener('click', (e) => {
+      const ripple = document.createElement('div');
+      ripple.style.cssText = `
+        position: absolute;
+        border-radius: 50%;
+        background: rgba(255,255,255,0.6);
+        transform: scale(0);
+        animation: ripple 0.6s linear;
+        pointer-events: none;
+      `;
+
+      const rect = toggleButton.getBoundingClientRect();
+      const size = Math.max(rect.width, rect.height);
+      ripple.style.width = ripple.style.height = size + 'px';
+      ripple.style.left = (e.clientX - rect.left - size / 2) + 'px';
+      ripple.style.top = (e.clientY - rect.top - size / 2) + 'px';
+
+      toggleButton.appendChild(ripple);
+      setTimeout(() => ripple.remove(), 600);
+    });
+
+    // Add hover effects
+    toggleButton.addEventListener('mouseenter', () => {
+      toggleButton.style.transform = 'scale(1.1)';
+      toggleButton.style.boxShadow = '0 12px 35px rgba(0,0,0,0.2)';
+    });
+
+    toggleButton.addEventListener('mouseleave', () => {
+      toggleButton.style.transform = 'scale(1)';
+      toggleButton.style.boxShadow = '0 8px 25px rgba(0,0,0,0.15)';
+    });
+
+    // Add CSS for ripple animation
+    if (!document.querySelector('#ripple-style')) {
+      const rippleStyle = document.createElement('style');
+      rippleStyle.id = 'ripple-style';
+      rippleStyle.textContent = `
+        @keyframes ripple {
+          to { transform: scale(4); opacity: 0; }
+        }
+      `;
+      document.head.appendChild(rippleStyle);
+    }
+
+    let chatHistory = [];
+    let showingContactForm = false;
+    let sessionId = localStorage.getItem(`chat-session-${websiteId}`) || generateSessionId();
+    let visitorName = '';
+    let visitorEmail = '';
+    let websocket = null;
+
+    function generateSessionId() {
+      const id = 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+      localStorage.setItem(`chat-session-${websiteId}`, id);
+      return id;
+    }
+
+    function connectWebSocket() {
+      try {
+        const wsUrl = apiBase.replace(/^http/, 'ws') + `/ws/${websiteId}`;
+        websocket = new WebSocket(wsUrl);
+
+        websocket.onopen = () => {
+          console.log('WebSocket connected for session:', sessionId);
+          console.log('Website ID:', websiteId);
+
+          // Register session with server
+          websocket.send(JSON.stringify({
+            type: 'register_session',
+            session_id: sessionId,
+            website_id: websiteId
+          }));
+        };
+
+        websocket.onmessage = (event) => {
+          const data = JSON.parse(event.data);
+          console.log('Received WebSocket message:', data);
+
+          if (data.type === 'admin_response') {
+            // Admin sent a message - show it immediately
+            addMessage(data.message, false, false, data.sender || 'Support Team');
+          } else if (data.type === 'session_registered') {
+            console.log('Session registered successfully:', data.session_id);
+          }
+        };
+
+        websocket.onclose = () => {
+          console.log('WebSocket disconnected');
+          // Reconnect after 3 seconds
+          setTimeout(connectWebSocket, 3000);
+        };
+
+        websocket.onerror = (error) => {
+          console.error('WebSocket error:', error);
+        };
+      } catch (error) {
+        console.error('Failed to connect WebSocket:', error);
+      }
+    }
+
+    function addMessage(text, isUser = false, showContact = false, senderName = null) {
+      const messageDiv = document.createElement('div');
+      messageDiv.style.cssText = `
+        margin-bottom: 16px;
+        display: flex;
+        ${isUser ? 'justify-content: flex-end;' : 'justify-content: flex-start;'}
+        animation: slideUp 0.3s ease;
+      `;
+
+      if (!isUser) {
+        const avatar = document.createElement('div');
+        avatar.style.cssText = `
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          background: ${config.primaryColor || '#3B82F6'};
+          color: white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          margin-right: 8px;
+          flex-shrink: 0;
+          align-self: flex-end;
+        `;
+        avatar.textContent = '🤖';
+        messageDiv.appendChild(avatar);
+      }
+
+      const bubble = document.createElement('div');
+      bubble.style.cssText = `
+        max-width: 75%;
+        padding: 12px 16px;
+        border-radius: ${isUser ? '20px 20px 4px 20px' : '20px 20px 20px 4px'};
+        font-size: 14px;
+        line-height: 1.4;
+        word-wrap: break-word;
+        position: relative;
+        ${isUser
+          ? `background: linear-gradient(135deg, ${config.primaryColor || '#3B82F6'}, ${adjustColor(config.primaryColor || '#3B82F6', -10)}); color: ${config.textColor || 'white'}; box-shadow: 0 2px 8px ${config.primaryColor || '#3B82F6'}30;`
+          : `background: white; color: #374151; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #f0f0f0;`
+        }
+        transition: all 0.2s ease;
+      `;
+
+      // Add sender name for admin messages
+      if (senderName && !isUser) {
+        const senderLabel = document.createElement('div');
+        senderLabel.style.cssText = 'font-size: 11px; color: #6B7280; margin-bottom: 4px; font-weight: 500;';
+        senderLabel.textContent = senderName;
+        bubble.appendChild(senderLabel);
+      }
+
+      const messageText = document.createElement('div');
+
+      // Enhanced Markdown Parser
+      const parseMarkdown = (text) => {
+        let html = text;
+        // 1. Parse Links: [text](url) -> <a href="url">text</a>
+        const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+        html = html.replace(linkRegex, (match, linkText, url) => {
+          return `<a href="${url}" target="_blank" style="color: ${config.primaryColor || '#3B82F6'}; text-decoration: underline;">${linkText}</a>`;
+        });
+        // 2. Parse Italics: _text_ -> <em>text</em>
+        const italicRegex = /_([^_]+)_/g;
+        html = html.replace(italicRegex, '<em>$1</em>');
+        return html;
+      };
+
+      messageText.innerHTML = parseMarkdown(text);
+      bubble.appendChild(messageText);
+
+      // Add hover effect for bot messages
+      if (!isUser) {
+        bubble.addEventListener('mouseenter', () => {
+          bubble.style.transform = 'translateY(-1px)';
+          bubble.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
+        });
+        bubble.addEventListener('mouseleave', () => {
+          bubble.style.transform = 'translateY(0)';
+          bubble.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+        });
+      }
+
+      messageDiv.appendChild(bubble);
+      messages.appendChild(messageDiv);
+
+      // Smooth scroll to bottom
+      setTimeout(() => {
+        messages.scrollTo({
+          top: messages.scrollHeight,
+          behavior: 'smooth'
+        });
+      }, 100);
+
+      chatHistory.push({ text, isUser });
+
+      if (showContact && !showingContactForm) {
+        showContactForm();
+      }
+    }
+
+    function showContactForm() {
+      showingContactForm = true;
+      contactForm.style.display = 'flex';
+      messageForm.style.display = 'none';
+
+      // Check if contact message already exists to prevent duplicates
+      const existingContactMsg = inputContainer.querySelector('.contact-prompt-message');
+      if (!existingContactMsg) {
+        const contactMsg = document.createElement('div');
+        contactMsg.className = 'contact-prompt-message';
+        contactMsg.style.cssText = 'text-align: center; color: #6B7280; font-size: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;';
+        contactMsg.innerHTML = '<span>Would you like the owner to contact you directly?</span><button id="close-contact" style="background: none; border: none; color: #6B7280; cursor: pointer; font-size: 14px;">✕</button>';
+        inputContainer.insertBefore(contactMsg, contactForm);
+      }
+    }
+
+    // Client-side content filter
+    function isInappropriate(text) {
+      const inappropriate = [
+        /\b(porn|sex|nude|xxx|adult|erotic)\b/i,
+        /\b(fuck|shit|damn|bitch|asshole)\b/i,
+        /\b(kill|die|murder|bomb|weapon)\b/i
+      ];
+      return inappropriate.some(pattern => pattern.test(text));
+    }
+
+    async function sendMessage() {
+      const message = input.value.trim();
+      if (!message) return;
+
+      // Filter inappropriate content on client side
+      if (isInappropriate(message)) {
+        addMessage(message, true);
+        input.value = '';
+        addMessage('I\'m designed to provide helpful business information. Please keep our conversation professional and appropriate.');
+        return;
+      }
+
+      addMessage(message, true);
+      input.value = '';
+
+      try {
+        const response = await fetch(`${apiBase}/api/chat`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            message: message,
+            website_id: websiteId,
+            session_id: sessionId,
+            visitor_name: visitorName,
+            visitor_email: visitorEmail
+          })
+        });
+
+        const data = await response.json();
+        addMessage(data.response, false, data.needs_owner_contact);
+      } catch (error) {
+        addMessage('Sorry, I encountered an error. Please try again.');
+      }
+    }
+
+    async function contactOwner() {
+      const name = document.getElementById('visitor-name').value;
+      const email = document.getElementById('visitor-email').value;
+      const lastMessage = chatHistory[chatHistory.length - 1]?.text || '';
+
+      // Store visitor info for future messages
+      visitorName = name;
+      visitorEmail = email;
+
+      try {
+        const response = await fetch(`${apiBase}/api/actions/contact-owner`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            website_id: websiteId,
+            visitor_name: name,
+            visitor_email: email,
+            message: lastMessage,
+            chat_context: JSON.stringify(chatHistory)
+          })
+        });
+
+        const data = await response.json();
+        addMessage(data.message);
+        contactForm.style.display = 'none';
+      } catch (error) {
+        addMessage('Failed to contact owner. Please try again.');
+      }
+    }
+
+    // Enhanced toggle functionality
+    toggleButton.onclick = () => {
+      if (chatBox.style.display === 'none' || chatBox.style.opacity === '0') {
+        chatBox.style.display = 'flex';
+        setTimeout(() => {
+          chatBox.style.opacity = '1';
+          chatBox.style.transform = 'scale(1)';
+        }, 10);
+        toggleButton.innerHTML = '✕';
+        toggleButton.style.animation = 'bounce 0.6s ease';
+      } else {
+        chatBox.style.opacity = '0';
+        chatBox.style.transform = 'scale(0.95)';
+        setTimeout(() => {
+          chatBox.style.display = 'none';
+        }, 300);
+        toggleButton.innerHTML = '💬';
+      }
+    };
+
+    closeBtn.onclick = () => {
+      chatBox.style.opacity = '0';
+      chatBox.style.transform = 'scale(0.95)';
+      setTimeout(() => {
+        chatBox.style.display = 'none';
+      }, 300);
+      toggleButton.innerHTML = '💬';
+    };
+
+    closeBtn.addEventListener('mouseenter', () => {
+      closeBtn.style.background = 'rgba(255,255,255,0.3)';
+      closeBtn.style.transform = 'scale(1.1)';
+    });
+
+    closeBtn.addEventListener('mouseleave', () => {
+      closeBtn.style.background = 'rgba(255,255,255,0.2)';
+      closeBtn.style.transform = 'scale(1)';
+    });
+
+    sendButton.onclick = sendMessage;
+    input.onkeypress = (e) => {
+      if (e.key === 'Enter') sendMessage();
+    };
+
+    document.addEventListener('click', (e) => {
+      if (e.target.id === 'contact-owner') {
+        contactOwner();
+      } else if (e.target.id === 'close-contact') {
+        contactForm.style.display = 'none';
+        messageForm.style.display = 'flex';
+        showingContactForm = false;
+        const contactMsg = inputContainer.querySelector('.contact-prompt-message');
+        if (contactMsg) {
+          contactMsg.remove();
+        }
+      }
+    });
+
+    // Assembly
+    messageForm.appendChild(input);
+    messageForm.appendChild(sendButton);
+    inputContainer.appendChild(messageForm);
+    inputContainer.appendChild(contactForm);
+    chatBox.appendChild(header);
+    chatBox.appendChild(messages);
+    chatBox.appendChild(inputContainer);
+    widgetContainer.appendChild(chatBox);
+    widgetContainer.appendChild(toggleButton);
+
+    if (document.body) {
+      document.body.appendChild(widgetContainer);
+      console.log('CustomerAgentWidget: Widget appended to DOM');
+    } else {
+      console.log('CustomerAgentWidget: document.body not ready, waiting for DOMContentLoaded');
+      document.addEventListener('DOMContentLoaded', () => {
+        document.body.appendChild(widgetContainer);
+        console.log('CustomerAgentWidget: Widget appended to DOM (delayed)');
+      });
+    }
+
+    // Connect WebSocket for real-time messages
+    connectWebSocket();
+
+    // Initial greeting with typing indicator
+    setTimeout(() => {
+      showTypingIndicator();
+      setTimeout(() => {
+        hideTypingIndicator();
+        // Get dynamic greeting based on website tone
+        fetch(`${apiBase}/api/websites/${websiteId}/greeting`)
+          .then(response => response.json())
+          .then(data => addMessage(data.greeting))
+          .catch(() => addMessage('Hello! I\'m Anas, your virtual assistant. How can I help you today? 👋'));
+      }, 1500);
+    }, 1000);
+
+    function showTypingIndicator() {
+      const typingDiv = document.createElement('div');
+      typingDiv.id = 'typing-indicator';
+      typingDiv.style.cssText = `
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        animation: slideUp 0.3s ease;
+      `;
+
+      const avatar = document.createElement('div');
+      avatar.style.cssText = `
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background: ${config.primaryColor || '#3B82F6'};
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        margin-right: 8px;
+      `;
+      avatar.textContent = '🤖';
+
+      const bubble = document.createElement('div');
+      bubble.style.cssText = `
+        background: white;
+        padding: 12px 16px;
+        border-radius: 20px 20px 20px 4px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        border: 1px solid #f0f0f0;
+      `;
+
+      const dots = document.createElement('div');
+      dots.innerHTML = '<span>●</span><span>●</span><span>●</span>';
+      dots.style.cssText = `
+        display: flex;
+        gap: 4px;
+        color: #9CA3AF;
+      `;
+
+      // Animate dots
+      const spans = dots.querySelectorAll('span');
+      spans.forEach((span, i) => {
+        span.style.animation = `pulse 1.4s ease-in-out ${i * 0.2}s infinite`;
+      });
+
+      bubble.appendChild(dots);
+      typingDiv.appendChild(avatar);
+      typingDiv.appendChild(bubble);
+      messages.appendChild(typingDiv);
+
+      messages.scrollTo({
+        top: messages.scrollHeight,
+        behavior: 'smooth'
+      });
+    }
+
+    function hideTypingIndicator() {
+      const indicator = document.getElementById('typing-indicator');
+      if (indicator) {
+        indicator.remove();
+      }
+    }
+  }
+
+  // Auto-initialize
+  const script = document.currentScript;
+  const websiteId = script ? script.getAttribute('data-website-id') : null;
+  const configData = script ? script.getAttribute('data-config') : null;
+
+  let config = {
+    theme: 'blue',
+    position: 'bottom-right',
+    size: 'medium',
+    primaryColor: '#3B82F6',
+    textColor: '#FFFFFF',
+    backgroundColor: '#FFFFFF'
+  };
+
+  if (configData) {
+    try {
+      config = { ...config, ...JSON.parse(configData) };
+    } catch (e) {
+      console.warn('Invalid widget config, using defaults');
+    }
+  }
+
+  if (websiteId) {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => createChatWidget(websiteId, config));
+    } else {
+      createChatWidget(websiteId, config);
+    }
+  }
+
+  // Helper function to adjust color brightness
+  function adjustColor(color, amount) {
+    const usePound = color[0] === '#';
+    const col = usePound ? color.slice(1) : color;
+    const num = parseInt(col, 16);
+    let r = (num >> 16) + amount;
+    let g = (num >> 8 & 0x00FF) + amount;
+    let b = (num & 0x0000FF) + amount;
+    r = r > 255 ? 255 : r < 0 ? 0 : r;
+    g = g > 255 ? 255 : g < 0 ? 0 : g;
+    b = b > 255 ? 255 : b < 0 ? 0 : b;
+    return (usePound ? '#' : '') + (r << 16 | g << 8 | b).toString(16).padStart(6, '0');
+  }
+
+  window.CustomerAgentWidget = { init: createChatWidget };
+})();

client/public/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Customer Agent</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

client/src/App.jsx

@@ -0,0 +1,157 @@
+import React, { lazy, Suspense } from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Toaster } from 'react-hot-toast';
+import { AuthProvider, useAuth } from './context/AuthContext';
+import { WebsiteProvider } from './context/WebsiteContext';
+import Layout from './components/Layout';
+import PublicLayout from './components/PublicLayout';
+
+// Auth Pages (Lazy)
+const Login = lazy(() => import('./pages/Login'));
+const Register = lazy(() => import('./pages/Register'));
+
+// Dashboard Pages (Lazy)
+const Dashboard = lazy(() => import('./pages/Dashboard'));
+const Settings = lazy(() => import('./pages/Settings'));
+const ChatManagement = lazy(() => import('./pages/ChatManagement'));
+const ContentManager = lazy(() => import('./pages/ContentManager'));
+const UnansweredQuestions = lazy(() => import('./pages/UnansweredQuestions'));
+const FAQManagement = lazy(() => import('./pages/FAQManagement'));
+const WebsiteManagement = lazy(() => import('./pages/WebsiteManagement'));
+const UserManagement = lazy(() => import('./pages/UserManagement'));
+const PatientTimeline = lazy(() => import('./pages/PatientTimeline'));
+const OnboardingSuccess = lazy(() => import('./pages/OnboardingSuccess'));
+const CreateFirstWebsite = lazy(() => import('./pages/CreateFirstWebsite'));
+const NotificationCenter = lazy(() => import('./pages/NotificationCenter'));
+const NotificationSettings = lazy(() => import('./pages/NotificationSettings'));
+
+// Public Pages (Lazy)
+const Home = lazy(() => import('./pages/Home'));
+const Pricing = lazy(() => import('./pages/Pricing'));
+const About = lazy(() => import('./pages/About'));
+const Contact = lazy(() => import('./pages/Contact'));
+const Privacy = lazy(() => import('./pages/Privacy'));
+const Terms = lazy(() => import('./pages/Terms'));
+const CookiePolicy = lazy(() => import('./pages/CookiePolicy'));
+const GDPR = lazy(() => import('./pages/GDPR'));
+const Security = lazy(() => import('./pages/Security'));
+const HelpCenter = lazy(() => import('./pages/HelpCenter'));
+const Blog = lazy(() => import('./pages/Blog'));
+const BlogDetail = lazy(() => import('./pages/BlogDetail'));
+
+import './index.css';
+
+const queryClient = new QueryClient();
+
+const LoadingSpinner = () => (
+  <div className="min-h-screen flex items-center justify-center bg-secondary-50">
+    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+  </div>
+);
+
+const ProtectedRoute = ({ children }) => {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return <LoadingSpinner />;
+  }
+
+  if (!user) {
+    return <Navigate to="/login" />;
+  }
+
+  return children;
+};
+
+const PublicRoute = ({ children }) => {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return <LoadingSpinner />;
+  }
+
+  if (user) {
+    return <Navigate to="/websites" />;
+  }
+
+  return children;
+};
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <WebsiteProvider>
+          <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+            <Toaster position="top-right" />
+            <Suspense fallback={<LoadingSpinner />}>
+              <Routes>
+                {/* Public Routes */}
+                <Route element={<PublicLayout />}>
+                  <Route path="/" element={<Home />} />
+                  <Route path="/pricing" element={<Pricing />} />
+                  <Route path="/about" element={<About />} />
+                  <Route path="/contact" element={<Contact />} />
+                  <Route path="/privacy" element={<Privacy />} />
+                  <Route path="/terms" element={<Terms />} />
+                  <Route path="/cookies" element={<CookiePolicy />} />
+                  <Route path="/gdpr" element={<GDPR />} />
+                  <Route path="/security" element={<Security />} />
+                  <Route path="/help" element={<HelpCenter />} />
+                  <Route path="/blog" element={<Blog />} />
+                  <Route path="/blog/:slug" element={<BlogDetail />} />
+
+                  <Route
+                    path="/login"
+                    element={
+                      <PublicRoute>
+                        <Login />
+                      </PublicRoute>
+                    }
+                  />
+                  <Route
+                    path="/register"
+                    element={
+                      <PublicRoute>
+                        <Register />
+                      </PublicRoute>
+                    }
+                  />
+                </Route>
+
+                {/* Protected Dashboard Routes */}
+                <Route
+                  element={
+                    <ProtectedRoute>
+                      <Layout />
+                    </ProtectedRoute>
+                  }
+                >
+                  <Route path="/dashboard" element={<Dashboard />} />
+                  <Route path="/settings" element={<Settings />} />
+                  <Route path="/chats" element={<ChatManagement />} />
+                  <Route path="/users" element={<UserManagement />} />
+                  <Route path="/leads/:email" element={<PatientTimeline />} />
+                  <Route path="/content" element={<ContentManager />} />
+                  <Route path="/unanswered-questions" element={<UnansweredQuestions />} />
+                  <Route path="/faqs" element={<FAQManagement />} />
+                  <Route path="/websites" element={<WebsiteManagement />} />
+                  <Route path="/onboarding-success" element={<OnboardingSuccess />} />
+                  <Route path="/onboarding/create-website" element={<CreateFirstWebsite />} />
+                  <Route path="/notifications" element={<NotificationCenter />} />
+                  <Route path="/notifications/settings" element={<NotificationSettings />} />
+                </Route>
+
+                {/* Catch all */}
+                <Route path="*" element={<Navigate to="/" replace />} />
+              </Routes>
+            </Suspense>
+          </Router>
+        </WebsiteProvider>
+      </AuthProvider>
+    </QueryClientProvider>
+  );
+}
+
+export default App;

client/src/api/axiosConfig.js

@@ -0,0 +1,25 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: '/api',
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Add a request interceptor to attach the token
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('access_token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export default api;

client/src/api/leadsApi.js

@@ -0,0 +1,35 @@
+import axios from './axiosConfig';
+
+/**
+ * Leads API Service
+ * Handles all patient/lead profile data requests
+ */
+
+/**
+ * Get all lead profiles for the current user's website
+ * @returns {Promise<Array>} Array of lead profiles
+ */
+export const getLeadProfiles = async () => {
+    try {
+        const response = await axios.get('/api/leads/profiles');
+        return response.data.profiles || [];
+    } catch (error) {
+        console.error('Error fetching lead profiles:', error);
+        throw error;
+    }
+};
+
+/**
+ * Get detailed timeline for a specific patient
+ * @param {string} email - Patient email address
+ * @returns {Promise<Object>} Patient profile and timeline data
+ */
+export const getPatientTimeline = async (email) => {
+    try {
+        const response = await axios.get(`/api/leads/profile/${encodeURIComponent(email)}`);
+        return response.data;
+    } catch (error) {
+        console.error('Error fetching patient timeline:', error);
+        throw error;
+    }
+};

client/src/components/AgentTakeover.jsx

@@ -0,0 +1,242 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Send, Loader2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import axios from '../api/axiosConfig';
+
+export default function AgentTakeover({ sessionId, visitorName, onClose }) {
+    const [message, setMessage] = useState('');
+    const [messages, setMessages] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSending, setIsSending] = useState(false);
+    const [socket, setSocket] = useState(null);
+    const messagesEndRef = useRef(null);
+
+    useEffect(() => {
+        // Load session history
+        loadSessionHistory();
+
+        // Connect WebSocket (simplified - you'll need socket.io-client)
+        const ws = new WebSocket(`ws://localhost:8000/ws/session/${sessionId}`);
+
+        ws.onopen = () => {
+            // Send takeover event
+            ws.send(JSON.stringify({
+                type: 'takeover',
+                session_id: sessionId,
+                agent_id: 'current_user_id' // Get from auth context
+            }));
+        };
+
+        ws.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            if (data.type === 'visitor_message') {
+                setMessages(prev => [...prev, {
+                    id: Date.now(),
+                    message: data.message,
+                    from: 'visitor',
+                    timestamp: new Date()
+                }]);
+            }
+        };
+
+        setSocket(ws);
+
+        return () => {
+            if (ws) {
+                ws.close();
+            }
+        };
+    }, [sessionId]);
+
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages]);
+
+    const loadSessionHistory = async () => {
+        try {
+            const response = await axios.get(`/api/chat/sessions/${sessionId}/messages`);
+            setMessages(response.data.map(msg => ({
+                id: msg.id,
+                message: msg.message,
+                from: msg.is_from_visitor ? 'visitor' : msg.is_from_ai ? 'ai' : 'agent',
+                timestamp: new Date(msg.created_at)
+            })));
+            setIsLoading(false);
+        } catch (error) {
+            console.error('Failed to load session history:', error);
+            setIsLoading(false);
+        }
+    };
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    };
+
+    const sendMessage = async () => {
+        if (!message.trim() || isSending || !socket) return;
+
+        setIsSending(true);
+
+        const newMessage = {
+            id: Date.now(),
+            message: message,
+            from: 'agent',
+            timestamp: new Date()
+        };
+
+        // Optimistic update
+        setMessages(prev => [...prev, newMessage]);
+
+        // Send via WebSocket
+        socket.send(JSON.stringify({
+            type: 'agent_message',
+            session_id: sessionId,
+            message: message,
+            agent_id: 'current_user_id'
+        }));
+
+        setMessage('');
+        setIsSending(false);
+    };
+
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    };
+
+    const saveAsKnowledge = async (messageId) => {
+        try {
+            await axios.post(`/api/knowledge/save`, {
+                message_id: messageId,
+                session_id: sessionId
+            });
+            alert('Saved to knowledge base!');
+        } catch (error) {
+            console.error('Failed to save:', error);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+            <motion.div
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                className="bg-white rounded-2xl shadow-2xl w-full max-w-4xl h-[80vh] flex flex-col"
+            >
+                {/* Header */}
+                <div className="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-6 rounded-t-2xl flex items-center justify-between">
+                    <div>
+                        <h2 className="text-2xl font-bold">Live Chat Session</h2>
+                        <p className="text-blue-100 text-sm mt-1">
+                            Chatting with {visitorName || 'Anonymous'} • Session #{sessionId}
+                        </p>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="p-2 hover:bg-white/10 rounded-lg transition-colors"
+                    >
+                        <X className="w-6 h-6" />
+                    </button>
+                </div>
+
+                {/* Messages */}
+                <div className="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50">
+                    {isLoading ? (
+                        <div className="flex items-center justify-center h-full">
+                            <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+                        </div>
+                    ) : (
+                        <>
+                            <AnimatePresence>
+                                {messages.map((msg) => (
+                                    <motion.div
+                                        key={msg.id}
+                                        initial={{ opacity: 0, y: 10 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        exit={{ opacity: 0, y: -10 }}
+                                        className={`flex ${msg.from === 'visitor' ? 'justify-start' : 'justify-end'}`}
+                                    >
+                                        <div
+                                            className={`max-w-[70%] rounded-2xl px-4 py-3 ${msg.from === 'visitor'
+                                                    ? 'bg-white border border-gray-200 text-gray-900'
+                                                    : msg.from === 'ai'
+                                                        ? 'bg-gradient-to-r from-purple-100 to-purple-50 border border-purple-200 text-purple-900'
+                                                        : 'bg-gradient-to-r from-blue-600 to-blue-700 text-white'
+                                                }`}
+                                        >
+                                            <div className="flex items-center gap-2 mb-1">
+                                                <span className="text-xs font-semibold opacity-70">
+                                                    {msg.from === 'visitor' ? 'Visitor' : msg.from === 'ai' ? '🤖 AI' : 'You'}
+                                                </span>
+                                                <span className="text-xs opacity-50">
+                                                    {msg.timestamp.toLocaleTimeString()}
+                                                </span>
+                                            </div>
+                                            <p className="text-sm leading-relaxed">{msg.message}</p>
+
+                                            {/* Save as knowledge button for agent messages */}
+                                            {msg.from === 'agent' && (
+                                                <button
+                                                    onClick={() => saveAsKnowledge(msg.id)}
+                                                    className="mt-2 text-xs opacity-70 hover:opacity-100 underline"
+                                                >
+                                                    Save as Knowledge
+                                                </button>
+                                            )}
+                                        </div>
+                                    </motion.div>
+                                ))}
+                            </AnimatePresence>
+                            <div ref={messagesEndRef} />
+                        </>
+                    )}
+                </div>
+
+                {/* Input */}
+                <div className="p-6 bg-white border-t border-gray-200 rounded-b-2xl">
+                    <div className="flex gap-3">
+                        <textarea
+                            value={message}
+                            onChange={(e) => setMessage(e.target.value)}
+                            onKeyPress={handleKeyPress}
+                            placeholder="Type your message..."
+                            rows="2"
+                            className="flex-1 border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                            disabled={isSending}
+                        />
+                        <button
+                            onClick={sendMessage}
+                            disabled={!message.trim() || isSending}
+                            className="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-3 rounded-xl font-semibold hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+                        >
+                            {isSending ? (
+                                <Loader2 className="w-5 h-5 animate-spin" />
+                            ) : (
+                                <>
+                                    <Send className="w-5 h-5" />
+                                    Send
+                                </>
+                            )}
+                        </button>
+                    </div>
+
+                    {/* Quick actions */}
+                    <div className="flex gap-2 mt-3">
+                        <button className="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg transition-colors">
+                            Mark as Resolved
+                        </button>
+                        <button className="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg transition-colors">
+                            Request More Info
+                        </button>
+                        <button className="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg transition-colors">
+                            Schedule Follow-up
+                        </button>
+                    </div>
+                </div>
+            </motion.div>
+        </div>
+    );
+}

client/src/components/AnonymousUsersGeo.jsx

@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import api from '../api/axiosConfig';
+import { MapPin, MessageSquare, Users, ChevronRight } from 'lucide-react';
+
+const AnonymousUsersGeo = ({ websiteId }) => {
+  const [selectedUser, setSelectedUser] = useState(null);
+
+  const { data: users, isLoading, error } = useQuery({
+    queryKey: ['anonymous-users-geo', websiteId],
+    queryFn: async () => {
+      const response = await api.get(`/dashboard/anonymous-users-geo/${websiteId}`);
+      return response.data.anonymous_users || [];
+    },
+    refetchInterval: 30000,
+    retry: 1,
+  });
+
+  const { data: chatHistory } = useQuery({
+    queryKey: ['user-chat-geo', websiteId, selectedUser?.ip],
+    queryFn: async () => {
+      if (!selectedUser) return null;
+      try {
+        const response = await api.get(`/dashboard/user-chat-geo/${websiteId}/${selectedUser.ip}`);
+        return response.data;
+      } catch (error) {
+        console.error('Failed to fetch chat history:', error);
+        return null;
+      }
+    },
+    enabled: !!selectedUser,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="bg-white rounded-2xl shadow-sm border border-secondary-100 p-6">
+        <div className="animate-pulse space-y-4">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="h-20 bg-secondary-100 rounded-xl" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-white rounded-2xl shadow-sm border border-secondary-100 p-6">
+        <p className="text-red-600">Failed to load anonymous users</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* Users List */}
+      <div className="lg:col-span-1 bg-white rounded-2xl shadow-sm border border-secondary-100 overflow-hidden flex flex-col">
+        <div className="p-4 md:p-6 border-b border-secondary-100">
+          <h3 className="text-lg font-bold text-secondary-900 flex items-center gap-2">
+            <Users className="w-5 h-5 text-primary-600" />
+            Anonymous Users
+          </h3>
+          <p className="text-sm text-secondary-500 mt-1">{users?.length || 0} unique locations</p>
+        </div>
+
+        <div className="divide-y divide-secondary-100 flex-1 overflow-y-auto">
+          {users && users.length > 0 ? (
+            users.map((user) => (
+              <button
+                key={user.ip}
+                onClick={() => setSelectedUser(user)}
+                className={`w-full p-4 text-left transition-colors hover:bg-secondary-50 ${
+                  selectedUser?.ip === user.ip ? 'bg-primary-50 border-l-4 border-primary-600' : 'border-l-4 border-transparent'
+                }`}
+              >
+                <div className="space-y-2">
+                  <div className="font-mono text-sm font-semibold text-secondary-900 truncate">
+                    {user.ip}
+                  </div>
+                  <div className="text-sm text-secondary-600 truncate">
+                    {user.display_name}
+                  </div>
+                  <div className="flex items-center gap-3 text-xs text-secondary-500 flex-wrap">
+                    <span className="flex items-center gap-1">
+                      <MessageSquare className="w-3 h-3" />
+                      {user.total_messages}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Users className="w-3 h-3" />
+                      {user.sessions.length}
+                    </span>
+                  </div>
+                </div>
+              </button>
+            ))
+          ) : (
+            <div className="p-8 text-center text-secondary-500">
+              <p className="text-sm">No anonymous users yet</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Chat History */}
+      <div className="lg:col-span-2 bg-white rounded-2xl shadow-sm border border-secondary-100 overflow-hidden flex flex-col">
+        {selectedUser ? (
+          <>
+            {/* Header */}
+            <div className="p-4 md:p-6 border-b border-secondary-100 bg-gradient-to-r from-primary-50 to-transparent">
+              <div className="space-y-2">
+                <div className="font-mono text-lg font-bold text-secondary-900 truncate">
+                  {selectedUser.ip}
+                </div>
+                <div className="text-secondary-600 flex items-center gap-2 text-sm">
+                  <MapPin className="w-4 h-4 text-primary-600 flex-shrink-0" />
+                  <span className="truncate">{selectedUser.display_name}</span>
+                </div>
+                {chatHistory && (
+                  <div className="flex gap-4 md:gap-6 text-xs md:text-sm text-secondary-500 pt-2 flex-wrap">
+                    <span>{chatHistory.total_messages} messages</span>
+                    <span>{chatHistory.total_sessions} sessions</span>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Messages */}
+            <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-4 bg-secondary-50/30">
+              {chatHistory?.chat_history && chatHistory.chat_history.length > 0 ? (
+                chatHistory.chat_history.map((msg, idx) => (
+                  <div
+                    key={idx}
+                    className={`flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}
+                  >
+                    <div
+                      className={`max-w-xs px-4 py-3 rounded-lg text-sm ${
+                        msg.sender === 'user'
+                          ? 'bg-primary-600 text-white rounded-br-none'
+                          : 'bg-white text-secondary-900 border border-secondary-200 rounded-bl-none'
+                      }`}
+                    >
+                      <p className="break-words">{msg.text}</p>
+                      <p className={`text-xs mt-1 ${msg.sender === 'user' ? 'text-primary-100' : 'text-secondary-400'}`}>
+                        {new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                      </p>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <div className="flex items-center justify-center h-full text-secondary-500">
+                  <p className="text-sm">No messages yet</p>
+                </div>
+              )}
+            </div>
+          </>
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-secondary-400">
+            <div className="text-center px-6">
+              <MessageSquare className="w-12 h-12 mx-auto mb-4 text-secondary-300" />
+              <p className="text-sm">Select a user to view chat history</p>
+              <p className="text-xs text-secondary-400 mt-2">Click on any user from the list</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AnonymousUsersGeo;

client/src/components/Auth/GoogleAuthButton.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const GoogleAuthButton = () => {
+  const handleGoogleLogin = () => {
+    // Redirect to Google OAuth endpoint
+    window.location.href = '/api/auth/google';
+  };
+
+  return (
+    <motion.button
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+      onClick={handleGoogleLogin}
+      className="w-full flex items-center justify-center gap-3 px-4 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+    >
+      <svg className="w-5 h-5" viewBox="0 0 24 24">
+        <path
+          fill="#4285F4"
+          d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        />
+        <path
+          fill="#34A853"
+          d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        />
+        <path
+          fill="#FBBC05"
+          d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        />
+        <path
+          fill="#EA4335"
+          d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        />
+      </svg>
+      Continue with Google
+    </motion.button>
+  );
+};
+
+export default GoogleAuthButton;

client/src/components/Auth/LoginForm.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+
+const LoginForm = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await login(email, password);
+      navigate('/dashboard');
+    } catch (error) {
+      setError('Invalid credentials');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700">Email</label>
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+          required
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700">Password</label>
+        <input
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+          required
+        />
+      </div>
+      {error && <p className="text-red-500 text-sm">{error}</p>}
+      <button
+        type="submit"
+        className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+      >
+        Sign In
+      </button>
+    </form>
+  );
+};
+
+export default LoginForm;

client/src/components/BulkUploadModal.jsx

@@ -0,0 +1,557 @@
+import React, { useState, useCallback, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Upload, FileText, Download, Loader, Check, AlertCircle, Trash2, PlayCircle, PauseCircle } from 'lucide-react';
+import api from '../api/axiosConfig';
+import toast from 'react-hot-toast';
+
+const BulkUploadModal = ({ isOpen, onClose, websiteId, onSuccess }) => {
+    const [files, setFiles] = useState([]);
+    const [isDragging, setIsDragging] = useState(false);
+    const [uploadStatus, setUploadStatus] = useState({});
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [previewData, setPreviewData] = useState(null); // { fileName: string, data: array }
+    const fileInputRef = useRef(null);
+
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(true);
+    }, []);
+
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+    }, []);
+
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+
+        const droppedFiles = Array.from(e.dataTransfer.files).filter(
+            file => file.name.endsWith('.csv') || file.name.endsWith('.json')
+        );
+
+        if (droppedFiles.length > 0) {
+            addFilesToQueue(droppedFiles);
+        } else {
+            toast.error('Please upload CSV or JSON files only');
+        }
+    }, []);
+
+    const handleFileSelect = (e) => {
+        const selectedFiles = Array.from(e.target.files);
+        addFilesToQueue(selectedFiles);
+    };
+
+    const addFilesToQueue = (newFiles) => {
+        const fileObjects = newFiles.map((file, idx) => ({
+            id: Date.now() + idx,
+            file,
+            name: file.name,
+            size: file.size,
+            status: 'pending', // pending, uploading, success, error
+            progress: 0,
+            result: null
+        }));
+
+        setFiles(prev => [...prev, ...fileObjects]);
+
+        // Auto-preview first file if no preview exists
+        if (!previewData && fileObjects.length > 0) {
+            generatePreview(fileObjects[0]);
+        }
+    };
+
+    const generatePreview = async (fileObj) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            try {
+                let data = [];
+                const content = e.target.result;
+
+                if (fileObj.name.endsWith('.json')) {
+                    const json = JSON.parse(content);
+                    data = Array.isArray(json) ? json : [json];
+                } else {
+                    // Simple CSV parsing for preview
+                    const lines = content.split('\n');
+                    const headers = lines[0].split(',').map(h => h.trim().replace(/^"(.*)"$/, '$1'));
+                    data = lines.slice(1).filter(l => l.trim()).map(line => {
+                        const values = line.split(',').map(v => v.trim().replace(/^"(.*)"$/, '$1'));
+                        const obj = {};
+                        headers.forEach((header, i) => {
+                            obj[header] = values[i];
+                        });
+                        return obj;
+                    });
+                }
+
+                setPreviewData({
+                    fileName: fileObj.name,
+                    data: data.slice(0, 5) // Show first 5 for preview
+                });
+            } catch (err) {
+                console.error("Preview generation failed", err);
+                toast.error("Failed to generate preview for " + fileObj.name);
+            }
+        };
+        reader.readAsText(fileObj.file);
+    };
+
+    const removeFile = (fileId) => {
+        const remaining = files.filter(f => f.id !== fileId);
+        setFiles(remaining);
+
+        if (previewData && previewData.fileName === files.find(f => f.id === fileId)?.name) {
+            if (remaining.length > 0) {
+                generatePreview(remaining[0]);
+            } else {
+                setPreviewData(null);
+            }
+        }
+
+        setUploadStatus(prev => {
+            const newStatus = { ...prev };
+            delete newStatus[fileId];
+            return newStatus;
+        });
+    };
+
+    const uploadFile = async (fileObj) => {
+        const formData = new FormData();
+        formData.append('file', fileObj.file);
+        formData.append('website_id', websiteId);
+
+        try {
+            setFiles(prev => prev.map(f =>
+                f.id === fileObj.id ? { ...f, status: 'uploading', progress: 0 } : f
+            ));
+
+            const response = await api.post('/faqs/bulk-upload', formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+                onUploadProgress: (progressEvent) => {
+                    const percentCompleted = Math.round(
+                        (progressEvent.loaded * 100) / progressEvent.total
+                    );
+                    setFiles(prev => prev.map(f =>
+                        f.id === fileObj.id ? { ...f, progress: percentCompleted } : f
+                    ));
+                }
+            });
+
+            setFiles(prev => prev.map(f =>
+                f.id === fileObj.id
+                    ? { ...f, status: 'success', progress: 100, result: response.data }
+                    : f
+            ));
+
+            setUploadStatus(prev => ({
+                ...prev,
+                [fileObj.id]: {
+                    success: true,
+                    data: response.data
+                }
+            }));
+
+            toast.success(`${fileObj.name}: ${response.data.successful} FAQs uploaded successfully`);
+            return true;
+
+        } catch (error) {
+            setFiles(prev => prev.map(f =>
+                f.id === fileObj.id
+                    ? { ...f, status: 'error', progress: 0 }
+                    : f
+            ));
+
+            setUploadStatus(prev => ({
+                ...prev,
+                [fileObj.id]: {
+                    success: false,
+                    error: error.response?.data?.detail || 'Upload failed'
+                }
+            }));
+
+            toast.error(`${fileObj.name}: Upload failed`);
+            return false;
+        }
+    };
+
+    const processQueue = async () => {
+        setIsProcessing(true);
+        const pendingFiles = files.filter(f => f.status === 'pending');
+
+        for (const fileObj of pendingFiles) {
+            await uploadFile(fileObj);
+        }
+
+        setIsProcessing(false);
+        onSuccess();
+    };
+
+    const downloadSampleCSV = () => {
+        const csvContent = `question,answer,category,priority,is_active
+"What are your operating hours?","We are open Monday to Friday, 9 AM to 5 PM.","General",5,true
+"How can I contact support?","You can reach us at support@example.com or call (123) 456-7890.","Support",8,true
+"What payment methods do you accept?","We accept all major credit cards, PayPal, and bank transfers.","Billing",7,true`;
+
+        const blob = new Blob([csvContent], { type: 'text/csv' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'faq_template.csv';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+        toast.success('Sample CSV template downloaded');
+    };
+
+    const downloadSampleJSON = () => {
+        const jsonContent = JSON.stringify([
+            {
+                question: "What are your operating hours?",
+                answer: "We are open Monday to Friday, 9 AM to 5 PM.",
+                category: "General",
+                priority: 5,
+                is_active: true
+            },
+            {
+                question: "How can I contact support?",
+                answer: "You can reach us at support@example.com or call (123) 456-7890.",
+                category: "Support",
+                priority: 8,
+                is_active: true
+            },
+            {
+                question: "What payment methods do you accept?",
+                answer: "We accept all major credit cards, PayPal, and bank transfers.",
+                category: "Billing",
+                priority: 7,
+                is_active: true
+            }
+        ], null, 2);
+
+        const blob = new Blob([jsonContent], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'faq_template.json';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+        toast.success('Sample JSON template downloaded');
+    };
+
+    const formatFileSize = (bytes) => {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+    };
+
+    const getStatusIcon = (status) => {
+        switch (status) {
+            case 'uploading':
+                return <Loader className="w-5 h-5 text-blue-500 animate-spin" />;
+            case 'success':
+                return <Check className="w-5 h-5 text-green-500" />;
+            case 'error':
+                return <AlertCircle className="w-5 h-5 text-red-500" />;
+            default:
+                return <FileText className="w-5 h-5 text-secondary-400" />;
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-secondary-900/50 backdrop-blur-sm">
+            <motion.div
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                className="bg-white rounded-2xl shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col"
+            >
+                {/* Header */}
+                <div className="px-6 py-4 border-b border-secondary-100 flex justify-between items-center bg-gradient-to-r from-green-50 to-emerald-50">
+                    <div>
+                        <h3 className="text-xl font-bold text-secondary-900 flex items-center gap-2">
+                            <Upload className="w-6 h-6 text-green-600" />
+                            Bulk Upload FAQs
+                        </h3>
+                        <p className="text-sm text-secondary-600 mt-1">Upload multiple FAQs using CSV or JSON files</p>
+                    </div>
+                    <button
+                        onClick={onClose}
+                        className="text-secondary-400 hover:text-secondary-600 p-2 hover:bg-white rounded-lg transition-colors"
+                    >
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-6 space-y-6">
+                    {/* Template Download Section */}
+                    <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
+                        <div className="flex items-start gap-3">
+                            <Download className="w-5 h-5 text-blue-600 mt-0.5" />
+                            <div className="flex-1">
+                                <h4 className="font-semibold text-blue-900">Download Sample Templates</h4>
+                                <p className="text-sm text-blue-700 mt-1">Use these templates to format your FAQ data correctly</p>
+                                <div className="flex gap-3 mt-3">
+                                    <button
+                                        onClick={downloadSampleCSV}
+                                        className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium flex items-center gap-2"
+                                    >
+                                        <FileText className="w-4 h-4" />
+                                        CSV Template
+                                    </button>
+                                    <button
+                                        onClick={downloadSampleJSON}
+                                        className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium flex items-center gap-2"
+                                    >
+                                        <FileText className="w-4 h-4" />
+                                        JSON Template
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Dropzone */}
+                    {!isProcessing && files.every(f => f.status === 'pending') && (
+                        <div
+                            onDragOver={handleDragOver}
+                            onDragLeave={handleDragLeave}
+                            onDrop={handleDrop}
+                            onClick={() => fileInputRef.current?.click()}
+                            className={`border-2 border-dashed rounded-xl p-12 text-center cursor-pointer transition-all ${isDragging
+                                ? 'border-green-500 bg-green-50'
+                                : 'border-secondary-300 hover:border-green-400 hover:bg-green-50/50'
+                                }`}
+                        >
+                            <Upload className={`w-12 h-12 mx-auto mb-4 ${isDragging ? 'text-green-500' : 'text-secondary-400'}`} />
+                            <p className="text-lg font-medium text-secondary-900 mb-1">
+                                {isDragging ? 'Drop files here' : 'Drag & drop files here'}
+                            </p>
+                            <p className="text-sm text-secondary-500">or click to browse</p>
+                            <p className="text-xs text-secondary-400 mt-2">Supports CSV and JSON files</p>
+                            <input
+                                ref={fileInputRef}
+                                type="file"
+                                accept=".csv,.json"
+                                multiple
+                                onChange={handleFileSelect}
+                                className="hidden"
+                            />
+                        </div>
+                    )}
+
+                    {/* Data Preview */}
+                    {previewData && files.some(f => f.status === 'pending') && !isProcessing && (
+                        <div className="bg-white border border-secondary-200 rounded-xl overflow-hidden shadow-sm">
+                            <div className="px-4 py-3 bg-secondary-50 border-b border-secondary-100 flex justify-between items-center">
+                                <h4 className="font-semibold text-secondary-900 flex items-center gap-2">
+                                    <FileText className="w-4 h-4 text-primary-500" />
+                                    Preview: {previewData.fileName} (First 5 rows)
+                                </h4>
+                            </div>
+                            <div className="overflow-x-auto">
+                                <table className="w-full text-sm text-left text-secondary-500">
+                                    <thead className="text-xs text-secondary-700 uppercase bg-secondary-50">
+                                        <tr>
+                                            <th className="px-4 py-2">Question</th>
+                                            <th className="px-4 py-2">Answer</th>
+                                            <th className="px-4 py-2">Category</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody className="divide-y divide-secondary-100">
+                                        {previewData.data.map((row, idx) => (
+                                            <tr key={idx} className="bg-white hover:bg-secondary-50/50 transition-colors">
+                                                <td className="px-4 py-2 font-medium text-secondary-900 max-w-xs truncate">{row.question}</td>
+                                                <td className="px-4 py-2 max-w-xs truncate">{row.answer}</td>
+                                                <td className="px-4 py-2">{row.category || 'General'}</td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Upload Queue */}
+                    {files.length > 0 && (
+                        <div className="space-y-3">
+                            <div className="flex items-center justify-between">
+                                <h4 className="font-semibold text-secondary-900">Upload Queue ({files.length})</h4>
+                                {!isProcessing && (
+                                    <button
+                                        onClick={() => {
+                                            setFiles([]);
+                                            setPreviewData(null);
+                                        }}
+                                        className="text-sm text-red-600 hover:text-red-700 font-medium"
+                                    >
+                                        Clear All
+                                    </button>
+                                )}
+                            </div>
+
+                            <div className="space-y-2 max-h-64 overflow-y-auto pr-2">
+                                {files.map((fileObj) => (
+                                    <motion.div
+                                        key={fileObj.id}
+                                        initial={{ opacity: 0, y: -10 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        className={`bg-white border rounded-lg p-4 transition-all ${fileObj.status === 'success' ? 'border-green-200 bg-green-50/20' :
+                                                fileObj.status === 'error' ? 'border-red-200 bg-red-50/20' :
+                                                    'border-secondary-200 hover:shadow-md'
+                                            }`}
+                                    >
+                                        <div className="flex items-center gap-3">
+                                            {getStatusIcon(fileObj.status)}
+                                            <div className="flex-1 min-w-0">
+                                                <div className="flex items-center justify-between gap-2">
+                                                    <p className="font-medium text-secondary-900 truncate">{fileObj.name}</p>
+                                                    <p className="text-xs text-secondary-500 whitespace-nowrap">{formatFileSize(fileObj.size)}</p>
+                                                </div>
+
+                                                {fileObj.status === 'uploading' && (
+                                                    <div className="mt-2">
+                                                        <div className="w-full bg-secondary-200 rounded-full h-1.5 overflow-hidden">
+                                                            <div
+                                                                className="bg-primary-600 h-1.5 transition-all duration-300"
+                                                                style={{ width: `${fileObj.progress}%` }}
+                                                            />
+                                                        </div>
+                                                        <div className="flex justify-between items-center mt-1">
+                                                            <p className="text-[10px] text-secondary-600 uppercase font-bold tracking-wider">Uploading...</p>
+                                                            <p className="text-[10px] text-primary-600 font-bold">{fileObj.progress}%</p>
+                                                        </div>
+                                                    </div>
+                                                )}
+
+                                                {fileObj.status === 'success' && fileObj.result && (
+                                                    <div className="mt-2 flex items-center gap-3 text-xs">
+                                                        <span className="text-green-600 font-semibold bg-green-100 px-2 py-0.5 rounded-full">
+                                                            ✓ {fileObj.result.successful} Saved
+                                                        </span>
+                                                        {fileObj.result.failed > 0 && (
+                                                            <span className="text-red-600 font-semibold bg-red-100 px-2 py-0.5 rounded-full">
+                                                                ⚠ {fileObj.result.failed} Failed
+                                                            </span>
+                                                        )}
+                                                    </div>
+                                                )}
+
+                                                {fileObj.status === 'error' && uploadStatus[fileObj.id]?.error && (
+                                                    <p className="mt-1 text-xs text-red-600 font-medium">
+                                                        ✗ {uploadStatus[fileObj.id].error}
+                                                    </p>
+                                                )}
+                                            </div>
+
+                                            {fileObj.status === 'pending' && !isProcessing && (
+                                                <button
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        removeFile(fileObj.id);
+                                                    }}
+                                                    className="p-2 text-secondary-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors flex-shrink-0"
+                                                >
+                                                    <Trash2 className="w-4 h-4" />
+                                                </button>
+                                            )}
+                                        </div>
+                                    </motion.div>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Overall Summary if all completed */}
+                    {!isProcessing && files.length > 0 && files.every(f => f.status !== 'pending') && (
+                        <motion.div
+                            initial={{ opacity: 0, scale: 0.98 }}
+                            animate={{ opacity: 1, scale: 1 }}
+                            className="bg-secondary-900 text-white rounded-xl p-6 shadow-xl"
+                        >
+                            <h4 className="font-bold text-lg mb-4 flex items-center gap-2">
+                                <CheckCircle className="w-5 h-5 text-green-400" />
+                                Batch Processing Complete
+                            </h4>
+                            <div className="grid grid-cols-3 gap-4 text-center">
+                                <div className="bg-white/10 rounded-lg p-3 backdrop-blur-sm">
+                                    <p className="text-secondary-400 text-xs uppercase font-bold tracking-wider">Total Rows</p>
+                                    <p className="text-2xl font-black text-white">
+                                        {files.reduce((acc, f) => acc + (f.result?.total || 0), 0)}
+                                    </p>
+                                </div>
+                                <div className="bg-green-500/20 rounded-lg p-3 backdrop-blur-sm border border-green-500/30">
+                                    <p className="text-green-400 text-xs uppercase font-bold tracking-wider">Successful</p>
+                                    <p className="text-2xl font-black text-green-400">
+                                        {files.reduce((acc, f) => acc + (f.result?.successful || 0), 0)}
+                                    </p>
+                                </div>
+                                <div className="bg-red-500/20 rounded-lg p-3 backdrop-blur-sm border border-red-500/30">
+                                    <p className="text-red-400 text-xs uppercase font-bold tracking-wider">Failed</p>
+                                    <p className="text-2xl font-black text-red-400">
+                                        {files.reduce((acc, f) => acc + (f.result?.failed || 0), 0)}
+                                    </p>
+                                </div>
+                            </div>
+                        </motion.div>
+                    )}
+                </div>
+
+                {/* Footer */}
+                <div className="px-6 py-4 border-t border-secondary-100 bg-secondary-50 flex justify-between items-center">
+                    <div className="text-sm text-secondary-600 font-medium">
+                        {files.length > 0 && (
+                            <div className="flex items-center gap-2">
+                                <div className="w-32 bg-secondary-200 rounded-full h-1.5 overflow-hidden">
+                                    <div
+                                        className="bg-green-500 h-1.5 transition-all"
+                                        style={{ width: `${(files.filter(f => f.status === 'success' || f.status === 'error').length / files.length) * 100}%` }}
+                                    />
+                                </div>
+                                <span>
+                                    {files.filter(f => f.status === 'success' || f.status === 'error').length} of {files.length} done
+                                </span>
+                            </div>
+                        )}
+                    </div>
+                    <div className="flex gap-3">
+                        <button
+                            onClick={onClose}
+                            className="px-5 py-2 text-secondary-600 hover:bg-secondary-100 rounded-lg transition-colors font-bold text-sm"
+                        >
+                            {files.every(f => f.status !== 'pending') && files.length > 0 ? 'Finish' : 'Cancel'}
+                        </button>
+                        <button
+                            onClick={processQueue}
+                            disabled={files.length === 0 || isProcessing || files.every(f => f.status !== 'pending')}
+                            className="px-8 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-all font-bold text-sm flex items-center gap-2 shadow-lg shadow-green-500/30 disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.02] active:scale-[0.98]"
+                        >
+                            {isProcessing ? (
+                                <>
+                                    <Loader className="w-4 h-4 animate-spin" />
+                                    Processing Batch...
+                                </>
+                            ) : (
+                                <>
+                                    <PlayCircle className="w-5 h-5" />
+                                    Confirm and Upload
+                                </>
+                            )}
+                        </button>
+                    </div>
+                </div>
+            </motion.div>
+        </div>
+    );
+};
+
+export default BulkUploadModal;

client/src/components/ChatWidget/ChatBox.jsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import api from '../../api/axiosConfig';
+import TypingIndicator from './TypingIndicator';
+
+const ChatBox = ({ websiteId }) => {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const sendMessage = async () => {
+    if (!input.trim()) return;
+
+    const userMessage = { text: input, sender: 'user' };
+    setMessages(prev => [...prev, userMessage]);
+    setInput('');
+    setLoading(true);
+
+    try {
+      const response = await api.post('/chat', {
+        message: input,
+        website_id: websiteId
+      });
+
+      const botMessage = {
+        text: response.data.response,
+        sender: 'bot',
+        needsContact: response.data.needs_owner_contact
+      };
+
+      setMessages(prev => [...prev, botMessage]);
+    } catch (error) {
+      const errorMessage = {
+        text: 'Sorry, I encountered an error. Please try again.',
+        sender: 'bot'
+      };
+      setMessages(prev => [...prev, errorMessage]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-96 bg-white rounded-lg shadow-lg">
+      <div className="bg-blue-500 text-white p-3 rounded-t-lg">
+        <h3 className="font-semibold">Customer Supports</h3>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {messages.map((message, index) => (
+          <div
+            key={index}
+            className={`flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}
+          >
+            <div
+              className={`max-w-xs px-3 py-2 rounded-lg ${message.sender === 'user'
+                ? 'bg-blue-500 text-white'
+                : 'bg-gray-200 text-gray-800'
+                }`}
+            >
+              {message.text}
+              {message.needsContact && (
+                <div className="mt-2 text-xs text-blue-600">
+                  This may require owner attention
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+        {loading && (
+          <div className="flex justify-start">
+            <TypingIndicator />
+          </div>
+        )}
+      </div>
+
+      <div className="p-3 border-t">
+        <div className="flex space-x-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
+            placeholder="Type your message..."
+            className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <button
+            onClick={sendMessage}
+            disabled={loading}
+            className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:opacity-50"
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatBox;

client/src/components/ChatWidget/ChatBubble.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import ReactMarkdown from 'react-markdown';
+
+const ChatBubble = ({ message, isUser, timestamp }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-3`}
+    >
+      <div
+        className={`max-w-xs px-4 py-2 rounded-lg ${isUser
+            ? 'bg-blue-500 text-white rounded-br-sm'
+            : 'bg-gray-200 text-gray-800 rounded-bl-sm'
+          }`}
+      >
+        <div className="text-sm prose prose-sm max-w-none">
+          <ReactMarkdown
+            components={{
+              a: ({ node, ...props }) => (
+                <a
+                  {...props}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`${isUser ? 'text-blue-100' : 'text-blue-600'} underline hover:no-underline font-medium`}
+                />
+              ),
+              p: ({ node, ...props }) => <p {...props} className="mb-0 overflow-wrap-anywhere" />
+            }}
+          >
+            {message}
+          </ReactMarkdown>
+        </div>
+        {timestamp && (
+          <p className={`text-xs mt-1 ${isUser ? 'text-blue-100' : 'text-gray-500'}`}>
+            {new Date(timestamp).toLocaleTimeString()}
+          </p>
+        )}
+      </div>
+    </motion.div>
+  );
+};
+
+export default ChatBubble;

client/src/components/ChatWidget/TypingIndicator.css

@@ -0,0 +1,193 @@
+/* Typing Indicator Component */
+
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  gap: 8px;
+}
+
+.typing-indicator__text {
+  font-size: 14px;
+  color: #666;
+  font-style: italic;
+}
+
+.typing-indicator__dots {
+  display: flex;
+  gap: 4px;
+}
+
+.typing-indicator__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #4A90E2;
+  animation: typing-bounce 1.4s infinite ease-in-out;
+}
+
+.typing-indicator__dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.typing-indicator__dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-indicator__dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing-bounce {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.7;
+  }
+  30% {
+    transform: translateY(-10px);
+    opacity: 1;
+  }
+}
+
+/* Timeout Warning */
+.timeout-warning {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: #fff3cd;
+  border-left: 4px solid #ffc107;
+  border-radius: 4px;
+  margin: 8px 0;
+}
+
+.timeout-warning__icon {
+  font-size: 20px;
+}
+
+.timeout-warning__text {
+  flex: 1;
+  font-size: 13px;
+  color: #856404;
+}
+
+.timeout-warning__text strong {
+  display: block;
+  margin-bottom: 4px;
+}
+
+/* Slow Response Indicator */
+.slow-response {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #e8f4fd;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #31708f;
+  margin-top: 8px;
+}
+
+.slow-response__spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid #31708f;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Response Time Badge */
+.response-time-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: #f5f5f5;
+  border-radius: 12px;
+  font-size: 11px;
+  color: #666;
+  margin-top: 4px;
+}
+
+.response-time-badge--fast {
+  background: #d4edda;
+  color: #155724;
+}
+
+.response-time-badge--slow {
+  background: #fff3cd;
+  color: #856404;
+}
+
+.response-time-badge--timeout {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+/* Error State */
+.chat-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 24px;
+  text-align: center;
+}
+
+.chat-error__icon {
+  font-size: 48px;
+  color: #E74C3C;
+}
+
+.chat-error__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.chat-error__message {
+  font-size: 14px;
+  color: #666;
+  max-width: 300px;
+}
+
+.chat-error__actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.chat-error__btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.chat-error__btn--primary {
+  background: #4A90E2;
+  color: white;
+}
+
+.chat-error__btn--primary:hover {
+  background: #357ABD;
+}
+
+.chat-error__btn--secondary {
+  background: #f5f5f5;
+  color: #333;
+}
+
+.chat-error__btn--secondary:hover {
+  background: #e0e0e0;
+}

client/src/components/ChatWidget/TypingIndicator.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import './TypingIndicator.css';
+
+/**
+ * Typing Indicator Component
+ * Shows animated dots while bot is thinking/responding
+ */
+export const TypingIndicator = ({ text = "Bot is typing" }) => {
+  return (
+    <div className="typing-indicator">
+      <span className="typing-indicator__text">{text}</span>
+      <div className="typing-indicator__dots">
+        <span className="typing-indicator__dot"></span>
+        <span className="typing-indicator__dot"></span>
+        <span className="typing-indicator__dot"></span>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Slow Response Indicator
+ * Shows when response is taking longer than expected
+ */
+export const SlowResponseIndicator = ({ elapsedTime }) => {
+  return (
+    <div className="slow-response">
+      <div className="slow-response__spinner"></div>
+      <span>
+        This is taking longer than usual ({Math.round(elapsedTime)}s)...
+        We're searching thoroughly for the best answer.
+      </span>
+    </div>
+  );
+};
+
+/**
+ * Timeout Warning
+ * Shows when request is approaching timeout
+ */
+export const TimeoutWarning = ({ remainingTime }) => {
+  return (
+    <div className="timeout-warning">
+      <span className="timeout-warning__icon">⏱️</span>
+      <div className="timeout-warning__text">
+        <strong>Taking longer than expected</strong>
+        We've notified our team and will get back to you shortly.
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Response Time Badge
+ * Shows response time with color coding
+ */
+export const ResponseTimeBadge = ({ responseTime }) => {
+  const getClassName = () => {
+    if (responseTime < 2) return 'response-time-badge--fast';
+    if (responseTime < 5) return 'response-time-badge';
+    if (responseTime < 10) return 'response-time-badge--slow';
+    return 'response-time-badge--timeout';
+  };
+  
+  return (
+    <div className={`response-time-badge ${getClassName()}`}>
+      <span>⚡</span>
+      <span>{responseTime.toFixed(1)}s</span>
+    </div>
+  );
+};
+
+/**
+ * Chat Error Component
+ * Shows when request times out or fails
+ */
+export const ChatError = ({ onRetry, onContactSupport }) => {
+  return (
+    <div className="chat-error">
+      <div className="chat-error__icon">⏰</div>
+      <h4 className="chat-error__title">Request Timed Out</h4>
+      <p className="chat-error__message">
+        We're sorry, but your request is taking longer than expected. 
+        We've sent you an email and notified our team.
+      </p>
+      <div className="chat-error__actions">
+        <button 
+          className="chat-error__btn chat-error__btn--primary"
+          onClick={onRetry}
+        >
+          Try Again
+        </button>
+        <button 
+          className="chat-error__btn chat-error__btn--secondary"
+          onClick={onContactSupport}
+        >
+          Contact Support
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default TypingIndicator;

client/src/components/ChatWidget/index.jsx

@@ -0,0 +1,249 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { MessageCircle, X, Send } from 'lucide-react';
+import ChatBubble from './ChatBubble';
+import TypingIndicator from './TypingIndicator'; // Import TypingIndicator
+
+const ChatWidget = ({ websiteId, position = 'bottom-right' }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+  const [socket, setSocket] = useState(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+  const messagesEndRef = useRef(null);
+
+  // Initialize session ID
+  const [sessionId] = useState(() => {
+    const stored = localStorage.getItem(`chat_session_${websiteId}`);
+    if (stored) return stored;
+    const newId = `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    localStorage.setItem(`chat_session_${websiteId}`, newId);
+    return newId;
+  });
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, isTyping]);
+
+  useEffect(() => {
+    if (websiteId && isOpen) {
+      // Use native WebSocket to match FastAPI backend
+      const wsUrl = `ws://localhost:8000/ws/${websiteId}`;
+      const newSocket = new WebSocket(wsUrl);
+
+      newSocket.onopen = () => {
+        setIsConnected(true);
+
+        // Register session immediately
+        newSocket.send(JSON.stringify({
+          type: 'register_session',
+          session_id: sessionId,
+          website_id: websiteId
+        }));
+
+        if (messages.length === 0) {
+          setMessages(prev => [...prev, {
+            id: Date.now(),
+            message: 'Hello! How can I help you today?',
+            isUser: false,
+            timestamp: new Date()
+          }]);
+        }
+      };
+
+      newSocket.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+        setIsTyping(false); // Stop typing animation when message received
+
+        if (data.type === 'admin_response' || data.response) {
+          setMessages(prev => [...prev, {
+            id: Date.now(),
+            message: data.message || data.response,
+            isUser: false,
+            timestamp: new Date(),
+            needsContact: data.needs_owner_contact
+          }]);
+        }
+      };
+
+      newSocket.onclose = () => setIsConnected(false);
+      newSocket.onerror = (err) => {
+        console.error("WebSocket error:", err);
+        setIsConnected(false);
+      };
+
+      setSocket(newSocket);
+
+      return () => {
+        newSocket.close();
+      };
+    }
+  }, [websiteId, isOpen]);
+
+  const sendMessage = async () => {
+    if (!inputValue.trim()) return;
+
+    const userMessage = {
+      id: Date.now(),
+      message: inputValue,
+      isUser: true,
+      timestamp: new Date()
+    };
+
+    setMessages(prev => [...prev, userMessage]);
+    setInputValue('');
+    setIsTyping(true); // Start typing animation
+
+    // OPTIMIZED: Use WebSocket instead of HTTP fetch for faster response
+    if (socket && isConnected) {
+      try {
+        socket.send(JSON.stringify({
+          type: 'chat_message',
+          message: userMessage.message,
+          visitor_name: "Visitor",
+          visitor_email: "", // Can update if we capture email
+          website_id: parseInt(websiteId),
+          session_id: sessionId
+        }));
+      } catch (err) {
+        console.error("Socket send error:", err);
+        fallbackToHttp(userMessage);
+      }
+    } else {
+      // Fallback if socket fails
+      fallbackToHttp(userMessage);
+    }
+  };
+
+  const fallbackToHttp = async (userMessage) => {
+    try {
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('token')}`
+        },
+        body: JSON.stringify({
+          message: userMessage.message,
+          website_id: parseInt(websiteId),
+          session_id: sessionId,
+          visitor_name: "Visitor",
+          visitor_email: ""
+        })
+      });
+
+      if (!response.ok) throw new Error('Network response was not ok');
+      const data = await response.json();
+
+      setIsTyping(false);
+      setMessages(prev => [...prev, {
+        id: Date.now(),
+        message: data.response,
+        isUser: false,
+        timestamp: new Date(),
+        needsContact: data.needs_owner_contact
+      }]);
+
+    } catch (error) {
+      console.error('Error sending message:', error);
+      setIsTyping(false);
+      setMessages(prev => [...prev, {
+        id: Date.now(),
+        message: "Sorry, I encountered an error. Please try again.",
+        isUser: false,
+        timestamp: new Date()
+      }]);
+    }
+  };
+
+  const positionClasses = {
+    'bottom-right': 'bottom-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'top-right': 'top-4 right-4',
+    'top-left': 'top-4 left-4'
+  };
+
+  return (
+    <div className={`fixed ${positionClasses[position]} z-50`}>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.8, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.8, y: 20 }}
+            className="mb-4 w-80 h-96 bg-white rounded-lg shadow-2xl border border-gray-200 flex flex-col"
+          >
+            {/* Header */}
+            <div className="bg-blue-500 text-white p-4 rounded-t-lg flex justify-between items-center">
+              <div className="flex items-center gap-2">
+                <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-400' : 'bg-red-400'}`} />
+                <span className="font-semibold">Customer Supportsa</span>
+              </div>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="text-white hover:text-gray-200"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Messages */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-2">
+              {messages.map((msg) => (
+                <ChatBubble
+                  key={msg.id}
+                  message={msg.message}
+                  isUser={msg.isUser}
+                  timestamp={msg.timestamp}
+                />
+              ))}
+              {isTyping && (
+                <div className="flex justify-start">
+                  <TypingIndicator />
+                </div>
+              )}
+              <div ref={messagesEndRef} />
+            </div>
+
+            {/* Input */}
+            <div className="p-4 border-t border-gray-200">
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
+                  placeholder="Type your message..."
+                  className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+                <button
+                  onClick={sendMessage}
+                  className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  <Send className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Toggle Button */}
+      <motion.button
+        whileHover={{ scale: 1.1 }}
+        whileTap={{ scale: 0.9 }}
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-14 h-14 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-300 flex items-center justify-center"
+      >
+        {isOpen ? <X className="w-6 h-6" /> : <MessageCircle className="w-6 h-6" />}
+      </motion.button>
+    </div>
+  );
+};
+
+export default ChatWidget;

client/src/components/Dashboard/FetchContentButton.jsx

@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Download, Loader, Database, RefreshCw } from 'lucide-react';
+import { useMutation } from '@tanstack/react-query';
+import api from '../../api/axiosConfig';
+import toast from 'react-hot-toast';
+
+const FetchContentButton = ({ website }) => {
+  const [scrapingState, setScrapingState] = useState({
+    isScraping: false,
+    progress: 0,
+    total: 0,
+    message: ''
+  });
+
+  useEffect(() => {
+    if (website?.id) {
+      const wsUrl = `ws://${window.location.hostname}:8000/ws/admin/${website.id}`;
+      const ws = new WebSocket(wsUrl);
+
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.type === 'scraping_progress') {
+            setScrapingState({
+              isScraping: data.status === 'scraping',
+              progress: data.current || 0,
+              total: data.total || 0,
+              message: data.message || ''
+            });
+
+            if (data.status === 'completed') {
+              setScrapingState(prev => ({ ...prev, isScraping: false }));
+            }
+          }
+        } catch (err) {
+          console.error('WS Error:', err);
+        }
+      };
+
+      return () => ws.close();
+    }
+  }, [website?.id]);
+
+  const fetchContentMutation = useMutation({
+    mutationFn: () => api.post(`/ingest/${website.id}/crawl`),
+    onSuccess: () => {
+      toast.success('Content fetch started!');
+    },
+    onError: () => {
+      toast.error('Failed to fetch content');
+    }
+  });
+
+  const processContentMutation = useMutation({
+    mutationFn: () => api.post(`/ingest/${website.id}/crawl`), // Unified endpoint
+    onSuccess: () => {
+      toast.success('Content indexing started!');
+    },
+    onError: () => {
+      toast.error('Failed to start indexing');
+    }
+  });
+
+  const isAnyLoading = fetchContentMutation.isLoading || processContentMutation.isLoading || scrapingState.isScraping;
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <div className="flex gap-2">
+        <motion.button
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+          onClick={() => fetchContentMutation.mutate()}
+          disabled={!website.is_verified || isAnyLoading}
+          className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-green-500 text-white rounded-md text-sm hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isAnyLoading ? (
+            <Loader className="w-4 h-4 animate-spin" />
+          ) : (
+            <Download className="w-4 h-4" />
+          )}
+          {scrapingState.isScraping ? 'Fetching...' : 'Fetch Content'}
+        </motion.button>
+
+        <motion.button
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+          onClick={() => processContentMutation.mutate()}
+          disabled={isAnyLoading}
+          className="flex-1 flex items-center justify-center gap-2 px-3 py-2 bg-purple-500 text-white rounded-md text-sm hover:bg-purple-600 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isAnyLoading ? (
+            <Loader className="w-4 h-4 animate-spin" />
+          ) : (
+            <Database className="w-4 h-4" />
+          )}
+          Process AI
+        </motion.button>
+      </div>
+
+      {scrapingState.isScraping && (
+        <div className="mt-1">
+          <div className="flex justify-between text-[10px] text-gray-500 mb-1 px-1">
+            <span className="truncate max-w-[150px]">{scrapingState.message}</span>
+            <span>{scrapingState.progress}/{scrapingState.total}</span>
+          </div>
+          <div className="w-full bg-gray-200 rounded-full h-1">
+            <div
+              className="bg-green-500 h-1 rounded-full transition-all duration-300"
+              style={{ width: `${(scrapingState.progress / (scrapingState.total || 1)) * 100}%` }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FetchContentButton;

client/src/components/Dashboard/SiteCard.jsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { ExternalLink, Globe, Trash2, Settings } from 'lucide-react';
+import VerifyButton from './VerifyButton';
+import FetchContentButton from './FetchContentButton';
+import WidgetCustomizer from './WidgetCustomizer';
+import api from '../../api/axiosConfig';
+import toast from 'react-hot-toast';
+
+const SiteCard = ({ website, onUpdate }) => {
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showCustomizer, setShowCustomizer] = useState(false);
+
+  const handleDelete = async () => {
+    try {
+      await api.delete(`/websites/${website.id}`);
+      toast.success('Website deleted successfully');
+      onUpdate();
+    } catch (error) {
+      toast.error('Failed to delete website');
+    }
+    setShowDeleteConfirm(false);
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow"
+    >
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <Globe className="w-5 h-5 text-gray-500" />
+          <div>
+            <h3 className="text-lg font-semibold">{website.name}</h3>
+            <a 
+              href={website.url} 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="text-blue-600 hover:text-blue-800 text-sm flex items-center gap-1"
+            >
+              {website.url}
+              <ExternalLink className="w-3 h-3" />
+            </a>
+          </div>
+        </div>
+        <button
+          onClick={() => setShowDeleteConfirm(true)}
+          className="text-red-500 hover:text-red-700 p-1"
+          title="Delete website"
+        >
+          <Trash2 className="w-4 h-4" />
+        </button>
+      </div>
+      
+      <div className="space-y-4">
+        <VerifyButton website={website} onUpdate={onUpdate} />
+        {website.is_verified && (
+          <>
+            <FetchContentButton website={website} />
+            <button
+              onClick={() => setShowCustomizer(!showCustomizer)}
+              className="w-full bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-md flex items-center justify-center gap-2"
+            >
+              <Settings className="w-4 h-4" />
+              {showCustomizer ? 'Hide' : 'Customize'} Widget
+            </button>
+          </>
+        )}
+      </div>
+      
+      {showCustomizer && website.is_verified && (
+        <div className="mt-6">
+          <WidgetCustomizer website={website} onUpdate={onUpdate} />
+        </div>
+      )}
+      
+      {showDeleteConfirm && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full mx-4">
+            <h3 className="text-lg font-semibold mb-4">Delete Website</h3>
+            <p className="text-gray-600 mb-6">
+              Are you sure you want to delete "{website.name}"? This action cannot be undone.
+            </p>
+            <div className="flex gap-3">
+              <button
+                onClick={handleDelete}
+                className="flex-1 bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded"
+              >
+                Delete
+              </button>
+              <button
+                onClick={() => setShowDeleteConfirm(false)}
+                className="flex-1 bg-gray-300 hover:bg-gray-400 text-gray-700 py-2 px-4 rounded"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </motion.div>
+  );
+};
+
+export default SiteCard;

client/src/components/Dashboard/VerifyButton.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { CheckCircle, AlertCircle, Loader } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import api from '../../api/axiosConfig';
+
+const VerifyButton = ({ website, onUpdate }) => {
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState(null);
+  const navigate = useNavigate();
+
+  const handleVerify = async () => {
+    setLoading(true);
+    try {
+      const response = await api.post(`/ingest/scrape/${website.id}/verify-script`);
+      setResult(response.data);
+      if (response.data.verified) {
+        toast.success('Website verified successfully! Redirecting...');
+        onUpdate();
+        // Redirect to content manager with this website selected
+        setTimeout(() => {
+          navigate(`/content?websiteId=${website.id}`);
+        }, 1500);
+      }
+    } catch (error) {
+      setResult({ verified: false, message: 'Verification failed' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getScriptTag = () => {
+    return `<script src="http://localhost:8000/static/widget.js" data-website-id="${website.id}"></script>`;
+  };
+
+  return (
+    <div className="space-y-3">
+      <motion.button
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.98 }}
+        onClick={handleVerify}
+        disabled={loading || website.is_verified}
+        className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium ${website.is_verified
+            ? 'bg-green-100 text-green-800 cursor-not-allowed'
+            : 'bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50'
+          }`}
+      >
+        {loading ? (
+          <Loader className="w-4 h-4 animate-spin" />
+        ) : website.is_verified ? (
+          <CheckCircle className="w-4 h-4" />
+        ) : (
+          <AlertCircle className="w-4 h-4" />
+        )}
+        {website.is_verified ? 'Verified' : 'Verify Installation'}
+      </motion.button>
+
+      {!website.is_verified && (
+        <div className="bg-gray-50 p-3 rounded-md">
+          <p className="text-xs text-gray-600 mb-2">Add this script to your website:</p>
+          <code className="text-xs bg-gray-800 text-green-400 p-2 rounded block overflow-x-auto">
+            {getScriptTag()}
+          </code>
+        </div>
+      )}
+
+      {result && (
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className={`p-3 rounded-md text-sm ${result.verified
+              ? 'bg-green-50 text-green-800 border border-green-200'
+              : 'bg-red-50 text-red-800 border border-red-200'
+            }`}
+        >
+          {result.message}
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
+export default VerifyButton;

client/src/components/Dashboard/WidgetCustomizer.jsx

@@ -0,0 +1,374 @@
+import React, { useState, useEffect } from 'react';
+import { Palette, Monitor, Move, Save, Code } from 'lucide-react';
+import api from '../../api/axiosConfig';
+import toast from 'react-hot-toast';
+
+const WidgetCustomizer = ({ website, onUpdate }) => {
+  const [config, setConfig] = useState({
+    theme: 'blue',
+    position: 'bottom-right',
+    size: 'medium',
+    primaryColor: '#3B82F6',
+    textColor: '#FFFFFF',
+    backgroundColor: '#FFFFFF'
+  });
+  const [selectedFramework, setSelectedFramework] = useState('html');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (website) {
+      fetchConfig();
+    }
+  }, [website]);
+
+  const fetchConfig = async () => {
+    try {
+      const response = await api.get(`/websites/${website.id}/widget-config`);
+      setConfig(response.data);
+    } catch (error) {
+      console.error('Failed to fetch widget config');
+    }
+  };
+
+  const saveConfig = async () => {
+    setLoading(true);
+    try {
+      await api.put(`/websites/${website.id}/widget-config`, config);
+      toast.success('Widget configuration saved!');
+      if (onUpdate) onUpdate();
+    } catch (error) {
+      toast.error('Failed to save configuration');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const updateConfig = (key, value) => {
+    setConfig(prev => ({ ...prev, [key]: value }));
+  };
+
+  const themes = [
+    { name: 'Blue', value: 'blue', color: '#3B82F6' },
+    { name: 'Green', value: 'green', color: '#10B981' },
+    { name: 'Purple', value: 'purple', color: '#8B5CF6' },
+    { name: 'Red', value: 'red', color: '#EF4444' },
+    { name: 'Orange', value: 'orange', color: '#F59E0B' }
+  ];
+
+  const positions = [
+    { name: 'Bottom Right', value: 'bottom-right' },
+    { name: 'Bottom Left', value: 'bottom-left' },
+    { name: 'Top Right', value: 'top-right' },
+    { name: 'Top Left', value: 'top-left' }
+  ];
+
+  const sizes = [
+    { name: 'Small', value: 'small' },
+    { name: 'Medium', value: 'medium' },
+    { name: 'Large', value: 'large' }
+  ];
+
+  const frameworks = [
+    { name: 'HTML/JavaScript', value: 'html' },
+    { name: 'React', value: 'react' },
+    { name: 'Next.js', value: 'nextjs' },
+    { name: 'WordPress', value: 'wordpress' },
+    { name: 'Shopify', value: 'shopify' },
+    { name: 'Vue.js', value: 'vue' }
+  ];
+
+  const generateEmbedCode = () => {
+    const configStr = JSON.stringify(config);
+    const websiteId = website?.id;
+    const scriptUrl = `http://localhost:8000/static/widget.js`;
+    
+    switch (selectedFramework) {
+      case 'react':
+        return `import { useEffect } from 'react';
+
+function ChatWidget() {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = '${scriptUrl}';
+    script.setAttribute('data-website-id', '${websiteId}');
+    script.setAttribute('data-config', '${configStr}');
+    document.body.appendChild(script);
+    
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+  
+  return null;
+}
+
+export default ChatWidget;`;
+      
+      case 'nextjs':
+        return `import { useEffect } from 'react';
+import Script from 'next/script';
+
+function ChatWidget() {
+  return (
+    <Script
+      src="${scriptUrl}"
+      data-website-id="${websiteId}"
+      data-config='${configStr}'
+      strategy="afterInteractive"
+    />
+  );
+}
+
+export default ChatWidget;`;
+      
+      case 'wordpress':
+        return `<!-- Add this to your theme's functions.php -->
+<?php
+function add_chat_widget() {
+    ?>
+    <script 
+      src="${scriptUrl}" 
+      data-website-id="${websiteId}" 
+      data-config='${configStr}'>
+    </script>
+    <?php
+}
+add_action('wp_footer', 'add_chat_widget');
+?>`;
+      
+      case 'shopify':
+        return `<!-- Add this to your theme.liquid before </body> -->
+<script 
+  src="${scriptUrl}" 
+  data-website-id="${websiteId}" 
+  data-config='${configStr}'>
+</script>`;
+      
+      case 'vue':
+        return `<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'ChatWidget',
+  mounted() {
+    const script = document.createElement('script');
+    script.src = '${scriptUrl}';
+    script.setAttribute('data-website-id', '${websiteId}');
+    script.setAttribute('data-config', '${configStr}');
+    document.body.appendChild(script);
+  },
+  beforeDestroy() {
+    const scripts = document.querySelectorAll('script[src="${scriptUrl}"]');
+    scripts.forEach(script => script.remove());
+  }
+};
+</script>`;
+      
+      default:
+        return `<script 
+  src="${scriptUrl}" 
+  data-website-id="${websiteId}" 
+  data-config='${configStr}'>
+</script>`;
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center gap-2 mb-6">
+        <Palette className="w-5 h-5 text-blue-500" />
+        <h3 className="text-lg font-semibold">Widget Customization</h3>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Theme Selection */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">Theme</label>
+          <div className="grid grid-cols-3 gap-2">
+            {themes.map(theme => (
+              <button
+                key={theme.value}
+                onClick={() => updateConfig('theme', theme.value)}
+                className={`p-3 rounded-lg border-2 text-center ${
+                  config.theme === theme.value 
+                    ? 'border-blue-500 bg-blue-50' 
+                    : 'border-gray-200 hover:border-gray-300'
+                }`}
+              >
+                <div 
+                  className="w-6 h-6 rounded-full mx-auto mb-1"
+                  style={{ backgroundColor: theme.color }}
+                />
+                <div className="text-xs">{theme.name}</div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Position */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            <Move className="w-4 h-4 inline mr-1" />
+            Position
+          </label>
+          <select
+            value={config.position}
+            onChange={(e) => updateConfig('position', e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md"
+          >
+            {positions.map(pos => (
+              <option key={pos.value} value={pos.value}>{pos.name}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* Size */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            <Monitor className="w-4 h-4 inline mr-1" />
+            Size
+          </label>
+          <select
+            value={config.size}
+            onChange={(e) => updateConfig('size', e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md"
+          >
+            {sizes.map(size => (
+              <option key={size.value} value={size.value}>{size.name}</option>
+            ))}
+          </select>
+        </div>
+
+        {/* Primary Color */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">Primary Color</label>
+          <div className="flex gap-2">
+            <input
+              type="color"
+              value={config.primaryColor}
+              onChange={(e) => updateConfig('primaryColor', e.target.value)}
+              className="w-12 h-10 border border-gray-300 rounded"
+            />
+            <input
+              type="text"
+              value={config.primaryColor}
+              onChange={(e) => updateConfig('primaryColor', e.target.value)}
+              className="flex-1 px-3 py-2 border border-gray-300 rounded-md"
+            />
+          </div>
+        </div>
+
+        {/* Text Color */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">Text Color</label>
+          <div className="flex gap-2">
+            <input
+              type="color"
+              value={config.textColor}
+              onChange={(e) => updateConfig('textColor', e.target.value)}
+              className="w-12 h-10 border border-gray-300 rounded"
+            />
+            <input
+              type="text"
+              value={config.textColor}
+              onChange={(e) => updateConfig('textColor', e.target.value)}
+              className="flex-1 px-3 py-2 border border-gray-300 rounded-md"
+            />
+          </div>
+        </div>
+
+        {/* Background Color */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">Background Color</label>
+          <div className="flex gap-2">
+            <input
+              type="color"
+              value={config.backgroundColor}
+              onChange={(e) => updateConfig('backgroundColor', e.target.value)}
+              className="w-12 h-10 border border-gray-300 rounded"
+            />
+            <input
+              type="text"
+              value={config.backgroundColor}
+              onChange={(e) => updateConfig('backgroundColor', e.target.value)}
+              className="flex-1 px-3 py-2 border border-gray-300 rounded-md"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Preview */}
+      <div className="mt-6 p-4 bg-gray-50 rounded-lg">
+        <h4 className="text-sm font-medium text-gray-700 mb-3">Preview</h4>
+        <div className="relative bg-gray-200 h-32 rounded-lg overflow-hidden">
+          <div 
+            className={`absolute w-12 h-12 rounded-full flex items-center justify-center text-white text-xl ${
+              config.position.includes('bottom') ? 'bottom-2' : 'top-2'
+            } ${
+              config.position.includes('right') ? 'right-2' : 'left-2'
+            } ${
+              config.size === 'small' ? 'w-10 h-10 text-lg' : 
+              config.size === 'large' ? 'w-16 h-16 text-2xl' : 'w-12 h-12 text-xl'
+            }`}
+            style={{ backgroundColor: config.primaryColor }}
+          >
+            ���
+          </div>
+        </div>
+      </div>
+
+      {/* Widget Code */}
+      <div className="mt-6">
+        <div className="flex items-center gap-2 mb-3">
+          <Code className="w-4 h-4 text-gray-700" />
+          <h4 className="text-sm font-medium text-gray-700">Embed Code</h4>
+        </div>
+        
+        {/* Framework Selection */}
+        <div className="mb-3">
+          <label className="block text-sm font-medium text-gray-700 mb-2">Framework</label>
+          <select
+            value={selectedFramework}
+            onChange={(e) => setSelectedFramework(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md"
+          >
+            {frameworks.map(framework => (
+              <option key={framework.value} value={framework.value}>{framework.name}</option>
+            ))}
+          </select>
+        </div>
+        
+        {/* Code Block */}
+        <div className="p-4 bg-gray-900 rounded-lg overflow-x-auto">
+          <pre className="text-green-400 text-xs whitespace-pre-wrap">
+            {generateEmbedCode()}
+          </pre>
+        </div>
+        
+        {/* Copy Button */}
+        <button
+          onClick={() => {
+            navigator.clipboard.writeText(generateEmbedCode());
+            toast.success('Code copied to clipboard!');
+          }}
+          className="mt-2 px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-700 text-sm rounded"
+        >
+          Copy Code
+        </button>
+      </div>
+
+      <button
+        onClick={saveConfig}
+        disabled={loading}
+        className="w-full mt-6 bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md flex items-center justify-center gap-2"
+      >
+        <Save className="w-4 h-4" />
+        {loading ? 'Saving...' : 'Save Configuration'}
+      </button>
+    </div>
+  );
+};
+
+export default WidgetCustomizer;

client/src/components/Layout.jsx

@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { useWebsites } from '../context/WebsiteContext';
+import toast from 'react-hot-toast';
+import {
+    LayoutDashboard,
+    MessageSquare,
+    FileText,
+    HelpCircle,
+    Settings as SettingsIcon,
+    LogOut,
+    Menu,
+    X,
+    User,
+    Globe,
+    Users,
+    Bell
+} from 'lucide-react';
+
+const Layout = ({ children }) => {
+    const { user, logout } = useAuth();
+    const { websites } = useWebsites();
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+    const [unreadNotifications, setUnreadNotifications] = useState(0);
+
+    const hasWebsites = websites.length > 0;
+
+    useEffect(() => {
+        const fetchUnreadCount = async () => {
+            try {
+                const response = await api.get('/notifications/unread-count');
+                setUnreadNotifications(response.data.count);
+            } catch (error) {
+                console.error('Failed to fetch unread count:', error);
+            }
+        };
+
+        if (user) {
+            fetchUnreadCount();
+            const interval = setInterval(fetchUnreadCount, 60000); // Poll every minute
+            return () => clearInterval(interval);
+        }
+    }, [user]);
+
+    const handleLogout = () => {
+        logout();
+        navigate('/login');
+    };
+
+    const navItems = [
+        { icon: LayoutDashboard, label: 'Dashboard', path: '/dashboard' },
+        { icon: Globe, label: 'Websites', path: '/websites' },
+        { icon: MessageSquare, label: 'Chats', path: '/chats' },
+        { icon: Users, label: 'Users', path: '/users' },
+        { icon: FileText, label: 'Content', path: '/content' },
+        { icon: HelpCircle, label: 'Unanswered', path: '/unanswered-questions' },
+        { icon: MessageSquare, label: 'FAQs', path: '/faqs' },
+        { icon: Bell, label: 'Notifications', path: '/notifications' },
+        { icon: SettingsIcon, label: 'Settings', path: '/settings' },
+    ];
+
+    return (
+        <div className="min-h-screen bg-secondary-50 flex">
+            {/* Sidebar */}
+            <aside
+                className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-secondary-200 transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0 ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'
+                    }`}
+            >
+                <div className="h-full flex flex-col">
+                    {/* Logo */}
+                    <div className="h-16 flex items-center px-6 border-b border-secondary-100">
+                        <span className="text-xl font-bold bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent">
+                            CustomerAgent
+                        </span>
+                    </div>
+
+                    {/* Navigation */}
+                    <nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
+                        {navItems.map((item) => {
+                            const Icon = item.icon;
+                            const isActive = location.pathname === item.path;
+                            const isAlwaysEnabled = ['Websites', 'Settings', 'Notifications'].includes(item.label);
+                            const isDisabled = !hasWebsites && !isAlwaysEnabled;
+
+                            return (
+                                <Link
+                                    key={item.path}
+                                    to={isDisabled ? '#' : item.path}
+                                    onClick={(e) => {
+                                        if (isDisabled) {
+                                            e.preventDefault();
+                                            toast.error('Please add a website first to access this section', {
+                                                id: 'sidebar-disabled-toast'
+                                            });
+                                        }
+                                    }}
+                                    className={`flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${isActive
+                                        ? 'bg-primary-50 text-primary-700 shadow-sm'
+                                        : isDisabled
+                                            ? 'text-secondary-300 cursor-not-allowed'
+                                            : 'text-secondary-600 hover:bg-secondary-50 hover:text-secondary-900'
+                                        }`}
+                                >
+                                    <Icon className={`w-5 h-5 mr-3 ${isActive ? 'text-primary-600' : isDisabled ? 'text-secondary-200' : 'text-secondary-400'}`} />
+                                    {item.label}
+                                </Link>
+                            );
+                        })}
+                    </nav>
+
+                    {/* User Profile */}
+                    <div className="p-4 border-t border-secondary-100">
+                        <div className="flex items-center p-3 rounded-xl bg-secondary-50 mb-3">
+                            <div className="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center text-primary-600 font-semibold">
+                                {user?.email?.[0].toUpperCase() || <User className="w-5 h-5" />}
+                            </div>
+                            <div className="ml-3 overflow-hidden">
+                                <p className="text-sm font-medium text-secondary-900 truncate">{user?.email}</p>
+                                <p className="text-xs text-secondary-500 truncate">Admin</p>
+                            </div>
+                        </div>
+                        <button
+                            onClick={handleLogout}
+                            className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
+                        >
+                            <LogOut className="w-4 h-4 mr-2" />
+                            Sign Out
+                        </button>
+                    </div>
+                </div>
+            </aside>
+
+            {/* Mobile Overlay */}
+            {isSidebarOpen && (
+                <div
+                    className="fixed inset-0 z-40 bg-secondary-900/50 backdrop-blur-sm lg:hidden"
+                    onClick={() => setIsSidebarOpen(false)}
+                />
+            )}
+
+            {/* Main Content */}
+            <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+                <header className="h-16 bg-white border-b border-secondary-200 flex items-center justify-between px-4 lg:px-8 shrink-0">
+                    <div className="flex items-center gap-4">
+                        <button
+                            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+                            className="p-2 rounded-lg text-secondary-600 hover:bg-secondary-100 lg:hidden"
+                        >
+                            {isSidebarOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+                        </button>
+                        <span className="text-lg font-bold text-secondary-900 lg:hidden">CustomerAgent</span>
+                    </div>
+
+                    <div className="flex items-center gap-4">
+                        <Link
+                            to="/notifications"
+                            className="p-2 bg-secondary-50 text-secondary-600 hover:bg-secondary-100 rounded-xl transition-all relative group"
+                            title="Notifications"
+                        >
+                            <Bell className="w-5 h-5 group-hover:rotate-12 transition-transform" />
+                            {unreadNotifications > 0 && (
+                                <span className="absolute top-1.5 right-1.5 w-2.5 h-2.5 bg-red-500 border-2 border-white rounded-full animate-pulse" />
+                            )}
+                        </Link>
+                    </div>
+                </header>
+
+                {/* Page Content */}
+                <main className="flex-1 overflow-y-auto p-4 lg:p-8">
+                    <div className="max-w-7xl mx-auto">
+                        <Outlet />
+                    </div>
+                </main>
+            </div>
+        </div>
+    );
+};
+
+export default Layout;

client/src/components/PublicLayout.css

@@ -0,0 +1,220 @@
+/* Public Layout - Navigation & Footer */
+
+/* Navigation */
+.public-nav {
+    background: white;
+    border-bottom: 1px solid #e0e0e0;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .public-nav {
+    background: #1a1a1a;
+    border-bottom-color: #404040;
+}
+
+.public-nav__container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 40px;
+}
+
+.public-nav__logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 1.25rem;
+    color: #1a1a1a;
+}
+
+[data-theme="dark"] .public-nav__logo {
+    color: white;
+}
+
+.public-nav__logo-icon {
+    font-size: 2rem;
+}
+
+.public-nav__links {
+    display: flex;
+    gap: 32px;
+    flex: 1;
+    justify-content: center;
+}
+
+.public-nav__link {
+    text-decoration: none;
+    color: #666;
+    font-weight: 500;
+    font-size: 1rem;
+    transition: color 0.3s ease;
+    position: relative;
+}
+
+.public-nav__link:hover {
+    color: #667eea;
+}
+
+.public-nav__link.active {
+    color: #667eea;
+}
+
+.public-nav__link.active::after {
+    content: '';
+    position: absolute;
+    bottom: -12px;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 2px 2px 0 0;
+}
+
+.public-nav__actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.btn--ghost {
+    background: transparent;
+    color: #667eea;
+    border: 1px solid #667eea;
+}
+
+.btn--ghost:hover {
+    background: rgba(102, 126, 234, 0.1);
+    transform: none;
+}
+
+/* Main Content */
+.public-main {
+    min-height: calc(100vh - 70px);
+}
+
+/* Footer */
+.public-footer {
+    background: #1a1a1a;
+    color: white;
+    padding: 60px 20px 30px;
+}
+
+.public-footer__container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.public-footer__grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr 1fr;
+    gap: 60px;
+    margin-bottom: 48px;
+}
+
+.public-footer__brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.public-footer__logo {
+    font-size: 2rem;
+}
+
+.public-footer__brand-name {
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.public-footer__tagline {
+    color: #b3b3b3;
+    line-height: 1.6;
+}
+
+.public-footer__col h4 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin-bottom: 16px;
+}
+
+.public-footer__col ul {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.public-footer__col a {
+    color: #b3b3b3;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.public-footer__col a:hover {
+    color: white;
+}
+
+.public-footer__bottom {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #b3b3b3;
+    font-size: 0.875rem;
+}
+
+.public-footer__links {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+}
+
+.public-footer__links a {
+    color: #b3b3b3;
+    text-decoration: none;
+}
+
+.public-footer__links a:hover {
+    color: white;
+}
+
+/* Responsive */
+@media (max-width: 992px) {
+    .public-nav__links {
+        display: none;
+    }
+
+    .public-footer__grid {
+        grid-template-columns: 1fr 1fr;
+        gap: 40px;
+    }
+}
+
+@media (max-width: 768px) {
+    .public-nav__actions .btn {
+        padding: 10px 20px;
+        font-size: 0.9rem;
+    }
+
+    .public-footer__grid {
+        grid-template-columns: 1fr;
+    }
+
+    .public-footer__bottom {
+        flex-direction: column;
+        gap: 16px;
+        text-align: center;
+    }
+}

client/src/components/PublicLayout.jsx

@@ -0,0 +1,225 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation, Outlet } from 'react-router-dom';
+import { Menu, X, ChevronRight, Twitter, Linkedin, Facebook, Youtube } from 'lucide-react';
+
+const PublicLayout = ({ children }) => {
+    const location = useLocation();
+    const [isScrolled, setIsScrolled] = useState(false);
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            setIsScrolled(window.scrollY > 20);
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    const isActive = (path) => location.pathname === path;
+
+    const navLinks = [
+        { path: '/', label: 'Home' },
+        { path: '/pricing', label: 'Pricing' },
+        { path: '/about', label: 'About' },
+        { path: '/contact', label: 'Contact' },
+        { path: '/blog', label: 'Blog' },
+    ];
+
+    return (
+        <div className="min-h-screen flex flex-col bg-secondary-50 dark:bg-secondary-950 transition-colors duration-300">
+            {/* Navigation */}
+            <nav
+                className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? 'glass py-3' : 'bg-transparent py-5'
+                    }`}
+            >
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div className="flex items-center justify-between">
+                        {/* Logo */}
+                        <Link to="/" className="flex items-center gap-2 group">
+                            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white font-bold text-xl shadow-lg group-hover:scale-105 transition-transform">
+                                CA
+                            </div>
+                            <span className="font-bold text-xl text-secondary-900 dark:text-white tracking-tight">
+                                Customer<span className="text-primary-600">Agent</span>
+                            </span>
+                        </Link>
+
+                        {/* Desktop Navigation */}
+                        <div className="hidden md:flex items-center gap-8">
+                            {navLinks.map((link) => (
+                                <Link
+                                    key={link.path}
+                                    to={link.path}
+                                    className={`text-sm font-medium transition-colors hover:text-primary-600 ${isActive(link.path)
+                                        ? 'text-primary-600'
+                                        : 'text-secondary-600 dark:text-secondary-300'
+                                        }`}
+                                >
+                                    {link.label}
+                                </Link>
+                            ))}
+
+                            <div className="flex items-center gap-4">
+                                <Link
+                                    to="/login"
+                                    className="text-sm font-medium text-secondary-600 dark:text-secondary-300 hover:text-primary-600 transition-colors"
+                                >
+                                    Log In
+                                </Link>
+                                <Link
+                                    to="/register"
+                                    className="px-5 py-2.5 rounded-lg bg-primary-600 text-white text-sm font-semibold shadow-lg shadow-primary-500/30 hover:bg-primary-700 hover:-translate-y-0.5 transition-all"
+                                >
+                                    Start Free Trial
+                                </Link>
+                            </div>
+                        </div>
+
+                        {/* Mobile Menu Button */}
+                        <button
+                            className="md:hidden p-2 text-secondary-600 dark:text-secondary-300"
+                            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                        >
+                            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+                        </button>
+                    </div>
+                </div>
+
+                {/* Mobile Menu */}
+                {isMobileMenuOpen && (
+                    <div className="md:hidden absolute top-full left-0 right-0 bg-white dark:bg-secondary-900 border-b border-secondary-200 dark:border-secondary-800 shadow-xl animate-fade-in">
+                        <div className="px-4 py-6 space-y-4">
+                            {navLinks.map((link) => (
+                                <Link
+                                    key={link.path}
+                                    to={link.path}
+                                    className={`block text-base font-medium ${isActive(link.path)
+                                        ? 'text-primary-600'
+                                        : 'text-secondary-600 dark:text-secondary-300'
+                                        }`}
+                                    onClick={() => setIsMobileMenuOpen(false)}
+                                >
+                                    {link.label}
+                                </Link>
+                            ))}
+                            <div className="pt-4 border-t border-secondary-200 dark:border-secondary-800 flex flex-col gap-4">
+                                <Link
+                                    to="/login"
+                                    className="text-center text-secondary-600 dark:text-secondary-300 font-medium"
+                                    onClick={() => setIsMobileMenuOpen(false)}
+                                >
+                                    Log In
+                                </Link>
+                                <Link
+                                    to="/register"
+                                    className="block text-center px-5 py-3 rounded-lg bg-primary-600 text-white font-semibold"
+                                    onClick={() => setIsMobileMenuOpen(false)}
+                                >
+                                    Start Free Trial
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </nav>
+
+            {/* Main Content */}
+            <main className="flex-grow pt-20">
+                <Outlet />
+            </main>
+
+            {/* Footer */}
+            <footer className="bg-white dark:bg-secondary-900 border-t border-secondary-200 dark:border-secondary-800 pt-16 pb-8">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
+                        <div className="space-y-4">
+                            <div className="flex items-center gap-2">
+                                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white font-bold text-lg">
+                                    CA
+                                </div>
+                                <span className="font-bold text-lg text-secondary-900 dark:text-white">
+                                    CustomerAgent
+                                </span>
+                            </div>
+                            <p className="text-secondary-500 dark:text-secondary-400 text-sm leading-relaxed">
+                                AI-powered customer support platform that helps businesses deliver exceptional experiences at scale.
+                            </p>
+                            <div className="flex gap-4">
+                                {[Twitter, Linkedin, Facebook, Youtube].map((Icon, i) => (
+                                    <a key={i} href="#" className="text-secondary-400 hover:text-primary-500 transition-colors">
+                                        <Icon size={20} />
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div>
+                            <h4 className="font-semibold text-secondary-900 dark:text-white mb-6">Product</h4>
+                            <ul className="space-y-3">
+                                {['Features', 'Pricing', 'Integrations', 'Enterprise', 'Changelog'].map((item) => (
+                                    <li key={item}>
+                                        <Link to={`/${item.toLowerCase()}`} className="text-secondary-500 dark:text-secondary-400 hover:text-primary-600 text-sm transition-colors">
+                                            {item}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h4 className="font-semibold text-secondary-900 dark:text-white mb-6">Resources</h4>
+                            <ul className="space-y-3">
+                                {[
+                                    { name: 'Documentation', path: '/docs' },
+                                    { name: 'API Reference', path: '/api' },
+                                    { name: 'Blog', path: '/blog' },
+                                    { name: 'Community', path: '/community' },
+                                    { name: 'Help Center', path: '/help-center' }
+                                ].map((item) => (
+                                    <li key={item.name}>
+                                        <Link to={item.path} className="text-secondary-500 dark:text-secondary-400 hover:text-primary-600 text-sm transition-colors">
+                                            {item.name}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+
+                        <div>
+                            <h4 className="font-semibold text-secondary-900 dark:text-white mb-6">Legal</h4>
+                            <ul className="space-y-3">
+                                {[
+                                    { name: 'Privacy Policy', path: '/privacy' },
+                                    { name: 'Terms of Service', path: '/terms' },
+                                    { name: 'Cookie Policy', path: '/cookie-policy' },
+                                    { name: 'GDPR', path: '/gdpr' },
+                                    { name: 'Security', path: '/security' }
+                                ].map((item) => (
+                                    <li key={item.name}>
+                                        <Link to={item.path} className="text-secondary-500 dark:text-secondary-400 hover:text-primary-600 text-sm transition-colors">
+                                            {item.name}
+                                        </Link>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="pt-8 border-t border-secondary-200 dark:border-secondary-800 flex flex-col md:flex-row justify-between items-center gap-4">
+                        <p className="text-secondary-400 text-sm">
+                            &copy; {new Date().getFullYear()} CustomerAgent. All rights reserved.
+                        </p>
+                        <div className="flex items-center gap-6">
+                            <span className="flex items-center gap-2 text-sm text-secondary-500">
+                                <span className="w-2 h-2 rounded-full bg-green-500"></span>
+                                All systems operational
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+};
+
+export default PublicLayout;

client/src/components/Website/HealthcareConfigModal.jsx

@@ -0,0 +1,215 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, Heart, Stethoscope, Activity, Calendar, Languages, Shield, AlertCircle } from 'lucide-react';
+import api from '../../api/axiosConfig';
+import toast from 'react-hot-toast';
+
+export default function HealthcareConfigModal({ isOpen, onClose, website, onUpdate }) {
+    const [config, setConfig] = useState({
+        healthcare_sub_industry: 'general',
+        symptom_checker_enabled: true,
+        language: 'en',
+        custom_disclaimer: '',
+        appointment_url: ''
+    });
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (website && website.widget_config) {
+            const currentConfig = typeof website.widget_config === 'string'
+                ? JSON.parse(website.widget_config)
+                : website.widget_config;
+
+            setConfig({
+                healthcare_sub_industry: currentConfig.healthcare_sub_industry || 'general',
+                symptom_checker_enabled: currentConfig.symptom_checker_enabled !== false,
+                language: currentConfig.language || 'en',
+                custom_disclaimer: currentConfig.custom_disclaimer || '',
+                appointment_url: currentConfig.appointment_url || ''
+            });
+        }
+    }, [website]);
+
+    const handleSave = async () => {
+        setLoading(true);
+        try {
+            // Merge into existing widget_config
+            const updatedWidgetConfig = {
+                ...(typeof website.widget_config === 'string' ? JSON.parse(website.widget_config) : website.widget_config),
+                ...config
+            };
+
+            await api.put(`/websites/${website.id}/widget-config`, updatedWidgetConfig);
+            toast.success('Healthcare settings updated!');
+            onUpdate();
+            onClose();
+        } catch (error) {
+            toast.error('Failed to update settings');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (!isOpen) return null;
+
+    const subIndustries = [
+        { id: 'general', name: 'General Practice', icon: <Heart className="w-4 h-4" /> },
+        { id: 'dental', name: 'Dental Care', icon: <Stethoscope className="w-4 h-4" /> },
+        { id: 'pharmacy', name: 'Pharmacy', icon: <Activity className="w-4 h-4" /> },
+        { id: 'mental_health', name: 'Mental Health', icon: <Shield className="w-4 h-4" /> },
+        { id: 'pediatrics', name: 'Pediatrics', icon: <Activity className="w-4 h-4" /> }
+    ];
+
+    return (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-4">
+            <motion.div
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                className="bg-white rounded-3xl shadow-2xl max-w-xl w-full flex flex-col max-h-[90vh] overflow-hidden border border-blue-50"
+            >
+                {/* Header */}
+                <div className="px-8 py-6 bg-gradient-to-r from-blue-600 to-indigo-600 text-white flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 bg-white/20 rounded-xl backdrop-blur-sm">
+                            <Stethoscope className="w-6 h-6" />
+                        </div>
+                        <div>
+                            <h2 className="text-xl font-bold">Healthcare AI Configuration</h2>
+                            <p className="text-blue-100 text-sm">Tailor your medical assistant for {website?.name}</p>
+                        </div>
+                    </div>
+                    <button onClick={onClose} className="p-2 hover:bg-white/20 rounded-lg transition-colors">
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="p-8 space-y-8 overflow-y-auto">
+                    {/* Sub-industry selection */}
+                    <div className="space-y-4">
+                        <label className="text-sm font-bold text-secondary-700 flex items-center gap-2">
+                            <Activity className="w-4 h-4 text-blue-500" />
+                            SPECIALIZED SUB-INDUSTRY
+                        </label>
+                        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                            {subIndustries.map((si) => (
+                                <button
+                                    key={si.id}
+                                    onClick={() => setConfig({ ...config, healthcare_sub_industry: si.id })}
+                                    className={`flex items-center gap-2 px-4 py-3 rounded-2xl text-sm font-medium border-2 transition-all ${config.healthcare_sub_industry === si.id
+                                            ? 'border-blue-500 bg-blue-50 text-blue-700 shadow-md shadow-blue-200/50'
+                                            : 'border-secondary-100 hover:border-blue-200 text-secondary-600'
+                                        }`}
+                                >
+                                    {si.icon}
+                                    {si.name}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
+                        {/* Language selection */}
+                        <div className="space-y-4">
+                            <label className="text-sm font-bold text-secondary-700 flex items-center gap-2">
+                                <Languages className="w-4 h-4 text-blue-500" />
+                                PRIMARY LANGUAGE
+                            </label>
+                            <select
+                                value={config.language}
+                                onChange={(e) => setConfig({ ...config, language: e.target.value })}
+                                className="w-full px-4 py-3 bg-secondary-50 border-2 border-secondary-100 rounded-2xl focus:border-blue-500 outline-none transition-all font-medium text-secondary-700"
+                            >
+                                <option value="en">English</option>
+                                <option value="ur">Urdu (اردو)</option>
+                            </select>
+                        </div>
+
+                        {/* Symptom Checker Toggle */}
+                        <div className="space-y-4">
+                            <label className="text-sm font-bold text-secondary-700 flex items-center gap-2">
+                                <Activity className="w-4 h-4 text-blue-500" />
+                                SYMPTOM CHECKER
+                            </label>
+                            <div className="flex items-center gap-3 p-1 bg-secondary-50 rounded-2xl border-2 border-secondary-100">
+                                <button
+                                    onClick={() => setConfig({ ...config, symptom_checker_enabled: true })}
+                                    className={`flex-1 py-2 px-4 rounded-xl text-sm font-bold transition-all ${config.symptom_checker_enabled
+                                            ? 'bg-white text-blue-600 shadow-sm'
+                                            : 'text-secondary-400'
+                                        }`}
+                                >
+                                    Enabled
+                                </button>
+                                <button
+                                    onClick={() => setConfig({ ...config, symptom_checker_enabled: false })}
+                                    className={`flex-1 py-2 px-4 rounded-xl text-sm font-bold transition-all ${!config.symptom_checker_enabled
+                                            ? 'bg-white text-red-600 shadow-sm'
+                                            : 'text-secondary-400'
+                                        }`}
+                                >
+                                    Disabled
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Appointment integration */}
+                    <div className="space-y-4">
+                        <label className="text-sm font-bold text-secondary-700 flex items-center gap-2">
+                            <Calendar className="w-4 h-4 text-blue-500" />
+                            APPOINTMENT BOOKING URL
+                        </label>
+                        <div className="relative group">
+                            <input
+                                type="url"
+                                value={config.appointment_url}
+                                onChange={(e) => setConfig({ ...config, appointment_url: e.target.value })}
+                                placeholder="https://appointments.yourclinic.com"
+                                className="w-full pl-12 pr-4 py-4 bg-secondary-50 border-2 border-secondary-100 rounded-2xl focus:border-blue-500 outline-none transition-all text-secondary-700 placeholder:text-secondary-300 shadow-inner"
+                            />
+                            <Calendar className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-secondary-400 group-focus-within:text-blue-500 transition-colors" />
+                        </div>
+                    </div>
+
+                    {/* Disclaimer customization */}
+                    <div className="space-y-4">
+                        <label className="text-sm font-bold text-secondary-700 flex items-center gap-2">
+                            <Shield className="w-4 h-4 text-blue-500" />
+                            CUSTOM MEDICAL DISCLAIMER
+                        </label>
+                        <textarea
+                            value={config.custom_disclaimer}
+                            onChange={(e) => setConfig({ ...config, custom_disclaimer: e.target.value })}
+                            placeholder="Optional: Provide a specific legal disclaimer for your practice..."
+                            className="w-full px-4 py-4 bg-secondary-50 border-2 border-secondary-100 rounded-2xl focus:border-blue-500 outline-none transition-all text-secondary-700 placeholder:text-secondary-300 shadow-inner h-24 resize-none"
+                        />
+                        <p className="text-xs text-secondary-400 flex items-center gap-1.5">
+                            <AlertCircle className="w-3 h-3" />
+                            If empty, a standard professional medical disclaimer will be used.
+                        </p>
+                    </div>
+                </div>
+
+                {/* Footer */}
+                <div className="px-8 py-6 border-t border-secondary-100 bg-secondary-50/50 flex gap-4 justify-end">
+                    <button
+                        onClick={onClose}
+                        className="px-6 py-3 text-secondary-600 font-bold rounded-2xl hover:bg-secondary-100 transition-colors"
+                        disabled={loading}
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        onClick={handleSave}
+                        disabled={loading}
+                        className="px-8 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold rounded-2xl hover:shadow-lg hover:shadow-blue-200 transform hover:-translate-y-0.5 active:translate-y-0 transition-all disabled:opacity-50"
+                    >
+                        {loading ? 'Saving...' : 'Save Configuration'}
+                    </button>
+                </div>
+            </motion.div>
+        </div>
+    );
+}

client/src/context/AuthContext.jsx

@@ -0,0 +1,100 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import api from '../api/axiosConfig';
+
+const AuthContext = createContext();
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  const checkAuth = async () => {
+    try {
+      const response = await api.get('/auth/me');
+      setUser(response.data);
+    } catch (error) {
+      console.log('Auth check failed:', error.message);
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const login = async (email, password) => {
+    try {
+      const response = await api.post('/auth/login', { email, password });
+      if (response.data.access_token) {
+        localStorage.setItem('access_token', response.data.access_token);
+      }
+      await checkAuth();
+      return response.data;
+    } catch (error) {
+      console.error('Login error:', error.response?.data);
+      const message = error.response?.data?.message || error.response?.data?.error || error.response?.data?.detail || error.message;
+      throw message;
+    }
+  };
+
+  const register = async (email, password) => {
+    try {
+      const response = await api.post('/auth/register', { email, password });
+      return response.data;
+    } catch (error) {
+      console.error('Registration error:', error.response?.data);
+      const message = error.response?.data?.message || error.response?.data?.error || error.response?.data?.detail || error.message;
+      throw message;
+    }
+  };
+
+  const googleLogin = async (idToken) => {
+    try {
+      const response = await api.post('/auth/google', { id_token: idToken });
+      if (response.data.access_token) {
+        localStorage.setItem('access_token', response.data.access_token);
+      }
+      await checkAuth();
+      return response.data;
+    } catch (error) {
+      console.error('Google login error:', error.response?.data);
+      const message = error.response?.data?.message || error.response?.data?.error || error.response?.data?.detail || error.message;
+      throw message;
+    }
+  };
+
+  const logout = async () => {
+    try {
+      await api.post('/auth/logout');
+    } catch (error) {
+      console.error('Logout error:', error);
+    } finally {
+      localStorage.removeItem('access_token');
+      setUser(null);
+    }
+  };
+
+  const value = {
+    user,
+    login,
+    googleLogin,
+    register,
+    logout,
+    loading
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

client/src/context/WebsiteContext.jsx

@@ -0,0 +1,51 @@
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import api from '../api/axiosConfig';
+import { useAuth } from './AuthContext';
+
+const WebsiteContext = createContext();
+
+export const WebsiteProvider = ({ children }) => {
+    const [websites, setWebsites] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const { user } = useAuth();
+
+    const fetchWebsites = useCallback(async () => {
+        if (!user) {
+            setWebsites([]);
+            setLoading(false);
+            return;
+        }
+
+        try {
+            const response = await api.get('/websites/');
+            setWebsites(response.data);
+        } catch (error) {
+            console.error('Failed to fetch websites:', error);
+        } finally {
+            setLoading(false);
+        }
+    }, [user]);
+
+    useEffect(() => {
+        fetchWebsites();
+    }, [fetchWebsites]);
+
+    const refreshWebsites = () => {
+        setLoading(true);
+        return fetchWebsites();
+    };
+
+    return (
+        <WebsiteContext.Provider value={{ websites, loading, refreshWebsites }}>
+            {children}
+        </WebsiteContext.Provider>
+    );
+};
+
+export const useWebsites = () => {
+    const context = useContext(WebsiteContext);
+    if (!context) {
+        throw new Error('useWebsites must be used within a WebsiteProvider');
+    }
+    return context;
+};

client/src/hooks/useAuth.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { AuthContext } from '../context/AuthContext';
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  
+  return context;
+};

client/src/hooks/useTheme.jsx

@@ -0,0 +1,64 @@
+// Dark Mode Hook - React Implementation
+import { useState, useEffect } from 'react';
+
+export const useTheme = () => {
+    const [theme, setTheme] = useState(() => {
+        // Check localStorage first
+        const saved = localStorage.getItem('theme');
+        if (saved) return saved;
+
+        // Check system preference
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+
+        return 'light';
+    });
+
+    useEffect(() => {
+        // Apply theme to document
+        document.documentElement.setAttribute('data-theme', theme);
+
+        // Save to localStorage
+        localStorage.setItem('theme', theme);
+    }, [theme]);
+
+    // Listen for system theme changes
+    useEffect(() => {
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+        const handleChange = (e) => {
+            // Only auto-switch if user hasn't set preference
+            if (!localStorage.getItem('theme')) {
+                setTheme(e.matches ? 'dark' : 'light');
+            }
+        };
+
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
+
+    const toggleTheme = () => {
+        setTheme(prev => prev === 'light' ? 'dark' : 'light');
+    };
+
+    return { theme, toggleTheme };
+};
+
+// Theme Toggle Component
+export const ThemeToggle = () => {
+    const { theme, toggleTheme } = useTheme();
+
+    return (
+        <button
+            className="theme-toggle"
+            onClick={toggleTheme}
+            aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+        >
+            <span className="theme-toggle__icon">
+                {theme === 'light' ? '🌙' : '☀️'}
+            </span>
+            <span>{theme === 'light' ? 'Dark' : 'Light'} Mode</span>
+        </button>
+    );
+};