Spaces:

testingweb647
/

Arag

Running

App Files Files Community

AuthorBot Cursor commited on Jun 15

Commit

5ee07a1

1 Parent(s): 06c1465

feat: add home page, chat demo, and API docs for HF Spaces

Browse files

Files changed (5) hide show

backend/app/api/v1/superadmin.py +16 -0
backend/app/main.py +20 -3
backend/static/demo.html +66 -0
backend/static/index.html +70 -0
backend/static/widget.js +415 -0

backend/app/api/v1/superadmin.py CHANGED Viewed

@@ -20,6 +20,22 @@ from app.repositories.audit_repo import AuditRepository
 router = APIRouter()
 @router.get("/clients", response_model=ClientListResponse)
 async def list_clients(
     limit: int = Query(default=50, ge=1, le=100),

 router = APIRouter()
+@router.get("/")
+async def superadmin_index():
+    """Helpful index — lists available SuperAdmin endpoints."""
+    return {
+        "message": "SuperAdmin API. Authenticate with a SuperAdmin JWT (Bearer token).",
+        "endpoints": {
+            "list_clients": "GET /api/v1/superadmin/clients",
+            "client_detail": "GET /api/v1/superadmin/clients/{author_id}",
+            "grant_access": "POST /api/v1/superadmin/clients/{author_id}/grant",
+            "revoke_access": "POST /api/v1/superadmin/grants/{grant_id}/revoke",
+            "audit_log": "GET /api/v1/superadmin/audit",
+        },
+        "docs": "/docs",
+    }
 @router.get("/clients", response_model=ClientListResponse)
 async def list_clients(
     limit: int = Query(default=50, ge=1, le=100),

backend/app/main.py CHANGED Viewed

@@ -7,10 +7,13 @@ All middleware, exception handlers, and routers are registered here.
 from contextlib import asynccontextmanager
 from typing import AsyncGenerator
 import structlog
 from fastapi import FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import JSONResponse
 from app.config import get_settings
 from app.api.v1 import auth, books, documents, chatbot, analytics, settings, links, superadmin
@@ -24,6 +27,7 @@ from app.middleware.logging_middleware import LoggingMiddleware
 from app.middleware.rate_limit_middleware import RateLimitMiddleware
 logger = structlog.get_logger(__name__)
 @asynccontextmanager
@@ -42,8 +46,8 @@ def create_app() -> FastAPI:
         title="AuthorBot API",
         description="RAG Chatbot SaaS for Author Websites",
         version="1.0.0",
-        docs_url="/docs" if cfg.DEBUG else None,
-        redoc_url="/redoc" if cfg.DEBUG else None,
         lifespan=lifespan,
     )
@@ -132,11 +136,24 @@ def _register_routers(app: FastAPI) -> None:
     app.include_router(links.router, prefix=f"{prefix}/links", tags=["Links"])
     app.include_router(superadmin.router, prefix=f"{prefix}/superadmin", tags=["Super Admin"])
     @app.get("/health", tags=["Health"])
     async def health_check() -> dict:
         """System health check — verifies DB, Redis, ChromaDB, and model status."""
         from app.dependencies import check_health
         return await check_health()
 app = create_app()

 from contextlib import asynccontextmanager
 from typing import AsyncGenerator
+from pathlib import Path
 import structlog
 from fastapi import FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
 from app.config import get_settings
 from app.api.v1 import auth, books, documents, chatbot, analytics, settings, links, superadmin
 from app.middleware.rate_limit_middleware import RateLimitMiddleware
 logger = structlog.get_logger(__name__)
+STATIC_DIR = Path(__file__).resolve().parent.parent / "static"
 @asynccontextmanager
         title="AuthorBot API",
         description="RAG Chatbot SaaS for Author Websites",
         version="1.0.0",
+        docs_url="/docs",
+        redoc_url="/redoc",
         lifespan=lifespan,
     )
     app.include_router(links.router, prefix=f"{prefix}/links", tags=["Links"])
     app.include_router(superadmin.router, prefix=f"{prefix}/superadmin", tags=["Super Admin"])
+    @app.get("/", response_class=HTMLResponse, include_in_schema=False)
+    async def home() -> HTMLResponse:
+        """Landing page with links to the chat demo and API docs."""
+        return HTMLResponse((STATIC_DIR / "index.html").read_text(encoding="utf-8"))
+    @app.get("/demo", response_class=HTMLResponse, include_in_schema=False)
+    async def chat_demo() -> HTMLResponse:
+        """Embedded chat widget demo page."""
+        return HTMLResponse((STATIC_DIR / "demo.html").read_text(encoding="utf-8"))
     @app.get("/health", tags=["Health"])
     async def health_check() -> dict:
         """System health check — verifies DB, Redis, ChromaDB, and model status."""
         from app.dependencies import check_health
         return await check_health()
+    if STATIC_DIR.is_dir():
+        app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
 app = create_app()

backend/static/demo.html ADDED Viewed

	@@ -0,0 +1,66 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AuthorBot Chat Demo</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: -apple-system, 'Inter', sans-serif;
+    background: linear-gradient(135deg, #0d0f1a 0%, #13161f 100%);
+    min-height: 100vh; color: #e2e8f0;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    padding: 24px;
+  }
+  .hero { text-align: center; max-width: 560px; }
+  h1 { font-size: 2.5rem; font-weight: 900; margin-bottom: 14px;
+    background: linear-gradient(135deg, #6366f1, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+  p  { color: #94a3b8; font-size: 1.125rem; line-height: 1.7; margin-bottom: 24px; }
+  .warn {
+    background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.35);
+    color: #fcd34d; padding: 12px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 24px;
+  }
+  .controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
+  .btn {
+    padding: 10px 22px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.12);
+    background: rgba(255,255,255,0.06); color: #e2e8f0; cursor: pointer; font-size: 14px;
+    font-weight: 600; font-family: inherit; text-decoration: none;
+  }
+  .btn:hover { background: rgba(99,102,241,0.25); border-color: #6366f1; }
+  code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
+</style>
+</head>
+<body>
+<div class="hero">
+  <div style="font-size:3rem;margin-bottom:16px">✨</div>
+  <h1>AuthorBot Chat</h1>
+  <p id="intro">Click the chat bubble in the bottom-right corner to talk to the bot.</p>
+  <div id="token-warn" class="warn" style="display:none">
+    Add your subscription token to the URL:<br>
+    <code>/demo?token=YOUR_SUBSCRIPTION_TOKEN</code>
+  </div>
+  <div class="controls">
+    <button class="btn" onclick="AuthorBot.open()">Open Chat</button>
+    <button class="btn" onclick="AuthorBot.close()">Close Chat</button>
+    <a class="btn" href="/">← Back home</a>
+  </div>
+</div>
+<script>
+  const params = new URLSearchParams(window.location.search);
+  const token = params.get('token') || '';
+  if (!token) {
+    document.getElementById('token-warn').style.display = 'block';
+  }
+  window.AuthorBotConfig = {
+    token: token,
+    theme: params.get('theme') || 'midnight',
+    position: params.get('position') || 'bottom-right',
+    autoOpenDelay: Number(params.get('autoOpen') || 2),
+    apiBase: window.location.origin + '/api/v1',
+  };
+</script>
+<script src="/static/widget.js"></script>
+</body>
+</html>

backend/static/index.html ADDED Viewed

	@@ -0,0 +1,70 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AuthorBot RAG</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: #0d0f1a; color: #e2e8f0; min-height: 100vh;
+    display: flex; align-items: center; justify-content: center; padding: 24px;
+  }
+  .card {
+    max-width: 640px; width: 100%;
+    background: #13161f; border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 20px; padding: 40px;
+    box-shadow: 0 24px 80px rgba(0,0,0,0.45);
+  }
+  h1 {
+    font-size: 2rem; margin-bottom: 8px;
+    background: linear-gradient(135deg, #6366f1, #a78bfa);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  }
+  .sub { color: #94a3b8; margin-bottom: 28px; line-height: 1.6; }
+  .links { display: flex; flex-direction: column; gap: 12px; }
+  a.link {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 18px; border-radius: 12px;
+    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
+    color: #e2e8f0; text-decoration: none; transition: border-color 0.2s, background 0.2s;
+  }
+  a.link:hover { border-color: #6366f1; background: rgba(99,102,241,0.12); }
+  a.link strong { font-size: 15px; }
+  a.link span { color: #64748b; font-size: 13px; }
+  .badge {
+    display: inline-block; margin-top: 24px; padding: 6px 12px;
+    border-radius: 999px; font-size: 12px; font-weight: 600;
+    background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3);
+  }
+  .note { margin-top: 20px; font-size: 13px; color: #64748b; line-height: 1.5; }
+  code { background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px; }
+</style>
+</head>
+<body>
+  <div class="card">
+    <h1>AuthorBot RAG</h1>
+    <p class="sub">Your AI book advisor API is running on Hugging Face Spaces.</p>
+    <div class="links">
+      <a class="link" href="/demo">
+        <strong>💬 Try the chatbot</strong>
+        <span>Open demo →</span>
+      </a>
+      <a class="link" href="/health">
+        <strong>❤️ Health check</strong>
+        <span>API status →</span>
+      </a>
+      <a class="link" href="/docs">
+        <strong>📖 API docs</strong>
+        <span>Swagger UI →</span>
+      </a>
+    </div>
+    <div class="badge">● Online</div>
+    <p class="note">
+      To use the chatbot, open <code>/demo?token=YOUR_SUBSCRIPTION_TOKEN</code>.<br>
+      Register via <code>POST /api/v1/auth/register</code> in the API docs, then grant a subscription as SuperAdmin.
+    </p>
+  </div>
+</body>
+</html>

backend/static/widget.js ADDED Viewed

	@@ -0,0 +1,415 @@

+/**
+ * AuthorBot Chat Widget — widget.js
+ * Vanilla JS, zero dependencies, ~8KB minified.
+ * Embeds as a floating chat bubble on any author website.
+ *
+ * Usage:
+ *   window.AuthorBotConfig = { token: "YOUR_TOKEN", theme: "midnight", position: "bottom-right" };
+ *   <script src="https://cdn.authorbot.io/widget.min.js" async></script>
+ */
+(function() {
+  'use strict';
+  // ── Configuration ──────────────────────────────────────────
+  const CONFIG = Object.assign({
+    theme: 'midnight',
+    position: 'bottom-right',
+    autoOpenDelay: 0,
+    apiBase: 'https://api.authorbot.io/api/v1',
+  }, window.AuthorBotConfig || {});
+  if (!CONFIG.token) {
+    console.warn('[AuthorBot] No token provided. Widget disabled.');
+    return;
+  }
+  // ── Theme Definitions ──────────────────────────────────────
+  const THEMES = {
+    midnight: { bg: '#0d0f1a', surface: '#13161f', border: '#ffffff0f', brand: '#6366f1', text: '#e2e8f0', sub: '#94a3b8' },
+    ocean:    { bg: '#0a1628', surface: '#0f1e38', border: '#ffffff0f', brand: '#0ea5e9', text: '#e0f2fe', sub: '#7dd3fc' },
+    forest:   { bg: '#0a1a0f', surface: '#0f2416', border: '#ffffff0f', brand: '#22c55e', text: '#dcfce7', sub: '#86efac' },
+    sunset:   { bg: '#1a0d0a', surface: '#261510', border: '#ffffff0f', brand: '#f97316', text: '#fff7ed', sub: '#fdba74' },
+    minimal:  { bg: '#ffffff', surface: '#f8fafc', border: '#e2e8f0',   brand: '#4f46e5', text: '#1e293b', sub: '#64748b' },
+  };
+  const T = THEMES[CONFIG.theme] || THEMES.midnight;
+  const isDark = CONFIG.theme !== 'minimal';
+  // ── State ───────────────────────────────────────────────────
+  let sessionId = null;
+  let isOpen = false;
+  let isLoading = false;
+  let selectedBookId = null;
+  let books = [];
+  let turnCount = 0;
+  // ── Position helpers ────────────────────────────────────────
+  const POS = CONFIG.position.split('-');
+  const vPos = POS[0]; // top / bottom
+  const hPos = POS[1]; // left / right
+  // ── CSS injection ────────────────────────────────────────────
+  const style = document.createElement('style');
+  style.textContent = `
+    #ab-root * { box-sizing: border-box; font-family: -apple-system, 'Inter', BlinkMacSystemFont, sans-serif; }
+    #ab-root { position: fixed; ${vPos}: 24px; ${hPos}: 24px; z-index: 2147483647; display: flex; flex-direction: column; align-items: ${hPos === 'right' ? 'flex-end' : 'flex-start'}; gap: 12px; }
+    #ab-bubble {
+      width: 56px; height: 56px; border-radius: 50%;
+      background: linear-gradient(135deg, ${T.brand}, ${T.brand}cc);
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      font-size: 24px; border: none; outline: none;
+      box-shadow: 0 4px 20px ${T.brand}55;
+      transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
+      animation: ab-float 4s ease-in-out infinite;
+    }
+    #ab-bubble:hover { transform: scale(1.1); box-shadow: 0 6px 28px ${T.brand}80; }
+    #ab-window {
+      width: 370px; max-height: 560px;
+      background: ${T.bg}; border: 1px solid ${T.border};
+      border-radius: 20px; display: flex; flex-direction: column;
+      box-shadow: 0 24px 80px rgba(0,0,0,0.6);
+      overflow: hidden;
+      transform-origin: ${hPos === 'right' ? 'bottom right' : 'bottom left'};
+      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s;
+    }
+    #ab-window.ab-hidden { transform: scale(0.85); opacity: 0; pointer-events: none; }
+    #ab-header {
+      background: ${T.surface}; padding: 14px 16px;
+      border-bottom: 1px solid ${T.border};
+      display: flex; align-items: center; gap: 10px; flex-shrink: 0;
+    }
+    #ab-avatar {
+      width: 36px; height: 36px; border-radius: 50%;
+      background: linear-gradient(135deg, ${T.brand}, ${T.brand}99);
+      display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
+    }
+    #ab-bot-name { font-weight: 700; font-size: 14px; color: ${T.text}; }
+    #ab-status   { font-size: 11px; color: #22c55e; display: flex; align-items: center; gap: 4px; }
+    #ab-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; }
+    #ab-close-btn { margin-left: auto; background: none; border: none; cursor: pointer; color: ${T.sub}; font-size: 18px; line-height: 1; padding: 2px; }
+    #ab-messages {
+      flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
+      scrollbar-width: thin; scrollbar-color: ${T.border} transparent;
+    }
+    .ab-msg { display: flex; flex-direction: column; max-width: 85%; animation: ab-slide-up 0.2s ease; }
+    .ab-msg.ab-bot { align-self: flex-start; }
+    .ab-msg.ab-user { align-self: flex-end; }
+    .ab-bubble-text {
+      padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.55;
+    }
+    .ab-bot .ab-bubble-text {
+      background: ${T.surface}; border: 1px solid ${T.border}; color: ${T.text};
+      border-bottom-left-radius: 4px;
+    }
+    .ab-user .ab-bubble-text {
+      background: ${T.brand}; color: #fff; border-bottom-right-radius: 4px;
+    }
+    .ab-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+    .ab-link-btn {
+      display: inline-flex; align-items: center; gap: 5px;
+      padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
+      background: ${T.brand}22; color: ${T.brand}; border: 1px solid ${T.brand}44;
+      cursor: pointer; text-decoration: none; transition: all 0.15s;
+    }
+    .ab-link-btn:hover { background: ${T.brand}; color: #fff; }
+    .ab-book-selector { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
+    .ab-book-btn {
+      display: flex; align-items: center; gap: 10px;
+      padding: 8px 12px; border-radius: 12px; cursor: pointer;
+      background: ${T.surface}; border: 1px solid ${T.border};
+      transition: all 0.15s; font-size: 13px; color: ${T.text};
+    }
+    .ab-book-btn:hover { border-color: ${T.brand}; background: ${T.brand}15; }
+    .ab-book-thumb { font-size: 20px; flex-shrink: 0; }
+    .ab-typing { display: flex; gap: 4px; padding: 12px 14px; }
+    .ab-dot {
+      width: 6px; height: 6px; border-radius: 50%;
+      background: ${T.sub}; animation: ab-bounce 1.2s ease infinite;
+    }
+    .ab-dot:nth-child(2) { animation-delay: 0.2s; }
+    .ab-dot:nth-child(3) { animation-delay: 0.4s; }
+    #ab-input-bar {
+      padding: 12px 14px; border-top: 1px solid ${T.border};
+      display: flex; gap: 8px; flex-shrink: 0; background: ${T.surface};
+    }
+    #ab-input {
+      flex: 1; background: ${T.bg}; border: 1px solid ${T.border};
+      border-radius: 20px; padding: 8px 14px; font-size: 13px; color: ${T.text};
+      outline: none; resize: none; font-family: inherit;
+      transition: border-color 0.15s;
+    }
+    #ab-input::placeholder { color: ${T.sub}; }
+    #ab-input:focus { border-color: ${T.brand}; }
+    #ab-send {
+      width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
+      background: linear-gradient(135deg, ${T.brand}, ${T.brand}cc);
+      color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center;
+      transition: all 0.2s; flex-shrink: 0; align-self: flex-end;
+    }
+    #ab-send:hover { transform: scale(1.1); }
+    #ab-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
+    #ab-branding {
+      text-align: center; padding: 6px; font-size: 10px; color: ${T.sub}; opacity: 0.6;
+      background: ${T.surface}; border-top: 1px solid ${T.border};
+    }
+    @keyframes ab-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
+    @keyframes ab-slide-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
+    @keyframes ab-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
+  `;
+  document.head.appendChild(style);
+  // ── DOM construction ─────────────────────────────────────────
+  const root = document.createElement('div');
+  root.id = 'ab-root';
+  root.innerHTML = `
+    <div id="ab-window" class="ab-hidden">
+      <div id="ab-header">
+        <div id="ab-avatar">🤖</div>
+        <div>
+          <div id="ab-bot-name">Book Advisor</div>
+          <div id="ab-status">Online</div>
+        </div>
+        <button id="ab-close-btn" aria-label="Close chat">×</button>
+      </div>
+      <div id="ab-messages" role="log" aria-live="polite"></div>
+      <div id="ab-input-bar">
+        <textarea id="ab-input" rows="1" placeholder="Ask me anything about the books..." aria-label="Chat input"></textarea>
+        <button id="ab-send" aria-label="Send message">↑</button>
+      </div>
+      <div id="ab-branding">Powered by AuthorBot</div>
+    </div>
+    <button id="ab-bubble" aria-label="Open book advisor chat">💬</button>
+  `;
+  // Bubble is above window — reverse for bottom positioning
+  if (vPos === 'bottom') {
+    root.style.flexDirection = 'column-reverse';
+  }
+  document.body.appendChild(root);
+  // ── DOM refs ─────────────────────────────────────────────────
+  const $window   = root.querySelector('#ab-window');
+  const $messages = root.querySelector('#ab-messages');
+  const $input    = root.querySelector('#ab-input');
+  const $send     = root.querySelector('#ab-send');
+  const $bubble   = root.querySelector('#ab-bubble');
+  const $close    = root.querySelector('#ab-close-btn');
+  const $botName  = root.querySelector('#ab-bot-name');
+  // ── Toggle open/close ─────────────────────────────────────────
+  function openChat() {
+    isOpen = true;
+    $window.classList.remove('ab-hidden');
+    $bubble.style.display = 'none';
+    if (!sessionId) initSession();
+    else $input.focus();
+  }
+  function closeChat() {
+    isOpen = false;
+    $window.classList.add('ab-hidden');
+    $bubble.style.display = '';
+  }
+  $bubble.addEventListener('click', openChat);
+  $close.addEventListener('click', closeChat);
+  // ── Session init ──────────────────────────────────────────────
+  async function initSession() {
+    try {
+      const res = await apiPost('/chat/session', {}, { 'X-Subscription-Token': CONFIG.token });
+      sessionId = res.session_id;
+      books = res.books || [];
+      $botName.textContent = res.bot_name || 'Book Advisor';
+      addBotMessage(res.welcome_message || 'Hi! How can I help you today?', [], null);
+      if (res.show_book_selector && books.length > 1) {
+        addBotMessage("Which book are you curious about?", [], books);
+      }
+      $input.focus();
+    } catch (e) {
+      addBotMessage("Sorry, I'm having trouble starting. Please refresh and try again.", [], null);
+    }
+  }
+  // ── Send message ──────────────────────────────────────────────
+  async function sendMessage() {
+    const text = $input.value.trim();
+    if (!text || isLoading || !sessionId) return;
+    addUserMessage(text);
+    $input.value = '';
+    resizeInput();
+    const typingEl = addTypingIndicator();
+    isLoading = true;
+    $send.disabled = true;
+    turnCount++;
+    try {
+      const res = await apiPost('/chat/chat', {
+        session_id: sessionId,
+        message: text,
+        selected_book_id: selectedBookId,
+      }, { 'X-Subscription-Token': CONFIG.token });
+      typingEl.remove();
+      addBotMessage(res.text, res.links || [], res.book_selector || null);
+    } catch (e) {
+      typingEl.remove();
+      addBotMessage("Sorry, something went wrong. Please try again.", [], null);
+    } finally {
+      isLoading = false;
+      $send.disabled = false;
+      $input.focus();
+    }
+  }
+  // ── Message rendering ─────────────────────────────────────────
+  function addUserMessage(text) {
+    const el = document.createElement('div');
+    el.className = 'ab-msg ab-user';
+    el.innerHTML = `<div class="ab-bubble-text">${escHtml(text)}</div>`;
+    $messages.appendChild(el);
+    scrollToBottom();
+  }
+  function addBotMessage(text, links, bookSelector) {
+    const el = document.createElement('div');
+    el.className = 'ab-msg ab-bot';
+    let html = `<div class="ab-bubble-text">${escHtml(text)}</div>`;
+    if (links && links.length) {
+      html += `<div class="ab-links">`;
+      links.forEach(l => {
+        html += `<a class="ab-link-btn" href="${escAttr(l.url)}" target="_blank" rel="noopener" data-type="${escAttr(l.type)}">${escHtml(l.icon)} ${escHtml(l.label)}</a>`;
+      });
+      html += `</div>`;
+    }
+    if (bookSelector && bookSelector.length) {
+      html += `<div class="ab-book-selector">`;
+      bookSelector.forEach(b => {
+        html += `<button class="ab-book-btn" data-book-id="${escAttr(b.id)}">
+          <span class="ab-book-thumb">📖</span>
+          <div style="text-align:left">
+            <div style="font-weight:600;font-size:13px">${escHtml(b.title)}</div>
+            ${b.tagline ? `<div style="font-size:11px;opacity:0.7;margin-top:1px">${escHtml(b.tagline)}</div>` : ''}
+          </div>
+        </button>`;
+      });
+      html += `</div>`;
+    }
+    el.innerHTML = html;
+    // Book selection handler
+    el.querySelectorAll('.ab-book-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const bookId = btn.getAttribute('data-book-id');
+        selectedBookId = bookId;
+        const book = bookSelector.find(b => b.id === bookId);
+        addUserMessage(`Tell me about "${book?.title}"`);
+        apiPost('/chat/chat', {
+          session_id: sessionId,
+          message: `Tell me about "${book?.title}"`,
+          selected_book_id: bookId,
+        }, { 'X-Subscription-Token': CONFIG.token }).then(res => {
+          addBotMessage(res.text, res.links || [], null);
+        });
+        // Disable all book buttons after selection
+        el.querySelectorAll('.ab-book-btn').forEach(b => b.style.opacity = '0.4');
+        btn.style.opacity = '1'; btn.style.borderColor = T.brand;
+      });
+    });
+    // Link click tracking
+    el.querySelectorAll('.ab-link-btn').forEach(a => {
+      a.addEventListener('click', () => {
+        try {
+          apiPost('/chat/track-click', {
+            session_id: sessionId,
+            link_type: a.getAttribute('data-type'),
+          }, { 'X-Subscription-Token': CONFIG.token }).catch(() => {});
+        } catch {}
+      });
+    });
+    $messages.appendChild(el);
+    scrollToBottom();
+  }
+  function addTypingIndicator() {
+    const el = document.createElement('div');
+    el.className = 'ab-msg ab-bot';
+    el.innerHTML = `<div class="ab-bubble-text ab-typing"><div class="ab-dot"></div><div class="ab-dot"></div><div class="ab-dot"></div></div>`;
+    $messages.appendChild(el);
+    scrollToBottom();
+    return el;
+  }
+  // ── Input handling ─────────────────────────────────────────────
+  function resizeInput() {
+    $input.style.height = 'auto';
+    $input.style.height = Math.min($input.scrollHeight, 100) + 'px';
+  }
+  $input.addEventListener('input', resizeInput);
+  $input.addEventListener('keydown', e => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
+  });
+  $send.addEventListener('click', sendMessage);
+  // ── Utilities ──────────────────────────────────────────────────
+  function scrollToBottom() {
+    requestAnimationFrame(() => {
+      $messages.scrollTop = $messages.scrollHeight;
+    });
+  }
+  function escHtml(str) {
+    return String(str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+  }
+  function escAttr(str) {
+    return String(str || '').replace(/"/g, '&quot;');
+  }
+  async function apiPost(path, body, headers) {
+    const base = CONFIG.apiBase || 'https://api.authorbot.io/api/v1';
+    const res = await fetch(`${base}${path}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', ...headers },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return res.json();
+  }
+  // ── Auto-open ──────────────────────────────────────────────────
+  if (CONFIG.autoOpenDelay > 0) {
+    setTimeout(openChat, CONFIG.autoOpenDelay * 1000);
+  }
+  // ── Expose to window for programmatic control ──────────────────
+  window.AuthorBot = {
+    open: openChat,
+    close: closeChat,
+    toggle: () => isOpen ? closeChat() : openChat(),
+  };
+})();